Merge branch 'trunk'

2025-05-09 09:35:23 +02:00 · 2025-05-09 09:35:23 +02:00 · 0ec8c8af6d
commit 0ec8c8af6d
parent 662e4d7d84 7918ea6b72
79 changed files with 2806 additions and 1732 deletions
--- a/app/Enums/StaticPageType.php
+++ b/app/Enums/StaticPageType.php
@ -16,6 +16,7 @@ enum StaticPageType: int
    case expertise_chicken    = 6;
    case expertise_duck       = 7;
    case expertise_rabbit     = 8;
+    case sitemap              = 9;

    /**
     * Optionnal labels definition.
@ -31,5 +32,6 @@ enum StaticPageType: int
        self::expertise_chicken->name    => 'Expertise poulet',
        self::expertise_duck->name       => 'Expertise canard',
        self::expertise_rabbit->name     => 'Expertise lapin',
+        self::sitemap->name              => 'Plan du site',
    ];
 }
--- a/app/Http/Controllers/Bo/ProductController.php
+++ b/app/Http/Controllers/Bo/ProductController.php
@ -7,6 +7,7 @@ use App\Http\Requests\Bo\Products\StoreProductRequest;
 use App\Http\Requests\Bo\Products\UpdateProductRequest;
 use App\Lib\Helpers\FileStorageHelper;
 use App\Models\Product;
+use App\Models\Range;
 use App\Models\Subrange;
 use App\Traits\Controllers\UpdateModelPublished;
 use App\Traits\Controllers\ChangesModelOrder;
@ -40,6 +41,13 @@ class ProductController extends Controller
                'label'
            );
        }
+
+        if ($request->range) {
+            $productModels->whereHas('subrange', function ($q) use ($request) {
+                $q->where('subranges.range_id', '=', $request->range);
+            })->get();
+        }
+
        $searchFields = trans('Label');

        /** Sort columns with a query */
@ -48,7 +56,9 @@ class ProductController extends Controller
        /** Custom pagination */
        $productModels = $this->paginate($productModels);

-        return view('bo.pages.products.index', compact('productModels', 'search', 'searchFields'));
+        $ranges = Range::all();
+
+        return view('bo.pages.products.index', compact('productModels', 'search', 'searchFields', 'ranges'));
    }

    /**
--- a/app/Http/Controllers/Fo/ProductsController.php
+++ b/app/Http/Controllers/Fo/ProductsController.php
@ -62,6 +62,7 @@ class ProductsController extends Controller
        $productsQuery = !empty($search) ? $this->getProductQuery($search) : Product::query();
        $productsQuery->with('subrange.range');
        $productsQuery->where('published', true);
+        $productsQuery->orderBy('order', 'ASC');

        // * Range filter (obligatoire).
        $productsQuery->whereHas('subrange', function (Builder $q) use ($range) {
@ -153,7 +154,7 @@ class ProductsController extends Controller
         * ! apres avoir header et echo dans le corps de la réponse php (Nasty trick)
         */
        return \response(
-            $this->generateProductCommercialPdf($publishedProduct, $title)->output(),
+            $this->generateProductCommercialPdf($publishedProduct, $title)->download($filename),
            200,
            [
                'Content-Type' => 'application/pdf',
--- a/app/Http/Controllers/Fo/StaticPageController.php
+++ b/app/Http/Controllers/Fo/StaticPageController.php
@ -5,6 +5,7 @@ namespace App\Http\Controllers\Fo;
 use App\Enums\StaticPageType;
 use App\Http\Controllers\Controller;
 use App\Models\StaticPage;
+use Uwil\SitemapGenerator\Lib\SitemapHelper;

 class StaticPageController extends Controller
 {
@ -31,4 +32,17 @@ class StaticPageController extends Controller
        $policiesPage = StaticPage::query()->where('type', StaticPageType::confidentiality)->first();
        return view('fo.pages.legals', ['staticPageModel' => $policiesPage]);
    }
+
+    /**
+     * Sitemap show
+     *
+     * @param \App\Models\StaticPage $sitemap
+     * @return \Illuminate\Contracts\View\View
+     */
+    public function sitemap(StaticPage $sitemap)
+    {
+        $sitemap     = StaticPage::query()->where('type', StaticPageType::sitemap)->first();
+        $singlePages = SitemapHelper::getSinglePages();
+        return view('fo.pages.sitemap', ['staticPageModel' => $sitemap, 'singlePages' => $singlePages]);
+    }
 }
--- a/app/Http/Middleware/SecureHeaders.php
+++ b/app/Http/Middleware/SecureHeaders.php
@ -61,6 +61,7 @@ class SecureHeaders
            ]) . ';',
            "img-src 'self' data: blob: " . implode(' ', [
                'https://yl.s-web.fr',
+                'https://i3.ytimg.com/',
                // * VITE DEV
                config('app.debug') ? "https://{$host}:4443" : '',
                // * MESBR
--- a/app/Http/Requests/Bo/Advice/StoreAdviceRequest.php
+++ b/app/Http/Requests/Bo/Advice/StoreAdviceRequest.php
@ -83,12 +83,12 @@ class StoreAdviceRequest extends FormRequest
            'preparation'                     => [
                'required',
                'string',
-                new WysiwygLength(15, 540)
+                new WysiwygLength(15, 2500)
            ],
            'advice'                          => [
                'nullable',
                'string',
-                new WysiwygLength(15, 540)
+                new WysiwygLength(15, 2500)
            ],
            'ingredients'                     => [
                'present',
@ -135,10 +135,10 @@ class StoreAdviceRequest extends FormRequest
                'min:1',
                'max:99'
            ],
-            'youtube_title'                   => 'required_with:youtube_video_id|nullable|min:3|max:255',
-            'youtube_video_id'                => 'required_with:youtube_title|nullable|regex:%([^"&?\/\s]{11})%i',
-            'cooking_time'                    => 'nullable|numeric|min:0|max:65535',
-            'preparation_time'                => [
+            'youtube_title'    => 'required_with:youtube_video_id|nullable|min:3|max:255',
+            'youtube_video_id' => 'required_with:youtube_title|nullable|min:3|max:50|regex:%([^"&?\/\s]{11})%i',
+            'cooking_time'     => 'nullable|numeric|min:0|max:65535',
+            'preparation_time' => [
                Rule::requiredIf(function () {
                    return $this->type === AdviceTypeEnum::recipes->value();
                }),
--- a/app/Http/Requests/Bo/News/StoreNewsRequest.php
+++ b/app/Http/Requests/Bo/News/StoreNewsRequest.php
@ -71,13 +71,13 @@ class StoreNewsRequest extends FormRequest
                'required_with:picture',
                'nullable',
                'string',
-                new WysiwygLength(15, 540)
+                new WysiwygLength(15, 2500)
            ],
            'content2'                      => [
                'required_with:picture2',
                'nullable',
                'string',
-                new WysiwygLength(15, 540)
+                new WysiwygLength(15, 2500)
            ],
            'event_start'                  => 'nullable|date_format:Y-m-d',
            'event_end'                    => [
@ -135,8 +135,8 @@ class StoreNewsRequest extends FormRequest
        ];
        return \array_merge(
            $rules,
-            $this->pictureRules('picture', 920, 1025, 920, 1025, false),
-            $this->pictureRules('picture2', 920, 1025, 920, 1025, true, requiredWith: 'content2')
+            $this->pictureRules('picture', 590, 645, 590, 645, false),
+            $this->pictureRules('picture2', 590, 645, 590, 645, true, requiredWith: 'content2')
        );
    }

--- a/app/Http/Requests/Bo/Products/StoreProductRequest.php
+++ b/app/Http/Requests/Bo/Products/StoreProductRequest.php
@ -61,17 +61,17 @@ class StoreProductRequest extends FormRequest
            'ingredients'                 => [
                'required',
                'string',
-                new WysiwygLength(15, 540)
+                new WysiwygLength(15, 2500)
            ],
            'advantage'                   => [
                'required',
                'string',
-                new WysiwygLength(15, 540)
+                new WysiwygLength(15, 2500)
            ],
            'preparation'                 => [
                'required',
                'string',
-                new WysiwygLength(15, 540)
+                new WysiwygLength(15, 2500)
            ],
            'packaging'                   => [
                'present',
--- a/app/Http/Requests/Bo/Slides/StoreSlideRequest.php
+++ b/app/Http/Requests/Bo/Slides/StoreSlideRequest.php
@ -48,7 +48,7 @@ class StoreSlideRequest extends FormRequest
            'content'                 => [
                'required',
                'string',
-                new WysiwygLength(15, 540)
+                new WysiwygLength(15, 2500)
            ],
            'button_display'          => 'required|boolean',
            'button_text'             => 'nullable|min:3|max:45',
--- a/app/Http/Requests/Fo/Products/AjaxAddProductBasket.php
+++ b/app/Http/Requests/Fo/Products/AjaxAddProductBasket.php
@ -24,7 +24,7 @@ class AjaxAddProductBasket extends FormRequest
    public function rules(): array
    {
        return [
-            'packaging'   => 'required|array|min:1',
+            'packaging'   => 'array',
            'packaging.*' => [
                // phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter.FoundBeforeLastUsed
                function ($attribute, $value, $fail) {
@ -37,7 +37,7 @@ class AjaxAddProductBasket extends FormRequest
                    }
                }
            ],
-            'caliber'     => 'required|array|min:1',
+            'caliber'     => 'array',
            'caliber.*'   => [
                // phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter.FoundBeforeLastUsed
                function ($attribute, $value, $fail) {
--- a/app/Models/Product.php
+++ b/app/Models/Product.php
@ -79,6 +79,7 @@ class Product extends Model implements SeoInterface, Sitemapable
        'is_frenchpoultry',
        'is_vip',
        'is_egalim',
+        'order',
        'published'
    ];

@ -88,15 +89,15 @@ class Product extends Model implements SeoInterface, Sitemapable
     * @var array<string,string>
     */
    protected $casts = [
-        'slider_pictures'     => 'array',
-        'packaging'           => 'array',
-        'caliber'             => 'array',
-        'is_frenchpoultry'    => 'bool',
-        'is_vip'              => 'bool',
-        'is_egalim'           => 'bool',
-        'published'           => 'bool',
-        'species'             => ProductSpeciesEnum::class,
-        'nutriscore'          => NutriscoreEnum::class
+        'slider_pictures'  => 'array',
+        'packaging'        => 'array',
+        'caliber'          => 'array',
+        'is_frenchpoultry' => 'bool',
+        'is_vip'           => 'bool',
+        'is_egalim'        => 'bool',
+        'published'        => 'bool',
+        'species'          => ProductSpeciesEnum::class,
+        'nutriscore'       => NutriscoreEnum::class
    ];

    /**
@ -153,14 +154,14 @@ class Product extends Model implements SeoInterface, Sitemapable
        }

        // * TRANSFORMATIONS
-        $model->slug                = Str::slug($model->label);
-        $model->sticker_sm          = FileStorageHelper::storeFile($model, $model->sticker_sm, true);
-        $model->ingredients         = clean($model->ingredients);
-        $model->advantage           = clean($model->advantage);
-        $model->preparation         = clean($model->preparation);
-        $model->slider_pictures     = clean($model->slider_pictures);
-        $model->packaging           = clean($model->packaging);
-        $model->caliber             = clean($model->caliber);
+        $model->slug            = Str::slug($model->label);
+        $model->sticker_sm      = FileStorageHelper::storeFile($model, $model->sticker_sm, true);
+        $model->ingredients     = clean($model->ingredients);
+        $model->advantage       = clean($model->advantage);
+        $model->preparation     = clean($model->preparation);
+        $model->slider_pictures = clean($model->slider_pictures);
+        $model->packaging       = clean($model->packaging);
+        $model->caliber         = clean($model->caliber);
    }

    /**
--- a/composer.json
+++ b/composer.json
@ -19,7 +19,6 @@
        "diglactic/laravel-breadcrumbs": "^9.0",
        "guzzlehttp/guzzle": "^7.2",
        "kaishiyoku/laravel-color-validation": "*",
-        "kwaadpepper/image-resizer": "^3.0",
        "laravel/framework": "^11.0",
        "laravel/tinker": "^2.8",
        "laravel/ui": "^4.2",
@ -29,7 +28,7 @@
        "spatie/calendar-links": "^1.8.5",
        "uwil/admin-secure-laravel": "*",
        "uwil/k8s-laravel": "^1.2",
-        "uwil/laravel-common": "^1.0",
+        "uwil/laravel-common": "^2.0",
        "uwil/seo-laravel": "^3.0",
        "uwil/sitemap-generator": "^3.0",
        "verschuur/laravel-robotstxt": "^5.1"
--- a/composer.lock
+++ b/composer.lock
--- a/config/image-resizer.php
+++ b/config/image-resizer.php
@ -5,7 +5,7 @@ return [
     * The php image driver to use
     * this can be 'imagick' or 'gd'
     */
-    'driver' => 'gd',
+    'driver' => 'imagick',

    /**
     * The cache driver to use as defined
@ -57,6 +57,9 @@ return [
     *  ]
     */
    'templates' => [
+        'toWebp' => [
+            'format' => 'webp'
+        ],
        'tipsBigCard' => [
            'height' => 300,
            'width' => 370,
--- a/database/migrations/2025_04_08_115213_change_order_to_products.php
+++ b/database/migrations/2025_04_08_115213_change_order_to_products.php
@ -0,0 +1,40 @@
+<?php
+
+use App\Models\Product;
+use App\Models\Range;
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up(): void
+    {
+        Range::with('subranges.products')->get()->map(function ($range) {
+            $range->subranges->flatMap(function ($subrange) {
+                return $subrange->products;
+            })->map(function ($product, $productIndex) {
+                $product->order = $productIndex + 1;
+                $product->saveQuietly();
+            });
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down(): void
+    {
+        Product::query()->get()->map(function ($product, $productIndex) {
+            $product->order = $productIndex + 1;
+            $product->saveQuietly();
+        });
+    }
+};
--- a/database/seeders/Mandatory/StaticPageSeeder.php
+++ b/database/seeders/Mandatory/StaticPageSeeder.php
@ -647,5 +647,18 @@ class StaticPageSeeder extends Seeder
                    viande désossée et goûteuse, aux atouts nutritionnels indiscutables.</p>',
            ]
        );
+        // Sitemap.
+        StaticPage::query()->updateOrCreate(
+            [
+                'type' => StaticPageType::sitemap,
+            ],
+            [
+                'seo_title'       => 'Plan du site',
+                'seo_description' => 'Plan du site internet Le Gaulois Professionnel',
+                'title'           => 'Plan du site',
+                'type'            => StaticPageType::sitemap,
+                'content'         => '',
+            ]
+        );
    }
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -35,7 +35,6 @@
                "laravel-vite-plugin": "^0.8.1",
                "postcss-discard-comments": "^6.0.0",
                "prettier": "latest",
-                "print-js": "^1.6.0",
                "resolve-url-loader": "^5.0.0",
                "rollup-plugin-copy": "^3.5.0",
                "sass": "latest",
@ -5651,12 +5650,6 @@
                "url": "https://github.com/prettier/prettier?sponsor=1"
            }
        },
-        "node_modules/print-js": {
-            "version": "1.6.0",
-            "resolved": "https://registry.npmjs.org/print-js/-/print-js-1.6.0.tgz",
-            "integrity": "sha512-BfnOIzSKbqGRtO4o0rnj/K3681BSd2QUrsIZy/+WdCIugjIswjmx3lDEZpXB2ruGf9d4b3YNINri81+J0FsBWg==",
-            "dev": true
-        },
        "node_modules/proxy-from-env": {
            "version": "1.1.0",
            "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
--- a/package.json
+++ b/package.json
@ -43,7 +43,6 @@
        "laravel-vite-plugin": "^0.8.1",
        "postcss-discard-comments": "^6.0.0",
        "prettier": "latest",
-        "print-js": "^1.6.0",
        "resolve-url-loader": "^5.0.0",
        "rollup-plugin-copy": "^3.5.0",
        "sass": "latest",
--- a/resources/assets/images/icone-pdf-couleur.png
+++ b/resources/assets/images/icone-pdf-couleur.png
--- a/resources/sass/fo/base/_base.scss
+++ b/resources/sass/fo/base/_base.scss
@ -20,7 +20,23 @@ a:active {
    text-decoration: none;
 }

-img { max-width: 100%; }
+img {
+    max-width: 100%;
+}
+
+picture img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+p picture img,
+.btn-printing img,
+.logo-rs img {
+    width: auto;
+    height: auto;
+}

 p,
 th,
@ -31,11 +47,18 @@ td {
 }

 ul,
-ol { list-style: none; }
+ol {
+    list-style: none;
+}

 th,
-td { margin: 0; }
-th { font-weight: normal; }
+td {
+    margin: 0;
+}
+
+th {
+    font-weight: normal;
+}

 td {
    font-weight: bolder;
@ -56,15 +79,27 @@ td {
    max-width: 576px;
    margin: 0 auto;
 }
-.container-fluid .txt-col > div { max-width: 600px; }
+
+.container-fluid .txt-col>div {
+    max-width: 600px;
+}

 .border-inox {
    padding: 2px;
    background: linear-gradient(0.5turn, #333, #fff, #333);
 }
-.underline { text-decoration: underline; }
-.bold { font-weight: bold; }
-.disabled { cursor: default; }
+
+.underline {
+    text-decoration: underline;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.disabled {
+    cursor: default;
+}

 .citation-text {
    color: $text-color-second;
@ -72,8 +107,13 @@ td {
    font-style: italic;
 }

-.box-shadow { box-shadow: 0 4px 14px -4px #{$noir}; }
-.drop-shadow { filter: drop-shadow(0.5rem 0.5rem 0.5rem #{$noir}); }
+.box-shadow {
+    box-shadow: 0 4px 14px -4px #{$noir};
+}
+
+.drop-shadow {
+    filter: drop-shadow(0.5rem 0.5rem 0.5rem #{$noir});
+}

 .h1 {
    font-family: Poppins-SemiBold, sans-serif;
@ -97,60 +137,173 @@ td {
    font-size: 16px;
 }

-.ff-poppins-light { font-family: Poppins-Light, sans-serif; }
-.ff-poppins-regular { font-family: Poppins-Regular, sans-serif; }
-.ff-poppins-medium { font-family: Poppins-Medium, sans-serif; }
-.ff-poppins-bold { font-family: Poppins-SemiBold, sans-serif; }
-.ff-poppins-bold-italic { font-family: Poppins-SemiBoldItalic, sans-serif; }
+.ff-poppins-light {
+    font-family: Poppins-Light, sans-serif;
+}

-.ff-mocha-regular { font-family: Mocha-Regular, sans-serif; }
+.ff-poppins-regular {
+    font-family: Poppins-Regular, sans-serif;
+}

-.fs-mocha-sm { font-size: 15px; }
-.fs-mocha-md { font-size: 16px; }
-.fs-mocha-lg { font-size: 17px; }
-.fs-mocha-xl { font-size: 21px; }
-.fs-mocha-xxl { font-size: 27px; }
+.ff-poppins-medium {
+    font-family: Poppins-Medium, sans-serif;
+}

-.fs-title-small { font-size: 1.2rem; }
-.fs-title-medium { font-size: 1.45rem; }
-.fs-title-big { font-size: 2rem; }
+.ff-poppins-bold {
+    font-family: Poppins-SemiBold, sans-serif;
+}

-.fs-subtitle-small { font-size: 1.15rem; }
-.fs-subtitle-medium { font-size: 1.33rem; }
-.fs-subtitle-big { font-size: 1.8rem; }
+.ff-poppins-bold-italic {
+    font-family: Poppins-SemiBoldItalic, sans-serif;
+}

-.fs-header-menu { font-size: 18px; }
-.fs-header-submenu { font-size: 16px; }
+.ff-mocha-regular {
+    font-family: Mocha-Regular, sans-serif;
+}

-.fs-banner-big { font-size: 18px; }
-.fs-banner-medium { font-size: 16px; }
+.fs-mocha-sm {
+    font-size: 15px;
+}

-.fs-card-big { font-size: 18px; }
-.fs-card-medium { font-size: 16px; }
-.fs-card-small { font-size: 12px; }
+.fs-mocha-md {
+    font-size: 16px;
+}

-.fs-footer-big { font-size: 14px; }
-.fs-footer-medium { font-size: 12px; }
-.fs-footer-small { font-size: 10px; }
+.fs-mocha-lg {
+    font-size: 17px;
+}

-.fs-default { font-size: 1rem; }
+.fs-mocha-xl {
+    font-size: 21px;
+}

-.fs-xxl { font-size: 26px; }
-.fs-xl { font-size: 22px; }
-.fs-lg { font-size: 18px; }
-.fs-md { font-size: 16px; }
-.fs-sm { font-size: 14px; }
-.fs-xsm { font-size: 12px; }
-.fs-xxsm { font-size: 10px; }
-.fs-special { font-size: 14px; }
+.fs-mocha-xxl {
+    font-size: 27px;
+}

-.color-invert { color: $text-invert-color; }
-.color-primary { color: $text-color; }
-.color-second { color: $text-color-second; }
-.color-third { color: $text-color-third; }
-.color-fourth { color: $text-color-fourth; }
+.fs-title-small {
+    font-size: 1.2rem;
+}

-.category-wrapper { background-color: $color-bg-banner; }
+.fs-title-medium {
+    font-size: 1.45rem;
+}
+
+.fs-title-big {
+    font-size: 2rem;
+}
+
+.fs-subtitle-small {
+    font-size: 1.15rem;
+}
+
+.fs-subtitle-medium {
+    font-size: 1.33rem;
+}
+
+.fs-subtitle-big {
+    font-size: 1.8rem;
+}
+
+.fs-header-menu {
+    font-size: 18px;
+}
+
+.fs-header-submenu {
+    font-size: 16px;
+}
+
+.fs-banner-big {
+    font-size: 18px;
+}
+
+.fs-banner-medium {
+    font-size: 16px;
+}
+
+.fs-card-big {
+    font-size: 18px;
+}
+
+.fs-card-medium {
+    font-size: 16px;
+}
+
+.fs-card-small {
+    font-size: 12px;
+}
+
+.fs-footer-big {
+    font-size: 14px;
+}
+
+.fs-footer-medium {
+    font-size: 12px;
+}
+
+.fs-footer-small {
+    font-size: 10px;
+}
+
+.fs-default {
+    font-size: 1rem;
+}
+
+.fs-xxl {
+    font-size: 26px;
+}
+
+.fs-xl {
+    font-size: 22px;
+}
+
+.fs-lg {
+    font-size: 18px;
+}
+
+.fs-md {
+    font-size: 16px;
+}
+
+.fs-sm {
+    font-size: 14px;
+}
+
+.fs-xsm {
+    font-size: 12px;
+}
+
+.fs-xxsm {
+    font-size: 10px;
+}
+
+.fs-special {
+    font-size: 14px;
+}
+
+.color-invert {
+    color: $text-invert-color;
+}
+
+.color-primary {
+    color: $text-color;
+}
+
+.color-second {
+    color: $text-color-second;
+}
+
+.color-third {
+    color: $text-color-third;
+}
+
+.color-fourth {
+    color: $text-color-fourth;
+}
+
+.category-wrapper {
+    background-color: $color-bg-banner;
+}

 .category-wrapper:nth-of-type(n) {
    margin-right: 0.5rem;
@ -163,19 +316,33 @@ td {
 }

 .category-wrapper:first-of-type,
-.fiche-img:first-of-type { margin-left: 0; }
+.fiche-img:first-of-type {
+    margin-left: 0;
+}

 .category-wrapper:last-of-type,
-.fiche-img:last-of-type { margin-right: 0; }
+.fiche-img:last-of-type {
+    margin-right: 0;
+}

 .play-btn {
    @include size(100px);

-    .play-icon { fill: $blanc; }
-    > * { transition: all 0.3s ease-in-out; }
+    .play-icon {
+        fill: $blanc;
+    }

-    &:hover .play-icon { fill: $rouge; }
-    &:hover .play-circle { fill: $blanc; }
+    >* {
+        transition: all 0.3s ease-in-out;
+    }
+
+    &:hover .play-icon {
+        fill: $rouge;
+    }
+
+    &:hover .play-circle {
+        fill: $blanc;
+    }
 }

 .object-cover-center {
@ -217,42 +384,117 @@ td {
    // $percent: 60%;
    // background: radial-gradient(ellipse, transparent 35%, $noir2 $percent), no-repeat center/cover url("@/images/fond-ardoise.jpg");
    width: 100%;
-    background:
-        linear-gradient(0deg, #{$color-bg-body} 0%, transparent 50%, #{$color-bg-body} 100%),
-        no-repeat center/cover url("@/images/fond-ardoise.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 50%, #{$color-bg-body} 100%),
+    no-repeat center/cover url("@/images/fond-ardoise.jpg");
 }

-.bg-ardoise { background: no-repeat center/cover url("@/images/fond-ardoise.jpg"); }
+.bg-ardoise {
+    background: no-repeat center/cover url("@/images/fond-ardoise.jpg");
+}

-.bg-inox { background: no-repeat center/cover url("@/images/fond-inox.jpg"); }
-.bg-transparent { background-color: transparent; }
-.bg-default { background-color: $color-bg-default; }
-.bg-noir { background-color: $noir2; }
-.bg-second { background-color: $secondary; }
-.bg-fourth { background-color: $fourth; }
-.bckg-body { background-color: $color-bg-body; }
-.bg-gray { background-color: $gris2; }
+.bg-inox {
+    background: no-repeat center/cover url("@/images/fond-inox.jpg");
+}

-.bg-color-black { background-color: $color-bg-noir; }
-.bg-color-blue { background-color: #0090d7; }
-.bg-color-red { background-color: #e30613; }
-.bg-color-orange { background-color: #ef7900; }
-.bg-color-green { background-color: #9ed023; }
-.bg-color-deep-green { background-color: #00723a; }
+.bg-transparent {
+    background-color: transparent;
+}

-.separator .range-color { fill: var(--range-color); }
-.separator-blue .range-color { fill: #0090d7; }
-.separator-red .range-color { fill: #e30613; }
-.separator-orange .range-color { fill: #ef7900; }
-.separator-green .range-color { fill: #9ed023; }
-.separator-deep-green .range-color { fill: #00723a; }
+.bg-default {
+    background-color: $color-bg-default;
+}

-.color-blue { color: #0090d7; }
-.color-red { color: #e30613; }
-.color-orange { color: #ef7900; }
-.color-green { color: #9ed023; }
-.color-deep-green { color: #00723a; }
-.color-body { color: $text-color; }
+.bg-noir {
+    background-color: $noir2;
+}
+
+.bg-second {
+    background-color: $secondary;
+}
+
+.bg-fourth {
+    background-color: $fourth;
+}
+
+.bckg-body {
+    background-color: $color-bg-body;
+}
+
+.bg-gray {
+    background-color: $gris2;
+}
+
+.bg-color-black {
+    background-color: $color-bg-noir;
+}
+
+.bg-color-blue {
+    background-color: #0090d7;
+}
+
+.bg-color-red {
+    background-color: #e30613;
+}
+
+.bg-color-orange {
+    background-color: #ef7900;
+}
+
+.bg-color-green {
+    background-color: #9ed023;
+}
+
+.bg-color-deep-green {
+    background-color: #00723a;
+}
+
+.separator .range-color {
+    fill: var(--range-color);
+}
+
+.separator-blue .range-color {
+    fill: #0090d7;
+}
+
+.separator-red .range-color {
+    fill: #e30613;
+}
+
+.separator-orange .range-color {
+    fill: #ef7900;
+}
+
+.separator-green .range-color {
+    fill: #9ed023;
+}
+
+.separator-deep-green .range-color {
+    fill: #00723a;
+}
+
+.color-blue {
+    color: #0090d7;
+}
+
+.color-red {
+    color: #e30613;
+}
+
+.color-orange {
+    color: #ef7900;
+}
+
+.color-green {
+    color: #9ed023;
+}
+
+.color-deep-green {
+    color: #00723a;
+}
+
+.color-body {
+    color: $text-color;
+}

 .counter-wrapper {
    @include size(26px);
@ -271,12 +513,18 @@ td {
    transform: translateX(1px) !important;
 }

-.rotate-3 { rotate: 3deg; }
+.rotate-3 {
+    rotate: 3deg;
+}

 .engag-start {
    @include border-top-radius(1rem);

    width: 100%;
+
+    picture img {
+        width: auto;
+    }
 }

 .engag-end {
@ -285,15 +533,23 @@ td {
    width: 100%;
 }

-.card-footer .engag-start.coucher { background: no-repeat center/cover url("@/images/coucher-de-soleil-dans-un-champ.jpg"); }
+.card-footer .engag-start.coucher {
+    background: no-repeat center/cover url("@/images/coucher-de-soleil-dans-un-champ.jpg");
+}

 .pagination {
    .disabled .page-link {
        color: $gris2;
        pointer-events: none;
    }
-    .previous { rotate: 90deg; }
-    .next { rotate: 270deg; }
+
+    .previous {
+        rotate: 90deg;
+    }
+
+    .next {
+        rotate: 270deg;
+    }
 }

 .mail-letter {
@ -324,17 +580,30 @@ td {
 // M::::::M               M::::::MD:::::::::::::::DD
 // M::::::M               M::::::MD::::::::::::DDD
 // MMMMMMMM               MMMMMMMMDDDDDDDDDDDDD
-@include media-breakpoint-up(md) { // >= 768px
+@include media-breakpoint-up(md) {
+
+    // >= 768px
    html,
-    body { font-size: 12px; }
+    body {
+        font-size: 12px;
+    }

    .h3 {
        font-family: Poppins-Medium, sans-serif;
        font-size: 18px;
    }
-    .fs-header-submenu { font-size: 12px; }
-    .fs-footer-medium { font-size: 12px; }
-    .fs-special { font-size: 16px; }
+
+    .fs-header-submenu {
+        font-size: 12px;
+    }
+
+    .fs-footer-medium {
+        font-size: 12px;
+    }
+
+    .fs-special {
+        font-size: 16px;
+    }

    .engag-start {
        @include border-top-radius(0);
@ -363,8 +632,12 @@ td {
 // L::::::::::::::::::::::L   GG:::::::::::::::G
 // L::::::::::::::::::::::L     GGG::::::GGG:::G
 // LLLLLLLLLLLLLLLLLLLLLLLL        GGGGGG   GGGG
-@include media-breakpoint-up(lg) { // >= 992px
-    .wrapper { padding: 0 5rem; }
+@include media-breakpoint-up(lg) {
+
+    // >= 992px
+    .wrapper {
+        padding: 0 5rem;
+    }

    // .border-top-inox.hideable {
    //     border-top: 2px solid transparent;
@ -394,7 +667,8 @@ td {
 // X:::::X       X:::::XL::::::::::::::::::::::L
 // X:::::X       X:::::XL::::::::::::::::::::::L
 // XXXXXXX       XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
-@include media-breakpoint-up(xl) { // >= 1200px
+@include media-breakpoint-up(xl) {
+    // >= 1200px
 }

 // XXXXXXX       XXXXXXXXXXXXXX       XXXXXXXLLLLLLLLLLL
@ -413,6 +687,16 @@ td {
 // X:::::X       X:::::XX:::::X       X:::::XL::::::::::::::::::::::L
 // X:::::X       X:::::XX:::::X       X:::::XL::::::::::::::::::::::L
 // XXXXXXX       XXXXXXXXXXXXXX       XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
-@include media-breakpoint-up(xxl) { // >= 1400px
-    .wrapper-xxl { max-width: 1440px; }
+@include media-breakpoint-up(xxl) {
+
+    // >= 1400px
+    .wrapper-xxl {
+        max-width: 1440px;
+    }
+
+    picture img {
+        width: 100%;
+        height: 100%; // Panneaux de séparation
+        max-height: 100%;
+    }
 }
--- a/resources/sass/fo/components/_cards.scss
+++ b/resources/sass/fo/components/_cards.scss
@ -1,7 +1,9 @@
@use "sass:math";

 .card-wrapper {
-    .card-title.marged { height: calc(1.2 * 16px * 2); }
+    .card-title.marged {
+        height: calc(1.2 * 16px * 2);
+    }
 }

 .card-id {
@ -11,8 +13,13 @@
    padding: $border;
    background: linear-gradient(0.5turn, #333, #fff, #333);

-    .card { background-color: $color-bg-dropmenu; }
-    .card-img-top { width: 80px; }
+    .card {
+        background-color: $color-bg-dropmenu;
+    }
+
+    .card-img-top {
+        width: 80px;
+    }
 }

 .card-engag {
@ -34,10 +41,21 @@

    background: no-repeat center/cover url("@/images/fond-inox.jpg");

-    .card-img-wrapper { z-index: 1; }
-    svg + div { clip-path: url("#svgClip"); }
-    .card-img-top { translate: 0 -19%; }
-    .card-body { height: 40%; }
+    .card-img-wrapper {
+        z-index: 1;
+    }
+
+    svg+div {
+        clip-path: url("#svgClip");
+    }
+
+    .card-img-top {
+        translate: 0 -19%;
+    }
+
+    .card-body {
+        height: 40%;
+    }

    .card-body::after {
        position: absolute;
@ -68,7 +86,9 @@
        width: unset;
    }

-    .separator { bottom: -2px; }
+    .separator {
+        bottom: -2px;
+    }
 }

 .card-simple {
@ -80,6 +100,10 @@
        bottom: -2px;
        left: 0;
    }
+
+    img {
+        width: 100%;
+    }
 }

 .card-ranges {
@ -90,7 +114,9 @@
        transition: scale 0.3s ease-in-out;
    }

-    &:hover .card-img-top { scale: 1.2; }
+    &:hover .card-img-top {
+        scale: 1.2;
+    }

    .card-shadow-wrapper {
        background-color: rgb(0 0 0 / 40%);
@ -109,7 +135,9 @@
        translate: 0 75%;
    }

-    &:hover .butn-wrap { translate: 0; }
+    &:hover .butn-wrap {
+        translate: 0;
+    }

    .separator {
        bottom: -2px;
@ -120,14 +148,18 @@
 %prod {
    z-index: 1;

-    &:hover .card-img-top { scale: 1.2; }
+    &:hover .card-img-top {
+        scale: 1.2;
+    }

    &:hover .card-shadow-wrapper {
        opacity: 1;
        visibility: visible;
    }

-    &:hover .butn-wrap { translate: 0; }
+    &:hover .butn-wrap {
+        translate: 0;
+    }

    .card-img-top {
        scale: 1;
@ -152,7 +184,10 @@

    @extend %prod;
    @include size-fract($width-card-product - 45px, 2.35);
-    &-sm { @include size-fract($width-card-product-sm, 2.35); }
+
+    &-sm {
+        @include size-fract($width-card-product-sm, 2.35);
+    }

    .card-subtitle {
        $nblines: 3;
@ -177,7 +212,9 @@
 .card-posts {
    width: $width-card-posts;

-    a:hover { color: $text-color; }
+    a:hover {
+        color: $text-color;
+    }

    .card-img-wrapper {
        z-index: 1;
@ -211,15 +248,18 @@
 }

 %adn {
-
-    &:hover .card-img-top { scale: 1.2; }
+    &:hover .card-img-top {
+        scale: 1.2;
+    }

    .card-img-top {
        scale: 1;
        transition: scale 0.3s ease-in-out;
    }

-    .card-title { margin: 1rem 0; }
+    .card-title {
+        margin: 1rem 0;
+    }

    .butn-prim {
        padding: 0.5rem 1.5rem;
@ -287,9 +327,17 @@
    padding: $border;
    background: linear-gradient(0.25turn, #333, #fff, #333);

-    .engag-start { height: calc(#{$width-card-footer} * 3 / 4); }
-    .card-sep-mobile { width: calc(100% + 2rem); }
-    .card-sep-desktop { display: none; }
+    .engag-start {
+        height: calc(#{$width-card-footer} * 3 / 4);
+    }
+
+    .card-sep-mobile {
+        width: calc(100% + 2rem);
+    }
+
+    .card-sep-desktop {
+        display: none;
+    }
 }

 //    SSSSSSSSSSSSSSS MMMMMMMM               MMMMMMMM
@ -308,7 +356,8 @@
 // S::::::SSSSSS:::::SM::::::M               M::::::M
 // S:::::::::::::::SS M::::::M               M::::::M
 //  SSSSSSSSSSSSSSS   MMMMMMMM               MMMMMMMM
-@include media-breakpoint-up(sm) { // >= 576px
+@include media-breakpoint-up(sm) {
+    // >= 576px
 }

 // MMMMMMMM               MMMMMMMMDDDDDDDDDDDDD
@ -327,7 +376,8 @@
 // M::::::M               M::::::MD:::::::::::::::DD
 // M::::::M               M::::::MD::::::::::::DDD
 // MMMMMMMM               MMMMMMMMDDDDDDDDDDDDD
-@include media-breakpoint-up(md) { // >= 768px
+@include media-breakpoint-up(md) {
+    // >= 768px
    $width-card-adn: 570px;
    $width-card-story: 650px;
    $min-height-card-footer: 365px;
@ -336,7 +386,9 @@
    $width-card-product: 300px;

    .card-wrapper {
-        .card-title.marged { height: calc(1.2 * 18px * 2); }
+        .card-title.marged {
+            height: calc(1.2 * 18px * 2);
+        }
    }

    .card-posts {
@ -366,14 +418,19 @@

        background-color: $color-bg-dropmenu;

-        .card-title { margin: 1rem 0 1.5rem; }
+        .card-title {
+            margin: 1rem 0 1.5rem;
+        }

        .card-subtitle {
            $nblines: 6;

            @include txt-overflow-fade($nblines, 1rem, var(--bs-body-line-height), $color-bg-dropmenu);
        }
-        .butn-prim { font-size: 16px; }
+
+        .butn-prim {
+            font-size: 16px;
+        }
    }

    .card-adn-sm {
@ -407,8 +464,13 @@
        width: $width-card-footer;
        min-height: $min-height-card-footer;

-        .card-sep-mobile { display: none; }
-        .card-sep-desktop { display: block; }
+        .card-sep-mobile {
+            display: none;
+        }
+
+        .card-sep-desktop {
+            display: block;
+        }
    }
 }

@ -428,7 +490,8 @@
 // L::::::::::::::::::::::L   GG:::::::::::::::G
 // L::::::::::::::::::::::L     GGG::::::GGG:::G
 // LLLLLLLLLLLLLLLLLLLLLLLL        GGGGGG   GGGG
-@include media-breakpoint-up(lg) { // >= 992px
+@include media-breakpoint-up(lg) {
+    // >= 992px
    $width-card-story: 860px;
    $width-card-footer: 860px;

@ -471,7 +534,8 @@
 // X:::::X       X:::::XL::::::::::::::::::::::L
 // X:::::X       X:::::XL::::::::::::::::::::::L
 // XXXXXXX       XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
-@include media-breakpoint-up(xl) { // >= 1200px
+@include media-breakpoint-up(xl) {
+    // >= 1200px
    $width-card-footer: 1180px;
    $width-card-product: 374px;

@ -506,5 +570,6 @@
 // X:::::X       X:::::XX:::::X       X:::::XL::::::::::::::::::::::L
 // X:::::X       X:::::XX:::::X       X:::::XL::::::::::::::::::::::L
 // XXXXXXX       XXXXXXXXXXXXXX       XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
-@include media-breakpoint-up(xxl) { // >= 1400px
+@include media-breakpoint-up(xxl) {
+    // >= 1400px
 }
--- a/resources/sass/fo/pages/_btob.scss
+++ b/resources/sass/fo/pages/_btob.scss
@ -1,2 +1,15 @@
-.sticker-traca { min-width: 300px; }
-.card-footer .engag-start.btob { background: no-repeat center/cover url("@/images/btob/brochette-volaille.jpg"); }
+.sticker-traca {
+    min-width: 300px;
+
+    picture img {
+        width: 80%;
+    }
+
+    +picture img {
+        width: auto;
+    }
+}
+
+.card-footer .engag-start.btob {
+    background: no-repeat center/cover url("@/images/btob/brochette-volaille.jpg");
+}
--- a/resources/sass/fo/pages/_engagments.scss
+++ b/resources/sass/fo/pages/_engagments.scss
@ -1,5 +1,10 @@
-.top-n1 { top: -0.1px; }
-.bottom-n1 { bottom: -0.25px; }
+.top-n1 {
+    top: -0.1px;
+}
+
+.bottom-n1 {
+    bottom: -0.25px;
+}

 .nav-pills.engagments .nav-link {
    border-radius: unset;
@ -8,40 +13,73 @@
    transition: none;

    &.active,
-    &:hover { background-color: $fourth; }
+    &:hover {
+        background-color: $fourth;
+    }

-    .bg-engagment-icon { fill: $color-primary; }
+    .bg-engagment-icon {
+        fill: $color-primary;
+    }

    &.active .bg-engagment-icon,
-    &:hover .bg-engagment-icon { fill: $fourth; }
+    &:hover .bg-engagment-icon {
+        fill: $fourth;
+    }

-    .second-color-engagment-icon { fill: $fourth; }
+    .second-color-engagment-icon {
+        fill: $fourth;
+    }

    &.active .second-color-engagment-icon,
-    &:hover .second-color-engagment-icon { fill: $color-primary; }
+    &:hover .second-color-engagment-icon {
+        fill: $color-primary;
+    }

-    &.active > p,
-    &:hover > p { color: $text-invert-color; }
+    &.active>p,
+    &:hover>p {
+        color: $text-invert-color;
+    }

    .engagment-icon {
        @include size(58px);

        bottom: calc(50% + 0.45rem);
    }
-    .first-color-engagment-icon { fill: $blanc; }
+
+    .first-color-engagment-icon {
+        fill: $blanc;
+    }
+}
+
+.sticker-engagments-wrapper {
+    right: -5rem;
+}
+
+.sticker-engagments-wrapper.reverse {
+    left: -5rem;
 }
-.sticker-engagments-wrapper { right: -5rem; }
-.sticker-engagments-wrapper.reverse { left: -5rem; }

 .sticker-engagments {
    width: 237px;
    max-width: 200px;
+
+    picture img {
+        width: auto;
+    }
 }

 .card-footer {
-    .engag-start.champ { background: no-repeat center/cover url("@/images/engagments/champ-avec-bottes-de-paille.jpg"); }
-    .engag-start.soja { background: no-repeat center/cover url("@/images/engagments/bonnet-champs.jpg"); }
-    .engag-start.tdf { background: no-repeat center/cover url("@/images/engagments/le-Gaulois-volaille-officiel-du-tdf.jpg"); }
+    .engag-start.champ {
+        background: no-repeat center/cover url("@/images/engagments/champ-avec-bottes-de-paille.jpg");
+    }
+
+    .engag-start.soja {
+        background: no-repeat center/cover url("@/images/engagments/bonnet-champs.jpg");
+    }
+
+    .engag-start.tdf {
+        background: no-repeat center/cover url("@/images/engagments/le-Gaulois-volaille-officiel-du-tdf.jpg");
+    }
 }

 // MMMMMMMM               MMMMMMMMDDDDDDDDDDDDD
@ -60,10 +98,20 @@
 // M::::::M               M::::::MD:::::::::::::::DD
 // M::::::M               M::::::MD::::::::::::DDD
 // MMMMMMMM               MMMMMMMMDDDDDDDDDDDDD
-@include media-breakpoint-up(md) { // >= 768px
-    .sticker-engagments-wrapper { right: -2rem; }
-    .sticker-engagments-wrapper.reverse { left: -2rem; }
-    .sticker-engagments { max-width: unset; }
+@include media-breakpoint-up(md) {
+
+    // >= 768px
+    .sticker-engagments-wrapper {
+        right: -2rem;
+    }
+
+    .sticker-engagments-wrapper.reverse {
+        left: -2rem;
+    }
+
+    .sticker-engagments {
+        max-width: unset;
+    }
 }

 // XXXXXXX       XXXXXXXLLLLLLLLLLL
@ -82,7 +130,14 @@
 // X:::::X       X:::::XL::::::::::::::::::::::L
 // X:::::X       X:::::XL::::::::::::::::::::::L
 // XXXXXXX       XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
-@include media-breakpoint-up(xl) { // >= 1200px
-    .sticker-engagments-wrapper { right: -5rem; }
-    .sticker-engagments-wrapper.reverse { left: -5rem; }
+@include media-breakpoint-up(xl) {
+
+    // >= 1200px
+    .sticker-engagments-wrapper {
+        right: -5rem;
+    }
+
+    .sticker-engagments-wrapper.reverse {
+        left: -5rem;
+    }
 }
--- a/resources/sass/fo/pages/_expertise.scss
+++ b/resources/sass/fo/pages/_expertise.scss
@ -1,8 +1,19 @@
-.nav-expertise-wrapper {
-    ul { min-height: 250px; }
-    li { min-width: 175px; }
+.img-vip-wrapper img {
+    max-height: 85px;
+}

-    p { font-size: 2rem; }
+.nav-expertise-wrapper {
+    ul {
+        min-height: 250px;
+    }
+
+    li {
+        min-width: 175px;
+    }
+
+    p {
+        font-size: 2rem;
+    }

    a:hover,
    a:focus,
@ -10,7 +21,10 @@
        color: $text-color;
        font-size: 18px;
    }
-    .expertise-link { outline: unset; }
+
+    .expertise-link {
+        outline: unset;
+    }

    .coin-wrapper {
        padding: 0;
@ -26,10 +40,19 @@
        scale: 1;
    }

-    .coin-img-wrapper { background-color: inherit; }
+    .coin-img-wrapper {
+        background-color: inherit;
+
+        picture img {
+            width: auto;
+            margin: 1.5rem;
+        }
+    }

    a:hover .coin-img-wrapper,
-    .expertise-link.active .coin-img-wrapper { background-color: $color-primary; }
+    .expertise-link.active .coin-img-wrapper {
+        background-color: $color-primary;
+    }

    a:hover p,
    .expertise-link.active p {
@ -44,8 +67,6 @@
    margin-left: auto;
 }

-.img-vip-wrapper img { max-height: 85px; }
-
 .product-vip-100 {
    width: 100%;
 }
@ -69,7 +90,9 @@
    max-height: none;
 }

-.butn-business { outline: unset; }
+.butn-business {
+    outline: unset;
+}

 // MMMMMMMM               MMMMMMMMDDDDDDDDDDDDD
 // M:::::::M             M:::::::MD::::::::::::DDD
@ -87,7 +110,9 @@
 // M::::::M               M::::::MD:::::::::::::::DD
 // M::::::M               M::::::MD::::::::::::DDD
 // MMMMMMMM               MMMMMMMMDDDDDDDDDDDDD
-@include media-breakpoint-up(md) { // >= 768px
+@include media-breakpoint-up(md) {
+
+    // >= 768px
    #collapse-0,
    #collapse-1,
    #collapse-2 {
@ -114,14 +139,18 @@
 // L::::::::::::::::::::::L   GG:::::::::::::::G
 // L::::::::::::::::::::::L     GGG::::::GGG:::G
 // LLLLLLLLLLLLLLLLLLLLLLLL        GGGGGG   GGGG
-@include media-breakpoint-up(lg) { // >= 992px
+@include media-breakpoint-up(lg) {
+
+    // >= 992px
    #collapse-0,
    #collapse-1,
    #collapse-2 {
        top: -7.2rem;
    }

-    .anatomie-text-wrapper { max-width: 192px; }
+    .anatomie-text-wrapper {
+        max-width: 192px;
+    }

    .other-products-wrapper::before,
    .anatomie-wrapper::after {
--- a/resources/sass/fo/pages/_home.scss
+++ b/resources/sass/fo/pages/_home.scss
@ -1,4 +1,6 @@
-.swiper-lgp { width: 100%; }
+.swiper-lgp {
+    width: 100%;
+}

 .swiper-hero .img-slide,
 .swiper-options-wrapper .shadow-img {
@ -9,9 +11,14 @@
 $thumbs-height: 10%;

@include media-breakpoint-up(md) {
-    .swiper-hero .slide-txt { max-height: calc(100% - #{$thumbs-height}); }
+    .swiper-hero .slide-txt {
+        max-height: calc(100% - #{$thumbs-height});
+    }
+}
+
+.swiper-hero .img-slide {
+    filter: brightness(40%);
 }
-.swiper-hero .img-slide { filter: brightness(40%); }

 .hero-thumbs {
    width: calc(103.5% + 2vw);
@ -23,11 +30,21 @@ $thumbs-height: 10%;
    clip-path: polygon(0% 0%, 1% 16%, 3% 30%, 6% 56%, 10% 79%, 14% 100%, 100% 100%, 100% 0%);
 }

-.thumbnails-item:nth-child(1) { right: -3vw; }
-.thumbnails-item:nth-child(2) { right: -2vw; }
-.thumbnails-item:nth-child(3) { right: -1vw; }
+.thumbnails-item:nth-child(1) {
+    right: -3vw;
+}

-.thumbnails-wrapper { z-index: 1; }
+.thumbnails-item:nth-child(2) {
+    right: -2vw;
+}
+
+.thumbnails-item:nth-child(3) {
+    right: -1vw;
+}
+
+.thumbnails-wrapper {
+    z-index: 1;
+}

 .thumbnails-item:not(:first-child) {
    &::before {
@ -77,13 +94,15 @@ $thumbs-height: 10%;
        height: 0.5rem;
        rotate: 180deg;

-        &.active .slide-hero-progress-bar { opacity: 1 !important; }
+        &.active .slide-hero-progress-bar {
+            opacity: 1 !important;
+        }

        &.animate .slide-hero-progress-bar::after {
            width: 100%;
            transition: width linear;
            transition-delay: unset;
-            transition-duration: 5000ms;    // SWIPER autoplay delay ALSO CHANGE TS swiper-hero delay
+            transition-duration: 5000ms; // SWIPER autoplay delay ALSO CHANGE TS swiper-hero delay
        }
    }

@ -92,29 +111,52 @@ $thumbs-height: 10%;
    }
 }

-.section-identity .logo-ne { width: 132px; }
+.section-identity .logo-ne {
+    width: 132px;
+}

 .section-products {
    .cards-wrapper,
-    .btn-ranges.desktop { max-width: 1120px; }
-    .btn-ranges.desktop { display: none; }
+    .btn-ranges.desktop {
+        max-width: 1120px;
+    }
+
+    .btn-ranges.desktop {
+        display: none;
+    }
 }

 .section-engagments {
-    .indicators-desktop { display: none; }
-    .ff-poppins-bold { font-size: 62px; }
-    .img-wrapper img { max-width: none; }
+    .indicators-desktop {
+        display: none;
+    }
+
+    .ff-poppins-bold {
+        font-size: 62px;
+    }
+
+    .img-wrapper img {
+        max-width: none;
+    }
 }

 .section-tricks {
-    .bg-txt { background: no-repeat center/cover url("@/images/fond-inox.jpg"); }
-    .bg-txt > div:first-child { background-color: $color-bg-body; }
-    .bg-txt > div:last-child { max-width: 960px; }
+    .bg-txt {
+        background: no-repeat center/cover url("@/images/fond-inox.jpg");
+    }
+
+    .bg-txt>div:first-child {
+        background-color: $color-bg-body;
+    }
+
+    .bg-txt>div:last-child {
+        max-width: 960px;
+    }

    .img-wrapper {
        width: 75%;

-        img:last-child {
+        picture:last-child {
            right: -20%;
            bottom: -15%;
        }
@ -122,9 +164,12 @@ $thumbs-height: 10%;
 }

 .section-news {
+
    // FIXME: This show not be used anymore ?
    .news-desktop,
-    .posts-desktop { display: none; }
+    .posts-desktop {
+        display: none;
+    }

    .news-wrapper {
        background-color: $color-bg-dropmenu;
@ -140,7 +185,9 @@ $thumbs-height: 10%;
        height: 100%;
    }

-    .butn-wrap { margin-top: -2rem; }
+    .butn-wrap {
+        margin-top: -2rem;
+    }
 }

 //    SSSSSSSSSSSSSSS MMMMMMMM               MMMMMMMM
@ -159,12 +206,21 @@ $thumbs-height: 10%;
 // S::::::SSSSSS:::::SM::::::M               M::::::M
 // S:::::::::::::::SS M::::::M               M::::::M
 //  SSSSSSSSSSSSSSS   MMMMMMMM               MMMMMMMM
-@include media-breakpoint-up(sm) { // >= 576px
-    .swiper-lgp { width: calc(100% - 12rem); }
+@include media-breakpoint-up(sm) {
+
+    // >= 576px
+    .swiper-lgp {
+        width: calc(100% - 12rem);
+    }

    .section-products {
-        .btn-ranges.desktop { display: block; }
-        .btn-ranges.mobile { display: none; }
+        .btn-ranges.desktop {
+            display: block;
+        }
+
+        .btn-ranges.mobile {
+            display: none;
+        }
    }
 }

@ -184,7 +240,9 @@ $thumbs-height: 10%;
 // M::::::M               M::::::MD:::::::::::::::DD
 // M::::::M               M::::::MD::::::::::::DDD
 // MMMMMMMM               MMMMMMMMDDDDDDDDDDDDD
-@include media-breakpoint-up(md) { // >= 768px
+@include media-breakpoint-up(md) {
+
+    // >= 768px
    .swiper-hero .img-slide,
    .swiper-options-wrapper .shadow-img,
    .swiper-options-wrapper .shadow-txt {
@ -193,13 +251,26 @@ $thumbs-height: 10%;
    }

    .swiper-hero .slide-txt {
-        .h1 { font-size: 1.8em; }
-        p { font-size: 1em; }
-        .butn-prim { font-size: 1em; }
-    }
-    .swiper-hero .img-slide { filter: brightness(1); }
+        .h1 {
+            font-size: 1.8em;
+        }

-    .hero-thumbs { width: calc(37.3% + 2vw); }
+        p {
+            font-size: 1em;
+        }
+
+        .butn-prim {
+            font-size: 1em;
+        }
+    }
+
+    .swiper-hero .img-slide {
+        filter: brightness(1);
+    }
+
+    .hero-thumbs {
+        width: calc(37.3% + 2vw);
+    }
 }

 // LLLLLLLLLLL                     GGGGGGGGGGGGG
@ -218,12 +289,16 @@ $thumbs-height: 10%;
 // L::::::::::::::::::::::L   GG:::::::::::::::G
 // L::::::::::::::::::::::L     GGG::::::GGG:::G
 // LLLLLLLLLLLLLLLLLLLLLLLL        GGGGGG   GGGG
-@include media-breakpoint-up(lg) { // >= 992px
+@include media-breakpoint-up(lg) {
+
+    // >= 992px
    .swiper-lgp {
        width: 100%;
    }

-    .swiper-hero-progress-bar { width: 99%; }
+    .swiper-hero-progress-bar {
+        width: 99%;
+    }

    .section-products {
        &::before {
@ -249,16 +324,31 @@ $thumbs-height: 10%;
    }

    .section-tricks {
-        .bg-txt > div:first-child { background-color: transparent; }
+        .bg-txt>div:first-child {
+            background-color: transparent;
+        }
    }

    .section-news {
-        .news-desktop { display: flex; }
-        .news-mobile { display: none; }
-        .posts-desktop { display: flex; }
-        .posts-mobile { display: none; }
+        .news-desktop {
+            display: flex;
+        }

-        .card-posts .card-title { height: calc(1em * var(--bs-body-line-height)); }
+        .news-mobile {
+            display: none;
+        }
+
+        .posts-desktop {
+            display: flex;
+        }
+
+        .posts-mobile {
+            display: none;
+        }
+
+        .card-posts .card-title {
+            height: calc(1em * var(--bs-body-line-height));
+        }
    }
 }

@ -278,10 +368,17 @@ $thumbs-height: 10%;
 // X:::::X       X:::::XL::::::::::::::::::::::L
 // X:::::X       X:::::XL::::::::::::::::::::::L
 // XXXXXXX       XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
-@include media-breakpoint-up(xl) { // >= 1200px
+@include media-breakpoint-up(xl) {
+
+    // >= 1200px
    .section-engagments {
-        .indicators-desktop { display: flex; }
-        .indicators-mobile { display: none; }
+        .indicators-desktop {
+            display: flex;
+        }
+
+        .indicators-mobile {
+            display: none;
+        }
    }
 }

@ -301,23 +398,48 @@ $thumbs-height: 10%;
 // X:::::X       X:::::XX:::::X       X:::::XL::::::::::::::::::::::L
 // X:::::X       X:::::XX:::::X       X:::::XL::::::::::::::::::::::L
 // XXXXXXX       XXXXXXXXXXXXXX       XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
-@include media-breakpoint-up(xxl) { // >= 1400px
+@include media-breakpoint-up(xxl) {
+
+    // >= 1400px
    .swiper-hero .slide-txt {
-        .h1 { font-size: 1.8em; }
-        p { font-size: 1em; }
-        .butn-prim { font-size: 16px; }
+        .h1 {
+            font-size: 1.8em;
+        }
+
+        p {
+            font-size: 1em;
+        }
+
+        .butn-prim {
+            font-size: 16px;
+        }
    }
 }

-@include media-breakpoint-up(ml) { // >= 1900px
-    .hero-thumbs { width: calc(37% + 2vw); }
+@include media-breakpoint-up(ml) {
+
+    // >= 1900px
+    .hero-thumbs {
+        width: calc(37% + 2vw);
+    }

    .thumbnails-item:first-child img {
        clip-path: polygon(1% 0%, 3% 16%, 5% 30%, 8% 56%, 12% 79%, 15% 100%, 100% 100%, 100% 0%);
    }

-    .thumbnails-item:nth-child(1) { right: -2.7vw; }
-    .thumbnails-item:nth-child(2) { right: -1.2vw; }
-    .thumbnails-item:nth-child(3) { right: 0.3vw; }
-    .thumbnails-item:nth-child(4) { right: 1.8vw; }
+    .thumbnails-item:nth-child(1) {
+        right: -2.7vw;
+    }
+
+    .thumbnails-item:nth-child(2) {
+        right: -1.2vw;
+    }
+
+    .thumbnails-item:nth-child(3) {
+        right: 0.3vw;
+    }
+
+    .thumbnails-item:nth-child(4) {
+        right: 1.8vw;
+    }
 }
--- a/resources/sass/fo/pages/_products.scss
+++ b/resources/sass/fo/pages/_products.scss
@ -77,26 +77,33 @@
    }
 }

-.prod-logos img {
-    min-height: 6rem;
+// FICHE PRODUIT
+.product-fiche-details {
+    position: absolute;
+
+    picture img {
+        width: auto;
+    }
+}
+
+.prod-logos {
+    picture img {
+        width: auto;
+        height: 4rem;
+    }
 }

-// FICHE PRODUIT
 #swiper-product .swiper-slide img {
    max-width: fit-content;
 }

 // .fiche-wrapper {max-width: 335px;}
 .fiche-img {
-    @include size(32px);
+    @include size(56px);

    padding: 0.3rem;
 }

-.product-fiche-details {
-    position: absolute;
-}
-
 .section-video-product {
    background: no-repeat top center/100% url("@/images/products/chef-en-cuisine.jpg"), no-repeat center/cover url("@/images/fond-inox.jpg");
 }
@ -400,4 +407,63 @@
        height: 21rem;
        background: no-repeat center/cover url("@/images/layout/aromates-1-ficheproduit.png");
    }
+
+    #swiper-product {
+        width: 100%;
+    }
+
+    .prod-slider-wrapper,
+    .prod-ing-wrapper,
+    .prod-alleg-wrapper {
+        width: 33%;
+    }
+
+    .prod-ing-wrapper,
+    .prod-alleg-wrapper {
+        max-width: 335px;
+    }
+
+    .prod-logos {
+        right: -15rem;
+        margin-top: 4rem;
+
+        img {
+            height: 4rem;
+        }
+    }
+
+    .business-infos {
+        .start-col {
+            flex: 2;
+            border-right: 2px solid #{$text-color};
+        }
+
+        .end-col {
+            flex: 3;
+        }
+    }
+}
+
+// XXXXXXX       XXXXXXXLLLLLLLLLLL
+// X:::::X       X:::::XL:::::::::L
+// X:::::X       X:::::XL:::::::::L
+// X::::::X     X::::::XLL:::::::LL
+// XXX:::::X   X:::::XXX  L:::::L
+//    X:::::X X:::::X     L:::::L
+//     X:::::X:::::X      L:::::L
+//      X:::::::::X       L:::::L
+//      X:::::::::X       L:::::L
+//     X:::::X:::::X      L:::::L
+//    X:::::X X:::::X     L:::::L
+// XXX:::::X   X:::::XXX  L:::::L         LLLLLL
+// X::::::X     X::::::XLL:::::::LLLLLLLLL:::::L
+// X:::::X       X:::::XL::::::::::::::::::::::L
+// X:::::X       X:::::XL::::::::::::::::::::::L
+// XXXXXXX       XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
+@include media-breakpoint-up(xl) {
+
+    // >= 1200px
+    .section-ranges .cards-wrapper {
+        max-width: 1120px;
+    }
 }
--- a/resources/sass/fo/partials/_banner.scss
+++ b/resources/sass/fo/partials/_banner.scss
@ -1,67 +1,89 @@
 .banner-header-wrapper.story::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-story.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-story.jpg");
 }

 .banner-header-wrapper.ranges::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-ranges.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-ranges.jpg");
 }

 .banner-header-wrapper.products::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-products.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-products.jpg");
 }

 .banner-header-wrapper.engagments::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-engagments.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-engagments.jpg");
 }

 .banner-header-wrapper.btob::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-b-to-b.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-b-to-b.jpg");
 }

 .banner-header-wrapper.breeder::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-breeder.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-breeder.jpg");
 }

 .banner-header-wrapper.adn::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-adn.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-adn.jpg");
 }

 .banner-header-wrapper.ideas::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-ideas.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-ideas.jpg");
 }

 .banner-header-wrapper.tips::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-tips.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-tips.jpg");
 }

 .banner-header-wrapper.recipes::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-recipes.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-recipes.jpg");
 }

 .banner-header-wrapper.news::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-news.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-news.jpg");
 }

 .banner-header-wrapper.contact::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-contact.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-contact.jpg");
 }

 .banner-header-wrapper.search-summary::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-contact.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-contact.jpg");
 }

 .banner-header-wrapper.search::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-contact.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-contact.jpg");
 }

 .banner-header-wrapper.legals::before {
-    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%), no-repeat center/cover url("@/images/banner/header-legals.jpg");
+    background: linear-gradient(0deg, #{$color-bg-body} 0%, transparent 100%),
+    no-repeat center/cover url("@/images/banner/header-legals.jpg");
 }
-.banner-wrapper { background-color: $color-bg-banner; }

-.banner-wrapper .picture-wrapper { width: 295px; }
+.banner-wrapper {
+    background-color: $color-bg-banner;
+}

-.banner-wrapper img {
+.banner-wrapper .picture-wrapper {
+    width: 295px;
+}
+
+.banner-wrapper picture img {
+    position: absolute;
+    max-height: unset;
    border: 1px solid;
    border-radius: 50%;
    object-fit: cover;
@ -69,62 +91,101 @@
    translate: -50% 0;
 }

-.banner-wrapper img:nth-child(1) {
+.banner-wrapper picture:nth-child(1) img {
    @include size(91px);

    top: 21px;
    left: 34%;
 }

-.banner-wrapper img:nth-child(2) {
+.banner-wrapper picture:nth-child(2) img {
    @include size(75px);

    top: 42px;
    left: 58%;
 }

-.banner-wrapper img:nth-child(3) {
+.banner-wrapper picture:nth-child(3) img {
    @include size(97px);

    top: -28px;
    left: 73%;
 }

-.banner-wrapper img:nth-child(4) {
+.banner-wrapper picture:nth-child(4) img {
    @include size(112px);

    top: -56px;
    left: 50%;
 }

-.banner-wrapper svg { @include size(38px); }
-.banner-wrapper svg path { transition: all 0.3s ease-in-out; }
+.banner-wrapper svg {
+    @include size(38px);
+}
+
+.banner-wrapper svg path {
+    transition: all 0.3s ease-in-out;
+}

 .social-wrapper svg {
-    .bg-lin { fill: $blanc; }
-    .img-lin { fill: $color-bg-banner; }
-    .bg-yt { fill: $blanc; }
-    .img-yt { fill: $color-bg-banner; }
-    .bg-in { fill: $blanc; }
-    .img-in { fill: $color-bg-banner; }
+    .bg-lin {
+        fill: $blanc;
+    }
+
+    .img-lin {
+        fill: $color-bg-banner;
+    }
+
+    .bg-yt {
+        fill: $blanc;
+    }
+
+    .img-yt {
+        fill: $color-bg-banner;
+    }
+
+    .bg-in {
+        fill: $blanc;
+    }
+
+    .img-in {
+        fill: $color-bg-banner;
+    }
 }

 .social-wrapper svg:first-of-type:hover {
-    .bg-lin { fill: $bleu2; }
-    .img-lin { fill: $blanc; }
+    .bg-lin {
+        fill: $bleu2;
+    }
+
+    .img-lin {
+        fill: $blanc;
+    }
 }

 .social-wrapper svg:nth-of-type(1):hover {
-    .bg-yt { fill: $rouge; }
-    .img-yt { fill: $blanc; }
+    .bg-yt {
+        fill: $rouge;
+    }
+
+    .img-yt {
+        fill: $blanc;
+    }
 }

 .social-wrapper svg:last-of-type:hover {
-    .bg-in { fill: $orange; }
-    .img-in { fill: $blanc; }
+    .bg-in {
+        fill: $orange;
+    }
+
+    .img-in {
+        fill: $blanc;
+    }
 }

-.banner-header-wrapper { height: 300px; }
+.banner-header-wrapper {
+    height: 300px;
+}

 .banner-header-wrapper::before {
    position: absolute;
--- a/resources/ts/fo/base/common.ts
+++ b/resources/ts/fo/base/common.ts
@ -1,4 +1,3 @@
-import printJS from "print-js";

 window.addEventListener("DOMContentLoaded", () => {
    // BOUTON HAMBURGER
@ -178,42 +177,4 @@ window.addEventListener("DOMContentLoaded", () => {
            }
        });
    }
-
-    const eltsButtonPrintProd = document.getElementsByClassName(
-        "btn-printing"
-    ) as HTMLCollectionOf<HTMLButtonElement>,
-        businessSheet = document.querySelector(
-            ".business-wrap"
-        ) as HTMLDivElement | null;
-
-    // @ts-ignore
-    window.printJS = printJS;
-
-    for (const eltButtonPrintProd of eltsButtonPrintProd) {
-        eltButtonPrintProd.addEventListener("click", function () {
-            if (businessSheet) {
-                const pathname = window.location.pathname;
-                const pathnameAsArray = pathname.split("/");
-                const itemName = pathnameAsArray[pathnameAsArray.length - 1];
-                setTimeout(() => {
-                    // ! Seule solution: imprimer un pdf spécifique pour avoir le rendu souhaité.
-                    // @ts-ignore
-                    printJS({
-                        printable:
-                            "produit/" + itemName +
-                            "/print-commercial-sheet",
-                        type: "pdf",
-                        showModal: true,
-                    });
-                });
-            } else {
-                console.error(
-                    "Could not find business sheet, printing window."
-                );
-                window.print();
-            }
-        });
-    }
-
-    // OVERRIDE BOOTSTRAP
 });
--- a/resources/ts/fo/components/SaveProductComponent.vue
+++ b/resources/ts/fo/components/SaveProductComponent.vue
@ -15,11 +15,10 @@
            :data-index="item.value"
            class="packaging d-none input-pack input-checkbox-pack"
            type="checkbox"
-            :checked="itemPackaging.length === 1"
          >
          <div class="butn-wrap user-select-none">
            <label
-              :class="`label-checkbox label-interest butn-cinq fs-xsm position-relative mb-1 ${itemPackaging.length === 1 ? 'range-bg-color-checked' : ''}`"
+              class="label-checkbox label-interest butn-cinq fs-xsm position-relative mb-1"
              role="button"
              :for="`packaging-${String(index)}`"
            >
@ -44,11 +43,10 @@
            :data-index="item.value"
            class="caliber d-none input-pack input-checkbox-pack"
            type="checkbox"
-            :checked="itemCaliber.length === 1"
          >
          <div class="butn-wrap user-select-none">
            <label
-              :class="`label-checkbox label-interest butn-cinq fs-xsm position-relative mb-1 ${itemCaliber.length === 1 ? 'range-bg-color-checked' : ''}`"
+              class="label-checkbox label-interest butn-cinq fs-xsm position-relative mb-1"
              role="button"
              :for="`caliber-${String(index)}`"
            >
--- a/resources/views/bo/layout.blade.php
+++ b/resources/views/bo/layout.blade.php
@ -22,7 +22,7 @@
            </div>
            <!-- Main content -->
            <div class="row justify-content-center">
-                <div class="col-12 col-md-10 col-lg-8 p-md-0 pt-3">
+                <div class="col-12 col-md-10 p-md-0 pt-3">
                    @yield('content')
                </div>
            </div>
--- a/resources/views/bo/layouts/nav-list.blade.php
+++ b/resources/views/bo/layouts/nav-list.blade.php
@ -17,8 +17,8 @@
            <li class="nav-item">
                <a class="nav-link text-dark @if (request()->routeIs('bo.static_pages.*')) fw-bold @endif" data-bs-toggle="tooltip"
                    href="{{ route('bo.static_pages.index', ['sort_col' => 'updated_at', 'sort_way' => 'desc']) }}"
-                    title="{{ __('Administrer les :model', ['model' => trans_choice('models.classes.static_page', '*')]) }}">
-                    {{ Str::title(trans_choice('models.classes.static_page', '*')) }}
+                    title="{{ __('Administrer les :model', ['model' => trans_choice('models.classes.static_page', INF)]) }}">
+                    {{ Str::title(trans_choice('models.classes.static_page', INF)) }}
                </a>
            </li>
        @endcan
--- a/resources/views/bo/pages/advice/form.blade.php
+++ b/resources/views/bo/pages/advice/form.blade.php
@ -238,11 +238,6 @@
                        'required' => true,
                        'model' => $adviceModel ?? null,
                        'helper' => __('validation.custom.image_title'),
-                        'label' => __(':field1 de l\':field2 de la :model', [
-                            'field1' => Str::ucfirst(__('validation.attributes.attribute_title')),
-                            'field2' => Str::ucfirst(__('validation.attributes.picture')),
-                            'model' => Str::singular($currentType->label()),
-                        ]),
                        'placeholder' => __(':field1 de l\':field2 de la :model', [
                            'field1' => Str::ucfirst(__('validation.attributes.attribute_title')),
                            'field2' => Str::ucfirst(__('validation.attributes.picture')),
@ -309,11 +304,6 @@
                        'required' => true,
                        'model' => $adviceModel ?? null,
                        'helper' => __('validation.custom.image_title'),
-                        'label' => __(':field1 de l\':field2 de la :model', [
-                            'field1' => Str::ucfirst(__('validation.attributes.attribute_title')),
-                            'field2' => Str::ucfirst(__('validation.attributes.picture')),
-                            'model' => Str::singular($currentType->label()),
-                        ]),
                        'placeholder' => __(':field1 de l\':field2 de la :model', [
                            'field1' => Str::ucfirst(__('validation.attributes.attribute_title')),
                            'field2' => Str::ucfirst(__('validation.attributes.picture')),
@ -380,11 +370,6 @@
                        'required' => true,
                        'model' => $adviceModel ?? null,
                        'helper' => __('validation.custom.image_title'),
-                        'label' => __(':field1 de l\':field2 de la :model', [
-                            'field1' => Str::ucfirst(__('validation.attributes.attribute_title')),
-                            'field2' => Str::ucfirst(__('validation.attributes.picture')),
-                            'model' => Str::singular($currentType->label()),
-                        ]),
                        'placeholder' => __(':field1 de l\':field2 de la :model', [
                            'field1' => Str::ucfirst(__('validation.attributes.attribute_title')),
                            'field2' => Str::ucfirst(__('validation.attributes.picture')),
@ -420,7 +405,7 @@
                <div class="col-12 col-md-6 m-md-0 mb-3">
                    @include('bo.partials.inputs.varchar', [
                        'id' => 'adviceYoutubeVideoId',
-                        'label' => __(':field1 de la :field2 de :model', [
+                        'label' => __(':field1 de la :field2 de :model (ex: wPw8d4bGjmo) cette id de video ce trouve dans l\'url', [
                            'field1' => Str::ucfirst(__('validation.attributes.id')),
                            'field2' => Str::ucfirst(__('validation.attributes.youtube_video')),
                            'model' => Str::singular($currentType->label()),
@ -436,7 +421,7 @@
                                'model' => Str::singular($currentType->label()),
                            ]),
                            'min' => 3,
-                            'max' => 255,
+                            'max' => 50,
                        ]),
                        'placeholder' => __(':field1 de la :field2 de :model', [
                            'field1' => Str::ucfirst(__('validation.attributes.id')),
@ -546,7 +531,7 @@
                                'model' => Str::singular(__('models.classes.recipes')),
                            ]),
                            'min' => 15,
-                            'max' => 540,
+                            'max' => 2500,
                        ]),
                    ])
                </div>
--- a/resources/views/bo/pages/advice/index.blade.php
+++ b/resources/views/bo/pages/advice/index.blade.php
@ -34,7 +34,8 @@
                        <tr class="border-bottom">
                            <td class="text-center align-middle">{{ $adviceModel->title }}</td>
                            <td class="text-center align-middle">
-                                <img class="bo-image-preview" src="{{ asset($adviceModel->picture) }}" alt="{{ __('Preview advice picture') }}">
+                                <x-uwil-common::markup.img class="bo-image-preview" alt="{{ __('Preview advice picture') }}"
+                                    url="{{ asset($adviceModel->picture) }}" />
                            </td>
                            @include('bo.modules.change-published-status', [
                                'routeName' => 'advice',
--- a/resources/views/bo/pages/news/form.blade.php
+++ b/resources/views/bo/pages/news/form.blade.php
@ -205,12 +205,12 @@
                    @include('bo.partials.inputs.varchar-picture', [
                        'id' => 'newsPicture',
                        'name' => 'picture',
-                        'width' => 920,
-                        'height' => 1025,
+                        'width' => 590,
+                        'height' => 645,
                        'model' => $newsModel ?? null,
                        'helper' => __('validation.custom.dimensions_must_be', [
-                            'widthpx' => '920px',
-                            'heightpx' => '1025px',
+                            'widthpx' => '590px',
+                            'heightpx' => '645px',
                        ]),
                        'required' => true,
                        'preview' => true,
@ -323,12 +323,12 @@
                    @include('bo.partials.inputs.varchar-picture', [
                        'id' => 'newsPicture2',
                        'name' => 'picture2',
-                        'width' => 920,
-                        'height' => 1025,
+                        'width' => 590,
+                        'height' => 645,
                        'model' => $newsModel ?? null,
                        'helper' => __('validation.custom.dimensions_must_be', [
-                            'widthpx' => '920px',
-                            'heightpx' => '1025px',
+                            'widthpx' => '590px',
+                            'heightpx' => '645px',
                        ]),
                        'required' => false,
                        'preview' => true,
--- a/resources/views/bo/pages/products/index.blade.php
+++ b/resources/views/bo/pages/products/index.blade.php
@ -6,25 +6,47 @@
@section('content')
    <div class="d-flex justify-content-between flex-md-nowrap align-items-center flex-wrap">
        @include('modules.breadcrumbs.breadcrumb-body')
-        <a class="btn btn-primary float-right" data-bs-toggle="tooltip" data-bs-placement="top" href="{{ route('bo.products.create') }}"
-            title="{{ __('crud.helpers.create_model', ['model' => Str::singular(__('models.classes.products'))]) }}">
-            <i class="fa-solid fa-plus"></i>
-        </a>
+        <div class="d-flex gap-3">
+            <form id="categoryFilter" action="{{ request()->url() }}">
+                <div class="input-group">
+                    <select class="form-select" id="selectGammes" name="range">
+                        <option value="" selected>{{ __('Toutes les gammes') }}</option>
+                        @foreach ($ranges as $range)
+                            <option value="{{ $range->id }}" @if (request()->range == $range->id) selected @endif>{{ $range->label }}</option>
+                        @endforeach
+                    </select>
+                    <button class="btn btn-primary" type="submit">{{ __('Filter') }}</button>
+                </div>
+            </form>
+            <a class="btn btn-primary float-right" data-bs-toggle="tooltip" data-bs-placement="top" href="{{ route('bo.products.create') }}"
+                title="{{ __('crud.helpers.create_model', ['model' => Str::singular(__('models.classes.products'))]) }}">
+                <i class="fa-solid fa-plus"></i>
+            </a>
+        </div>
    </div>
    @include('bo.modules.search-bar')
    <div class="table-responsive mb-3">
        <table class="table-hover table-fix-action m-0 table">
            @if (count($productModels) > 0)
                <thead>
-                    @include('bo.modules.table-col-sorter', [
-                        'cols' => [
-                            'label' => __('validation.attributes.label'),
-                            'species' => __('validation.attributes.species'),
-                            'picture' => __('validation.attributes.picture'),
+                    @php
+                        $cols = [];
+                        $routeName = request()->route()->getName();
+                        $cols = array_merge($cols, [
+                            'label' => Str::ucfirst(__('validation.attributes.label')),
+                            'species' => Str::ucfirst(__('validation.attributes.species')),
+                            'picture' => Str::ucfirst(__('validation.attributes.picture')),
                            'published' => __('validation.attributes.published'),
                            'updated_at' => __('validation.attributes.updated_at'),
-                            'order' => __('validation.attributes.order'),
-                        ],
+                        ]);
+                        if (request()->range) {
+                            $cols = array_merge($cols, [
+                                'order' => Str::ucfirst(__('validation.attributes.order'))
+                            ]);
+                        }
+                    @endphp
+                    @include('bo.modules.table-col-sorter', [
+                        'cols' => $cols,
                    ])
                </thead>
                <tbody>
@ -33,8 +55,8 @@
                            <td class="text-center align-middle">{{ $productModel->label }}</td>
                            <td class="text-center align-middle">{{ $productModel->species->label() }}</td>
                            <td class="text-center align-middle">
-                                <img class="bo-image-preview" src="{{ asset($productModel->sticker_sm) }}"
-                                    alt="{{ __('Preview product picture') }}">
+                                <x-uwil-common::markup.img class="bo-image-preview" alt="{{ __('Preview product picture') }}"
+                                    url="{{ asset($productModel->sticker_sm) }}" />
                            </td>
                            @include('bo.modules.change-published-status', [
                                'routeName' => 'products',
@ -44,7 +66,7 @@
                            @php
                                $routeName = request()->route()->getName();
                            @endphp
-                            @if (empty(request()->search) && Session::get("$routeName.sort_col") === 'order')
+                            @if (empty(request()->search) && request()->range)
                                @include('bo.modules.change-model-order', [
                                    'routeName' => 'products',
                                    'models' => $productModels,
--- a/resources/views/bo/pages/ranges/index.blade.php
+++ b/resources/views/bo/pages/ranges/index.blade.php
@ -32,13 +32,12 @@
                                </div>
                            </td>
                            <td class="text-center align-middle">
-                                <img class="bo-image-preview" src="{{ asset($rangeModel->picture) }}" alt="{{ __('Preview range picture') }}">
+                                <x-uwil-common::markup.img class="bo-image-preview" alt="{{ __('Preview range picture') }}"
+                                    url="{{ asset($rangeModel->picture) }}" />
                            </td>
                            <td class="text-center align-middle"><span class="badge bg-secondary">{{ $rangeModel->updated_at }}</span></td>
                            @php
-                                $routeName = request()
-                                    ->route()
-                                    ->getName();
+                                $routeName = request()->route()->getName();
                            @endphp
                            @if (empty(request()->search) && Session::get("$routeName.sort_col") === 'order')
                                @include('bo.modules.change-model-order', [
--- a/resources/views/bo/pages/slides/index.blade.php
+++ b/resources/views/bo/pages/slides/index.blade.php
@ -35,7 +35,8 @@
                                {!! Str::limit(clean(strip_tags($slideModel->content)), 50) !!}
                            </td>
                            <td class="text-center align-middle">
-                                <img class="bo-image-preview" src="{{ asset($slideModel->picture) }}" alt="{{ __('Preview slide picture') }}">
+                                <x-uwil-common::markup.img class="bo-image-preview" alt="{{ __('Preview slide picture') }}"
+                                    url="{{ asset($slideModel->picture) }}" />
                            </td>
                            @include('bo.modules.change-published-status', [
                                'routeName' => 'slides',
--- a/resources/views/fo/documents/partials/product-com-sheet-header.blade.php
+++ b/resources/views/fo/documents/partials/product-com-sheet-header.blade.php
@ -9,5 +9,6 @@
 </table>
 {{-- positionfixed --}}
 <div class="header-logo-block">
-    <img class="header-logo" src="{{ resource_path('assets/images/header/logo-lgp-header.png') }}" alt="{{ config('app.name') }}">
+    <x-uwil-common::markup.img class="header-logo" alt="{{ config('app.name') }}"
+        url="{{ resource_path('assets/images/header/logo-lgp-header.png') }}" />
 </div>
--- a/resources/views/fo/documents/partials/product-com-sheet-title.blade.php
+++ b/resources/views/fo/documents/partials/product-com-sheet-title.blade.php
@ -2,20 +2,22 @@
 <table width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td width="50%">
-            <h1 class="text-bold ">{{ $product->label }}</h1>
+            <h1 class="text-bold">{{ $product->label }}</h1>
        </td>
        <td>
            <table>
                <tr>
                    @if ($product->is_frenchpoultry)
-                    <td>
-                        <img class="logo" src="{{ resource_path('assets/images/logo-vf.png') }}" alt="{{ __('Logo de la volaille française') }}">
-                    </td>
+                        <td>
+                            <x-uwil-common::markup.img class="logo" alt="{{ __('Logo de la volaille française') }}"
+                                url="{{ resource_path('assets/images/logo-vf.png') }}" />
+                        </td>
                    @endif
                    @if (\App\Enums\NutriscoreEnum::make($product->nutriscore)->value > 0)
-                    <td>
-                        <img class="logo" src="{{ resource_path('assets/images/nutriscore/logo-nutriscore-'. \App\Enums\NutriscoreEnum::make($product->nutriscore)->label() .'.png') }}" alt="{{ __('Logo Nutriscore') }}">
-                    </td>
+                        <td>
+                            <x-uwil-common::markup.img class="logo" alt="{{ __('Logo Nutriscore') }}"
+                                url="{{ resource_path('assets/images/nutriscore/logo-nutriscore-' . \App\Enums\NutriscoreEnum::make($product->nutriscore)->label() . '.png') }}" />
+                        </td>
                    @endif
                    <td>
                </tr>
@ -23,4 +25,4 @@
        </td>
    </tr>
 </table>
-<br/>
+<br />
--- a/resources/views/fo/documents/product-commercial-sheet.blade.php
+++ b/resources/views/fo/documents/product-commercial-sheet.blade.php
@ -184,7 +184,8 @@

                    <p>{{ __('Gamme : ') }}<span class="text-bold">{{ $product->subrange->range->label }}</span></p><br>

-                    <p>{{ __('Famille : ') }}<span class="text-bold">{{ \App\Enums\Products\ProductSpeciesEnum::make($product->species)->label() }}</span></p><br>
+                    <p>{{ __('Famille : ') }}<span
+                            class="text-bold">{{ \App\Enums\Products\ProductSpeciesEnum::make($product->species)->label() }}</span></p><br>

                    <p>
                        <span class="text-bold">{{ __('Conditionnement :') }}</span><br>
@ -212,9 +213,8 @@

                </td>
                <td class="cell-text-v-top">
-                    <img class="product-picture"
-                        src="/{{ public_path(collect($product->slider_pictures)->first() ?? $product->sticker_sm) }}"
-                        alt="{{ $product->label }}">
+                    <x-uwil-common::markup.img class="product-picture" alt="{{ $product->label }}"
+                        url="/{{ public_path(collect($product->slider_pictures)->first() ?? $product->sticker_sm) }}" />
                </td>
            </tr>
            <tr>
@ -293,7 +293,7 @@
                            </ul>
                        </td>
                        <td class="cell-text-left">
-                            <img src="{{ $svg }}" alt="{{ $svg_alt }}">
+                            <x-uwil-common::markup.img alt="{{ $svg_alt }}" url="{{ $svg }}" />
                        </td>
                    </tr>
                </table>
@ -310,15 +310,15 @@
                    <span>{{ parse_url(config('app.url'), \PHP_URL_HOST) }}</span>
                </td>
                <td width="30mm cell-text-center">
-                    <img class="footer-picture-logo" src="{{ resource_path('assets/images/logo-lgp-dark.png') }}"
-                        alt="{{ config('app.name') }}">
+                    <x-uwil-common::markup.img class="footer-picture-logo" alt="{{ config('app.name') }}"
+                        url="{{ resource_path('assets/images/logo-lgp-dark.png') }}" />
                </td>
                <td class="cell-text-left">
                    <table cellspacing="0" cellpadding="2">
                        <tr>
                            <td>
-                                <img class="footer-picture-logo-small" src="{{ resource_path('assets/images/linkedin-circle.png') }}"
-                                    alt="{{ __('LinkedIn') }}">
+                                <x-uwil-common::markup.img class="footer-picture-logo-small" alt="{{ __('LinkedIn') }}"
+                                    url="{{ resource_path('assets/images/linkedin-circle.png') }}" />
                            </td>
                            <td>
                                <span>{{ __('Le Gaulois Professionnel') }}</span>
--- a/resources/views/fo/modules/pagination.blade.php
+++ b/resources/views/fo/modules/pagination.blade.php
@ -8,8 +8,8 @@
                    <li class="page-item disabled d-flex ff-poppins-bold fs-xl mx-2" data-bs="tooltip" data-bs-placement="top"
                        title="{{ __('Page précédente') }}" aria-disabled="true" aria-label="@lang('Page précédente')">
                        <span class="page-link d-flex align-items-center" aria-hidden="true">
-                            <img class="previous" src="{{ Vite::asset('resources/assets/images/arrow-filter.png') }}" alt=""
-                                aria-hidden="true">
+                            <x-uwil-common::markup.img class="previous" alt="" aria-hidden="true"
+                                url="{{ Vite::asset('resources/assets/images/arrow-filter.png') }}" />
                        </span>
                    </li>
                @else
@ -17,8 +17,8 @@
                        <a class="page-link d-flex align-items-center" data-bs="tooltip" data-bs-placement="top"
                            href="{{ $paginator->previousPageUrl() }}" title="{{ __('Page précédente') }}" aria-label="@lang('Page précédente')"
                            rel="prev">
-                            <img class="previous" src="{{ Vite::asset('resources/assets/images/arrow-filter.png') }}" alt=""
-                                aria-hidden="true">
+                            <x-uwil-common::markup.img class="previous" alt="" aria-hidden="true"
+                                url="{{ Vite::asset('resources/assets/images/arrow-filter.png') }}" />
                        </a>
                    </li>
                @endif
@ -55,16 +55,16 @@
                    <li class="page-item d-flex ff-poppins-bold fs-xxl mx-2">
                        <a class="page-link" data-bs="tooltip" data-bs-placement="top" href="{{ $paginator->nextPageUrl() }}"
                            title="{{ __('Page suivante') }}" aria-label="@lang('Page suivante')" rel="next">
-                            <img class="next" src="{{ Vite::asset('resources/assets/images/arrow-filter.png') }}" alt=""
-                                aria-hidden="true">
+                            <x-uwil-common::markup.img class="next" alt="" aria-hidden="true"
+                                url="{{ Vite::asset('resources/assets/images/arrow-filter.png') }}" />
                        </a>
                    </li>
                @else
                    <li class="page-item disabled d-flex ff-poppins-bold fs-xxl mx-2" data-bs="tooltip" data-bs-placement="top"
                        title="{{ __('Page suivante') }}" aria-disabled="true" aria-label="@lang('Page suivante')">
                        <span class="page-link" aria-hidden="true">
-                            <img class="next" src="{{ Vite::asset('resources/assets/images/arrow-filter.png') }}" alt=""
-                                aria-hidden="true">
+                            <x-uwil-common::markup.img class="next" alt="" aria-hidden="true"
+                                url="{{ Vite::asset('resources/assets/images/arrow-filter.png') }}" />
                        </span>
                    </li>
                @endif
--- a/resources/views/fo/modules/socialShare.blade.php
+++ b/resources/views/fo/modules/socialShare.blade.php
@ -7,15 +7,16 @@
        <a data-share="facebook-{{ $hash }}"
            href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(str_replace('http://', 'https://', request()->fullurl())) }}&t={{ urlencode($title) }}"
            title="{{ __('Partager sur Facebook') }}" role="button" target="_blank" rel="me">
-            <img class="mx-2 my-1" src="{{ Vite::asset("resources/assets/images/facebook{$circle}.png") }}" alt="Facebook">
+            <x-uwil-common::markup.img class="logo-rs mx-2 my-1" title="{{ __('Facebook') }}" alt="{{ __('Logo Facebook') }}"
+                url='{{ Vite::asset("resources/assets/images/facebook{$circle}.png") }}' />
        </a>
    @break

    @case('twitter')
        <a data-share="twitter-{{ $hash }}"
            href="https://twitter.com/share?url={{ urlencode(str_replace('http://', 'https://', request()->fullurl())) }}&text={{ urlencode($title) }}"
-            title="{{ __('Partager sur Twitter') }}" role="button" target="_blank" rel="me">
-            <img class="mx-2 my-1" src="{{ Vite::asset("resources/assets/images/twitter{$circle}.png") }}" alt="Twitter">
+            title="{{ __('Partager sur X') }}" role="button" target="_blank" rel="me">
+            <x-uwil-common::markup.img class="mx-2 my-1" alt="X" url="{{ Vite::asset("resources/assets/images/twitter{$circle}.png") }}" />
        </a>
    @break

@ -23,7 +24,8 @@
        <a data-share="linkedin-{{ $hash }}"
            href="http://www.linkedin.com/shareArticle?mini=true&url={{ urlencode(str_replace('http://', 'https://', request()->fullurl())) }}&title={{ urlencode($title) }}"
            title="{{ __('Partager sur LinkedIn') }}" role="button" target="_blank" rel="me">
-            <img class="mx-2 my-1" src="{{ Vite::asset("resources/assets/images/linkedin{$circle}.png") }}" alt="Linkedin">
+            <x-uwil-common::markup.img class="logo-rs mx-2 my-1" title="{{ __('Linkedin') }}" alt="{{ __('Logo Linkedin') }}"
+                url='{{ Vite::asset("resources/assets/images/linkedin{$circle}.png") }}' />
        </a>
    @break

@ -49,7 +51,8 @@
        <a data-share="whatsapp-{{ $hash }}"
            href="https://wa.me?text={{ urlencode($title) }} : {{ urlencode(str_replace('http://', 'https://', request()->fullurl())) }}"
            title="{{ __('Partager sur Whatsapp') }}" role="button" target="_blank" rel="me">
-            <img class="mx-2 my-1" src="{{ Vite::asset("resources/assets/images/whatsapp{$circle}.png") }}" alt="Whatsapp">
+            <x-uwil-common::markup.img class="logo-rs mx-2 my-1" title="{{ __('Whatsapp') }}" alt="{{ __('Logo Whatsapp') }}"
+                url='{{ Vite::asset("resources/assets/images/whatsapp{$circle}.png") }}' />
        </a>
    @break

--- a/resources/views/fo/pages/activity.blade.php
+++ b/resources/views/fo/pages/activity.blade.php
@ -28,10 +28,11 @@
                <div class="col-12 col-md-6 mb-md-0 mb-4 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/activity/' . $activity_image) }}" alt="{{ $activity_title }}">
+                            <x-uwil-common::markup.img class="object-cover-center w-100 h-100" title="{{ $activity_title }}"
+                                alt="{{ $activity_title }}" url="{{ Vite::asset('resources/assets/images/activity/' . $activity_image) }}" />
                            <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" alt="">
+                                <x-uwil-common::markup.img class="mh-100" alt="Bandeau de séparation"
+                                    url="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" />
                            </div>
                        </div>
                    </div>
--- a/resources/views/fo/pages/adn/adn.blade.php
+++ b/resources/views/fo/pages/adn/adn.blade.php
@ -18,10 +18,11 @@
            <div class="col-12 col-md-6 px-0">
                <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                    <div class="img-section position-relative w-100 h-100">
-                        <img class="object-cover-center w-100 h-100" src="{{ Vite::asset('resources/assets/images/adn/notre-adn.jpg') }}"
-                            alt="Un éleveur caressant une de ses poules">
+                        <x-uwil-common::markup.img alt="{{ __('Un éleveur caressant une de ses poules') }}"
+                            url="{{ Vite::asset('resources/assets/images/adn/notre-adn.jpg') }}" />
                        <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                            <img class="h-100" src="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" alt="">
+                            <x-uwil-common::markup.img class="h-100" alt="{{ __('Pannéeau de séparation') }}"
+                                url="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" />
                        </div>
                    </div>
                </div>
@ -57,8 +58,9 @@
                            </div>
                        </div>
                        <div class="market-img d-flex align-items-center">
-                            <img src="{{ Vite::asset('resources/assets/images/adn/logo-nature-eleveurs.png') }}"
-                                alt="Logo de la marque Nature d'éleveurs">
+                            <x-uwil-common::markup.img title="{{ __('Nature d’éleveurs') }}"
+                                alt="{{ __('Logo de la marque Nature d’éleveurs') }}"
+                                url="{{ Vite::asset('resources/assets/images/adn/logo-nature-eleveurs.png') }}" />
                        </div>
                    </div>
                    <div class="butn-wrap mb-4">
@ -84,11 +86,11 @@
            <div class="col-12 order-md-2 col-md-6 px-0">
                <div class="w-100 h-100 ps-sm-7 ps-md-5 ps-lg-6 ps-xl-10 ps-6">
                    <div class="img-section position-relative w-100 h-100">
-                        <img class="object-cover-center w-100 h-100"
-                            src="{{ Vite::asset('resources/assets/images/adn/cuisine-au-travail.jpg') }}"
-                            alt="Un cuisinier de dos au travail dans une cuisine">
+                        <x-uwil-common::markup.img alt="{{ __('Un cuisinier de dos au travail dans une cuisine') }}"
+                            url="{{ Vite::asset('resources/assets/images/adn/cuisine-au-travail.jpg') }}" />
                        <div class="separator reverse position-absolute h-100 start-0 top-0 text-end">
-                            <img class="h-100" src="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" alt="">
+                            <x-uwil-common::markup.img class="h-100" alt="{{ __('Panneau de séparation') }}"
+                                url="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" />
                        </div>
                    </div>
                </div>
@ -101,19 +103,25 @@
                    <div class="mb-4">
                        <p class="ff-poppins-bold fs-subtitle-medium color-second mb-3">{{ __('C’est bon d’être chef Gaulois.') }}</p>
                        <p>{{ __("Nous vous simplifions la vie au quotidien en vous proposant des produits adaptés, faciles et
-                            rapides à mettre en oeuvre, répondant à vos contraintes de temps et d'organisation.") }}</p>
+                                                                                                                                                                                                                                                                                                    rapides à mettre en oeuvre, répondant à vos contraintes de temps et d'organisation.") }}
+                        </p>
                        <p>{{ __("Nous vous proposons des solutions pour élaborer une carte inventive et variée, quel que soit
-                            votre type de restauration.") }}</p>
+                                                                                                                                                                                                                                                                                                    votre type de restauration.") }}
+                        </p>
                    </div>
                    <div class="mb-4">
                        <p class="ff-poppins-bold fs-subtitle-medium color-second mb-3">{{ __('Nos engagements') }}</p>
                        <ol class="ps-3">
                            <li class="mt-2">{{ __('Des produits piécés calibrés pour un coût portion toujours maîtrisé.') }}</li>
                            <li class="mt-2">{{ __('Des grammages répondant aux critères du GEMRCN.') }}</li>
-                            <li class="mt-2">{{ __('Des conditionnements adaptés (petits ou gros conditionnements, colis panachés
-                                etc...) pour une gestion facilitée et moins de déchets.') }}</li>
-                            <li class="mt-2">{{ __("Des innovations pour mieux répondre aux habitudes de restauration
-                                d'aujourd'hui et de demain.") }}</li>
+                            <li class="mt-2">
+                                {{ __('Des conditionnements adaptés (petits ou gros conditionnements, colis panachés
+                                                                                                                                                                                                                                                                                                                                                                                                etc...) pour une gestion facilitée et moins de déchets.') }}
+                            </li>
+                            <li class="mt-2">
+                                {{ __("Des innovations pour mieux répondre aux habitudes de restauration
+                                                                                                                                                                                                                                                                                                                                                                                                d'aujourd'hui et de demain.") }}
+                            </li>
                        </ol>
                    </div>
                </div>
@ -145,11 +153,10 @@
                <div class="col my-4">
                    <div class="card-adn d-flex bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                        <div class="position-relative h-100 w-45 overflow-hidden">
-                            <img class="card-img-top object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/couple-cuisinant-spaghettis.jpg') }}"
-                                alt="Un cuisinier dresse un plat de volaille">
-                            <img class="position-absolute h-100 end-0 top-0" src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}"
-                                alt="">
+                            <x-uwil-common::markup.img class="card-img-top" alt="{{ __('Un cuisinier dresse un plat de volaille') }}"
+                                url="{{ Vite::asset('resources/assets/images/couple-cuisinant-spaghettis.jpg') }}" />
+                            <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0" alt=""
+                                url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                        </div>
                        <div class="row align-items-center w-55 p-md-3 p-2">
                            <h3 class="card-title h3 m-0">{{ __('Nos services B to B') }}</h3>
@ -165,11 +172,10 @@
                <div class="col my-4">
                    <div class="card-adn d-flex bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                        <div class="position-relative h-100 w-45 overflow-hidden">
-                            <img class="card-img-top object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/adn/notre-adn.jpg') }}"
-                                alt="Un éleveur qui caresse une de ses poules">
-                            <img class="position-absolute h-100 end-0 top-0" src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}"
-                                alt="">
+                            <x-uwil-common::markup.img class="card-img-top" alt="{{ __('Un éleveur qui caresse une de ses poules') }}"
+                                url="{{ Vite::asset('resources/assets/images/adn/notre-adn.jpg') }}" />
+                            <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0" alt=""
+                                url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                        </div>
                        <div class="row align-items-center w-55 p-md-3 p-2">
                            <h3 class="card-title h3 m-0">{{ __('Le métier d\'éleveur de volaille') }}</h3>
--- a/resources/views/fo/pages/adn/breeder.blade.php
+++ b/resources/views/fo/pages/adn/breeder.blade.php
@ -19,11 +19,11 @@
                <div class="col-12 col-md-6 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/breeder/elevage-legauloispro.jpg') }}"
-                                alt="Un éleveur dans son poulailler">
+                            <x-uwil-common::markup.img alt="{{ __('Un éleveur dans son poulailler') }}"
+                                url="{{ Vite::asset('resources/assets/images/breeder/elevage-legauloispro.jpg') }}" />
                            <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yeoi.png') }}" alt="">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Panneau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yeoi.png') }}" />
                            </div>
                        </div>
                    </div>
@ -39,7 +39,7 @@
                        </p>
                        <div class="butn-wrap mb-4">
                            <a class="butn-prim mx-0"
-                                href="https://www.legaulois.fr/lelevage-des-volailles-le-gaulois/le-metier-deleveur-de-volailles/a-la-rencontre-des-eleveurs-de-volailles-le-gaulois"
+                                href="https://www.legaulois.fr/les-elevages/le-metier-deleveur-de-volaille/a-la-rencontre-des-eleveurs-de-volailles-le-gaulois"
                                target="_blank">{{ __('Partager leur passion') }}</a>
                        </div>
                    </div>
@ -55,11 +55,11 @@
                            $youtubeVideo = 'ekNt1ujsAzE';
                        @endphp
                        <div class="position-relative h-100 w-45 overflow-hidden">
-                            <img class="card-img-top object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/eleveur-de-dindes-le-gaulois.jpg') }}"
-                                alt="Un éleveur tenant une poule est assis dans un poulailler">
-                            <img class="position-absolute h-100 end-0 top-0" src="{{ Vite::asset('resources/assets/images/sep-ysoi-md.svg') }}"
-                                alt="">
+                            <x-uwil-common::markup.img class="card-img-top"
+                                alt="{{ __('Un éleveur tenant une poule est assis dans un poulailler') }}"
+                                url="{{ Vite::asset('resources/assets/images/eleveur-de-dindes-le-gaulois.jpg') }}" />
+                            <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0" alt=""
+                                url="{{ Vite::asset('resources/assets/images/sep-ysoi-md.svg') }}" />
                            <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                href="https://www.youtube.com/watch?v={{ $youtubeVideo }}" target="blank">
                                <svg class="play-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
@ -69,16 +69,16 @@
                            </a>
                        </div>
                        <div class="row align-items-center w-55 p-md-3 p-2">
-                            <p class="card-title ff-poppins-bold fs-special m-0">Témoignage éleveur <br>
+                            <p class="card-title ff-poppins-bold fs-special m-0">{{ __('Témoignage éleveur') }} <br>
                                - Sébastien</p>
                            <p class="card-text card-subtitle m-0">
-                                Découvrez le témoignage de Sébastien, éleveur partenaire Le Gaulois Professionnel.<br>
-                                Le Gaulois Professionnel s’engage sur l’origine et la préparation de ses produits de volailles crus et élaborés
-                                en garantissant 100% ORIGINE FRANCE : des volailles nées, élevées et préparées en France.
+                                {{ __('Découvrez le témoignage de Sébastien, éleveur partenaire Le Gaulois Professionnel.') }}<br>
+                                {{ __('Le Gaulois Professionnel s\'engage sur l\'origine et la préparation de ses produits de volailles crus et élaborés
+                                                                                                                                                                                                                                                                                                                                                                en garantissant 100% ORIGINE FRANCE : des volailles nées, élevées et préparées en France.') }}
                            </p>
                            <div class="butn-wrap w-100">
-                                <a class="butn-prim m-0" data-fancybox type="button" href="https://www.youtube.com/watch?v={{ $youtubeVideo }}"
-                                    target="blank">Voir la vidéo</a>
+                                <a class="butn-prim m-0" data-fancybox type="button"
+                                    href="https://www.youtube.com/watch?v={{ $youtubeVideo }}" target="blank">{{ __('Voir la vidéo') }}</a>
                            </div>
                        </div>
                    </div>
@ -86,10 +86,10 @@
                <div class="col d-flex flex-column justify-content-between align-items-center">
                    <div class="card-adn card-adn-sm d-flex bg-default rounded-4 box-shadow mx-auto mb-4 overflow-hidden">
                        <div class="position-relative h-100 w-45 overflow-hidden">
-                            <img class="card-img-top object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/breeder/poulet-eleveur.jpg') }}" alt="Un poulet">
-                            <img class="position-absolute h-100 end-0 top-0" src="{{ Vite::asset('resources/assets/images/sep-ysoi-md.svg') }}"
-                                alt="">
+                            <x-uwil-common::markup.img class="card-img-top" alt="{{ __('Un poulet') }}"
+                                url="{{ Vite::asset('resources/assets/images/breeder/poulet-eleveur.jpg') }}" />
+                            <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0" alt=""
+                                url="{{ Vite::asset('resources/assets/images/sep-ysoi-md.svg') }}" />
                            <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                href="https://www.youtube.com/watch?v=hDzPL7_AOCY" target="blank">
                                <svg class="play-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
@ -99,18 +99,17 @@
                            </a>
                        </div>
                        <div class="row align-items-center w-55 p-md-3 p-2">
-                            <p class="card-title d-flex align-items-center ff-poppins-bold fs-special m-0">Témoignage éleveur <br>
-                                partenaire Le Gaulois <br>
+                            <p class="card-title d-flex align-items-center ff-poppins-bold fs-special m-0">{{ __('Témoignage éleveur') }} <br>
+                                {{ __('partenaire Le Gaulois') }} <br>
                                - Alexandre</p>
                        </div>
                    </div>
                    <div class="card-adn card-adn-sm d-flex bg-default rounded-4 box-shadow mx-auto mb-4 overflow-hidden">
                        <div class="position-relative h-100 w-45 overflow-hidden">
-                            <img class="card-img-top object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/breeder/le-metier-d-eleveur-de-volailles-le-gaulois.jpg') }}"
-                                alt="Un éleveur caresse un poulet">
-                            <img class="position-absolute h-100 end-0 top-0" src="{{ Vite::asset('resources/assets/images/sep-ysoi-md.svg') }}"
-                                alt="">
+                            <x-uwil-common::markup.img class="card-img-top" alt="{{ __('Un éleveur caresse un poulet') }}"
+                                url="{{ Vite::asset('resources/assets/images/breeder/le-metier-d-eleveur-de-volailles-le-gaulois.jpg') }}" />
+                            <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0" alt=""
+                                url="{{ Vite::asset('resources/assets/images/sep-ysoi-md.svg') }}" />
                            <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                href="https://www.youtube.com/watch?v=J_j7jVJeRi8" target="blank">
                                <svg class="play-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
@ -120,8 +119,8 @@
                            </a>
                        </div>
                        <div class="row align-items-center w-55 p-md-3 p-2">
-                            <p class="card-title d-flex align-items-center ff-poppins-bold fs-special m-0">Témoignage éleveur <br>
-                                partenaire Le Gaulois <br>
+                            <p class="card-title d-flex align-items-center ff-poppins-bold fs-special m-0">{{ __('Témoignage éleveur') }} <br>
+                                {{ __('partenaire Le Gaulois') }} <br>
                                - Louis-Marie</p>
                        </div>
                    </div>
@ -134,11 +133,11 @@
                <div class="col-12 col-md-6 order-md-2 px-0">
                    <div class="w-100 h-100 ps-sm-7 ps-md-5 ps-lg-6 ps-xl-10 ps-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/breeder/elevage-des-poulets-de-chair-le-gaulois.jpg') }}"
-                                alt="Des poules au sol">
+                            <x-uwil-common::markup.img alt="{{ __('Des poules au sol') }}"
+                                url="{{ Vite::asset('resources/assets/images/breeder/elevage-des-poulets-de-chair-le-gaulois.jpg') }}" />
                            <div class="separator reverse position-absolute h-100 start-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yeoi.png') }}" alt="">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Pnneau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yeoi.png') }}" />
                            </div>
                        </div>
                    </div>
@ -168,11 +167,11 @@
                <div class="col-12 col-md-6 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/breeder/le-metier-d-eleveur-de-volailles-le-gaulois.jpg') }}"
-                                alt="Un éleveur caressant une poule">
+                            <x-uwil-common::markup.img alt="{{ __('Un éleveur caressant une poule') }}"
+                                url="{{ Vite::asset('resources/assets/images/breeder/le-metier-d-eleveur-de-volailles-le-gaulois.jpg') }}" />
                            <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yeoi.png') }}" alt="">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Panneau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yeoi.png') }}" />
                            </div>
                        </div>
                    </div>
@ -201,10 +200,10 @@
                <div class="col wrapper-xl my-4">
                    <div class="card-footer d-flex flex-column flex-md-row rounded-4 box-shadow mx-auto overflow-hidden">
                        <div class="engag-start breeder position-relative bg-default h-md-auto w-md-50 overflow-hidden">
-                            <img class="card-sep-desktop position-absolute top-md-0 end-md-0 h-100"
-                                src="{{ Vite::asset('resources/assets/images/sep-ysgi.png') }}" alt="">
-                            <img class="card-sep-mobile position-absolute bottom-0 start-0"
-                                src="{{ Vite::asset('resources/assets/images/sep-xbgi.png') }}" alt="">
+                            <x-uwil-common::markup.img class="card-sep-desktop position-absolute top-md-0 end-md-0 h-100 w-100 text-end"
+                                alt="{{ __('Panneau de séparation') }}" url="{{ Vite::asset('resources/assets/images/sep-ysgi.png') }}" />
+                            <x-uwil-common::markup.img class="card-sep-mobile position-absolute bottom-0 start-0"
+                                alt="{{ __('Panneau de séparation') }}" url="{{ Vite::asset('resources/assets/images/sep-xbgi.png') }}" />
                        </div>
                        <div
                            class="engag-end d-flex flex-column justify-content-md-center text-md-start bg-default w-md-50 p-md-5 p-3 text-center">
--- a/resources/views/fo/pages/adn/btob.blade.php
+++ b/resources/views/fo/pages/adn/btob.blade.php
@ -20,11 +20,11 @@
                <div class="col-12 col-md-6 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/btob/tranche-escalope.jpg') }}"
-                                alt="Gros plan d'une escalope entrain d'être découpée au couteau">
+                            <x-uwil-common::markup.img alt="{{ __('Gros plan d’une escalope entrain d’être découpée au couteau') }}"
+                                url="{{ Vite::asset('resources/assets/images/btob/tranche-escalope.jpg') }}" />
                            <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" alt="">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Panneau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" />
                            </div>
                        </div>
                    </div>
@ -128,21 +128,25 @@
                <div class="col-12 order-md-2 col-md-6 px-0">
                    <div class="w-100 h-100 ps-sm-7 ps-md-5 ps-lg-6 ps-xl-10 ps-6">
                        <div class="img-section position-relative d-flex justify-content-center align-items-center bg-ardoise w-100 h-100">
-                            <img class="object-cover-center h-70 ms-sm-7 ms-5 rotate-3 drop-shadow"
-                                src="{{ Vite::asset('resources/assets/images/btob/nouvelle-etiquette-lgp.png') }}"
-                                alt="Etiquette de compostage Le Gaulois Professionnel">
-                            <div class="separator reverse position-absolute h-100 start-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" alt="">
-                            </div>
                            <div
-                                class="sticker-traca border-inox d-none d-md-block position-absolute translate-middle-x rounded-4 mb-n5 mb-lg-5 bottom-0 start-0 w-40 overflow-hidden">
+                                class="sticker-traca border-inox d-none d-md-block position-absolute translate-middle-x rounded-4 mb-n5 mb-lg-5 z-1 bottom-0 start-0 w-40 overflow-hidden">
                                <div class="content bg-ardoise rounded-4 text-center">
-                                    <div><img class="w-80" src="{{ Vite::asset('resources/assets/images/btob/etiquette-traca-lgp.jpg') }}"
-                                            alt="Encart du ticket de compostage montrant le numéro de traçabilité"></div>
+                                    <div>
+                                        <x-uwil-common::markup.img
+                                            alt="{{ __('Encart du ticket de compostage montrant le numéro de traçabilité') }}"
+                                            url="{{ Vite::asset('resources/assets/images/btob/etiquette-traca-lgp.jpg') }}" />
+                                    </div>

                                    <p class="ff-poppins-bold fs-md mb-0 pb-2">{{ __('Traçabilité garantie') }}</p>
                                </div>
                            </div>
+                            <x-uwil-common::markup.img class="d-flex justify-content-center h-70 ms-sm-7 ms-5 rotate-3 drop-shadow"
+                                alt="{{ __('Etiquette de compostage Le Gaulois Professionnel') }}"
+                                url="{{ Vite::asset('resources/assets/images/btob/nouvelle-etiquette-lgp.png') }}" />
+                            <div class="separator reverse position-absolute h-100 start-0 top-0 text-end">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Panneau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" />
+                            </div>
                        </div>
                    </div>
                </div>
@ -174,10 +178,10 @@
                <div class="col wrapper-xl my-4">
                    <div class="card-footer d-flex flex-column flex-md-row rounded-4 box-shadow mx-auto overflow-hidden">
                        <div class="engag-start btob position-relative bg-default h-md-auto w-md-50 overflow-hidden">
-                            <img class="card-sep-desktop position-absolute top-md-0 end-md-0 h-100"
-                                src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" alt="">
-                            <img class="card-sep-mobile position-absolute bottom-0 start-0"
-                                src="{{ Vite::asset('resources/assets/images/sep-xbbi.png') }}" alt="">
+                            <x-uwil-common::markup.img class="card-sep-desktop position-absolute top-md-0 end-md-0 h-100"
+                                alt="{{ __('Panneau de séparation') }}" url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
+                            <x-uwil-common::markup.img class="card-sep-mobile position-absolute bottom-0 start-0"
+                                alt="{{ __('Panneau de séparation') }}" url="{{ Vite::asset('resources/assets/images/sep-xbbi.png') }}" />
                        </div>
                        <div
                            class="engag-end d-flex flex-column justify-content-md-center text-md-start bg-default w-md-50 p-md-5 p-3 text-center">
--- a/resources/views/fo/pages/adn/story.blade.php
+++ b/resources/views/fo/pages/adn/story.blade.php
@ -23,10 +23,11 @@
                        <div class="col swiper-slide swiper-slide-story my-4">
                            <div class="card-story d-flex flex-column flex-md-row bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                                <div class="card-story-content position-relative h-md-100 w-md-50">
-                                    <img class="card-img-top object-cover-center w-100 h-100"
-                                        src="{{ Vite::asset('resources/assets/images/story/story-famille.jpg') }}" alt="">
-                                    <img class="card-separator position-absolute top-md-0 end-md-0 h-100"
-                                        src="{{ Vite::asset('resources/assets/images/separator-vert-color-blue.svg') }}" alt="">
+                                    <x-uwil-common::markup.img class="card-img-top object-cover-center w-100 h-100"
+                                        alt="Photo de famille de Auguste Lambert"
+                                        url="{{ Vite::asset('resources/assets/images/story/story-famille.jpg') }}" />
+                                    <x-uwil-common::markup.img class="card-separator position-absolute top-md-0 end-md-0 h-100" alt=""
+                                        url="{{ Vite::asset('resources/assets/images/separator-vert-color-blue.svg') }}" />
                                </div>
                                <div
                                    class="card-story-content d-flex flex-column justify-content-center text-md-start h-md-100 w-md-50 px-md-5 px-3 text-center">
@ -40,10 +41,11 @@
                        <div class="col swiper-slide swiper-slide-story my-4">
                            <div class="card-story d-flex flex-column flex-md-row bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                                <div class="card-story-content position-relative h-md-100 w-md-50">
-                                    <img class="card-img-top object-cover-center w-100 h-100"
-                                        src="{{ Vite::asset('resources/assets/images/story/story-marche.jpg') }}" alt="">
-                                    <img class="card-separator position-absolute top-md-0 end-md-0 h-100"
-                                        src="{{ Vite::asset('resources/assets/images/separator-vert-color-blue.svg') }}" alt="">
+                                    <x-uwil-common::markup.img class="card-img-top object-cover-center w-100 h-100"
+                                        alt="Groupe de personnes à l'arrière d'une charrette"
+                                        url="{{ Vite::asset('resources/assets/images/story/story-marche.jpg') }}" />
+                                    <x-uwil-common::markup.img class="card-separator position-absolute top-md-0 end-md-0 h-100" alt=""
+                                        url="{{ Vite::asset('resources/assets/images/separator-vert-color-blue.svg') }}" />
                                </div>
                                <div
                                    class="card-story-content d-flex flex-column justify-content-center text-md-start h-md-100 w-md-50 px-md-5 px-3 text-center">
@ -59,10 +61,11 @@
                        <div class="col swiper-slide swiper-slide-story my-4">
                            <div class="card-story d-flex flex-column flex-md-row bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                                <div class="card-story-content position-relative h-md-100 w-md-50">
-                                    <img class="card-img-top object-cover-center w-100 h-100"
-                                        src="{{ Vite::asset('resources/assets/images/story/story-camion.jpg') }}" alt="">
-                                    <img class="card-separator position-absolute top-md-0 end-md-0 h-100"
-                                        src="{{ Vite::asset('resources/assets/images/separator-vert-color-blue.svg') }}" alt="">
+                                    <x-uwil-common::markup.img class="card-img-top object-cover-center w-100 h-100"
+                                        alt="Trois personnes devant un camion"
+                                        url="{{ Vite::asset('resources/assets/images/story/story-camion.jpg') }}" />
+                                    <x-uwil-common::markup.img class="card-separator position-absolute top-md-0 end-md-0 h-100" alt=""
+                                        url="{{ Vite::asset('resources/assets/images/separator-vert-color-blue.svg') }}" />
                                </div>
                                <div
                                    class="card-story-content d-flex flex-column justify-content-center text-md-start h-md-100 w-md-50 px-md-5 px-3 text-center">
@ -77,10 +80,11 @@
                        <div class="col swiper-slide swiper-slide-story my-4">
                            <div class="card-story d-flex flex-column flex-md-row bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                                <div class="card-story-content position-relative h-md-100 w-md-50">
-                                    <img class="card-img-top object-cover-center w-100 h-100"
-                                        src="{{ Vite::asset('resources/assets/images/story/story-camion.jpg') }}" alt="">
-                                    <img class="card-separator position-absolute top-md-0 end-md-0 h-100"
-                                        src="{{ Vite::asset('resources/assets/images/separator-vert-color-blue.svg') }}" alt="">
+                                    <x-uwil-common::markup.img class="card-img-top object-cover-center w-100 h-100"
+                                        alt="Trois personnes devant un camion"
+                                        url="{{ Vite::asset('resources/assets/images/story/story-camion.jpg') }}" />
+                                    <x-uwil-common::markup.img class="card-separator position-absolute top-md-0 end-md-0 h-100" alt=""
+                                        url="{{ Vite::asset('resources/assets/images/separator-vert-color-blue.svg') }}" />
                                </div>
                                <div
                                    class="card-story-content d-flex flex-column justify-content-center text-md-start h-md-100 w-md-50 px-md-5 px-3 text-center">
@ -98,7 +102,8 @@
                        <div class="swiper-button-prev swiper-story-btn-prev"></div>
                        <div class="swiper-button-next swiper-story-btn-next"></div>
                        <div class="img-frise position-absolute top-50 start-50 translate-middle w-md-80 h-100 w-40 text-center">
-                            <img class="w-100 h-100" src="{{ Vite::asset('resources/assets/images/story/pointilles.png') }}" alt="">
+                            <x-uwil-common::markup.img class="w-100 h-100" alt=""
+                                url="{{ Vite::asset('resources/assets/images/story/pointilles.png') }}" />
                            <div class="frame-wrapper position-absolute translate-middle-x bottom-0 px-4 py-0">
                                <p class="frame-text ff-poppins-medium fs-lg">1909</p>
                            </div>
@ -112,10 +117,10 @@
            <div class="col wrapper-xl my-4">
                <div class="card-footer d-flex flex-column flex-md-row rounded-4 box-shadow mx-auto overflow-hidden">
                    <div class="engag-start coucher position-relative bg-default h-md-auto w-md-50 overflow-hidden">
-                        <img class="card-sep-desktop position-absolute top-md-0 end-md-0 h-100"
-                            src="{{ Vite::asset('resources/assets/images/sep-ysgi.png') }}" alt="">
-                        <img class="card-sep-mobile position-absolute bottom-0 start-0"
-                            src="{{ Vite::asset('resources/assets/images/sep-xbgi.png') }}" alt="">
+                        <x-uwil-common::markup.img class="card-sep-desktop position-absolute top-md-0 end-md-0 h-100" alt=""
+                            url="{{ Vite::asset('resources/assets/images/sep-ysgi.png') }}" />
+                        <x-uwil-common::markup.img class="card-sep-mobile position-absolute bottom-0 start-0" alt=""
+                            url="{{ Vite::asset('resources/assets/images/sep-xbgi.png') }}" />
                    </div>
                    <div class="engag-end d-flex flex-column justify-content-md-center text-md-start bg-default w-md-50 p-md-5 p-3 text-center">
                        <h3 class="card-title h3 mb-md-4 mb-xl-5 m-0 mb-5">En savoir plus sur notre Responsabilité Sociétale de Marque</h3>
--- a/resources/views/fo/pages/engagments/biennourrir.blade.php
+++ b/resources/views/fo/pages/engagments/biennourrir.blade.php
@ -20,18 +20,19 @@
                <div class="col-12 col-md-6 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/engagments/filet-poulet-creme-destragon.jpg') }}"
-                                alt="Assiette de filet de poulet à la crème d'estragon">
+                            <x-uwil-common::markup.img alt="{{ __('Assiette de filet de poulet à la crème d’estragon') }}"
+                                url="{{ Vite::asset('resources/assets/images/engagments/filet-poulet-creme-destragon.jpg') }}" />
                            <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" alt="">
+                                <x-uwil-common::markup.img alt="{{ __('Panneau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" />
                            </div>
                            <div class="sticker-engagments-wrapper position-absolute bottom-0">
                                <div
                                    class="sticker-engagments position-absolute border-inox rounded-4 mb-md-5 bottom-0 end-0 mb-4 overflow-hidden text-center">
                                    <div class="content bg-ardoise rounded-4 px-4 py-2">
-                                        <img src="{{ Vite::asset('resources/assets/images/engagments/le-gaulois-engagement-nutriscore.png') }}"
-                                            alt="Echelle de nutriscore pointée sur A et B">
+                                        <x-uwil-common::markup.img title="{{ __('Nutriscore') }}"
+                                            alt="{{ __('Echelle de nutriscore pointée sur A et B') }}"
+                                            url="{{ Vite::asset('resources/assets/images/engagments/le-gaulois-engagement-nutriscore.png') }}" />
                                        <p class="ff-poppins-medium fs-lg color-fourth">{{ __('74% des produits Le Gaulois Professionnel') }}
                                        </p>
                                        <p class="ff-poppins-regular mb-0 pb-2">{{ __('classés A ou B en Nutriscore en 2021') }}</p>
@ -77,8 +78,8 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/reduire.svg') }}"
-                                    alt="Une balance de cuisine">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Une balance de cuisine') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/reduire.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Réduire') }}</h3>
                                    <p class="card-text mt-0">{{ __('les matières grasses saturées') }}</p>
@ -89,8 +90,8 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/sel.svg') }}"
-                                    alt="Un selier">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Un selier') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/sel.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Limiter') }}</h3>
                                    <p class="card-text mt-0">{{ __('la teneur en sel') }}</p>
@ -101,8 +102,8 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/priviegier.svg') }}"
-                                    alt="Un plat avec du poulet">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Un plat avec du poulet') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/priviegier.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Privilégier') }}</h3>
                                    <p class="card-text mt-0">{{ __('la teneur en protéine') }}</p>
@ -113,8 +114,8 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/optimiser.svg') }}"
-                                    alt="Une checklist">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Une checklist') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/optimiser.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Optimiser') }}</h3>
                                    <p class="card-text mt-0">{{ __('la liste des ingrédients') }}</p>
@ -131,15 +132,16 @@
                <div class="col-12 order-md-2 col-md-6 px-0">
                    <div class="w-100 h-100 ps-sm-7 ps-md-5 ps-lg-6 ps-xl-10 ps-6">
                        <div class="img-section position-relative d-flex justify-content-center align-items-center bg-ardoise w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/engagments/family.jpg') }}"
-                                alt="Un homme, une femme et un bébé sur un lit">
+                            <x-uwil-common::markup.img alt="{{ __('Un homme, une femme et un bébé sur un lit') }}"
+                                url="{{ Vite::asset('resources/assets/images/engagments/family.jpg') }}" />
                            <div class="separator reverse position-absolute top-n1 bottom-n1 start-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" alt="">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Panneau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" />
                            </div>
                            <div class="position-absolute start-50 start-sm-0 w-25 mt-lg-4 ms-lg-5 mt-xxl-5 ms-xxl-6 top-0 ms-5 mt-3">
-                                <img src="{{ Vite::asset('resources/assets/images/engagments/logo-programme-malin.png') }}"
-                                    alt="Logo de l'association Le Programme Malin">
+                                <x-uwil-common::markup.img title="{{ __('Association Le Programme Malin') }}"
+                                    alt="{{ __('Logo de l’association Le Programme Malin') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/logo-programme-malin.png') }}" />
                            </div>
                            <div class="sticker-engagments-wrapper reverse position-absolute end-50 bottom-0">
                                <div class="sticker-engagments border-inox rounded-4 mb-md-5 mb-4 overflow-hidden">
@ -196,14 +198,14 @@
                    <div class="col">
                        <div class="card-adn d-flex bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                            <div class="position-relative h-100 w-50 overflow-hidden">
-                                <img class="card-img-top object-cover-start w-100 h-100"
-                                    src="{{ Vite::asset('resources/assets/images/banner/header-engagments.jpg') }}"
-                                    alt="Un éleveur tenant une poule est assis dans un poulailler">
-                                <img class="position-absolute h-100 end-0 top-0"
-                                    src="{{ Vite::asset('resources/assets/images/sep-ysgi-md.svg') }}" alt="">
+                                <x-uwil-common::markup.img class="card-img-top" alt="{{ __('Photo d’un paysage de campagne') }}"
+                                    url="{{ Vite::asset('resources/assets/images/banner/header-engagments.jpg') }}" />
+                                <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0"
+                                    alt="{{ __('Panneau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-ysgi-md.svg') }}" />
                                <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                    href="https://www.youtube.com/watch?v=hivV_9Z3b00" target="blank">
-                                    <svg class="play-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+                                    <svg class="play-btn" title="Lire" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                                        <circle class="play-circle" cx="50.88" cy="50" r="34.96" />
                                        <polygon class="play-icon" points="65.27 50 42.62 36.92 42.62 63.08 65.27 50" />
                                    </svg>
--- a/resources/views/fo/pages/engagments/eleverdurablement.blade.php
+++ b/resources/views/fo/pages/engagments/eleverdurablement.blade.php
@ -18,14 +18,15 @@
                <div class="col-12 col-md-6 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/breeder/le-metier-d-eleveur-de-volailles-le-gaulois.jpg') }}"
-                                alt="Un éleveur caressant une poule">
+                            <x-uwil-common::markup.img alt="{{ __('Un éleveur caressant une poule') }}"
+                                url="{{ Vite::asset('resources/assets/images/breeder/le-metier-d-eleveur-de-volailles-le-gaulois.jpg') }}" />
                            <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" alt="">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Panneau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" />
                            </div>
                            <div class="position-absolute w-25 mt-lg-4 me-lg-5 mt-xxl-5 me-xxl-6 end-0 top-0 me-5 mt-3">
-                                <img src="{{ Vite::asset('resources/assets/images/logo-ne.png') }}" alt="Logo Nature d'éleveurs">
+                                <x-uwil-common::markup.img title="{{ __('Nature d’éleveurs') }}" alt="{{ __('Logo Nature d’éleveurs') }}"
+                                    url="{{ Vite::asset('resources/assets/images/logo-ne.png') }}" />
                            </div>
                            <div class="sticker-engagments-wrapper position-absolute bottom-0">
                                <div class="sticker-engagments border-inox rounded-4 mb-md-5 mb-4 overflow-hidden">
@ -64,9 +65,8 @@
                    <div class="col-6 col-md-3 p-md-3 p-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto"
-                                    src="{{ Vite::asset('resources/assets/images/engagments/lumiere-naturelle.svg') }}"
-                                    alt="Un soleil vert sur fond noir">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Un soleil vert sur fond noir') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/lumiere-naturelle.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Lumière naturelle') }}</h3>
                                    <p class="card-text mt-0"></p>
@ -77,8 +77,9 @@
                    <div class="col-6 col-md-3 p-md-3 p-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/cereale.svg') }}"
-                                    alt="Un brin de maïs et de blé vert sur fond noir">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto"
+                                    alt="{{ __('Un brin de maïs et de blé vert sur fond noir') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/cereale.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">
                                        <span>{{ __('Céréales entières') }}</span><br>
@ -92,8 +93,9 @@
                    <div class="col-6 col-md-3 p-md-3 p-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/poulailler.svg') }}"
-                                    alt="Echelle de scores avec le A en vert sur fond noir">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto"
+                                    alt="{{ __('Echelle de scores avec le A en vert sur fond noir') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/poulailler.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Poulailler à basse consommation') }}</h3>
                                    <p class="card-text mt-0"></p>
@ -104,8 +106,8 @@
                    <div class="col-6 col-md-3 p-md-3 p-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/haies.svg') }}"
-                                    alt="Un buisson vert sur fond noir">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Un buisson vert sur fond noir') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/haies.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Plantation de haies,') }}</h3>
                                    <p class="card-text mt-0">{{ __('arbustes autour du poulailler') }}</p>
@ -118,8 +120,9 @@
                    <div class="col-6 col-md-3 p-md-3 p-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/musique.svg') }}"
-                                    alt="Une note de musique vert sur fond noir">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto"
+                                    alt="{{ __('Une note de musique vert sur fond noir') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/musique.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">
                                        <span>{{ __('Fond musical') }}</span><br>
@ -133,8 +136,9 @@
                    <div class="col-6 col-md-3 p-md-3 p-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/paille.svg') }}"
-                                    alt="Trois ballots de paille vert sur fond noir">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto"
+                                    alt="{{ __('Trois ballots de paille vert sur fond noir') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/paille.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Ballots de paille') }}</h3>
                                    <p class="card-text mt-0"></p>
@ -145,8 +149,9 @@
                    <div class="col-6 col-md-3 pt-md-3 pt-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/perchoirs.svg') }}"
-                                    alt="Deux poulets sur une branche sur fond noir">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto"
+                                    alt="{{ __('Deux poulets sur une branche sur fond noir') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/perchoirs.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Perchoirs') }}</h3>
                                    <p class="card-text mt-0"></p>
@ -163,10 +168,10 @@
                <div class="col wrapper-xl my-4">
                    <div class="card-footer d-flex flex-column flex-md-row rounded-4 box-shadow mx-auto overflow-hidden">
                        <div class="engag-start champ position-relative bg-default h-md-auto w-md-50 overflow-hidden">
-                            <img class="card-sep-desktop position-absolute top-md-0 end-md-0 h-100"
-                                src="{{ Vite::asset('resources/assets/images/sep-ysgi.png') }}" alt="">
-                            <img class="card-sep-mobile position-absolute bottom-0 start-0"
-                                src="{{ Vite::asset('resources/assets/images/sep-xbgi.png') }}" alt="">
+                            <x-uwil-common::markup.img class="card-sep-desktop position-absolute top-md-0 end-md-0 h-100 w-100 text-end"
+                                alt="{{ __('Bandeau de séparation') }}" url="{{ Vite::asset('resources/assets/images/sep-ysgi.png') }}" />
+                            <x-uwil-common::markup.img class="card-sep-mobile position-absolute bottom-0 start-0"
+                                alt="{{ __('Bandeau de séparation') }}" url="{{ Vite::asset('resources/assets/images/sep-xbgi.png') }}" />
                        </div>
                        <div
                            class="engag-end d-flex flex-column justify-content-md-center text-md-start bg-default w-md-50 p-md-5 p-3 text-center">
@ -192,11 +197,11 @@
                <div class="col-12 col-md-6 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/engagments/eleveur-de-poulets-le-gaulois.jpg') }}"
-                                alt="Une poule dans les bras d'un éleveur">
+                            <x-uwil-common::markup.img alt="{{ __('Une poule dans les bras d’un éleveur') }}"
+                                url="{{ Vite::asset('resources/assets/images/engagments/eleveur-de-poulets-le-gaulois.jpg') }}" />
                            <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" alt="">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Bandeau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" />
                            </div>
                        </div>
                    </div>
@ -210,7 +215,7 @@
                        </p>
                        <div class="butn-wrap mb-md-5 mb-4">
                            <a class="butn-prim mx-0"
-                                href="https://www.legaulois.fr/lelevage-des-volailles-le-gaulois/la-sante-des-volailles/antibiotiques-des-volailles-comment-les-eleveurs-ont-ils-reduits-leur-consommation"
+                                href="https://www.legaulois.fr/les-elevages/la-sante-des-volailles/comment-les-eleveurs-ont-ils-reduits-leur-consommation-dantibiotiques-pour-les-volailles"
                                target="_blank">{{ __('En savoir plus') }}</a>
                        </div>
                    </div>
@ -230,9 +235,8 @@
                    <div class="col-6 col-md-3 pb-md-5 px-md-5 pb-md-0 px-3 pb-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto"
-                                    src="{{ Vite::asset('resources/assets/images/engagments/antibiotiques.svg') }}"
-                                    alt="Un médicament en gellule">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Un médicament en gellule') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/antibiotiques.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('-65% d\'utilisation d\'antibiotique') }}</h3>
                                    <p class="card-text mt-0">{{ __('en 10 ans') }}</p>
@ -243,9 +247,9 @@
                    <div class="col-6 col-md-3 pb-md-5 px-md-5 pb-md-0 px-3 pb-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto"
-                                    src="{{ Vite::asset('resources/assets/images/engagments/alimentations-sans-antibiotiques.svg') }}"
-                                    alt="Une seringue marquée d'une interdiction">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto"
+                                    alt="{{ __('Une seringue marquée d’une interdiction') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/alimentations-sans-antibiotiques.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Alimentation de nos volailles') }}</h3>
                                    <p class="card-text mt-0">{{ __('sans antibiotique et sans hormone de croissance') }}</p>
@ -256,9 +260,8 @@
                    <div class="col-6 col-md-3 pb-md-5 px-md-5 pb-md-0 px-3 pb-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto"
-                                    src="{{ Vite::asset('resources/assets/images/engagments/zero-antibiotiques.svg') }}"
-                                    alt="Un poulet vert sur fond noir">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Un poulet vert sur fond noir') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/zero-antibiotiques.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Zéro antibiotique') }}</h3>
                                    <p class="card-text mt-0">{{ __('critique pour nos volailles') }}</p>
@ -284,8 +287,8 @@
                    <div class="col-6 col-md-3 pb-md-5 px-md-5 pb-md-0 px-3 pb-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/vegetaux.svg') }}"
-                                    alt="Une pouce végétale">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Une pouce végétale') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/vegetaux.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Extraits végétaux') }}</h3>
                                    <p class="card-text mt-0"></p>
@ -296,8 +299,8 @@
                    <div class="col-6 col-md-3 pb-md-5 px-md-5 pb-md-0 px-3 pb-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/algues.svg') }}"
-                                    alt="Des algues">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Des algues') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/algues.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Extraits d\'algues') }}</h3>
                                    <p class="card-text mt-0"></p>
@ -308,9 +311,8 @@
                    <div class="col-6 col-md-3 pb-md-5 px-md-5 pb-md-0 px-3 pb-4">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto"
-                                    src="{{ Vite::asset('resources/assets/images/engagments/probiotiques.svg') }}"
-                                    alt="Des micro-organismes">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Des micro-organismes') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/probiotiques.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Probiotiques') }}</h3>
                                    <p class="card-text mt-0"></p>
@ -334,11 +336,12 @@
                    <div class="col">
                        <div class="card-adn d-flex bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                            <div class="position-relative h-100 w-50 overflow-hidden">
-                                <img class="card-img-top object-cover-start w-100 h-100"
-                                    src="{{ Vite::asset('resources/assets/images/banner/header-engagments.jpg') }}"
-                                    alt="Un éleveur tenant une poule est assis dans un poulailler">
-                                <img class="position-absolute h-100 end-0 top-0"
-                                    src="{{ Vite::asset('resources/assets/images/sep-ysgi-md.svg') }}" alt="">
+                                <x-uwil-common::markup.img class="card-img-top"
+                                    alt="{{ __('Un éleveur tenant une poule est assis dans un poulailler') }}"
+                                    url="{{ Vite::asset('resources/assets/images/banner/header-engagments.jpg') }}" />
+                                <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0"
+                                    alt="{{ __('Bandeau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-ysgi-md.svg') }}" />
                                <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                    href="https://www.youtube.com/watch?v=hivV_9Z3b00" target="blank">
                                    <svg class="play-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
--- a/resources/views/fo/pages/engagments/francais.blade.php
+++ b/resources/views/fo/pages/engagments/francais.blade.php
@ -26,11 +26,10 @@
                <div class="col">
                    <div class="card-adn d-flex bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                        <div class="position-relative h-100 w-50 overflow-hidden">
-                            <img class="card-img-top object-cover-start w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/banner/header-engagments.jpg') }}"
-                                alt="{{ __('Image de prévisualisation de la vidéo') }}">
-                            <img class="position-absolute h-100 end-0 top-0" src="{{ Vite::asset('resources/assets/images/sep-ysgi-md.svg') }}"
-                                alt="{{ __('Séparation verticale') }}">
+                            <x-uwil-common::markup.img class="card-img-top" alt="{{ __('Image de prévisualisation de la vidéo') }}"
+                                url="{{ Vite::asset('resources/assets/images/banner/header-engagments.jpg') }}" />
+                            <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0" alt="{{ __('Séparation verticale') }}"
+                                url="{{ Vite::asset('resources/assets/images/sep-ysgi-md.svg') }}" />
                            <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                href="https://www.youtube.com/watch?v=hivV_9Z3b00" target="blank">
                                <svg class="play-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
@ -60,12 +59,11 @@
                <div class="col-12 col-md-6 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/engagments/champ-de-ble.jpg') }}"
-                                alt="Un champ de blé et une forêt en arrière plan">
+                            <x-uwil-common::markup.img alt="{{ __('Un champ de blé et une forêt en arrière plan') }}"
+                                url="{{ Vite::asset('resources/assets/images/engagments/champ-de-ble.jpg') }}" />
                            <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}"
-                                    alt="{{ __('Séparation verticale') }}">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Séparation verticale') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" />
                            </div>
                            <div class="sticker-engagments-wrapper position-absolute bottom-0">
                                <div class="sticker-engagments border-inox rounded-4 mb-md-5 mb-4 overflow-hidden">
@ -121,9 +119,8 @@
                    <div class="col-6 col-md-3 pb-md-0 pb-5">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto"
-                                    src="{{ Vite::asset('resources/assets/images/engagments/volaille-eleves-france.svg') }}"
-                                    alt="{{ __('Un coq et deux poussins') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Un coq et deux poussins') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/volaille-eleves-france.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('100% des volailles') }}</h3>
                                    <p class="card-text mt-0">{{ __('nées, élevées et préparées en France') }}</p>
@ -134,8 +131,9 @@
                    <div class="col-6 col-md-3 pb-md-0 pb-5">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/1ere-marque.svg') }}"
-                                    alt="{{ __('Une couronne de lauriers avec le libellé \'1er\'') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto"
+                                    alt="{{ __('Une couronne de lauriers avec le libellé \'1er\'') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/1ere-marque.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('1ère marque') }}</h3>
                                    <p class="card-text mt-0">{{ __('à produits français') }}</p>
@ -146,9 +144,8 @@
                    <div class="col-6 col-md-3 pb-md-0 pb-5">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto"
-                                    src="{{ Vite::asset('resources/assets/images/engagments/produits-prepares-france.svg') }}"
-                                    alt="{{ __('Un poulet roti') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Un poulet roti') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/produits-prepares-france.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('100% des produits') }}</h3>
                                    <p class="card-text mt-0">{{ __('bruts et élaborés') }}<br>{{ __('fabriqués en France') }}</p>
@ -159,9 +156,8 @@
                    <div class="col-6 col-md-3 pb-md-0 pb-5">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto"
-                                    src="{{ Vite::asset('resources/assets/images/engagments/present-territoire-francais.svg') }}"
-                                    alt="{{ __('Un logo de la France') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Un logo de la France') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/present-territoire-francais.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('100% présent') }}</h3>
                                    <p class="card-text mt-0">{{ __('sur le territoire français') }}</p>
@ -177,10 +173,10 @@
                <div class="col wrapper-xl my-4">
                    <div class="card-footer d-flex flex-column flex-md-row rounded-4 box-shadow mx-auto overflow-hidden">
                        <div class="engag-start breeder position-relative bg-default h-md-auto w-md-50 overflow-hidden">
-                            <img class="card-sep-desktop position-absolute top-md-0 end-md-0 h-100"
-                                src="{{ Vite::asset('resources/assets/images/sep-ysgi.png') }}" alt="{{ __('Séparation verticale') }}">
-                            <img class="card-sep-mobile position-absolute bottom-0 start-0"
-                                src="{{ Vite::asset('resources/assets/images/sep-xbgi.png') }}" alt="{{ __('Séparation horizontale') }}">
+                            <x-uwil-common::markup.img class="card-sep-desktop position-absolute top-md-0 end-md-0 h-100 w-100 text-end"
+                                alt="{{ __('Séparation verticale') }}" url="{{ Vite::asset('resources/assets/images/sep-ysgi.png') }}" />
+                            <x-uwil-common::markup.img class="card-sep-mobile position-absolute bottom-0 start-0"
+                                alt="{{ __('Séparation horizontale') }}" url="{{ Vite::asset('resources/assets/images/sep-xbgi.png') }}" />
                        </div>
                        <div
                            class="engag-end d-flex flex-column justify-content-md-center text-md-start bg-default w-md-50 p-md-5 p-3 text-center">
--- a/resources/views/fo/pages/engagments/respecterlaterre.blade.php
+++ b/resources/views/fo/pages/engagments/respecterlaterre.blade.php
@ -21,11 +21,11 @@
                <div class="col-12 col-md-6 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/engagments/empreinte-carbone.jpg') }}"
-                                alt="Vue du ciel dans une forêt">
+                            <x-uwil-common::markup.img alt="{{ __('Vue du ciel dans une forêt') }}"
+                                url="{{ Vite::asset('resources/assets/images/engagments/empreinte-carbone.jpg') }}" />
                            <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" alt="">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Bandeau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" />
                            </div>
                        </div>
                    </div>
@ -54,8 +54,8 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/distance.svg') }}"
-                                    alt="{{ __('Une borne kilométrique') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Une borne kilométrique') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/distance.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Réduction des distances') }}</h3>
                                    <p class="card-text mt-0">{{ __('de transport des animaux') }}</p>
@ -66,8 +66,8 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/flotte.svg') }}"
-                                    alt="{{ __('Un camion') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Un camion') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/flotte.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Amélioration de la flotte') }}</h3>
                                    <p class="card-text mt-0">{{ __('dédiée au ramassage') }}</p>
@ -78,8 +78,8 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/transport.svg') }}"
-                                    alt="{{ __('Une carte routière') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Une carte routière') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/transport.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Des boucles de transport vertueuses') }}</h3>
                                    <p class="card-text mt-0">{{ __('des produits') }}</p>
@ -90,8 +90,8 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/colisage.svg') }}"
-                                    alt="{{ __('Trois colis') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Trois colis') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/colisage.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Colisage optimisé') }}</h3>
                                    <p class="card-text mt-0">{{ __('avec des cartons pleins') }}</p>
@ -104,9 +104,8 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto"
-                                    src="{{ Vite::asset('resources/assets/images/engagments/fournisseurs.svg') }}"
-                                    alt="{{ __('Une personne avec une tresse') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Une personne avec une tresse') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/fournisseurs.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Fournisseurs locaux') }}</h3>
                                    <p class="card-text mt-0">{{ __('privilégiés') }}</p>
@ -117,9 +116,9 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto"
-                                    src="{{ Vite::asset('resources/assets/images/engagments/consommation.svg') }}"
-                                    alt="{{ __('Une prise électrique avec un pouce levé') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto"
+                                    alt="{{ __('Une prise électrique avec un pouce levé') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/consommation.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Basse consommation') }}</h3>
                                    <p class="card-text mt-0">{{ __('dans nos poulaillers') }}</p>
@ -136,10 +135,10 @@
                <div class="col wrapper-xl my-4">
                    <div class="card-footer d-flex flex-column flex-md-row rounded-4 box-shadow mx-auto overflow-hidden">
                        <div class="engag-start soja position-relative bg-default h-md-auto w-md-50 overflow-hidden">
-                            <img class="card-sep-desktop position-absolute top-md-0 end-md-0 h-100"
-                                src="{{ Vite::asset('resources/assets/images/sep-ysgi.png') }}" alt="{{ __('Séparation verticale') }}">
-                            <img class="card-sep-mobile position-absolute bottom-0 start-0"
-                                src="{{ Vite::asset('resources/assets/images/sep-xbgi.png') }}" alt="{{ __('Séparation horizontale') }}">
+                            <x-uwil-common::markup.img class="card-sep-desktop position-absolute top-md-0 end-md-0 h-100 w-100 text-end"
+                                alt="{{ __('Séparation verticale') }}" url="{{ Vite::asset('resources/assets/images/sep-ysgi.png') }}" />
+                            <x-uwil-common::markup.img class="card-sep-mobile position-absolute bottom-0 start-0"
+                                alt="{{ __('Séparation horizontale') }}" url="{{ Vite::asset('resources/assets/images/sep-xbgi.png') }}" />
                        </div>
                        <div
                            class="engag-end d-flex flex-column justify-content-md-center text-md-start bg-default w-md-50 p-md-5 p-3 text-center">
@ -161,12 +160,12 @@
                <div class="col-12 col-md-6 order-md-2 px-0">
                    <div class="w-100 h-100 ps-sm-7 ps-md-5 ps-lg-6 ps-xl-10 ps-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-none-top-left w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/engagments/emballages.jpg') }}"
-                                alt="{{ __('Un colis avec le logo de recyclage vert') }}">
+                            <x-uwil-common::markup.img class="object-none-top-left w-100 h-100"
+                                alt="{{ __('Un colis avec le logo de recyclage vert') }}"
+                                url="{{ Vite::asset('resources/assets/images/engagments/emballages.jpg') }}" />
                            <div class="separator reverse position-absolute h-100 start-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}"
-                                    alt="{{ __('Séparation verticale') }}">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Séparation verticale') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" />
                            </div>
                        </div>
                    </div>
@ -195,8 +194,8 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/reduction.svg') }}"
-                                    alt="{{ __('Deux tares de pesée') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Deux tares de pesée') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/reduction.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Réduction') }}</h3>
                                    <p class="card-text mt-0">{{ __('des épaisseurs, des dimensions et du poids des emballages') }}</p>
@ -207,9 +206,8 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto"
-                                    src="{{ Vite::asset('resources/assets/images/engagments/emballages.svg') }}"
-                                    alt="{{ __('Le logo de recyclage') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Le logo de recyclage') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/emballages.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('100% des emballages carton') }}</h3>
                                    <p class="card-text mt-0">{{ __('issus des cartons recyclés ou certifiés FSC Mixte') }}</p>
@ -220,8 +218,9 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/plastique.svg') }}"
-                                    alt="{{ __("Un sac plastique barré d'un panneau d'interdiction") }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto"
+                                    alt="{{ __("Un sac plastique barré d'un panneau d'interdiction") }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/plastique.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Moins de plastique') }}</h3>
                                    <p class="card-text mt-0"></p>
@ -232,9 +231,8 @@
                    <div class="col-6 col-md-3">
                        <div class="card-wrapper card-engag mx-auto">
                            <div class="card text-center">
-                                <img class="card-img-top mx-auto"
-                                    src="{{ Vite::asset('resources/assets/images/engagments/recyclabilite.svg') }}"
-                                    alt="{{ __('Un plan') }}">
+                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="{{ __('Un plan') }}"
+                                    url="{{ Vite::asset('resources/assets/images/engagments/recyclabilite.svg') }}" />
                                <div class="card-body d-flex flex-column mt-3">
                                    <h3 class="card-title h3 color-fourth mb-0">{{ __('Filière de recyclabilité') }}</h3>
                                    <p class="card-text mt-0">{{ __('Des barquettes de volaille Le Gaulois') }}</p>
--- a/resources/views/fo/pages/engagments/vivreensemble.blade.php
+++ b/resources/views/fo/pages/engagments/vivreensemble.blade.php
@ -20,11 +20,11 @@
                <div class="col-12 col-md-6 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/engagments/le-gaulois-engagement-sport.jpg') }}"
-                                alt="Une équipe de football féminine">
+                            <x-uwil-common::markup.img alt="{{ __('Une équipe de football mixte') }}"
+                                url="{{ Vite::asset('resources/assets/images/engagments/le-gaulois-engagement-sport.jpg') }}" />
                            <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" alt="">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Bandeau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" />
                            </div>
                            <div class="sticker-engagments-wrapper position-absolute bottom-0">
                                <div class="sticker-engagments border-inox rounded-4 mb-md-5 mb-4 overflow-hidden">
@ -67,9 +67,9 @@
                <div class="container">
                    <div class="row justify-content-center align-items-stretch pb-0">
                        <div class="col-12 col-md-5 d-flex justify-content-center">
-                            <img class="mx-auto" src="{{ Vite::asset('resources/assets/images/engagments/tour-de-france.jpg') }}"
-                                title="{{ __('Le Gaulois, Volaille Officielle du Tour de France') }}"
-                                alt="{{ __('Logo du Tour de France et celui de Le Gaulois') }}">
+                            <x-uwil-common::markup.img class="mx-auto" title="{{ __('Le Gaulois, Volaille Officielle du Tour de France') }}"
+                                alt="{{ __('Logo du Tour de France et celui de Le Gaulois') }}"
+                                url="{{ Vite::asset('resources/assets/images/engagments/tour-de-france.jpg') }}" />
                        </div>
                        <div
                            class="col-12 col-md-7 d-flex flex-column align-items-center mt-md-3 txt-col px-md-0 px-md-4 px-lg-6 px-xl-8 pt-4 text-center">
@ -91,12 +91,13 @@
            <div class="row align-items-md-stretch">
                <div class="col-12 order-md-2 col-md-6 px-0">
                    <div class="w-100 h-100 ps-sm-7 ps-md-5 ps-lg-6 ps-xl-10 ps-6">
-                        <div class="img-section position-relative d-flex justify-content-center align-items-center bg-ardoise w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/engagments/le-gaulois-engagement-mecenat.jpg') }}"
-                                alt="Deux enfants avec des tee-shirt ayant le logo de Mécénat Chirurgie Cardiaque jouant au docteur">
+                        <div class="img-section position-relative bg-ardoise w-100 h-100">
+                            <x-uwil-common::markup.img
+                                alt="{{ __('Deux enfants avec des tee-shirt ayant le logo de Mécénat Chirurgie Cardiaque jouant au docteur') }}"
+                                url="{{ Vite::asset('resources/assets/images/engagments/le-gaulois-engagement-mecenat.jpg') }}" />
                            <div class="separator reverse position-absolute h-100 start-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" alt="">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yegi.png') }}" />
                            </div>
                            <div class="sticker-engagments-wrapper reverse position-absolute end-50 bottom-0">
                                <div class="sticker-engagments border-inox rounded-4 mb-md-5 mb-4 overflow-hidden">
@ -138,11 +139,11 @@
                    <div class="col">
                        <div class="card-adn d-flex bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                            <div class="position-relative h-100 w-50 overflow-hidden">
-                                <img class="card-img-top object-cover-start w-100 h-100"
-                                    src="{{ Vite::asset('resources/assets/images/banner/header-engagments.jpg') }}"
-                                    alt="Un éleveur tenant une poule est assis dans un poulailler">
-                                <img class="position-absolute h-100 end-0 top-0"
-                                    src="{{ Vite::asset('resources/assets/images/sep-ysgi-md.svg') }}" alt="">
+                                <x-uwil-common::markup.img class="card-img-top object-cover-start w-100 h-100"
+                                    alt="{{ __('Un paysage de campagne') }}"
+                                    url="{{ Vite::asset('resources/assets/images/banner/header-engagments.jpg') }}" />
+                                <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0" alt="{{ __('Bandeau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-ysgi-md.svg') }}" />
                                <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                    href="https://www.youtube.com/watch?v=hivV_9Z3b00" target="blank">
                                    <svg class="play-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
--- a/resources/views/fo/pages/expertise/poulet.blade.php
+++ b/resources/views/fo/pages/expertise/poulet.blade.php
@ -232,11 +232,10 @@
                    <div class="col-12 col-xl-6 mb-4 px-0">
                        <div class="card-adn d-flex bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                            <div class="position-relative h-100 w-50 overflow-hidden">
-                                <img class="card-img-top object-cover-center w-100 h-100"
-                                    src="{{ Vite::asset('resources/assets/images/expertise/poulet-roti.jpg') }}"
-                                    alt="Un plat avec un poulet rôti">
-                                <img class="position-absolute h-100 end-0 top-0"
-                                    src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}">
+                                <x-uwil-common::markup.img class="card-img-top" alt="{{ __('Un plat avec un poulet rôti') }}"
+                                    url="{{ Vite::asset('resources/assets/images/expertise/poulet-roti.jpg') }}" />
+                                <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0"
+                                    url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                                @php
                                    $vipProductVideo = 'https://www.youtube.com/watch?v=cNTpFLDYUfM&t=75s';
                                @endphp
--- a/resources/views/fo/pages/home.blade.php
+++ b/resources/views/fo/pages/home.blade.php
@ -19,11 +19,10 @@
                                <!-- Slides -->
                                <div class="swiper-slide d-flex position-md-static">
                                    <div class="img-slide position-md-relative start-0 top-0">
-                                        <img class="object-cover-center h-100 w-100" src="{{ asset($slide->picture) }}"
-                                            alt="{{ $slide->picture_alt }}">
+                                        <x-uwil-common::markup.img alt="{{ $slide->picture_alt }}" url="{{ asset($slide->picture) }}" />
                                        <div class="img-sep d-none d-md-block position-absolute h-100 end-0 top-0 text-end">
-                                            <img class="mh-100" src="{{ Vite::asset('resources/assets/images/homepage/sep-hero.png') }}"
-                                                alt="">
+                                            <x-uwil-common::markup.img class="mh-100" alt="{{ __('Bandeau de séparation') }}"
+                                                url="{{ Vite::asset('resources/assets/images/homepage/sep-hero.png') }}" />
                                        </div>
                                    </div>
                                    <div
@ -46,7 +45,8 @@
                    </div>
                    <div class="swiper-options-wrapper d-flex position-absolute top-md-0 w-100 bottom-0 start-0">
                        <div class="shadow-img position-relative">
-                            <img class="w-100 h-100" src="{{ Vite::asset('resources/assets/images/homepage/shadow-img.png') }}" alt="">
+                            <x-uwil-common::markup.img class="w-100 h-100"
+                                url="{{ Vite::asset('resources/assets/images/homepage/shadow-img.png') }}" />
                            <div class="swiper-hero-progress-bar position-absolute d-none d-md-block bottom-0 start-0">
                                <span class="slide-hero-progress-bar"></span>
                            </div>
@ -56,14 +56,14 @@
                                @foreach ($slides as $slide)
                                    <div class="col-3 thumbnails-item position-relative d-flex align-items-end h-100 px-0">
                                        <div class="item-img h-100">
-                                            <img class="w-100 h-100 object-cover-center" src="{{ asset($slide->picture_thumbnail) }}"
-                                                alt="{{ $slide->picture_thumbnail_alt }}">
+                                            <x-uwil-common::markup.img class="w-100 h-100 object-cover-center"
+                                                title="{{ $slide->picture_thumbnail_alt }}" alt="{{ $slide->picture_thumbnail_alt }}"
+                                                url="{{ asset($slide->picture_thumbnail) }}" />
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
-                        {{-- <div class="shadow-txt position-relative d-none d-md-block py-6 px-5 py-sm-5 p-xl-5 w-md-35"></div> --}}
                    </div>
                </div>
            </div>
@ -76,7 +76,8 @@
                    <div class="col">
                        <div class="identy-text-wrapper paragraph-format position-relative mx-auto text-center">
                            <div class="logo-ne position-xl-absolute start-100 ms-xl-5 mx-auto mb-5">
-                                <img src="{{ Vite::asset('resources/assets/images/logo-ne.png') }}" alt="Logo Nature d'éleveurs">
+                                <x-uwil-common::markup.img title="{{ __('Nature d’éleveurs') }}" alt="{{ __('Logo Nature d’éleveurs') }}"
+                                    url="{{ Vite::asset('resources/assets/images/logo-ne.png') }}" />
                            </div>
                            <h1 class="h2">{{ __('Les solutions volailles 100% Françaises.') }}</h1>
                            <h2 class="h3">{{ __('Pourquoi choisir Le Gaulois Professionnel ?') }}</h2>
@ -89,9 +90,9 @@
                    <div class="col-12 col-lg-4 mt-lg-7 mb-lg-5 mt-6">
                        <div class="card-wrapper card-id rounded-4 box-shadow h-100 mx-lg-0 ms-lg-auto mx-auto">
                            <div class="card position-relative rounded-4 h-100 px-4 py-5">
-                                <img class="card-img-top position-absolute start-50 translate-middle top-0"
-                                    src="{{ Vite::asset('resources/assets/images/homepage/qualite-diversite-bleu.svg') }}"
-                                    alt="Une assiette et deux couverts">
+                                <x-uwil-common::markup.img class="card-img-top position-absolute start-50 translate-middle top-0"
+                                    alt="Une assiette et deux couverts"
+                                    url="{{ Vite::asset('resources/assets/images/homepage/qualite-diversite-bleu.svg') }}" />
                                <div class="card-body h-100 d-flex flex-column mt-4 text-center">
                                    <h3 class="card-title marged h3">{{ __('Pour la qualité et la diversité') }}</h3>
                                    <p class="card-text d-flex align-items-center">
@ -104,9 +105,9 @@
                    <div class="col-12 col-lg-4 mt-lg-7 mb-lg-5 mt-6">
                        <div class="card-wrapper card-id rounded-4 box-shadow h-100 mx-auto">
                            <div class="card position-relative rounded-4 h-100 px-4 py-5">
-                                <img class="card-img-top position-absolute start-50 translate-middle top-0"
-                                    src="{{ Vite::asset('resources/assets/images/homepage/volaillefrancaise-bleu.svg') }}"
-                                    alt="Dessin de la France">
+                                <x-uwil-common::markup.img class="card-img-top position-absolute start-50 translate-middle top-0"
+                                    alt="Dessin de la France"
+                                    url="{{ Vite::asset('resources/assets/images/homepage/volaillefrancaise-bleu.svg') }}" />
                                <div class="card-body h-100 d-flex flex-column mt-4 text-center">
                                    <h3 class="card-title marged h3">{{ __('Pour la garantie d\'une volaille 100% Française') }}</h3>
                                    <p class="card-text d-flex align-items-center">
@ -119,8 +120,8 @@
                    <div class="col-12 col-lg-4 mt-lg-7 mb-lg-5 mt-6">
                        <div class="card-wrapper card-id rounded-4 box-shadow h-100 mx-lg-0 me-lg-auto mx-auto">
                            <div class="card position-relative rounded-4 h-100 px-4 py-5">
-                                <img class="card-img-top position-absolute start-50 translate-middle top-0"
-                                    src="{{ Vite::asset('resources/assets/images/homepage/innovation.svg') }}" alt="Une ampoule">
+                                <x-uwil-common::markup.img class="card-img-top position-absolute start-50 translate-middle top-0"
+                                    alt="Une ampoule" url="{{ Vite::asset('resources/assets/images/homepage/innovation.svg') }}" />
                                <div class="card-body h-100 d-flex flex-column mt-4 text-center">
                                    <h3 class="card-title marged h3">{{ __('Pour l\'innovation') }}</h3>
                                    <p class="card-text d-flex align-items-center">
@ -161,9 +162,10 @@
                                                    </clipPath>
                                                </svg>
                                                <div class="card-img-wrapper position-relative rounded-4 overflow-hidden">
-                                                    <img class="card-img-top position-relative"
-                                                        src="{{ Vite::asset('resources/assets/images/homepage/slider-activity_04.jpg') }}"
-                                                        alt="Convives entrain de manger dans un restaurant">
+                                                    <x-uwil-common::markup.img class="card-img-top position-relative"
+                                                        title="{{ __('Convives entrain de manger dans un restaurant') }}"
+                                                        alt="{{ __('Convives entrain de manger dans un restaurant') }}"
+                                                        url="{{ Vite::asset('resources/assets/images/homepage/slider-activity_04.jpg') }}" />
                                                </div>
                                                <div
                                                    class="card-body position-absolute d-flex justify-content-center align-items-center w-100 bottom-0">
@ -182,9 +184,10 @@
                                                    </clipPath>
                                                </svg>
                                                <div class="card-img-wrapper position-relative rounded-4 overflow-hidden">
-                                                    <img class="card-img-top position-relative"
-                                                        src="{{ Vite::asset('resources/assets/images/homepage/slider-activity_01.jpg') }}"
-                                                        alt="Des professionnels en plein travail dans leur cuisine">
+                                                    <x-uwil-common::markup.img class="card-img-top position-relative"
+                                                        title="{{ __('Des professionnels en plein travail dans leur cuisine') }}"
+                                                        alt="{{ __('Des professionnels en plein travail dans leur cuisine') }}"
+                                                        url="{{ Vite::asset('resources/assets/images/homepage/slider-activity_01.jpg') }}" />
                                                </div>
                                                <div
                                                    class="card-body position-absolute d-flex justify-content-center align-items-center w-100 bottom-0">
@ -203,9 +206,10 @@
                                                    </clipPath>
                                                </svg>
                                                <div class="card-img-wrapper position-relative rounded-4 overflow-hidden">
-                                                    <img class="card-img-top position-relative"
-                                                        src="{{ Vite::asset('resources/assets/images/homepage/slider-activity_02.jpg') }}"
-                                                        alt="Un chef préparant une volaille à cuire">
+                                                    <x-uwil-common::markup.img class="card-img-top position-relative"
+                                                        title="{{ __('Un chef préparant une volaille à cuire') }}"
+                                                        alt="{{ __('Un chef préparant une volaille à cuire') }}"
+                                                        url="{{ Vite::asset('resources/assets/images/homepage/slider-activity_02.jpg') }}" />
                                                </div>
                                                <div
                                                    class="card-body position-absolute d-flex justify-content-center align-items-center w-100 bottom-0">
@ -224,9 +228,10 @@
                                                    </clipPath>
                                                </svg>
                                                <div class="card-img-wrapper position-relative rounded-4 overflow-hidden">
-                                                    <img class="card-img-top position-relative"
-                                                        src="{{ Vite::asset('resources/assets/images/homepage/slider-activity_03.jpg') }}"
-                                                        alt="Deux sandwishs bien garnis">
+                                                    <x-uwil-common::markup.img class="card-img-top position-relative"
+                                                        title="{{ __('Deux sandwishs bien garnis') }}"
+                                                        alt="{{ __('Deux sandwishs bien garnis') }}"
+                                                        url="{{ Vite::asset('resources/assets/images/homepage/slider-activity_03.jpg') }}" />
                                                </div>
                                                <div
                                                    class="card-body position-absolute d-flex justify-content-center align-items-center w-100 bottom-0">
@ -246,9 +251,9 @@
                                                </clipPath>
                                            </svg>
                                            <div class="card-img-wrapper position-relative rounded-4 overflow-hidden">
-                                                <img class="card-img-top position-relative"
-                                                    src="{{ Vite::asset('resources/assets/images/homepage/slider-activity_05.jpg') }}"
-                                                    alt="Des boîtes de conserve">
+                                                <x-uwil-common::markup.img class="card-img-top position-relative"
+                                                    title="{{ __('Des boîtes de conserve') }}" alt="{{ __('Des boîtes de conserve') }}"
+                                                    url="{{ Vite::asset('resources/assets/images/homepage/slider-activity_05.jpg') }}" />
                                            </div>
                                            <div
                                                class="card-body position-absolute d-flex justify-content-center align-items-center w-100 bottom-0">
@ -327,8 +332,10 @@
                            <div class="card card-simple position-relative rounded-4 box-shadow mx-auto overflow-hidden">
                                <a href="{{ route('fo.product.show', ['publishedProduct' => $product]) }}">
                                    <div class="card-img-wrapper position-relative">
-                                        <img class="card-img-top position-relative" src="{{ asset($product->sticker_sm) }}"
-                                            alt="{{ $product->sticker_sm_alt }}">
+                                        <x-uwil-common::markup.img class="card-img-top position-relative"
+                                            title="{{ $product->sticker_sm_alt }}" alt="{{ $product->sticker_sm_alt }}"
+                                            url="{{ asset($product->sticker_sm) }}" />
+
                                        @include('fo.modules.separator', [
                                            'forcedColor' => $product->subrange->range->color,
                                            'vertical' => false,
@ -359,9 +366,10 @@
        <section class="section-engagments bg-ardoise-radial mt-5 pb-5">
            <div class="row indicators-wrapper position-relative">
                <div class="img-wrapper px-0">
-                    <img class="position-relative start-50 top-50 translate-middle w-xxl-100"
-                        src="{{ Vite::asset('resources/assets/images/homepage/engagment-home.png') }}"
-                        alt="Des convives qui mangent dans un restaurant">
+                    <x-uwil-common::markup.img class="position-relative end-100 end-md-0 w-xxl-100"
+                        title="{{ __('Des convives qui mangent dans un restaurant') }}"
+                        alt="{{ __('Des convives qui mangent dans un restaurant') }}"
+                        url="{{ Vite::asset('resources/assets/images/homepage/engagment-home.png') }}" />
                    <div class="row position-absolute me-md-5 end-0 top-0 me-2 ms-4">
                        <div class="col">
                            <p class="ff-poppins-regular fs-footer-small text-end">
@ -459,9 +467,8 @@
                                    <div class="swiper-slide">
                                        <div class="card-wrapper card-engag w-75 h-100 mx-auto">
                                            <div class="card h-100 text-center">
-                                                <img class="card-img-top mx-auto"
-                                                    src="{{ Vite::asset('resources/assets/images/homepage/100-francais.svg') }}"
-                                                    alt="Dessin de la France">
+                                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="Dessin de la France"
+                                                    url="{{ Vite::asset('resources/assets/images/homepage/100-francais.svg') }}" />
                                                <div class="card-body h-100 d-flex flex-column mt-4">
                                                    <h3 class="card-title d-flex justify-content-center align-items-center h3">
                                                        {{ __('Etre la grande marque alimentaire 100% Française dédiée aux Professionnels') }}
@ -476,9 +483,8 @@
                                    <div class="swiper-slide">
                                        <div class="card-wrapper card-engag w-75 h-100 mx-auto">
                                            <div class="card h-100 text-center">
-                                                <img class="card-img-top mx-auto"
-                                                    src="{{ Vite::asset('resources/assets/images/homepage/elever-durablement.svg') }}"
-                                                    alt="Un coq et deux poussins">
+                                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="Un coq et deux poussins"
+                                                    url="{{ Vite::asset('resources/assets/images/homepage/elever-durablement.svg') }}" />
                                                <div class="card-body h-100 d-flex flex-column mt-4">
                                                    <h3 class="card-title d-flex justify-content-center align-items-center h3">
                                                        {{ __('Élever durablement en respectant les Hommes, les animaux et la Nature') }}
@ -493,9 +499,8 @@
                                    <div class="swiper-slide">
                                        <div class="card-wrapper card-engag w-75 h-100 mx-auto">
                                            <div class="card h-100 text-center">
-                                                <img class="card-img-top mx-auto"
-                                                    src="{{ Vite::asset('resources/assets/images/homepage/bien-nourrir.svg') }}"
-                                                    alt="Une assiette et deux couverts">
+                                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="Une assiette et deux couverts"
+                                                    url="{{ Vite::asset('resources/assets/images/homepage/bien-nourrir.svg') }}" />
                                                <div class="card-body h-100 d-flex flex-column mt-4">
                                                    <h3 class="card-title d-flex justify-content-center align-items-center h3">
                                                        {{ __('Bien nourrir tous les Français') }}</h3>
@ -510,9 +515,8 @@
                                    <div class="swiper-slide">
                                        <div class="card-wrapper card-engag w-75 h-100 mx-auto">
                                            <div class="card h-100 text-center">
-                                                <img class="card-img-top mx-auto"
-                                                    src="{{ Vite::asset('resources/assets/images/homepage/respecter-terre.svg') }}"
-                                                    alt="Une main portant un semis">
+                                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="Une main portant un semis"
+                                                    url="{{ Vite::asset('resources/assets/images/homepage/respecter-terre.svg') }}" />
                                                <div class="card-body h-100 d-flex flex-column mt-4">
                                                    <h3 class="card-title d-flex justify-content-center align-items-center h3">
                                                        {{ __('Favoriser le mieux vivre ensemble') }}</h3>
@ -526,9 +530,8 @@
                                    <div class="swiper-slide">
                                        <div class="card-wrapper card-engag w-75 h-100 mx-auto">
                                            <div class="card h-100 text-center">
-                                                <img class="card-img-top mx-auto"
-                                                    src="{{ Vite::asset('resources/assets/images/homepage/mieux-vivre.svg') }}"
-                                                    alt="Deux mains qui vont se rejoindre">
+                                                <x-uwil-common::markup.img class="card-img-top mx-auto" alt="Deux mains qui vont se rejoindre"
+                                                    url="{{ Vite::asset('resources/assets/images/homepage/mieux-vivre.svg') }}" />
                                                <div class="card-body h-100 d-flex flex-column mt-4">
                                                    <h3 class="card-title d-flex justify-content-center align-items-center h3">
                                                        {{ __('Respecter la Terre') }}</h3>
@ -564,11 +567,13 @@
            <div class="row bg-txt">
                <div class="col-12 col-lg-4 col-xl-5 px-0">
                    <div class="img-wrapper position-relative w-lg-100">
-                        <img class="w-100 h-100 object-cover-center"
-                            src="{{ Vite::asset('resources/assets/images/homepage/tricks-chef.png') }}"
-                            alt="Un chef dressant le plat qu'il vient de cuisiner">
-                        <img class="position-absolute w-45" src="{{ Vite::asset('resources/assets/images/assiette-detourage.png') }}"
-                            alt="Assiette de suprême de canette cuit">
+                        <x-uwil-common::markup.img class="w-100 h-100 object-cover-center"
+                            title="{{ __('Un chef dressant le plat qu’il vient de cuisiner') }}"
+                            alt="{{ __('Un chef dressant le plat qu’il vient de cuisiner') }}"
+                            url="{{ Vite::asset('resources/assets/images/homepage/tricks-chef.png') }}" />
+                        <x-uwil-common::markup.img class="position-absolute w-45" title="{{ __('Assiette de suprême de canette cuit') }}"
+                            alt="{{ __('Assiette de suprême de canette cuit') }}"
+                            url="{{ Vite::asset('resources/assets/images/assiette-detourage.png') }}" />
                    </div>
                </div>
                <div
--- a/resources/views/fo/pages/ideas/ideas.blade.php
+++ b/resources/views/fo/pages/ideas/ideas.blade.php
@ -21,15 +21,15 @@
                <div class="col-12 col-md-6 pb-md-0 px-0 pb-6">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/ideas/amandine-chaignot_debout.jpg') }}"
-                                alt="Un cuisinier avec un tablier bleu">
+                            <x-uwil-common::markup.img alt="{{ __('Amandine Chaignot posant debout dans un restaurant') }}"
+                                url="{{ Vite::asset('resources/assets/images/ideas/amandine-chaignot_debout.jpg') }}" />
                            <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/sep-yebi.png') }}" alt="">
-                                <img class="img-block position-absolute translate-middle-x mw-none h-40"
-                                    src="{{ Vite::asset('resources/assets/images/assiette-detourage.png') }}"
-                                    alt="Assiette de suprême de canette cuit">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Bandeau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-yebi.png') }}" />
                            </div>
+                            <x-uwil-common::markup.img class="img-block position-absolute start-100 translate-middle-x mw-none w-40"
+                                alt="{{ __('Assiette de suprême de canette cuit') }}"
+                                url="{{ Vite::asset('resources/assets/images/assiette-detourage.png') }}" />
                        </div>
                    </div>
                </div>
@ -58,11 +58,11 @@
                <div class="col-12 col-xl-6 my-4">
                    <div class="card-adn d-flex bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                        <div class="position-relative h-100 w-45 overflow-hidden">
-                            <img class="card-img-top object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/ideas/cheffe-astuces.jpg') }}"
-                                alt="Un chef dressant le plat qu'il vient de cuisiner">
-                            <img class="position-absolute h-100 end-0 top-0" src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}"
-                                alt="">
+                            <x-uwil-common::markup.img class="card-img-top object-cover-center w-100 h-100"
+                                alt="{{ __('Amandine Chaignot posant assise avec un verre') }}"
+                                url="{{ Vite::asset('resources/assets/images/ideas/cheffe-astuces.jpg') }}" />
+                            <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0" alt="{{ __('Bandeau de séparation') }}"
+                                url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                        </div>
                        <div class="row align-items-center w-55 p-md-3 p-2">
                            <h3 class="card-title h3 m-0">Les Astuces Volaille d'Amandine Chaignot</h3>
@ -77,11 +77,11 @@
                <div class="col-12 col-xl-6 my-4">
                    <div class="card-adn d-flex bg-default rounded-4 box-shadow mx-auto overflow-hidden">
                        <div class="position-relative h-100 w-45 overflow-hidden">
-                            <img class="card-img-top object-cover-center w-100 h-100"
-                                src="{{ Vite::asset('resources/assets/images/assiette-recettes.jpg') }}"
-                                alt="Un cuisinier dresse un plat de volaille">
-                            <img class="position-absolute h-100 end-0 top-0" src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}"
-                                alt="">
+                            <x-uwil-common::markup.img class="card-img-top object-cover-center w-100 h-100"
+                                alt="{{ __('Un cuisinier dresse un plat de volaille') }}"
+                                url="{{ Vite::asset('resources/assets/images/assiette-recettes.jpg') }}" />
+                            <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0" alt="{{ __('Bandeau de séparation') }}"
+                                url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                        </div>
                        <div class="row align-items-center w-55 p-md-3 p-2">
                            <h3 class="card-title h3 m-0">Les Recettes Volaille d'Amandine Chaignot</h3>
--- a/resources/views/fo/pages/ideas/modelCard.blade.php
+++ b/resources/views/fo/pages/ideas/modelCard.blade.php
@ -1,9 +1,10 @@
 {{-- Generic Card --}}
@php $type = $type ?? 'recipe'; @endphp
 <div class="card card-posts position-relative bg-default box-shadow rounded-4 align-items-center mx-2 my-3 overflow-hidden p-0 text-center">
-    <a href="{{ $route }}" class="w-100">
+    <a class="w-100" href="{{ $route }}">
        <div class="card-img-wrapper position-relative w-100 h-100">
-            <img class="card-img-top position-relative" src="{{ asset($picture) }}" title="{{ $picture_title }}" alt="{{ $picture_alt }}">
+            <x-uwil-common::markup.img class="card-img-top position-relative" title="{{ $picture_title }}" alt="{{ $picture_alt }}"
+                url="{{ asset($picture) }}" />
            @include('fo.modules.separator', ['color' => $color])
        </div>
        <div class="card-body w-100 px-3 pb-2 pt-3">
@ -18,7 +19,8 @@
                <div class="row text-center">
                    @if ($time)
                        <div class="col d-flex justify-content-center align-items-center w-50">
-                            <img src="{{ Vite::asset('resources/assets/images/temps.png') }}" alt="Une horloge">
+                            <x-uwil-common::markup.img title="{{ __('Temps de préparation et de cuisson') }}" alt="{{ __('Une horloge') }}"
+                                url="{{ Vite::asset('resources/assets/images/temps.png') }}" />
                            <p class="ms-3 text-center">{{ $time }} min</p>
                        </div>
                    @endif
@ -26,20 +28,23 @@
                        <div class="col d-flex justify-content-center align-items-center w-50">
                            @switch($difficulty)
                                @case(\App\Enums\Advices\AdviceDifficultyEnum::easy)
-                                    <img src="{{ Vite::asset('resources/assets/images/toque-sm.png') }}"
-                                        alt="{{ __('Difficulté facile repésenté par un toque') }}">
+                                    <x-uwil-common::markup.img title="{{ __('Facile') }}"
+                                        alt="{{ __('Difficulté facile repésenté par un toque') }}"
+                                        url="{{ Vite::asset('resources/assets/images/toque-sm.png') }}" />
                                    <p class="ms-3">{{ __('Facile') }}</p>
                                @break

                                @case(\App\Enums\Advices\AdviceDifficultyEnum::medium)
-                                    <img src="{{ Vite::asset('resources/assets/images/toque-md.png') }}"
-                                        alt="{{ __('Difficulté médium repésenté par deux toques') }}">
+                                    <x-uwil-common::markup.img title="{{ __('Médium') }}"
+                                        alt="{{ __('Difficulté médium repésenté par deux toques') }}"
+                                        url="{{ Vite::asset('resources/assets/images/toque-md.png') }}" />
                                    <p class="ms-3">{{ __('Médium') }}</p>
                                @break

                                @case(\App\Enums\Advices\AdviceDifficultyEnum::hard)
-                                    <img src="{{ Vite::asset('resources/assets/images/toque-xl.png') }}"
-                                        alt="{{ __('Difficulté difficile repésenté par trois toques') }}">
+                                    <x-uwil-common::markup.img title="{{ __('Difficile') }}"
+                                        alt="{{ __('Difficulté difficile repésenté par trois toques') }}"
+                                        url="{{ Vite::asset('resources/assets/images/toque-xl.png') }}" />
                                    <p class="ms-3">{{ __('Difficile') }}</p>
                                @break
                            @endswitch
--- a/resources/views/fo/pages/ideas/recipe.blade.php
+++ b/resources/views/fo/pages/ideas/recipe.blade.php
@ -6,8 +6,7 @@
@section('canonical', route('fo.recipes.show', ['publishedAdvice' => $recipe]))
@section('ogPicture', asset($recipe->picture))

-@section('breadcrumb',
-    request()->route()->getName())
+@section('breadcrumb', request()->route()->getName())

@section('content')
    <div class="container-fluid d-flex flex-column align-items-center position-relative px-0">
@ -16,7 +15,7 @@
                <div class="col-12 col-md-6 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-10 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100" src="{{ asset($recipe->picture) }}" alt="{{ $recipe->picture_alt }}">
+                            <x-uwil-common::markup.img alt="{{ $recipe->picture_alt }}" url="{{ asset($recipe->picture) }}" />
                            <svg class="separator separator-blue position-absolute h-100 end-0 top-0" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 61.51 611.86">
                                <defs>
@ -84,7 +83,8 @@
                        @if ($recipe->preparation_time)
                            <div class="col-12 col-md-6 mb-md-4">
                                <p class="d-inline-block ms-3">
-                                    <img class="pe-3" src="{{ Vite::asset('resources/assets/images/temps.png') }}" alt="Une horloge">
+                                    <x-uwil-common::markup.img class="pe-3" alt="{{ __('Une horloge') }}"
+                                        url="{{ Vite::asset('resources/assets/images/temps.png') }}" />
                                    Temps de préparation&nbsp;: {{ $recipe->preparation_time }}min
                                </p>
                            </div>
@ -92,8 +92,8 @@
                        @if ($recipe->difficulty)
                            <div class="col-12 col-md-6">
                                <p class="d-inline-block ms-3">
-                                    <img class="pe-3" src="{{ Vite::asset('resources/assets/images/toque-xl.png') }}"
-                                        alt="Une toque de cuisinier">
+                                    <x-uwil-common::markup.img class="pe-3" alt="{{ __('Une toque de cuisinier') }}"
+                                        url="{{ Vite::asset('resources/assets/images/toque-xl.png') }}" />
                                    Niveau&nbsp;: {{ $recipe->difficulty->label() }}
                                </p>
                            </div>
@ -101,7 +101,8 @@
                        @if ($recipe->cooking_time)
                            <div class="col-12 col-md-6 mb-5">
                                <p class="d-inline-block ms-3">
-                                    <img class="pe-3" src="{{ Vite::asset('resources/assets/images/preparation.png') }}" alt="Une poele">
+                                    <x-uwil-common::markup.img class="pe-3" alt="{{ __('Une poele') }}"
+                                        url="{{ Vite::asset('resources/assets/images/preparation.png') }}" />
                                    Temps de cuisson&nbsp;: {{ $recipe->cooking_time }}min
                                </p>
                            </div>
@ -110,10 +111,11 @@
                        @if ($recipe->youtube_video_id)
                            <div class="card-adn-recipe d-flex bg-default rounded-4 box-shadow mx-md-0 mx-auto overflow-hidden px-0">
                                <div class="position-relative h-100 w-50 overflow-hidden">
-                                    <img class="card-img-top object-cover-center w-100 h-100" src="{{ asset($recipe->sticker_sm) }}"
-                                        alt="{{ $recipe->sticker_sm_alt }}">
-                                    <img class="position-absolute h-100 end-0 top-0"
-                                        src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" alt="">
+                                    <x-uwil-common::markup.img class="card-img-top" alt="{{ $recipe->sticker_sm_alt }}"
+                                        url="{{ asset($recipe->sticker_sm) }}" />
+                                    <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0"
+                                        alt="{{ __('Bandeau de séparation') }}"
+                                        url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                                    <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                        href="https://www.youtube.com/watch?v={{ $recipe->youtube_video_id }}" target="blank">
                                        <svg class="play-btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
@ -148,7 +150,8 @@
                    {!! clean($recipe->preparation) !!}
                    @if ($recipe->advice)
                        <div class="d-flex align-items-center mb-4">
-                            <img src="{{ Vite::asset('resources/assets/images/toque.png') }}" alt="Une toque de cuisinier">
+                            <x-uwil-common::markup.img alt="{{ __('Une toque de cuisinier') }}"
+                                url="{{ Vite::asset('resources/assets/images/toque.png') }}" />
                            <h2 class="h2 color-second m-0 ms-3">{{ __('Le conseil Le Gaulois Professionnel') }}</h2>
                        </div>
                        {!! clean($recipe->advice) !!}
@ -163,8 +166,8 @@
                    <div
                        class="card-prod-recipe d-flex bg-default rounded-4 box-shadow position-md-sticky mx-md-0 top-0 mx-auto mb-4 overflow-hidden px-0">
                        <div class="position-relative h-100 w-60 overflow-hidden">
-                            <img class="card-img-top object-cover-center w-100 h-100" src="{{ asset($product->sticker_sm) }}"
-                                title="{{ $product->sticker_sm_title }}" alt="{{ $product->sticker_sm_alt }}">
+                            <x-uwil-common::markup.img class="card-img-top" title="{{ $product->sticker_sm_title }}"
+                                alt="{{ $product->sticker_sm_alt }}" url="{{ asset($product->sticker_sm) }}" />
                            {{-- FIXME: remplacer par le module de séparation --}}
                            <svg class="separator-blue position-absolute h-100 end-0 top-0" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 33.49 282.11">
@ -263,11 +266,12 @@
                        @if ($firstTip)
                            <div class="card-adn d-flex bg-default rounded-4 box-shadow mx-auto mb-4 overflow-hidden">
                                <div class="position-relative h-100 w-45 overflow-hidden">
-                                    <img class="card-img-top object-cover-center w-100 h-100" src="{{ asset($firstTip->sticker) }}"
-                                        alt="{{ asset($firstTip->sticker_alt) }}" alt="{{ asset($firstTip->sticker_title) }}">
+                                    <x-uwil-common::markup.img class="card-img-top" title="{{ asset($firstTip->sticker_title) }}"
+                                        alt="{{ asset($firstTip->sticker_alt) }}" url="{{ asset($firstTip->sticker) }}" />
                                    {{-- FIXME: Refactoriser les séparateurs en un fichier svg au lieux des blade et utiliser une classe pour la couleur --}}
-                                    <img class="position-absolute h-100 end-0 top-0"
-                                        src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" alt="">
+                                    <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0"
+                                        alt="{{ __('Bandeau de séparation') }}"
+                                        url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                                    <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                        href="https://www.youtube.com/watch?v={{ $firstTip->youtube_video_id }}" target="blank">
                                        @include('fo.modules.svgs.play')
@ -290,10 +294,11 @@
                            @foreach ($relatedTips as $tip)
                                <div class="card-adn card-adn-sm d-flex bg-default rounded-4 box-shadow mx-auto mb-4 overflow-hidden">
                                    <div class="position-relative h-100 w-45 overflow-hidden">
-                                        <img class="card-img-top object-cover-center w-100 h-100" src="{{ asset($tip->sticker_sm) }}"
-                                            alt="{{ asset($tip->sticker_sm_alt) }}" alt="{{ asset($tip->sticker_sm_title) }}">
-                                        <img class="position-absolute h-100 end-0 top-0"
-                                            src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" alt="">
+                                        <x-uwil-common::markup.img class="card-img-top" title="{{ asset($tip->sticker_sm_title) }}"
+                                            alt="{{ asset($tip->sticker_sm_alt) }}" url="{{ asset($tip->sticker_sm) }}" />
+                                        <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0"
+                                            alt="{{ __('Bandeau de séparation') }}"
+                                            url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                                        <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                            href="https://www.youtube.com/watch?v={{ $tip->youtube_video_id }}" target="blank">
                                            @include('fo.modules.svgs.play')
--- a/resources/views/fo/pages/ideas/recipes.blade.php
+++ b/resources/views/fo/pages/ideas/recipes.blade.php
@ -40,7 +40,8 @@
                @endforeach
            </select>
            <button class="search-wrapper border-0 bg-transparent p-2" type="submit">
-                <img src="{{ Vite::asset('resources/assets/images/recherche.png') }}" alt="Une loupe blanche">
+                <x-uwil-common::markup.img title="{{ __('Rechercher') }}" alt="{{ __('Une loupe blanche') }}"
+                    url="{{ Vite::asset('resources/assets/images/recherche.png') }}" />
            </button>
        </form>
        <section class="recipe-wrapper @if (count($recipes) > 0) bg-ardoise-radial @endif py-5">
--- a/resources/views/fo/pages/ideas/tip.blade.php
+++ b/resources/views/fo/pages/ideas/tip.blade.php
@ -6,10 +6,9 @@
@section('canonical', route('fo.tips.show', $adviceModel))
@section('ogPicture', asset($adviceModel->picture))

-@section('breadcrumb',
-    request()->route()->getName())
+@section('breadcrumb', request()->route()->getName())

-    {{-- FIXME: Microdata ex from LG implement for recipies --}}
+{{-- FIXME: Microdata ex from LG implement for recipies --}}
@section('microdata')
    {{-- <script type="application/ld+json">
    {
@ -46,8 +45,8 @@
                <div class="col-12 col-md-6 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-10 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100" src="{{ asset($adviceModel->picture) }}"
-                                title="{{ $adviceModel->picture_title }}" alt="{{ $adviceModel->picture_alt }}">
+                            <x-uwil-common::markup.img title="{{ $adviceModel->picture_title }}" alt="{{ $adviceModel->picture_alt }}"
+                                url="{{ asset($adviceModel->picture) }}" />
                            @include('fo.modules.separator', ['color' => 'blue', 'vertical' => true])
                        </div>
                    </div>
@ -103,11 +102,11 @@
                        @if ($adviceModel->youtube_video_id)
                            <div class="card-adn-recipe d-flex bg-default rounded-4 box-shadow mx-md-0 mx-auto overflow-hidden px-0">
                                <div class="position-relative h-100 w-50 overflow-hidden">
-                                    <img class="card-img-top object-cover-center w-100 h-100"
-                                        src="{{ "https://i3.ytimg.com/vi/{$adviceModel->youtube_video_id}/hqdefault.jpg" }}"
-                                        alt="{{ __('Vidéo Youtube') }}">
-                                    <img class="position-absolute h-100 end-0 top-0"
-                                        src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" alt="">
+                                    <x-uwil-common::markup.img class="card-img-top" alt="{{ __('Vidéo Youtube') }}"
+                                        url='{{ "https://i3.ytimg.com/vi/{$adviceModel->youtube_video_id}/hqdefault.jpg" }}' />
+                                    <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0"
+                                        alt="{{ __('Bandeau de séparation') }}"
+                                        url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                                    <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                        href="https://www.youtube.com/watch?v={{ $adviceModel->youtube_video_id }}" target="blank">
                                        @include('fo.modules.svgs.play')
@ -138,7 +137,8 @@
                    <div class="recipe-steps ck-content mb-5 ps-5">{!! clean($adviceModel->preparation) !!}</div>
                    @if ($adviceModel->advice)
                        <div class="d-flex align-items-center mb-4">
-                            <img src="{{ Vite::asset('resources/assets/images/toque.png') }}" alt="{{ __('Une toque de cuisinier') }}">
+                            <x-uwil-common::markup.img alt="{{ __('Une toque de cuisinier') }}"
+                                url="{{ Vite::asset('resources/assets/images/toque.png') }}" />
                            <h2 class="h2 color-second m-0 ms-3">{{ __('Le conseil Le Gaulois Professionnel') }}</h2>
                        </div>
                        <div class="ck-content">{!! clean($adviceModel->advice) !!}</div>
@ -205,12 +205,11 @@
                    @if ($firstTip)
                        <div class="card-adn d-flex bg-default rounded-4 box-shadow mx-auto mb-4 overflow-hidden">
                            <div class="position-relative h-100 w-45 overflow-hidden">
-                                <img class="card-img-top object-cover-center w-100 h-100"
-                                    src="{{ asset(resize($firstTip->sticker, 'tipsBigCard')) }}" alt="{{ asset($firstTip->sticker_alt) }}"
-                                    alt="{{ asset($firstTip->sticker_title) }}">
+                                <x-uwil-common::markup.img class="card-img-top" title="{{ asset($firstTip->sticker_title) }}"
+                                    alt="{{ asset($firstTip->sticker_alt) }}" url="{{ asset(resize($firstTip->sticker, 'tipsBigCard')) }}" />
                                {{-- FIXME: Refactoriser les séparateurs en un fichier svg au lieux des blade et utiliser une classe pour la couleur --}}
-                                <img class="position-absolute h-100 end-0 top-0"
-                                    src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" alt="">
+                                <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0" alt="{{ __('Bandeau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                                <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                    href="https://www.youtube.com/watch?v={{ $firstTip->youtube_video_id }}" target="blank">
                                    @include('fo.modules.svgs.play')
@ -233,11 +232,11 @@
                        @foreach ($associatedTips as $tip)
                            <div class="card-adn card-adn-sm d-flex bg-default rounded-4 box-shadow mx-auto mb-4 overflow-hidden">
                                <div class="position-relative h-100 w-45 overflow-hidden">
-                                    <img class="card-img-top object-cover-center w-100 h-100"
-                                        src="{{ asset(resize($tip->sticker_sm, 'tipsSmallCard')) }}" alt="{{ asset($tip->sticker_sm_alt) }}"
-                                        alt="{{ asset($tip->sticker_sm_title) }}">
-                                    <img class="position-absolute h-100 end-0 top-0"
-                                        src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" alt="">
+                                    <x-uwil-common::markup.img class="card-img-top" alt="{{ asset($tip->sticker_sm_alt) }}"
+                                        url="{{ asset(resize($tip->sticker_sm, 'tipsSmallCard')) }}" />
+                                    <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0"
+                                        alt="{{ __('Bandeau de séparation') }}"
+                                        url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                                    <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                        href="https://www.youtube.com/watch?v={{ $tip->youtube_video_id }}" target="blank">
                                        @include('fo.modules.svgs.play')
--- a/resources/views/fo/pages/news/index.blade.php
+++ b/resources/views/fo/pages/news/index.blade.php
@ -48,7 +48,8 @@
            @endforeach
    </div>
    <button class="search-wrapper border-0 bg-transparent px-5 pb-3" type="submit">
-        <img src="{{ Vite::asset('resources/assets/images/recherche.png') }}" alt="{{ __('Une loupe blanche') }}">
+        <x-uwil-common::markup.img title="{{ __('Rechercher') }}" alt="{{ __('Une loupe blanche') }}"
+            url="{{ Vite::asset('resources/assets/images/recherche.png') }}" />
    </button>
    </form>
    {{-- CONTENT WITH CARDS --}}
@ -62,7 +63,8 @@
                    <div class="col p-md-3 pb-5">
                        <div class="card card-posts position-relative bg-default box-shadow rounded-4 mx-auto overflow-hidden text-center">
                            <div class="card-img-wrapper position-relative">
-                                <img class="card-img-top position-relative" src="{{ asset($item->picture) }}" alt="{{ $item->picture_alt }}">
+                                <x-uwil-common::markup.img class="card-img-top position-relative" alt="{{ $item->picture_alt }}"
+                                    url="{{ asset($item->picture) }}" />
                                @include('fo.modules.separator', ['color' => 'blue'])
                            </div>
                            <div class="card-body w-100 py-3">
@ -106,8 +108,8 @@
                                            <div
                                                class="card card-posts position-relative bg-default box-shadow rounded-4 mx-auto overflow-hidden text-center">
                                                <div class="card-img-wrapper position-relative">
-                                                    <img class="card-img-top position-relative" src="{{ asset($item->picture) }}"
-                                                        alt="{{ $item->picture_alt }}">
+                                                    <x-uwil-common::markup.img class="card-img-top position-relative"
+                                                        alt="{{ $item->picture_alt }}" url="{{ asset($item->picture) }}" />
                                                    @include('fo.modules.separator', ['color' => 'blue'])
                                                </div>
                                                <div class="card-body w-100 pb-2 pt-3">
--- a/resources/views/fo/pages/news/post.blade.php
+++ b/resources/views/fo/pages/news/post.blade.php
@ -6,8 +6,7 @@
@section('canonical', route('fo.news.show', ['actu' => $news->slug]))
@section('ogPicture', asset($news->picture))

-@section('breadcrumb',
-    request()->route()->getName())
+@section('breadcrumb', request()->route()->getName())

@section('content')
    <div class="container-fluid d-flex flex-column align-items-center position-relative px-0">
@ -32,19 +31,22 @@
            <div class="row">
                <div class="col-12 col-md-4 col-lg-3 d-flex justify-content-center">
                    <p class="d-inline-block">
-                        <img class="pe-1" src="{{ Vite::asset('resources/assets/images/calendrier-article.png') }}" alt="Un calendrier">
+                        <x-uwil-common::markup.img class="pe-1" alt="{{ __('Un calendrier') }}"
+                            url="{{ Vite::asset('resources/assets/images/calendrier-article.png') }}" />
                        {{ __('Publié le : ') }}{{ \Carbon\Carbon::parse($news->event_start)->locale('fr_FR')->isoFormat('D MMM Y') }}
                    </p>
                </div>
                <div class="col-12 col-md-4 col-lg-3 d-flex justify-content-center">
                    <p class="d-inline-block">
-                        <img class="pe-1" src="{{ Vite::asset('resources/assets/images/temps.png') }}" alt="Une horloge">
+                        <x-uwil-common::markup.img class="pe-1" alt="{{ __('Une horloge') }}"
+                            url="{{ Vite::asset('resources/assets/images/temps.png') }}" />
                        {{ __('Temps de lecture : ') }}{{ $readingTime }}
                    </p>
                </div>
                <div class="col-12 col-md-4 col-lg-3 d-flex justify-content-center">
                    <button class="d-inline-block btn-printing border-0 bg-transparent text-white" role="button">
-                        <img class="pe-1" src="{{ Vite::asset('resources/assets/images/impression.png') }}" alt="Une imprimante">
+                        <x-uwil-common::markup.img class="pe-1" alt="{{ __('Une imprimante') }}"
+                            url="{{ Vite::asset('resources/assets/images/impression.png') }}" />
                        {{ __('Imprimer l\'article') }}
                    </button>
                </div>
@ -77,9 +79,10 @@
                <div class="col-12 col-md-6 mb-md-0 mb-4 px-0">
                    <div class="w-100 h-100 pe-sm-7 pe-md-5 pe-lg-6 pe-xl-8 pe-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100" src="{{ asset($news->picture) }}" alt="{{ $news->picture_alt }}">
+                            <x-uwil-common::markup.img alt="{{ $news->picture_alt }}" url="{{ asset($news->picture) }}" />
                            <div class="separator position-absolute h-100 end-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" alt="">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Bandeau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" />
                            </div>
                        </div>
                    </div>
@ -136,9 +139,10 @@
                <div class="col-12 order-md-2 col-md-6 px-0">
                    <div class="w-100 h-100 ps-sm-7 ps-md-5 ps-lg-6 ps-xl-10 ps-6">
                        <div class="img-section position-relative w-100 h-100">
-                            <img class="object-cover-center w-100 h-100" src="{{ asset($news->picture2) }}" alt="{{ $news->picture2_alt }}">
+                            <x-uwil-common::markup.img alt="{{ $news->picture2_alt }}" url="{{ asset($news->picture2) }}" />
                            <div class="separator reverse position-absolute h-100 start-0 top-0 text-end">
-                                <img class="h-100" src="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" alt="">
+                                <x-uwil-common::markup.img class="h-100" alt="{{ __('Bandeau de séparation') }}"
+                                    url="{{ Vite::asset('resources/assets/images/separator-big-blue.png') }}" />
                            </div>
                        </div>
                    </div>
--- a/resources/views/fo/pages/news/postCard.blade.php
+++ b/resources/views/fo/pages/news/postCard.blade.php
@ -1,7 +1,7 @@
 <div class="card card-posts align-items-center position-relative bg-default box-shadow rounded-4 mx-auto overflow-hidden text-center">
    <div class="card-img-wrapper position-relative w-100 h-50">
-        <img class="card-img-top position-relative" src="{{ asset($news_item->picture) }}" title="{{ $news_item->picture_title }}"
-            alt="{{ $news_item->picture_alt }}">
+        <x-uwil-common::markup.img class="card-img-top position-relative" title="{{ $news_item->picture_title }}"
+            alt="{{ $news_item->picture_alt }}" url="{{ asset($news_item->picture) }}" />
        @include('fo.modules.separator', ['color' => $color, 'vertical' => false, 'productCard' => false])
    </div>
    <div class="card-body d-flex flex-column w-100 h-50 py-4">
@ -14,7 +14,7 @@
            @endforeach
        </div>
        <div class="card-txt d-flex flex-column justify-content-between align-items-center flex-grow-1">
-            <div class="ck-content card-subtitle ff-poppins-regular mx-4 my-0 d-none d-sm-block">{!! clean($news_item->content) !!}</div>
+            <div class="ck-content card-subtitle ff-poppins-regular d-none d-sm-block mx-4 my-0">{!! clean($news_item->content) !!}</div>
            <div class="butn-wrap mt-4">
                <a class="butn-sec m-0 bg-transparent"
                    href="{{ route('fo.news.show', ['actu' => $news_item->slug]) }}">{{ __('À lire') }}</a>
--- a/resources/views/fo/pages/products/index.blade.php
+++ b/resources/views/fo/pages/products/index.blade.php
@ -21,8 +21,8 @@
                            <a class="card card-ranges position-relative rounded-4 box-shadow bg-default mx-auto overflow-hidden"
                                href="{{ route('fo.products.range-products', $range) }}">
                                <div class="card-img-wrapper position-relative overflow-hidden">
-                                    <img class="card-img-top position-relative" src="{{ asset($range->picture) }}"
-                                        alt="{{ $range->picture_alt }}">
+                                    <x-uwil-common::markup.img class="card-img-top position-relative" alt="{{ $range->picture_alt }}"
+                                        url="{{ asset($range->picture) }}" />
                                    @include('fo.modules.separator', ['forcedColor' => $range->color, 'productCard' => true])
                                </div>
                                <div class="card-body w-100 py-3">
--- a/resources/views/fo/pages/products/product.blade.php
+++ b/resources/views/fo/pages/products/product.blade.php
@ -27,159 +27,9 @@
        @endpush
    @endif

-    <!-- Modal -->
-    <div class="modal fade" id="commercialSheetModal" aria-hidden="true" tabindex="-1">
-        <div class="modal-dialog modal-xl modal-fullscreen-md-down">
-            <div class="modal-content business-infos">
-                <div class="business-wrap w-100 h-100 mx-auto">
-                    <div class="border-inox rounded-4 mx-auto">
-                        <div class="position-relative bg-default rounded-4 p-2">
-                            <div class="row business-header product sticky-top bg-default">
-                                <div class="col d-flex align-items-center">
-                                    <p class="flex-grow-1 ff-poppins-medium fs-md text-start">{{ __('Fiche commerciale') }}</p>
-                                    <div class="fiche-img d-flex justify-content-center align-items-center">
-                                        @include('fo.modules.socialShare', [
-                                            'socialNetwork' => 'mail',
-                                            'subject' => __('J\'ai pensé que ce produit :appName pouvait t\'intéresser', [
-                                                'appName' => config('app.name'),
-                                            ]),
-                                            'title' => __(
-                                                'Bonjour, %0D%0A%0D%0AVoici le lien vers le produit ":title".%0D%0A%0D%0A:url%0D%0A%0D%0ABonne cuisine.',
-                                                [
-                                                    'title' => $product->label,
-                                                    'url' => route('fo.product.show', ['publishedProduct' => $product]),
-                                                ]),
-                                        ])
-                                    </div>
-                                    <div class="fiche-img d-flex justify-content-center align-items-center btn-printing">
-                                        <button class="print-business-infos-btn w-100 border-0 bg-transparent px-0" type="button">
-                                            <img src="{{ Vite::asset('resources/assets/images/impression.svg') }}"
-                                                alt="{{ __('Logo d\'une imprimante') }}">
-                                        </button>
-                                    </div>
-                                    <div class="fiche-img d-flex justify-content-center align-items-center">
-                                        <button class="close-business-infos-btn border-0 bg-transparent" data-bs-dismiss="modal" type="button">
-                                            <img src="{{ Vite::asset('resources/assets/images/croix-blanche.png') }}"
-                                                alt="{{ __('Une croix blanche') }}">
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="row flex-column flex-lg-row ps-2" id="print-id-product">
-                                {{-- FIXME: For now print solution is limited to this --}}
-                                {{-- Real solution: media query print, or generate product pdf call and printIt --}}
-                                <div class="col start-col">
-                                    <div class="wrapper-infos1 me-auto">
-                                        <p class="poppins-bold fs-md border-bottom mb-4 mt-3 w-fit border-2 pb-1">{{ $product->label }}</p>
-                                        <p class="my-3 mt-4">{{ __('Gamme : ') }}<b>{{ $product->subrange->range->label }}</b></p>
-                                        <p class="my-3">
-                                            {{ __('Famille : ') }}<b>{{ $product->species->label() }}</b>
-                                        </p>
-                                        <p class="my-3">{{ __('Marque : ') }}<b>{{ __('LE GAULOIS PROFESSIONNEL') }}</b></p>
-                                        <p class="my-3">
-                                            {{ __('Origine de la viande : ') }}<b>{{ $product->is_frenchpoultry ? 'France' : 'Étrangère' }}</b>
-                                        </p>
-                                        <p class="mb-0"><b>{{ __('Conseils de préparation :') }}</b></p>
-                                        <p class="ck-content mb-3 mt-0">{!! clean($product->preparation) !!}</p>
-                                        <p class="poppins-bold fs-md border-bottom mb-4 mt-5 w-fit border-2 pb-1">
-                                            {{ __('Les atouts produit :') }}</p>
-                                        <p class="ck-content my-3 mt-4">{!! clean($product->advantage) !!}</p>
-                                        <div class="prod-logos mb-4 mt-4">
-                                            @if ($product->is_frenchpoultry)
-                                                <img class="me-4" src="{{ Vite::asset('resources/assets/images/logo-vf.svg') }}"
-                                                    alt="{{ __('Logo de la volaille française') }}">
-                                            @endif
-                                            @if ($product->nutriscore->value > 0)
-                                                <img class="col"
-                                                    src="{{ Vite::asset('resources/assets/images/nutriscore/logo-nutriscore-' . $product->nutriscore->label() . '.png') }}"
-                                                    alt="{{ __('Logo Nutriscore') }}">
-                                            @endif
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col ms-lg-1 end-col">
-                                    <div class="wrapper-infos2 ms-auto">
-                                        @switch($product->species)
-                                            @case(\App\Enums\Products\ProductSpeciesEnum::canard)
-                                                @include('fo.pages.products.species', [
-                                                    'name' => 'canard',
-                                                    'titles' => ['1/ Manchon', '2/ Filet ou magret', '3/ Cuisse'],
-                                                    'lines' => [],
-                                                    'svg' => Vite::asset('resources/assets/images/canard.svg'),
-                                                    'svg_alt' => __('Dessin de l\'anatomie d\'un canard'),
-                                                ])
-                                            @break
-
-                                            @case(\App\Enums\Products\ProductSpeciesEnum::dinde)
-                                                @include('fo.pages.products.species', [
-                                                    'name' => $product->species->label(),
-                                                    'titles' => [
-                                                        '1/ Blanquette',
-                                                        '2/ Aile',
-                                                        '3/ Haut de cuisse',
-                                                        '4/ Pilon / Osso bucco',
-                                                        '5/ Filet ou escalope',
-                                                        "6/ Sot-l-'y-laisse",
-                                                        '7/ Filet Mignon',
-                                                    ],
-                                                    'lines' => [],
-                                                    'svg' => Vite::asset('resources/assets/images/dinde.svg'),
-                                                    'svg_alt' => __('Dessin de l\'anatomie d\'un dinde'),
-                                                ])
-                                            @break
-
-                                            @case(\App\Enums\Products\ProductSpeciesEnum::lapin)
-                                                @include('fo.pages.products.species', [
-                                                    'name' => $product->species->label(),
-                                                    'titles' => ['1/ Rable', '2/ Cuisse', '3/ Gigolette / Epaule'],
-                                                    'lines' => [],
-                                                    'svg' => Vite::asset('resources/assets/images/lapin.svg'),
-                                                    'svg_alt' => __('Dessin de l\'anatomie d\'un lapin'),
-                                                ])
-                                            @break
-
-                                            @case(\App\Enums\Products\ProductSpeciesEnum::pintade)
-                                                @include('fo.pages.products.species', [
-                                                    'name' => $product->species->label(),
-                                                    'titles' => ['1/ Filet', '2/ Cuisse'],
-                                                    'lines' => [],
-                                                    'svg' => Vite::asset('resources/assets/images/pintade.svg'),
-                                                    'svg_alt' => __('Dessin de l\'anatomie d\'une pintade'),
-                                                ])
-                                            @break
-
-                                            @case(\App\Enums\Products\ProductSpeciesEnum::poulet)
-                                                @include('fo.pages.products.species', [
-                                                    'name' => $product->species->label(),
-                                                    'titles' => ['1/ Filet', '2/ Aile', '3/ Cuisse'],
-                                                    'lines' => [
-                                                        [],
-                                                        ['2A/ Manchon', '2B/ Médiane', '2C/Pilon'],
-                                                        ['3A/ Haut de cuisse', '3B Pilon'],
-                                                    ],
-                                                    'svg' => Vite::asset('resources/assets/images/poulet.svg'),
-                                                    'svg_alt' => __('Dessin de l\'anatomie d\'un poulet'),
-                                                ])
-                                            @break
-                                        @endswitch
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
    <div class="product-infos-wrapper container-fluid d-flex flex-column align-items-center position-relative bg-ardoise-radial px-0">
        <section
            class="row arg-product-wrapper position-relative justify-content-center wrapper-xxl w-100 pb-lg-6 px-lg-5 px-xxl-10 px-0 pb-5 pt-0">
-            {{-- <div class="row order-lg-1 prod-breadcrumbs d-none d-lg-block">
-                <div class="col px-0">
-                    <p><span class="parent"><a href="{{ route('fo.products.index') }}">Nos solutions produits</a> / <a href="{{ route('fo.products.range-products', ['range' => $product->subrange->range]) }}">{{ $product->subrange->range->label }}</a> / {{ $product->species->label() }} /&nbsp;</span>{{ $product->label }}</p>
-                </div>
-            </div> --}}
            <div class="row order-lg-4 prod-slider-wrapper px-lg-3 px-xl-0 pb-lg-0 pt-lg-5 px-0 pb-4">
                <div class="slider-wrapper position-relative w-100 px-0">
                    <!-- Slider main container -->
@ -189,7 +39,7 @@
                            <!-- Slides -->
                            @foreach ($product->slider_pictures as $slider_picture)
                                <div class="swiper-slide d-flex justify-content-center">
-                                    <img class="w-100 h-100" src="{{ asset($slider_picture) }}" alt="">
+                                    <x-uwil-common::markup.img url="{{ asset($slider_picture) }}" />
                                </div>
                            @endforeach
                        </div>
@ -218,12 +68,12 @@
                    <div class="row prod-logos position-lg-absolute pb-lg-0 top-0 pb-4">
                        <div class="col px-0">
                            @if ($product->is_frenchpoultry)
-                                <img class="me-lg-4" src="{{ Vite::asset('resources/assets/images/logo-vf.svg') }}"
-                                    alt="Logo de la volaille française">
+                                <x-uwil-common::markup.img class="me-lg-4" alt="Logo de la volaille française"
+                                    url="{{ Vite::asset('resources/assets/images/logo-vf.svg') }}" />
                            @endif
                            @if ($product->nutriscore->value > 0)
-                                <img src="{{ Vite::asset('resources/assets/images/nutriscore/logo-nutriscore-' . $product->nutriscore->label() . '.png') }}"
-                                    alt="{{ __('Logo Nutriscore') }}">
+                                <x-uwil-common::markup.img title="{{ __('Nutriscore') }}" alt="{{ __('Logo Nutriscore') }}"
+                                    url="{{ Vite::asset('resources/assets/images/nutriscore/logo-nutriscore-' . $product->nutriscore->label() . '.png') }}" />
                            @endif
                        </div>
                    </div>
@ -247,22 +97,21 @@

            <div class="row order-lg-3 prod-ing-wrapper px-lg-0 me-lg-auto px-3 pb-5">
                <div class="ck-content prod-txt text-lg-start text-center">
-                    <h3 class="ff-poppins-medium fs-lg">{{ __('Ingrédients :') }}</h3>
-                    {!! clean($product->ingredients) !!}
                    <h3 class="ff-poppins-medium fs-lg mt-4">{{ __('Les atouts produit :') }}</h3>
                    {!! clean($product->advantage) !!}

-                    <button class="butn-business w-100 color-primary mt-4 border-0 bg-transparent" data-bs-toggle="modal"
-                        data-bs-target="#commercialSheetModal" type="button" aria-label="{{ __('Fiche commerciale') }}">
+                    <a class="butn-business w-100 color-primary mt-4 border-0 bg-transparent" type="button"
+                        href="{{ route('fo.product.print-commercial-sheet', $product) }}" aria-label="{{ __('Fiche technique') }}">
                        <div class="fiche-wrapper border-inox rounded-4 mx-auto">
-                            <div class="d-flex align-items-center bg-default rounded-4 py-lg-3 px-lg-3 px-4 py-2">
-                                <p class="flex-grow-1 ff-poppins-bold fs-lg m-0 text-start">{{ __('Fiche commerciale') }}</p>
+                            <div class="d-flex justify-content-center align-items-center bg-default rounded-4 py-lg-3 px-lg-3 px-4 py-2">
                                <div class="fiche-img d-flex justify-content-center align-items-center">
-                                    <img src="{{ Vite::asset('resources/assets/images/btn-plus.png') }}" alt="Le signe +">
+                                    <x-uwil-common::markup.img title="{{ __('+ de détails') }}" alt="{{ __('Le signe +') }}"
+                                        url="{{ Vite::asset('resources/assets/images/btn-plus.png') }}" />
                                </div>
+                                <p class="ff-poppins-bold fs-lg m-0 text-start text-white">{{ __('Fiche technique') }}</p>
                            </div>
                        </div>
-                    </button>
+                    </a>
                </div>
            </div>

@ -293,11 +142,12 @@
                        @if ($firstTip)
                            <div class="card-adn d-flex bg-default rounded-4 box-shadow mx-auto mb-4 overflow-hidden">
                                <div class="position-relative h-100 w-45 overflow-hidden">
-                                    <img class="card-img-top object-cover-center w-100 h-100" src="{{ asset($firstTip->sticker) }}"
-                                        alt="{{ asset($firstTip->sticker_alt) }}" alt="{{ asset($firstTip->sticker_title) }}">
+                                    <x-uwil-common::markup.img class="card-img-top" title="{{ asset($firstTip->sticker_title) }}"
+                                        alt="{{ asset($firstTip->sticker_alt) }}" url="{{ asset($firstTip->sticker) }}" />
                                    {{-- FIXME: Refactoriser les séparateurs en un fichier svg au lieux des blade et utiliser une classe pour la couleur --}}
-                                    <img class="position-absolute h-100 end-0 top-0"
-                                        src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" alt="">
+                                    <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0"
+                                        alt="{{ __('Bandeau de séparation') }}"
+                                        url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                                    <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                        href="https://www.youtube.com/watch?v={{ $firstTip->youtube_video_id }}" target="blank">
                                        @include('fo.modules.svgs.play')
@ -320,10 +170,11 @@
                            @foreach ($tips as $tip)
                                <div class="card-adn card-adn-sm d-flex bg-default rounded-4 box-shadow mx-auto mb-4 overflow-hidden">
                                    <div class="position-relative h-100 w-45 overflow-hidden">
-                                        <img class="card-img-top object-cover-center w-100 h-100" src="{{ asset($tip->sticker_sm) }}"
-                                            alt="{{ asset($tip->sticker_sm_alt) }}" alt="{{ asset($tip->sticker_sm_title) }}">
-                                        <img class="position-absolute h-100 end-0 top-0"
-                                            src="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" alt="">
+                                        <x-uwil-common::markup.img class="card-img-top" title="{{ asset($tip->sticker_sm_title) }}"
+                                            alt="{{ asset($tip->sticker_sm_alt) }}" url="{{ asset($tip->sticker_sm) }}" />
+                                        <x-uwil-common::markup.img class="position-absolute h-100 end-0 top-0"
+                                            alt="{{ __('Bandeau de séparation') }}"
+                                            url="{{ Vite::asset('resources/assets/images/sep-ysbi-md.svg') }}" />
                                        <a class="position-absolute top-50 start-50 translate-middle" data-fancybox
                                            href="https://www.youtube.com/watch?v={{ $tip->youtube_video_id }}" target="blank">
                                            @include('fo.modules.svgs.play')
--- a/resources/views/fo/pages/products/smallCard.blade.php
+++ b/resources/views/fo/pages/products/smallCard.blade.php
@ -17,8 +17,8 @@
 <a class="card-product d-flex bg-default rounded-4 box-shadow position-md-sticky top-0 mx-auto my-4 overflow-hidden p-0"
    href="{{ route('fo.product.show', ['publishedProduct' => $product->slug]) }}">
    <div class="position-relative h-100 w-60 overflow-hidden">
-        <img class="card-img-top object-cover-center w-100 h-100" src="{{ asset($product->sticker_sm) }}"
-            title="{{ $product->sticker_sm_title }}" alt="{{ $product->sticker_sm_alt }}">
+        <x-uwil-common::markup.img class="card-img-top" title="{{ $product->sticker_sm_title }}" alt="{{ $product->sticker_sm_alt }}"
+            url="{{ asset($product->sticker_sm) }}" />
        @include('fo.modules.separator', $separatorParams)
    </div>
    <div class="row flex-column justify-content-center align-items-center p-md-3 ps-md-0 w-40 p-2 ps-0 text-center">
--- a/resources/views/fo/pages/products/species.blade.php
+++ b/resources/views/fo/pages/products/species.blade.php
@ -15,7 +15,7 @@
        @endforeach
    </li>
    <div class="img-anatomie-wrapper position-absolute top-50 translate-middle-y end-0">
-        <img src="{{ $svg }}" title="{{ $svg_alt }}" alt="{{ $svg_alt }}">
+        <x-uwil-common::markup.img title="{{ $svg_alt }}" alt="{{ $svg_alt }}" url="{{ $svg }}" />
    </div>
 </ol>

--- a/resources/views/fo/pages/search-summary-list.blade.php
+++ b/resources/views/fo/pages/search-summary-list.blade.php
@ -83,8 +83,9 @@
                                    <div
                                        class="card card-posts align-items-center position-relative bg-default box-shadow rounded-4 mx-auto overflow-hidden text-center">
                                        <div class="card-img-wrapper position-relative w-100 h-50">
-                                            <img class="card-img-top position-relative" src="{{ asset($news_item->picture) }}"
-                                                alt="{{ $news_item->picture_alt }}">
+                                            <x-uwil-common::markup.img class="card-img-top position-relative"
+                                                title="{{ $news_item->picture_alt }}" alt="{{ $news_item->picture_alt }}"
+                                                url="{{ asset($news_item->picture) }}" />
                                            <svg class="separator separator-blue position-absolute w-100" xmlns="http://www.w3.org/2000/svg"
                                                viewBox="0 0 1479 176">
                                                <defs>
--- a/resources/views/fo/pages/search.blade.php
+++ b/resources/views/fo/pages/search.blade.php
@ -29,7 +29,8 @@
                            <input class="form-input bg-default fs-inherit rounded-3 m-2 w-fit border-0 px-3 py-2 text-white" name="search"
                                value="{{ $search }}" aria-label=".form-select-lg example" placeholder="{{ __('Rechercher') }}">
                            <button class="search-wrapper p-2" type="submit">
-                                <img src="{{ Vite::asset('resources/assets/images/recherche.png') }}" alt="{{ __('Une loupe blanche') }}">
+                                <x-uwil-common::markup.img alt="{{ __('Une loupe blanche') }}"
+                                    url="{{ Vite::asset('resources/assets/images/recherche.png') }}" />
                            </button>
                        </form>
                    </div>
@ -79,8 +80,8 @@
                                        <div
                                            class="card card-posts align-items-center position-relative bg-default box-shadow rounded-4 mx-auto overflow-hidden text-center">
                                            <div class="card-img-wrapper position-relative w-100 h-50">
-                                                <img class="card-img-top position-relative" src="{{ asset($news_item->picture) }}"
-                                                    alt="{{ $news_item->picture_alt }}">
+                                                <x-uwil-common::markup.img class="card-img-top position-relative" alt="{{ $news_item->picture_alt }}"
+                                                    url="{{ asset($news_item->picture) }}" />
                                                @include('fo.modules.separator', ['color' => 'blue'])
                                            </div>
                                            <div class="card-body d-flex flex-column w-100 h-50 py-4">
--- a/resources/views/fo/pages/sitemap.blade.php
+++ b/resources/views/fo/pages/sitemap.blade.php
@ -0,0 +1,41 @@
+@extends('fo.layout', ['page' => 'sitemap'])
+
+@section('title', $staticPageModel->seo_title)
+@section('description', $staticPageModel->seo_description)
+
+@section('bannerHeader')
+    @include('fo.partials.banner-header', [
+        'title' => $staticPageModel->title,
+        'description' => '',
+    ])
+@endsection
+
+@section('content')
+    <div class="container-fluid d-flex flex-column align-items-center px-0">
+        <div class="contact-wrapper static-pages position-relative bg-ardoise-radial pt-sm-6 pt-5">
+            <div class="row wrapper-xl mb-3">
+                <div class="d-flex justify-content-center">
+                    <ul class="ff-poppins-regular">
+                        @foreach ($singlePages as $singlePage)
+                            @if($singlePage !== config('app.url'))
+                                @php
+                                    $slugs = explode('/', trim(str_replace(config('app.url'), "", $singlePage), '/'));
+                                @endphp
+                                <li class="py-2">
+                                    <a class="d-block d-lg-inline-block" href="{{ $singlePage }}">
+                                        @foreach ($slugs as $slug)
+                                            {{ str_replace('-', ' ', ucfirst($slug)) }}
+                                            @if($slug != end($slugs))
+                                                <span> - </span>
+                                            @endif
+                                        @endforeach
+                                    </a>
+                                </li>
+                            @endif
+                        @endforeach
+                    <ul>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection
--- a/resources/views/fo/partials/banner-header.blade.php
+++ b/resources/views/fo/partials/banner-header.blade.php
@ -4,5 +4,6 @@
    <div class="ck-content text-header paragraph-format d-none d-md-block mx-auto">{!! clean($description) !!}</div>
 </div>
 <div class="separator-header position-absolute w-100 bottom-0 start-0 px-0">
-    <img class="w-100" src="{{ Vite::asset('resources/assets/images/banner/banner-header-desktop.png') }}" alt="">
+    <x-uwil-common::markup.img class="w-100" alt="{{ __('Bandeau de séparation') }}"
+        url="{{ Vite::asset('resources/assets/images/banner/banner-header-desktop.png') }}" />
 </div>
--- a/resources/views/fo/partials/banner-infos.blade.php
+++ b/resources/views/fo/partials/banner-infos.blade.php
@ -3,14 +3,14 @@
        <div class="row flex-column flex-lg-row justify-content-end align-items-center">
            <div class="col px-lg-0 flex-grow-0 pb-10">
                <div class="picture-wrapper position-relative">
-                    <img class="position-absolute" src="{{ Vite::asset('resources/assets/images/banner/employer-02.jpg') }}"
-                        alt="{{ __('Photos d\'un premier employé Le Gaulois Professionnel') }}">
-                    <img class="position-absolute" src="{{ Vite::asset('resources/assets/images/banner/employer-03.jpg') }}"
-                        alt="{{ __('Photos d\'un second employé Le Gaulois Professionnel') }}">
-                    <img class="position-absolute" src="{{ Vite::asset('resources/assets/images/banner/employer-04.jpg') }}"
-                        alt="{{ __('Photos d\'un troisième employé Le Gaulois Professionnel') }}">
-                    <img class="position-absolute" src="{{ Vite::asset('resources/assets/images/banner/employer-01.jpg') }}"
-                        alt="{{ __('Photos d\'un quatrième employé Le Gaulois Professionnel') }}">
+                    <x-uwil-common::markup.img alt="{{ __('Photos d’un premier employé Le Gaulois Professionnel') }}"
+                        url="{{ Vite::asset('resources/assets/images/banner/employer-02.jpg') }}" />
+                    <x-uwil-common::markup.img alt="{{ __('Photos d’un second employé Le Gaulois Professionnel') }}"
+                        url="{{ Vite::asset('resources/assets/images/banner/employer-03.jpg') }}" />
+                    <x-uwil-common::markup.img alt="{{ __('Photos d’un troisième employé Le Gaulois Professionnel') }}"
+                        url="{{ Vite::asset('resources/assets/images/banner/employer-04.jpg') }}" />
+                    <x-uwil-common::markup.img alt="{{ __('Photos d’un quatrième employé Le Gaulois Professionnel') }}"
+                        url="{{ Vite::asset('resources/assets/images/banner/employer-01.jpg') }}" />
                </div>
            </div>
            <div class="col contact-wrapper text-lg-start px-lg-0 mt-3 flex-grow-0 text-center">
--- a/resources/views/fo/partials/btobCard.blade.php
+++ b/resources/views/fo/partials/btobCard.blade.php
@ -1,6 +1,6 @@
 <div class="card card-btob position-relative bg-default rounded-4 mx-auto overflow-hidden">
    <div class="card-img-wrapper position-relative d-flex justify-content-center align-items-center h-65">
-        <img class="card-img-top" src="{{ $img }}" title="{{ $img_title }}" alt="{{ $img_alt }}">
+        <x-uwil-common::markup.img class="card-img-top" title="{{ $img_title }}" alt="{{ $img_alt }}" url="{{ $img }}" />
        @include('fo.modules.separator', ['color' => 'blue'])
    </div>
    <div class="card-body d-flex flex-column justify-content-baseline align-items-center w-100 h-35 p-3 pt-4 text-center">
--- a/resources/views/fo/partials/expertise-products-vip.blade.php
+++ b/resources/views/fo/partials/expertise-products-vip.blade.php
@ -15,7 +15,8 @@
                        <div class="fiche-content d-flex align-items-center bg-default rounded-4 h-100 py-lg-3 px-lg-3 px-4 py-2">
                            <p class="flex-grow-1 ff-poppins-bold fs-lg text-start">{{ $expertise->label }}</p>
                            <div class="fiche-img d-flex justify-content-center align-items-center">
-                                <img src="{{ Vite::asset('resources/assets/images/btn-plus.png') }}" alt="{{ __('Le signe +') }}">
+                                <x-uwil-common::markup.img title="{{ __('+ de détails') }}" alt="{{ __('Le signe +') }}"
+                                    url="{{ Vite::asset('resources/assets/images/btn-plus.png') }}" />
                            </div>
                        </div>
                    </div>
@ -34,8 +35,8 @@
                                <button class="border-0 bg-transparent" data-bs-toggle="collapse"
                                    data-bs-target="#collapse-{{ $loop->index }}" type="button" aria-expanded="false"
                                    aria-controls="collapse-{{ $loop->index }}">
-                                    <img src="{{ Vite::asset('resources/assets/images/croix-blanche.png') }}"
-                                        alt="{{ __('Une croix blanche') }}">
+                                    <x-uwil-common::markup.img title="{{ __('Fermer') }}" alt="{{ __('Une croix blanche') }}"
+                                        url="{{ Vite::asset('resources/assets/images/croix-blanche.png') }}" />
                                </button>
                            </div>
                        </div>
@ -43,17 +44,18 @@
                        <p>{{ $expertise->subtitle }}</p>
                        <div class="row img-vip-wrapper justify-content-between align-items-center my-3">
                            @if ($expertise->is_natureeleveurs)
-                                <img class="col w-fit" src="{{ Vite::asset('resources/assets/images/logo-ne.png') }}"
-                                    alt="{{ __('Logo Nature d\'éleveurs') }}">
+                                <x-uwil-common::markup.img class="col w-fit" title="{{ __('Nature d’éleveurs') }}"
+                                    alt="{{ __('Logo Nature d’éleveurs') }}"
+                                    url="{{ Vite::asset('resources/assets/images/logo-ne.png') }}" />
                            @endif
                            @if ($expertise->is_frenchpoultry)
-                                <img class="col w-fit" src="{{ Vite::asset('resources/assets/images/logo-vf.svg') }}"
-                                    alt="{{ __('Logo de la volaille française') }}">
+                                <x-uwil-common::markup.img class="col w-fit" alt="{{ __('Logo de la volaille française') }}"
+                                    url="{{ Vite::asset('resources/assets/images/logo-vf.svg') }}" />
                            @endif
                            @if ($expertise->nutriscore->value > 0)
-                                <img class="col w-fit"
-                                    src="{{ Vite::asset('resources/assets/images/nutriscore/logo-nutriscore-' . $expertise->nutriscore->label() . '.png') }}"
-                                    alt="{{ __('Logo Nutriscore') }}">
+                                <x-uwil-common::markup.img class="col w-fit" title="{{ __('Logo Nutriscore') }}"
+                                    alt="{{ __('Logo Nutriscore') }}"
+                                    url="{{ Vite::asset('resources/assets/images/nutriscore/logo-nutriscore-' . $expertise->nutriscore->label() . '.png') }}" />
                            @endif
                        </div>
                        <h3 class="h3">{{ __('Pourquoi c\'est un incontournable pour votre lieu de restauration ?') }}</h3>
--- a/resources/views/fo/partials/footer.blade.php
+++ b/resources/views/fo/partials/footer.blade.php
@ -8,8 +8,9 @@
            <div class="col col-lg-2">
                <div class="d-flex flex-column justify-content-center align-items-center">
                    <div class="img-slogan-wrapper mb-4 text-center">
-                        <img class="mw-100" src="{{ Vite::asset('resources/assets/images/logo-lgp-40ans.png') }}"
-                            alt="Logo Le Gaulois Professionnel">
+                        <x-uwil-common::markup.img class="mw-100" title="{{ __('Le Gaulois Professionnel') }}"
+                            alt="{{ __('Logo Le Gaulois Professionnel') }}"
+                            url="{{ Vite::asset('resources/assets/images/logo-lgp-40ans.png') }}" />
                    </div>
                </div>
            </div>
@ -70,6 +71,7 @@
                    <span>© {{ __('Copyright Le Gaulois Professionnel') }}&nbsp;-</span>
                    <a href="{{ route('fo.legals') }}">{{ __('Mentions légales et CGU') }}</a>&nbsp;-
                    <a href="{{ route('fo.policies') }}">{{ __('Politique des données personnelles') }}</a>&nbsp;-
+                    <a href="{{ route('fo.sitemap') }}">{{ __('Plan du site') }}</a>&nbsp;-
                    <a class="cn-cookie-link" href="#cookies">{{ __('Gestion des Cookies') }}</a>
                </div>
            </div>
--- a/resources/views/fo/partials/header.blade.php
+++ b/resources/views/fo/partials/header.blade.php
@ -7,10 +7,10 @@
                </button>
                <form id="searchform" role="search" method="get" action="{{ route('fo.search') }}">
                    <div class="search-butn position-relative d-none d-md-block ms-4" role="button">
-                        <img id="open-search-button" src="{{ Vite::asset('resources/assets/images/header/icon-recherche.svg') }}"
-                            alt="Bouton de recherche">
-                        <img id="close-search-button" src="{{ Vite::asset('resources/assets/images/header/icon-close.svg') }}"
-                            alt="Bouton de recherche">
+                        <x-uwil-common::markup.img id="open-search-button" alt="{{ __('Bouton de recherche') }}"
+                            url="{{ Vite::asset('resources/assets/images/header/icon-recherche.svg') }}" />
+                        <x-uwil-common::markup.img id="close-search-button" alt="{{ __('Bouton de recherche') }}"
+                            url="{{ Vite::asset('resources/assets/images/header/icon-close.svg') }}" />
                        <input class="form-control black-square position-absolute top-50 translate-middle-y start-0 ms-4 p-2"
                            id="search-input" name="search" type="search" placeholder="Rechercher" required>
                    </div>
@ -36,7 +36,8 @@
            </nav>
            <nav class="navbar navbar-contact-mobile col justify-content-end d-xl-none pe-md-5 pe-4">
                <a class="position-relative" href="{{ route('fo.contact.show') }}">
-                    <img src="{{ Vite::asset('resources/assets/images/header/contact.png') }}" alt="{{ __('Lettre') }}">
+                    <x-uwil-common::markup.img title="{{ __('Ecrivez-nous') }}" alt="{{ __('Lettre') }}"
+                        url="{{ Vite::asset('resources/assets/images/header/contact.png') }}" />
                    <p
                        class="counter-wrapper bg-secondary nb-interest position-absolute start-100 translate-middle justify-content-center align-items-center ff-poppins-regular fs-md rounded-circle @if ($basketCount === 0) hide-counter-wrapper @endif top-0 my-0 text-center">
                        {{ $basketCount }}
@ -107,7 +108,8 @@
        </div>
    </div>
    <a class="nav-brand position-absolute start-50 translate-middle-x mw-50 top-0" href="{{ route('fo.homepage') }}">
-        <img class="w-100" src="{{ Vite::asset('resources/assets/images/header/logo-lgp-header-40ans.png') }}"
-            alt="{{ __('Logo de Le Gaulois Professionnel') }}">
+        <x-uwil-common::markup.img class="w-100" title="{{ __('Le Gaulois Professionnel') }}"
+            alt="{{ __('Logo de Le Gaulois Professionnel') }}"
+            url="{{ Vite::asset('resources/assets/images/header/logo-lgp-header-40ans.png') }}" />
    </a>
 </header>
--- a/resources/views/fo/partials/nav-engagment.blade.php
+++ b/resources/views/fo/partials/nav-engagment.blade.php
@ -79,7 +79,7 @@
                            C78.9,74.3,78.8,74.6,78.7,74.9z" />
                    </g>
                </svg>
-                <p class="ff-poppins-regular fs-md my-3">Élever duralement</p>
+                <p class="ff-poppins-regular fs-md my-3">Élever durablement</p>
            </a>
        </li>
        <li class="nav-item m-4">
@ -113,13 +113,6 @@
                <svg class="engagment-icon position-absolute start-50 translate-middle-x" style="enable-background:new 0 0 110 110;"
                    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
                    y="0px" viewBox="0 0 110 110" xml:space="preserve">
-                    {{-- <style type="text/css">
-                        .st0{fill:#282828;stroke:url(#SVGID_1_);stroke-width:2;stroke-miterlimit:10;}
-                        .st1{clip-path:url(#SVGID_00000096777385259172506090000005774339679746866358_);}
-                        .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
-                        .st3{fill-rule:evenodd;clip-rule:evenodd;fill:#9ED023;}
-                        .st4{fill:none;stroke:url(#SVGID_00000148628227857359231360000002112215792263755446_);stroke-width:2;stroke-miterlimit:10;}
-                    </style> --}}
                    <circle class="bg-engagment-icon" cx="55" cy="55" r="52.5" />
                    <g>
                        <g>
@ -153,7 +146,6 @@
                                </g>
                            </g>
                        </g>
-                        {{-- <circle style="fill:none;stroke:url(#SVGID_00000155824553507012686750000009241274668790656701_);stroke-width:2;stroke-miterlimit:10;" cx="55" cy="55" r="52.5"/> --}}
                </svg>
                <p class="ff-poppins-regular fs-md my-3">Respecter la Terre</p>
            </a>
--- a/resources/views/fo/partials/nav-expertise.blade.php
+++ b/resources/views/fo/partials/nav-expertise.blade.php
@ -5,7 +5,8 @@
                href="{{ route('fo.expertise.pintade') }}">
                <div class="coin-wrapper position-relative rounded-circle mx-auto w-fit">
                    <div class="coin-img-wrapper position-relative rounded-circle p-2">
-                        <img class="m-4" src="{{ Vite::asset('resources/assets/images/pintade.png') }}" alt="Dessin d'une pintade">
+                        <x-uwil-common::markup.img title="{{ __('La Pintade') }}" alt="{{ __('Dessin d’une pintade') }}"
+                            url="{{ Vite::asset('resources/assets/images/pintade.png') }}" />
                    </div>
                    <p class="position-absolute top-100 start-50 translate-middle-x">Pintade</p>
                </div>
@ -16,7 +17,8 @@
                href="{{ route('fo.expertise.dinde') }}">
                <div class="coin-wrapper position-relative rounded-circle mx-auto w-fit">
                    <div class="coin-img-wrapper position-relative rounded-circle p-2">
-                        <img class="m-4" src="{{ Vite::asset('resources/assets/images/dinde.png') }}" alt="Dessin d'une dinde">
+                        <x-uwil-common::markup.img title="{{ __('La Dinde') }}" alt="{{ __('Dessin d’une dinde') }}"
+                            url="{{ Vite::asset('resources/assets/images/dinde.png') }}" />
                    </div>
                    <p class="position-absolute top-100 start-50 translate-middle-x">Dinde</p>
                </div>
@ -27,7 +29,8 @@
                href="{{ route('fo.expertise.poulet') }}">
                <div class="coin-wrapper position-relative rounded-circle mx-auto w-fit">
                    <div class="coin-img-wrapper position-relative rounded-circle p-2">
-                        <img class="m-4" src="{{ Vite::asset('resources/assets/images/poulet.png') }}" alt="Dessin d'un poulet">
+                        <x-uwil-common::markup.img title="{{ __('Le Poulet') }}" alt="{{ __('Dessin d’un poulet') }}"
+                            url="{{ Vite::asset('resources/assets/images/poulet.png') }}" />
                    </div>
                    <p class="position-absolute top-100 start-50 translate-middle-x">Poulet</p>
                </div>
@ -38,7 +41,8 @@
                href="{{ route('fo.expertise.canard') }}">
                <div class="coin-wrapper position-relative rounded-circle mx-auto w-fit">
                    <div class="coin-img-wrapper position-relative rounded-circle p-2">
-                        <img class="m-4" src="{{ Vite::asset('resources/assets/images/canard.png') }}" alt="Dessin d'un canard">
+                        <x-uwil-common::markup.img title="{{ __('Le Canard') }}" alt="{{ __('Dessin d’un canard') }}"
+                            url="{{ Vite::asset('resources/assets/images/canard.png') }}" />
                    </div>
                    <p class="position-absolute top-100 start-50 translate-middle-x">Canard</p>
                </div>
@ -49,7 +53,8 @@
                href="{{ route('fo.expertise.lapin') }}">
                <div class="coin-wrapper position-relative rounded-circle mx-auto w-fit">
                    <div class="coin-img-wrapper position-relative rounded-circle p-2">
-                        <img class="m-4" src="{{ Vite::asset('resources/assets/images/lapin.png') }}" alt="Dessin d'un lapin">
+                        <x-uwil-common::markup.img title="{{ __('Le Lapin') }}" alt="{{ __('Dessin d’un lapin') }}"
+                            url="{{ Vite::asset('resources/assets/images/lapin.png') }}" />
                    </div>
                    <p class="position-absolute top-100 start-50 translate-middle-x">Lapin</p>
                </div>
--- a/resources/views/fo/vendor/cookie-notice-templates/standard.blade.php
+++ b/resources/views/fo/vendor/cookie-notice-templates/standard.blade.php
@ -3,7 +3,9 @@
        {{-- COOKIE SVG --}}
        <svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
            <title>{{ $strings->picture_cookie_title }}</title>
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0001 2.93383C14.0001 4.16622 14.6159 5.25477 15.5567 5.90849C15.3526 6.46423 15.2412 7.06473 15.2412 7.69126C15.2412 10.5472 17.5564 12.8624 20.4123 12.8624C21.0807 12.8624 21.7195 12.7356 22.3059 12.5047C22.9456 13.527 24.0817 14.2069 25.3766 14.2069C26.1872 14.2069 26.9357 13.9404 27.539 13.4903C27.5453 13.6594 27.5484 13.8294 27.5484 14C27.5484 21.4826 21.4826 27.5484 14 27.5484C6.51748 27.5484 0.45166 21.4826 0.45166 14C0.45166 6.51748 6.51748 0.45166 14 0.45166C14.3209 0.45166 14.6391 0.462811 14.9543 0.484747C14.3618 1.12929 14.0001 1.98931 14.0001 2.93383ZM21.2176 2.53212C21.2195 2.54914 21.2213 2.56619 21.2229 2.58328C21.2569 2.58864 21.2909 2.59433 21.3247 2.60035C21.2891 2.57745 21.2534 2.5547 21.2176 2.53212ZM25.5171 6.86104C25.523 6.89745 25.5285 6.93399 25.5336 6.97066C25.5512 6.97141 25.5687 6.97228 25.5861 6.97328C25.5633 6.93574 25.5403 6.89833 25.5171 6.86104ZM12.5247 2.09283C12.4748 2.38291 12.4487 2.68118 12.4487 2.98553C12.4487 4.33316 12.9591 5.56158 13.7972 6.48802C13.7266 6.87842 13.6898 7.28054 13.6898 7.69126C13.6898 11.404 16.6996 14.4137 20.4123 14.4137C20.8725 14.4137 21.3219 14.3675 21.7562 14.2794C22.689 15.1941 23.9669 15.7582 25.3766 15.7582C25.5439 15.7582 25.7094 15.7503 25.8726 15.7347C25.0321 21.5385 20.0368 25.9971 14.0001 25.9971C7.37431 25.9971 2.00305 20.6258 2.00305 14.0001C2.00305 7.87378 6.59498 2.82 12.5247 2.09283Z" fill="#FF4E4E" />
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                d="M14.0001 2.93383C14.0001 4.16622 14.6159 5.25477 15.5567 5.90849C15.3526 6.46423 15.2412 7.06473 15.2412 7.69126C15.2412 10.5472 17.5564 12.8624 20.4123 12.8624C21.0807 12.8624 21.7195 12.7356 22.3059 12.5047C22.9456 13.527 24.0817 14.2069 25.3766 14.2069C26.1872 14.2069 26.9357 13.9404 27.539 13.4903C27.5453 13.6594 27.5484 13.8294 27.5484 14C27.5484 21.4826 21.4826 27.5484 14 27.5484C6.51748 27.5484 0.45166 21.4826 0.45166 14C0.45166 6.51748 6.51748 0.45166 14 0.45166C14.3209 0.45166 14.6391 0.462811 14.9543 0.484747C14.3618 1.12929 14.0001 1.98931 14.0001 2.93383ZM21.2176 2.53212C21.2195 2.54914 21.2213 2.56619 21.2229 2.58328C21.2569 2.58864 21.2909 2.59433 21.3247 2.60035C21.2891 2.57745 21.2534 2.5547 21.2176 2.53212ZM25.5171 6.86104C25.523 6.89745 25.5285 6.93399 25.5336 6.97066C25.5512 6.97141 25.5687 6.97228 25.5861 6.97328C25.5633 6.93574 25.5403 6.89833 25.5171 6.86104ZM12.5247 2.09283C12.4748 2.38291 12.4487 2.68118 12.4487 2.98553C12.4487 4.33316 12.9591 5.56158 13.7972 6.48802C13.7266 6.87842 13.6898 7.28054 13.6898 7.69126C13.6898 11.404 16.6996 14.4137 20.4123 14.4137C20.8725 14.4137 21.3219 14.3675 21.7562 14.2794C22.689 15.1941 23.9669 15.7582 25.3766 15.7582C25.5439 15.7582 25.7094 15.7503 25.8726 15.7347C25.0321 21.5385 20.0368 25.9971 14.0001 25.9971C7.37431 25.9971 2.00305 20.6258 2.00305 14.0001C2.00305 7.87378 6.59498 2.82 12.5247 2.09283Z"
+                fill="#FF4E4E" />
            <circle cx="7.58784" cy="12.8624" r="1.96503" fill="#FF4E4E" />
            <circle cx="8.82887" cy="19.2745" r="1.3445" fill="#FF4E4E" />
            <circle cx="13.6897" cy="14.5171" r="1.03423" fill="#FF4E4E" />
@ -24,7 +26,7 @@
            {{-- 1ST PAGE BANNER --}}
            <div class="cn-banner-content">
                <div class="cn-banner-img">
-                    <img src="{{ $logo_picture_url }}" title="{{ $logo_title_text }}" alt="{{ $logo_alt_text }}">
+                    <x-uwil-common::markup.img title="{{ $logo_title_text }}" alt="{{ $logo_alt_text }}" url="{{ $logo_picture_url }}" />
                </div>
                <div class="cn-banner-text">
                    <div class="cn-banner-title">
@ -34,7 +36,8 @@
                        <p>{!! nl2br(e($strings->banner_text)) !!}</p>
                        <br>
                        <br>
-                        <a href="{{ route('fo.policies') }}" title="{{ __('Voir la charte de confidentialité') }}">{{ __('Charte de confidentialité') }}</a>
+                        <a href="{{ route('fo.policies') }}"
+                            title="{{ __('Voir la charte de confidentialité') }}">{{ __('Charte de confidentialité') }}</a>
                    </div>
                </div>
            </div>
@ -48,9 +51,12 @@
        </div>
        {{-- NAV BAR --}}
        <div class="cn-nav" title="{{ $strings->navigation_title }}" role="navigation">
-            <button class="cn-banner-btn cn-deny" id="cn-deny-banner" title="{{ $strings->button_forbid_all_title }}">{{ $strings->button_forbid_all }}</button>
-            <button class="cn-banner-btn cn-accept" id="cn-accept-banner" title="{{ $strings->button_allow_all_title }}">{{ $strings->button_allow_all }}</button>
-            <button class="cn-banner-btn cn-custom" id="cn-settings-banner" data-open-modal="{{ $strings->button_validate_and_close }}" data-close-modal="{{ $strings->button_customize }}">{{ $strings->button_customize }}</button>
+            <button class="cn-banner-btn cn-deny" id="cn-deny-banner"
+                title="{{ $strings->button_forbid_all_title }}">{{ $strings->button_forbid_all }}</button>
+            <button class="cn-banner-btn cn-accept" id="cn-accept-banner"
+                title="{{ $strings->button_allow_all_title }}">{{ $strings->button_allow_all }}</button>
+            <button class="cn-banner-btn cn-custom" id="cn-settings-banner" data-open-modal="{{ $strings->button_validate_and_close }}"
+                data-close-modal="{{ $strings->button_customize }}">{{ $strings->button_customize }}</button>
        </div>

        {{-- COOKIE LIST LI TEMPLATE --}}
@ -62,8 +68,8 @@
                    <a class="cn-cookie-link" title="{{ $strings->button_title_open_new_tab }}" target="blank">#link</a>
                </div>
                <div class="cn-cookie-buttons">
-                    <label class="cn-switch" role="checkbox" aria-label="{{ $strings->button_toggle_cookie }}" title="{{ $strings->button_toggle_cookie }}" aria-checked="undefined"
-                        tabindex="0">
+                    <label class="cn-switch" title="{{ $strings->button_toggle_cookie }}" role="checkbox"
+                        aria-label="{{ $strings->button_toggle_cookie }}" aria-checked="undefined" tabindex="0">
                        <input type="checkbox" tabindex="-1" />
                        <span></span>
                    </label>
--- a/routes/web-fo.php
+++ b/routes/web-fo.php
@ -145,6 +145,7 @@ Route::name('fo.')

        Route::get('/politique-de-donnees-personnelles', [StaticPageController::class, 'policies'])->name('policies');
        Route::get('/mentions-legales', [StaticPageController::class, 'legals'])->name('legals');
+        Route::get('/plan-du-site', [StaticPageController::class, 'sitemap'])->name('sitemap');

        Route::get('/recherche', [SearchController::class, 'search'])->name('search');
    });