update we hire page

2024-03-19 12:36:03 +01:00 · 2024-03-19 12:36:03 +01:00 · 14097c0acf
commit 14097c0acf
parent 844e9d73e9
24 changed files with 438 additions and 392 deletions
--- a/app/Http/Middleware/SecureHeaders.php
+++ b/app/Http/Middleware/SecureHeaders.php
@ -67,7 +67,8 @@ class SecureHeaders
            "frame-src 'self' " . implode(' ', [
                'https://www.google.com/recaptcha/',
                'https://recaptcha.google.com/recaptcha/',
-                'https://www.google.com/maps/'
+                'https://www.google.com/maps/',
+                'https://www.youtube.com',
            ]) . ';',
            "font-src 'self' data: " . \implode(' ', [
                // * VITE DEV
--- a/database/factories/TestimonialFactory.php
+++ b/database/factories/TestimonialFactory.php
@ -18,7 +18,7 @@ class TestimonialFactory extends Factory
        return [
            'name'     => fake()->name(),
            'job' => fake()->jobTitle(),
-            'content'   => \clean(\fake()->randomHtml(6, 7)),
+            'content'   => \clean(\fake()->randomHtml()),
            'picture_alt'     => fake()->sentence(),
            'picture_title'   => fake()->sentence(),
        ];
--- a/database/factories/assets/sections/default-banner-1400x500.png
+++ b/database/factories/assets/sections/default-banner-1400x500.png
--- a/database/factories/assets/sections/produce-banner-1200x450.png
+++ b/database/factories/assets/sections/produce-banner-1200x450.png
--- a/database/seeders/Development/SectionSeeder.php
+++ b/database/seeders/Development/SectionSeeder.php
@ -175,8 +175,109 @@ class SectionSeeder extends Seeder
     */
    private function getHireLifeData(Section $section)
    {
-        $data = $section->emptyKeyNumberBloc([], 'nombre');
-        $data = array_merge($data, $section->emptyWysiwygBloc([], "text accompagnant le nombre", fake()->text(35)));
+        $data = $section->emptyKeyNumberBloc([], 'nombre', fake()->randomNumber());
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "text accompagnant le nombre", clean(\fake()->randomHtml(1, 1)))
+        );
+        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
+            new Section(),
+            new \SplFileInfo(\resource_path(
+                '../database/factories/assets/sections/default-banner-1400x500.png'
+            ))
+        ), fake()->sentence(), fake()->sentence(), 1200, 450));
+        $data = array_merge($data, $section->emptyWysiwygBloc([], "vidéos", fake()->text(35)));
+        $data = array_merge($data, $section->emptyButtonBooleanBloc([], 'Voir les offres tout de suite'));
+        return $data;
+    }
+
+    /**
+     * Get MiniCrud datas for Hire - Grow section.
+     *
+     * @param \App\Models\Section $section
+     * @return array
+     */
+    private function getHireFormationData(Section $section)
+    {
+        $data = $section->emptyKeyNumberBloc([], 'nombre n°1', fake()->randomNumber());
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "text accompagnant le nombre n°1", clean(\fake()->randomHtml(1, 1)))
+        );
+        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
+            new Section(),
+            new \SplFileInfo(\resource_path(
+                '../database/factories/assets/sections/default-banner-1400x500.png'
+            ))
+        ), fake()->sentence(), fake()->sentence(), 1400, 500, true, 'Image n°1'));
+        $data = array_merge($data, $section->emptyStringBloc([], "Titre h3 de la section", fake()->text(35)));
+        $data = array_merge($data, $section->emptyKeyNumberBloc([], 'nombre n°2', fake()->randomNumber()));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "text accompagnant le nombre n°2", clean(\fake()->randomHtml(1, 1)))
+        );
+        $data = array_merge($data, $section->emptyKeyNumberBloc([], 'nombre n°3', fake()->randomNumber()));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "text accompagnant le nombre n°3", clean(\fake()->randomHtml(1, 1)))
+        );
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "n°2", clean(\fake()->randomHtml()))
+        );
+        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
+            new Section(),
+            new \SplFileInfo(\resource_path(
+                '../database/factories/assets/sections/default-banner-1400x500.png'
+            ))
+        ), fake()->sentence(), fake()->sentence(), 1400, 500, true, 'Image n°2'));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "n°3", clean(\fake()->randomHtml()))
+        );
+        return $data;
+    }
+
+    /**
+     * Get MiniCrud datas for Hire - Parity section.
+     *
+     * @param \App\Models\Section $section
+     * @return array
+     */
+    private function getHireParityData(Section $section)
+    {
+        $data = $section->emptyPictureBloc([], FileStorageHelper::storeFile(
+            new Section(),
+            new \SplFileInfo(\resource_path(
+                '../database/factories/assets/sections/default-banner-1400x500.png'
+            ))
+        ), fake()->sentence(), fake()->sentence(), 1400, 500, true, 'Bannière');
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "Contenu n°1", clean(\fake()->randomHtml()))
+        );
+        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
+            new Section(),
+            new \SplFileInfo(\resource_path(
+                '../database/factories/assets/sections/default-banner-1400x500.png'
+            ))
+        ), fake()->sentence(), fake()->sentence(), 1400, 500, true, 'Image n°1'));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "Contenu n°2", clean(\fake()->randomHtml()))
+        );
+        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
+            new Section(),
+            new \SplFileInfo(\resource_path(
+                '../database/factories/assets/sections/default-banner-1400x500.png'
+            ))
+        ), fake()->sentence(), fake()->sentence(), 1400, 500, true, 'Image n°2'));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "Contenu n°3", clean(\fake()->randomHtml()))
+        );
+        $data = array_merge($data, $section->emptyButtonBooleanBloc([], 'On Bouge Ensemble'));
+
        return $data;
    }

@ -192,22 +293,28 @@ class SectionSeeder extends Seeder
    }

    /**
-     * Get MiniCrud datas for Hire - Parity section.
+     * Get MiniCrud datas for Hire - Find section.
     *
     * @param \App\Models\Section $section
     * @return array
     */
-    private function getHireParityData(Section $section)
+    private function getHireFindData(Section $section)
    {
-        $data = $section->emptyButtonBooleanBloc([], 'On Bouge Ensemble');
+        $data = $section->emptyStringBloc([], "Titre h3 de la section", fake()->text(35));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "Contenu n°1", clean(\fake()->randomHtml()))
+        );
        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
-                '../database/factories/assets/sections/default-picture-100x100.png'
+                '../database/factories/assets/sections/default-banner-1400x500.png'
            ))
-        ), fake()->sentence(), fake()->sentence(), 100, 100, true));
-        $data = array_merge($data, $section->emptyStringBloc([], "Deuxième contenu", fake()->text(35)));
-
+        ), fake()->sentence(), fake()->sentence(), 1400, 500, true, 'Image'));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "Contenu n°2", clean(\fake()->randomHtml()))
+        );
        return $data;
    }

@ -361,7 +468,10 @@ class SectionSeeder extends Seeder
                '../database/factories/assets/sections/default-picture-100x100.png'
            ))
        ), fake()->sentence(), fake()->sentence(), 200, 200);
-        $data = array_merge($data, $section->emptyWysiwygBloc([], 'accompagnant l\'image', clean(\fake()->randomHtml())));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], 'accompagnant l\'image', clean(\fake()->randomHtml()))
+        );
        $data = array_merge($data, $section->emptyWysiwygBloc([], 'text', clean(\fake()->randomHtml())));
        return $data;
    }
@ -377,7 +487,7 @@ class SectionSeeder extends Seeder
        $data = $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
-                '../database/factories/assets/sections/produce-banner-1200x450.png'
+                '../database/factories/assets/sections/default-banner-1400x500.png'
            ))
        ), fake()->sentence(), fake()->sentence(), 1200, 450, true, "Bannière de la partie 1");
        $data = array_merge(
@ -414,7 +524,7 @@ class SectionSeeder extends Seeder
        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
-                '../database/factories/assets/sections/produce-banner-1200x450.png'
+                '../database/factories/assets/sections/default-banner-1400x500.png'
            ))
        ), fake()->sentence(), fake()->sentence(), 1200, 450, true, "Bannière de la partie 2"));
        $data = array_merge(
@ -451,7 +561,7 @@ class SectionSeeder extends Seeder
        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
-                '../database/factories/assets/sections/produce-banner-1200x450.png'
+                '../database/factories/assets/sections/default-banner-1400x500.png'
            ))
        ), fake()->sentence(), fake()->sentence(), 1200, 450, true, "Bannière de la partie 3"));
        $data = array_merge(
@ -478,31 +588,43 @@ class SectionSeeder extends Seeder
        $data = $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
-                '../database/factories/assets/sections/produce-banner-1200x450.png'
+                '../database/factories/assets/sections/default-banner-1400x500.png'
            ))
        ), fake()->sentence(), fake()->sentence(), 1200, 450, true, "Bannière de la partie 1");
-        $data = array_merge($data, $section->emptyWysiwygBloc([], 'accompagnant l\'image 1 de la partie 1', clean(\fake()->randomHtml())));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], 'accompagnant l\'image 1 de la partie 1', clean(\fake()->randomHtml()))
+        );
        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
                '../database/factories/assets/sections/default-picture-100x100.png'
            ))
        ), fake()->sentence(), fake()->sentence(), 100, 100, true, "Image 1 de la partie 1"));
-        $data = array_merge($data, $section->emptyWysiwygBloc([], 'accompagnant l\'image 2 de la partie 1', clean(\fake()->randomHtml())));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], 'accompagnant l\'image 2 de la partie 1', clean(\fake()->randomHtml()))
+        );
        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
                '../database/factories/assets/sections/default-picture-100x100.png'
            ))
        ), fake()->sentence(), fake()->sentence(), 100, 100, true, "Image 2 de la partie 1"));
-        $data = array_merge($data, $section->emptyWysiwygBloc([], 'accompagnant l\'image 3 de la partie 1', clean(\fake()->randomHtml())));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], 'accompagnant l\'image 3 de la partie 1', clean(\fake()->randomHtml()))
+        );
        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
                '../database/factories/assets/sections/default-picture-100x100.png'
            ))
        ), fake()->sentence(), fake()->sentence(), 100, 100, true, "Image 3 de la partie 1"));
-        $data = array_merge($data, $section->emptyWysiwygBloc([], 'accompagnant l\'image 1 de la partie 2', clean(\fake()->randomHtml())));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], 'accompagnant l\'image 1 de la partie 2', clean(\fake()->randomHtml()))
+        );
        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
@ -523,24 +645,33 @@ class SectionSeeder extends Seeder
        $data = $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
-                '../database/factories/assets/sections/produce-banner-1200x450.png'
+                '../database/factories/assets/sections/default-banner-1400x500.png'
            ))
        ), fake()->sentence(), fake()->sentence(), 1200, 450, true, "Bannière de la partie");
-        $data = array_merge($data, $section->emptyWysiwygBloc([], 'accompagnant l\'image 1 de la partie', clean(\fake()->randomHtml())));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], 'accompagnant l\'image 1 de la partie', clean(\fake()->randomHtml()))
+        );
        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
                '../database/factories/assets/sections/default-picture-100x100.png'
            ))
        ), fake()->sentence(), fake()->sentence(), 100, 100, true, "Image 1 de la partie"));
-        $data = array_merge($data, $section->emptyWysiwygBloc([], 'accompagnant l\'image 2 de la partie', clean(\fake()->randomHtml())));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], 'accompagnant l\'image 2 de la partie', clean(\fake()->randomHtml()))
+        );
        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
                '../database/factories/assets/sections/default-picture-100x100.png'
            ))
        ), fake()->sentence(), fake()->sentence(), 100, 100, true, "Image 2 de la partie"));
-        $data = array_merge($data, $section->emptyWysiwygBloc([], 'accompagnant l\'image 3 de la partie', clean(\fake()->randomHtml())));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], 'accompagnant l\'image 3 de la partie', clean(\fake()->randomHtml()))
+        );
        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
@ -562,10 +693,13 @@ class SectionSeeder extends Seeder
        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
-                '../database/factories/assets/sections/produce-banner-1200x450.png'
+                '../database/factories/assets/sections/default-banner-1400x500.png'
            ))
        ), fake()->sentence(), fake()->sentence(), 1200, 450, true, "Bannière de la partie 1"));
-        $data = array_merge($data, $section->emptyWysiwygBloc([], "accompagnant l'image 1 de la partie 1", clean(\fake()->randomHtml())));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "accompagnant l'image 1 de la partie 1", clean(\fake()->randomHtml()))
+        );
        $data = array_merge($data, $section->emptyPictureBloc([], FileStorageHelper::storeFile(
            new Section(),
            new \SplFileInfo(\resource_path(
@ -573,9 +707,15 @@ class SectionSeeder extends Seeder
            ))
        ), fake()->sentence(), fake()->sentence(), 100, 100, true, "Image 1 de la partie 1"));
        $data = array_merge($data, $section->emptyWysiwygBloc([], "text de la partie 2", clean(\fake()->randomHtml())));
-        $data = array_merge($data, $section->emptyWysiwygBloc([], "accompagnant le bouton 'On vous écoute'", clean(\fake()->randomHtml())));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "accompagnant le bouton 'On vous écoute'", clean(\fake()->randomHtml()))
+        );
        $data = array_merge($data, $section->emptyButtonBooleanBloc([], "'On vous écoute'"));
-        $data = array_merge($data, $section->emptyWysiwygBloc([], "accompagnant le bouton 'On se dévoile'", clean(\fake()->randomHtml())));
+        $data = array_merge(
+            $data,
+            $section->emptyWysiwygBloc([], "accompagnant le bouton 'On se dévoile'", clean(\fake()->randomHtml()))
+        );
        $data = array_merge($data, $section->emptyButtonBooleanBloc([], "'On se dévoile'"));
        return $data;
    }
--- a/database/seeders/Development/TestimonialSeeder.php
+++ b/database/seeders/Development/TestimonialSeeder.php
@ -23,7 +23,6 @@ class TestimonialSeeder extends Seeder
    {
        FileStorageHelper::removeModelFiles(new Testimonial());
        foreach (TypeEnum::cases() as $type) {
-            // @phpstan-ignore-next-line
            Testimonial::factory(3)->make()->each(function (Testimonial $testimonial) use ($type) {
                $testimonial->type    = $type;
                $testimonial->picture = FileStorageHelper::storeFile(
--- a/package-lock.json
+++ b/package-lock.json
@ -9,7 +9,6 @@
                "@babel/core": "^7.22.11",
                "@babel/types": "^7.21.2",
                "@erbelion/vite-plugin-laravel-purgecss": "^0.2.3",
-                "@fancyapps/ui": "^5.0.33",
                "@fortawesome/fontawesome-svg-core": "^6.5.1",
                "@fortawesome/free-regular-svg-icons": "^6.5.1",
                "@fortawesome/free-solid-svg-icons": "^6.5.1",
@ -34,6 +33,7 @@
                "eslint": "latest",
                "eslint-import-resolver-alias": "^1.1.2",
                "eslint-plugin-vue": "latest",
+                "fslightbox": "^3.4.1",
                "laravel-vite-plugin": "^0.8.1",
                "postcss-discard-comments": "^6.0.0",
                "prettier": "latest",
@ -907,12 +907,6 @@
                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
            }
        },
-        "node_modules/@fancyapps/ui": {
-            "version": "5.0.33",
-            "resolved": "https://registry.npmjs.org/@fancyapps/ui/-/ui-5.0.33.tgz",
-            "integrity": "sha512-nYW7ntjhrpqoLz/vA9KpJ2zJ5gXRB7rpFKXWjW4GC1f2st/IoI1Oy2TEEz0xABIlvPTCuoMXaT1X3UC7bP97rA==",
-            "dev": true
-        },
        "node_modules/@fortawesome/fontawesome-common-types": {
            "version": "6.5.1",
            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
@ -4020,6 +4014,12 @@
                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
            }
        },
+        "node_modules/fslightbox": {
+            "version": "3.4.1",
+            "resolved": "https://registry.npmjs.org/fslightbox/-/fslightbox-3.4.1.tgz",
+            "integrity": "sha512-/YkPP9jCnZMIlPuJPUo10JTCOCntU0vHeIKe0cB5ruR0ss2QCLhzxY5h24grZ2gUsF//0NXik7iGMU05RV/jcg==",
+            "dev": true
+        },
        "node_modules/function-bind": {
            "version": "1.1.2",
            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
--- a/package.json
+++ b/package.json
@ -17,7 +17,6 @@
        "@babel/core": "^7.22.11",
        "@babel/types": "^7.21.2",
        "@erbelion/vite-plugin-laravel-purgecss": "^0.2.3",
-        "@fancyapps/ui": "^5.0.33",
        "@fortawesome/fontawesome-svg-core": "^6.5.1",
        "@fortawesome/free-regular-svg-icons": "^6.5.1",
        "@fortawesome/free-solid-svg-icons": "^6.5.1",
@ -39,9 +38,10 @@
        "bootstrap": "^5.3.2",
        "chart.js": "^4.4.0",
        "cropperjs": "^1.6.1",
-        "eslint": "latest",
        "eslint-import-resolver-alias": "^1.1.2",
        "eslint-plugin-vue": "latest",
+        "eslint": "latest",
+        "fslightbox": "^3.4.1",
        "laravel-vite-plugin": "^0.8.1",
        "postcss-discard-comments": "^6.0.0",
        "prettier": "latest",
@ -50,26 +50,26 @@
        "rollup-plugin-copy": "^3.5.0",
        "sass": "latest",
        "slugify": "^1.6.6",
-        "stylelint": "^15.11.0",
        "stylelint-config-idiomatic-order": "github:ream88/stylelint-config-idiomatic-order",
        "stylelint-config-sass-guidelines": "^10.0.0",
        "stylelint-config-standard-scss": "^11.1.0",
        "stylelint-scss": "^5.3.2",
+        "stylelint": "^15.11.0",
        "sweetalert2": "^11.7.31",
        "swiper": "^11.0.6",
        "terser": "latest",
        "toastify-js": "^1.12.0",
        "ts-loader": "^9.3.1",
-        "typescript": ">=3.3.1 <5.2.0",
        "typescript-eslint": "latest",
-        "vite": "^4.5.1",
+        "typescript": ">=3.3.1 <5.2.0",
        "vite-plugin-babel": "latest",
        "vite-plugin-checker": "latest",
        "vite-plugin-eslint": "latest",
        "vite-plugin-stylelint": "latest",
-        "vue": "latest",
+        "vite": "^4.5.1",
        "vue-eslint-parser": "^9.3.2",
        "vue-loader": "^17.3.1",
-        "vue-tsc": "1.8.11"
+        "vue-tsc": "1.8.11",
+        "vue": "latest"
    }
 }
--- a/resources/assets/images/others/background_video.png
+++ b/resources/assets/images/others/background_video.png
--- a/resources/lang/fr/cookie-notice.php
+++ b/resources/lang/fr/cookie-notice.php
@ -26,6 +26,7 @@ return [
    'picture_cookie_title'      => 'Image d’un bon gros cookie',
    'navigation_title'          => 'Navigation du panneau des cookies',
    'custom' => [
+        'frame'     => 'Vous devez accepter les cookies pour visionner cette vidéo',
        'analytics' => [
            'title' => 'Google Analytics',
            'description' => 'Les services de mesure d’audience permettent de générer des statistiques de fréquentation utiles à l’amélioration du site.',
--- a/resources/sass/fo/base/_common.scss
+++ b/resources/sass/fo/base/_common.scss
@ -28,11 +28,9 @@ $theme-colors: map.merge($theme-colors, $light-colors);
    }

    .video-play-button {
-        top: 50%;
-        left: 50%;
        height: 3rem;
-        border-radius: 5rem;
-        transform: translate(-50%, -50%);
+        border-radius: 100%;
+        box-shadow: inset 0 0 0 2px #{$color-tertiary};
    }
 }

@ -174,7 +172,7 @@ $theme-colors: map.merge($theme-colors, $light-colors);
@include media-breakpoint-up(lg) {
    // Mask to add a transparent effect on the right side.
    .mask-white {
-        mask: linear-gradient(-90deg, #fff6, #fff 30%);
+        mask: linear-gradient(-90deg,#fff0 0%,#fff 20%,#fff 80%,#fff0 100%);
    }

    @each $idx, $color in $theme-colors {
--- a/resources/sass/fo/fo.scss
+++ b/resources/sass/fo/fo.scss
@ -8,7 +8,6 @@
@import "./vendor/bootstrap";
@import "./vendor/swiper";
@import "./vendor/cookie-notice";
-@import "./vendor/fancybox";

 // * BASE
@import "./base/bootstrap-overload";
--- a/resources/sass/fo/pages/_hire.scss
+++ b/resources/sass/fo/pages/_hire.scss
@ -6,6 +6,30 @@
        text-transform: none;
    }

+    .swiper-button-prev-custom, .swiper-button-next-custom {
+        top: 101%;
+
+        @include media-breakpoint-up(lg) {
+            top: 50%;
+        }
+    }
+
+    .swiper-button-prev-custom {
+        transform: rotate(180deg);
+
+        @include media-breakpoint-up(lg) {
+            left: 10%;
+            transform: rotate(180deg) translateY(50%);
+        }
+    }
+
+    .swiper-button-next-custom {
+        @include media-breakpoint-up(lg) {
+            right: 10%;
+            transform: translateY(-50%);
+        }
+    }
+
    .company-life, .formation{
        .ck-content{
            h3 {
@ -23,80 +47,4 @@
            filter: invert(1);
        }
    }
-
-    .parity{
-        .parity-img{
-            min-height: 210px;
-            max-height: 450px;
-            object-fit: cover;
-        }
-    }
-
-    .find{
-        .find-img{
-            min-width: 330px;
-            min-height: 210px;
-            object-fit: cover;
-        }
-    }
 }
-
-
-// LLLLLLLLLLL                     GGGGGGGGGGGGG
-// L:::::::::L                  GGG::::::::::::G
-// L:::::::::L                GG:::::::::::::::G
-// LL:::::::LL               G:::::GGGGGGGG::::G
-//   L:::::L                G:::::G       GGGGGG
-//   L:::::L               G:::::G
-//   L:::::L               G:::::G
-//   L:::::L               G:::::G    GGGGGGGGGG
-//   L:::::L               G:::::G    G::::::::G
-//   L:::::L               G:::::G    GGGGG::::G
-//   L:::::L               G:::::G        G::::G
-//   L:::::L         LLLLLL G:::::G       G::::G
-// LL:::::::LLLLLLLLL:::::L  G:::::GGGGGGGG::::G
-// L::::::::::::::::::::::L   GG:::::::::::::::G
-// L::::::::::::::::::::::L     GGG::::::GGG:::G
-// LLLLLLLLLLLLLLLLLLLLLLLL        GGGGGG   GGGG
-@include media-breakpoint-up(lg) {
-    .we-hire {
-        .swiper-button-prev-custom {
-            top: 55%;
-            transform: rotate(180deg);
-        }
-
-        .swiper-button-next-custom {
-            top: calc(50% + 19px);
-            right: 11.5rem;
-        }
-
-        .swiper-button-prev-custom, .swiper-button-next-custom {
-            position: absolute;
-            z-index: 20;
-            padding: 0.5rem;
-            border: 1px solid;
-            border-color: $primary;
-            border-radius: 2rem;
-            background-color: transparent;
-            transition: all ease-in-out .3s;
-
-            &:hover{
-                z-index: 999;
-                background-color: #fff;
-            }
-        }
-
-        .swiper-button-disabled {
-            display: none;
-        }
-
-        .find{
-            .find-img{
-                min-width: 511px;
-                min-height: 330px;
-                object-fit: cover;
-            }
-        }
-    }
-}
-
--- a/resources/sass/fo/vendor/_fancybox.scss
+++ b/resources/sass/fo/vendor/_fancybox.scss
@ -1 +0,0 @@
-@import "@fancyapps/ui/dist/fancybox/fancybox.css";
--- a/resources/ts/fo/base/common.ts
+++ b/resources/ts/fo/base/common.ts
@ -1,11 +1,7 @@
-import { Fancybox } from "@fancyapps/ui";
 import Swiper from "swiper";
 import { Keyboard, Navigation, Pagination } from "swiper/modules";

 document.addEventListener("DOMContentLoaded", function () {
-    // * Video frames.
-    Fancybox.bind("[data-fancybox]");
-
    // Define a multiplier according to the window size.

    function getWindowWidth() {
@ -100,58 +96,52 @@ document.addEventListener("DOMContentLoaded", function () {
            },
        },
        "swiper-we-hire": {
-            modules: [Navigation, Keyboard],
+            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1.2,
            centeredSlides: true,
-            spaceBetween: 30,
+            spaceBetween: 10,
            navigation: {
                nextEl: ".video-next",
                prevEl: ".video-prev",
            },
-            keyboard: {
-                enabled: true,
-            },
            breakpoints: {
                576: {
-                    slidesPerView: 1.1,
-                    spaceBetween: 0,
+                    slidesPerView: 1.2,
+                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 1.5,
-                    spaceBetween: 0,
+                    spaceBetween: 20,
                },
                1200: {
-                    slidesPerView: 1.3,
-                    spaceBetween: 0,
+                    slidesPerView: 3,
+                    spaceBetween: 20,
                },
            },
        },
        "swiper-we-hire-testimonials": {
-            modules: [Navigation, Keyboard],
+            modules: [Navigation],
            grabCursor: true,
            slidesPerView: 1.2,
            centeredSlides: true,
-            spaceBetween: 30,
+            spaceBetween: 10,
            navigation: {
                nextEl: ".testi-next",
                prevEl: ".testi-prev",
            },
-            keyboard: {
-                enabled: true,
-            },
            breakpoints: {
                576: {
-                    slidesPerView: 1.1,
-                    spaceBetween: 0,
+                    slidesPerView: 1.2,
+                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 1.5,
-                    spaceBetween: 0,
+                    spaceBetween: 20,
                },
                1200: {
-                    slidesPerView: 1.3,
-                    spaceBetween: 0,
+                    slidesPerView: 3,
+                    spaceBetween: 20,
                },
            },
        },
@ -293,6 +283,49 @@ document.addEventListener("DOMContentLoaded", function () {
            behavior: "smooth",
        });
    });
+
+    // * Video frames.
+    const videoFrameList = document.querySelectorAll(
+        ".video-frame"
+    ) as NodeListOf<HTMLLinkElement>;
+    for (const videoLink of videoFrameList) {
+        if (!videoLink.dataset.type) {
+            throw new Error("Missing dataset type");
+        }
+        if (!videoLink.dataset.frame) {
+            throw new Error("Missing dataset frame");
+        }
+        // @ts-ignore
+        window.__CN_VIDEO = window.__CN_VIDEO ?? {};
+
+        const newIframe = document.createElement("iframe");
+        newIframe.frameBorder = "0";
+        newIframe.allow = "fullscreen";
+        newIframe.width = "1920px";
+        newIframe.height = "1080px";
+        newIframe.setAttribute("allowfullscreen", "allowfullscreen");
+
+        // @ts-ignore
+        const instance = new FsLightbox();
+        instance.props.sources = [newIframe];
+
+        setTimeout(() => {
+            videoLink.addEventListener("click", (e) => {
+                e.preventDefault();
+
+                // * This comes fslightbox lib
+                // @ts-ignore
+                instance.open();
+                setTimeout(function () {
+                    // @ts-ignore
+                    newIframe.src = window.__CN_VIDEO[videoLink.dataset.type]
+                        ? String(videoLink.href)
+                        : String(videoLink.dataset.frame);
+                }, 50);
+                return false;
+            });
+        }, 300);
+    }
 });

 // Bootstrap Carousel
--- a/resources/ts/fo/fo.ts
+++ b/resources/ts/fo/fo.ts
@ -6,8 +6,8 @@ import.meta.glob(["./../../assets/images/**"]);
 import CookieNotice from "@ldc-web/cookie-notice";
 window.CookieNotice = CookieNotice;

-import { Fancybox } from "@fancyapps/ui";
-window.Fancybox = Fancybox;
+// FANCYBOX
+import "fslightbox";

 // UTILITIES
 import "./utilities/bootstrap";
--- a/resources/ts/index.d.ts
+++ b/resources/ts/index.d.ts
@ -1,4 +1,3 @@
-import type { Fancybox } from "@fancyapps/ui";
 import CookieNotice from "@ldc-web/cookie-notice";
 import type VueTagsInput from "@sipec/vue3-tags-input";
 import { AxiosStatic } from "axios";
@ -74,7 +73,6 @@ declare global {

    interface Window {
        CookieNotice: typeof CookieNotice;
-        Fancybox: typeof Fancybox;
        axios: AxiosStatic;
        Swal: Function;
        vueDebug: boolean | undefined;
--- a/resources/ts/utilities/sass-safelist.ts
+++ b/resources/ts/utilities/sass-safelist.ts
@ -23,6 +23,6 @@ const sassSafelist: UserDefinedSafelist = [
    /^btn-.*/,
    /^text-bubble-.*/,
    /^swiper-.*/,
-    /^plus-corner-.*/
+    /^plus-corner-.*/,
 ];
 export { sassSafelist };
--- a/resources/views/fo/modules/frame.blade.php
+++ b/resources/views/fo/modules/frame.blade.php
@ -10,7 +10,7 @@

 <body>
    <h1
-        style="padding: 1rem; background-color: rgb(153, 153, 153); color: #FFF; position: absolute; top:50%; left: 50%; transform:translateX(-50%) translateY(-50%);">
+        style="text-align:center; padding: 1rem; background-color: rgb(153, 153, 153); color: #FFF; position: absolute; top:50%; left: 50%; transform:translateX(-50%) translateY(-50%);">
        {{ __('cookie-notice.custom.frame', [
            'type' => $frame,
        ]) }}
--- a/resources/views/fo/modules/video-frame.blade.php
+++ b/resources/views/fo/modules/video-frame.blade.php
@ -1,7 +1,7 @@
@php $uniqueID = uniqid(); @endphp
-{{-- FIXME: cookie-notice ici devrait laisser l'image affichée... Remettre la classe cn-vimeo avec le fix. --}}
-<a class="position-relative video-frame" data-fancybox data-type="{{ $type }}" data-frame="{{ route('fo.frame', ['frame' => $type]) }}"
+<a class="position-relative video-frame" data-type="{{ $type }}" data-frame="{{ route('fo.frame', ['frame' => $type]) }}"
    href="{{ $link }}">
-    <img class="ratio ratio-16x9 rounded-4 video-thumbnail" src="{{ $picture }}" title="{{ $title }}" alt="{{ $alt }}">
-    <i class="video-play-button fa-solid fa-circle-play position-absolute fa-2xl text-tertiary bg-white"></i>
+    <img class="video-thumbnail ratio ratio-16x9 rounded-4" src="{{ $picture }}" title="{{ $title }}" alt="{{ $alt }}">
+    <i
+        class="video-play-button fa-solid fa-circle-play position-absolute top-50 start-50 translate-middle fa-2xl text-tertiary bg-white"></i>
 </a>
--- a/resources/views/fo/pages/hire.blade.php
+++ b/resources/views/fo/pages/hire.blade.php
@ -31,76 +31,71 @@
                            </div>
                        @endif
                    </div>
-                    <div class="col-12 align-self-center first-bubble my-3">
-                        <div class="text-bubble-top-quad text-quad h-100 d-flex align-items-center">
-                            <div class="w-50 w-lg-25 mx-auto text-center">
-                                <p class="w-lg-50 w-100 mx-auto">
-                                    <span class="fw-semibold fs-1">{{ __('120') }}</span>
-                                    <br />
-                                    {{ str(__('métiers de l\'industrie agroalimentaire'))->upper() }}
-                                </p>
-                            </div>
+                    <div class="col-12 mb-3">
+                        @include('fo.partials.key-number', [
+                            'color' => 'quad',
+                            'value' => $compagnyLifeSection->data['bloc_key_nombre']['value'],
+                            'text' => clean($compagnyLifeSection->data['bloc_text_accompagnant_le_nombre_content']['value']),
+                            'wysiwyg' => true,
+                        ])
+                    </div>
+                    <div class="col-12 d-none d-lg-block mb-5 mt-3 text-center">
+                        <img class="rounded-3 img-fluid" src="{{ asset($compagnyLifeSection->data['bloc_image']['value']) }}"
+                            alt="{{ $compagnyLifeSection->data['bloc_image']['alt'] }}"
+                            alt="{{ $compagnyLifeSection->data['bloc_image']['title'] }}">
+                    </div>
+                    @if ($compagnyLifeSection->data['bloc_button_voir_les_offres_tout_de_suite']['value'])
+                        <div class="col-12 text-center">
+                            <a class="btn btn-primary rounded-5 text-initial fw-semibold"
+                                href="https://recrutement.ldc.fr/fr/annonces?brands=789,591,2727" target="_blank">
+                                {{ __('Vite ! Je veux voir les offres tout de suite') }}
+                            </a>
                        </div>
-                    </div>
-                    <div class="col-12 d-none d-lg-block mb-5 mt-3">
-                        <img class="rounded-3 img-fluid"
-                            src="{{ Vite::asset('resources/assets/images/banners/alternative_banner_reworked.jpg') }}"
-                            alt="Paysage d'un champs de blé au soleil couchant avec une lisière en fond de tableau">
-                    </div>
-                    <div class="col-12 text-center">
-                        <a class="btn btn-primary rounded-5 text-initial fw-semibold"
-                            href="https://recrutement.ldc.fr/fr/annonces?brands=789,591,2727" target="_blank">
-                            {{ __('Vite ! Je veux voir les offres tout de suite') }}
-                        </a>
-                    </div>
+                    @endif
                </div>
            </div>
            <div class="border-top-curved-quad-light">
                <div class="bg-quad-light overflow-hidden pb-5">
-                    {{-- FIXME: il faudra changer le texte qui est le même que la partie précédente car optionnel en BO --}}
                    <div class="container">
-                        @if ($compagnyLifeSection->text)
-                            <div class="ck-content mb-5 text-center">
-                                {!! clean($compagnyLifeSection->text) !!}
-                            </div>
-                        @endif
+                        <div class="ck-content mb-5 text-center">
+                            {!! clean($compagnyLifeSection->data['bloc_videos_content']['value']) !!}
+                        </div>
                    </div>
                    <div class="row">
-                        <div class="col-10 mask-white ms-auto">
+                        <div class="col-12 position-relative">
                            {{-- SWIPER VIDEO --}}
-                            <div class="swiper mt-lg-0 h-fit overflow-visible" id="swiper-we-hire">
-                                <div class="swiper-wrapper h-fit gap-3">
+                            <div class="swiper mt-lg-0 mask-white h-fit overflow-visible" id="swiper-we-hire">
+                                <div class="swiper-wrapper h-fit">
                                    @foreach ($videoModels as $video)
                                        <div class="swiper-slide h-auto">
                                            <figure>
-                                                <div class="d-md-flex justify-content-center" type="vimeo">
+                                                <div class="d-md-flex justify-content-center">
                                                    @include('fo.modules.video-frame', [
-                                                        'type' => 'vimeo',
+                                                        'type' => 'youtube',
                                                        'title' => __('Visionner la vidéo'),
-                                                        'link' => 'https://vimeo.com/' . $video->video_id,
+                                                        'link' => "https://www.youtube.com/embed/{$video->video_id}",
                                                        'picture' => Vite::asset(
-                                                            'resources/assets/images/banners/alternative_banner_reworked.jpg'),
-                                                        'alt' => trans('Video_about_who_we_are'),
+                                                            'resources/assets/images/others/background_video.png'),
+                                                        'alt' => __('Video_about_who_we_are'),
+                                                        'linkNewTab' => true,
                                                    ])
                                                </div>
-                                                <figcaption class="text-center">{{ __($video->place) }} :<br /> {{ __($video->title) }}
+                                                <figcaption class="text-center">
+                                                    {{ __($video->place) }} :<br /> {{ __($video->title) }}
                                                </figcaption>
                                            </figure>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
-                            {{-- FIXME: fléche de navigation a refactoriser une fois le bloc vidéo fait --}}
-                            <div class="swiper-button swiper-button-prev swiper-button-prev-custom video-prev d-none d-lg-block mx-3">
+                            <button class="swiper-button swiper-button-prev-custom video-prev mx-3" type="button">
                                <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
-                                    title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}" role="button"
-                                    tabindex="0">
-                            </div>
-                            <div class="swiper-button swiper-button-next swiper-button-next-custom video-next d-none d-lg-block mx-3">
+                                    title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
+                            </button>
+                            <button class="swiper-button swiper-button-next-custom video-next mx-3" type="button">
                                <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
-                                    title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}" role="button"
-                                    tabindex="0">
-                            </div>
+                                    title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
+                            </button>
                        </div>
                        <div class="col-12 mt-5 text-center">
                            <a class="btn rounded-pill fw-semibold border-primary text-primary text-initial border border-2"
@ -114,23 +109,72 @@
            </div>
        </section>
        {{-- FORMATION --}}
-        {{-- FIXME: Toute cette partie est a revoir
-            Toutes les illustrations devraient être adminisatrable en BO (optionnel)
-            Tous les chiffres clés sont a l'heure actuelle dans le wysiwyg,
-            en partant de ce constat, je ne vois pas comment faire les bulles demandé dans la créa --}}
-        <section class="formation border-top-curved-upper-quad-light">
-            <div class="container text-center">
-                <h2 class="text-primary fw-bold">
-                    {{ $formationSection->h2_title }}
-                </h2>
-                @if ($formationSection->text)
-                    <div class="ck-content mb-5">
+        <section class="formation border-top-curved-upper-quad-light mb-5">
+            <div class="container">
+                <div class="row position-relative">
+                    <div class="col-12 text-center">
+                        <h2 class="text-primary fw-bold">
+                            {{ $formationSection->h2_title }}
+                        </h2>
+                    </div>
+                    <div class="col-12 ck-content text-center">
                        {!! clean($formationSection->text) !!}
                    </div>
-                @endif
-                <div class="d-flex justify-content-center mb-1 mt-4">
-                    <a class="btn btn-primary rounded-pill fw-bold text-initial" href="#we-testimonials"
-                        title="{{ __('Lire nos témoignages') }}">{{ __('On témoigne') }}</a>
+                    <div class="col-12 mt-3">
+                        @include('fo.partials.key-number', [
+                            'color' => 'primary',
+                            'value' => $formationSection->data['bloc_key_nombre_n1']['value'] . '%',
+                            'text' => clean($formationSection->data['bloc_text_accompagnant_le_nombre_n1_content']['value']),
+                            'wysiwyg' => true,
+                        ])
+                    </div>
+                    <div class="col-12 d-none d-lg-block mt-1 text-center">
+                        <img class="rounded-3 img-fluid" src="{{ asset($formationSection->data['bloc_image_n1']['value']) }}"
+                            alt="{{ $formationSection->data['bloc_image_n1']['alt'] }}"
+                            alt="{{ $formationSection->data['bloc_image_n1']['title'] }}">
+                    </div>
+                    <div class="col-12 mb-1 mt-4 text-center">
+                        <a class="btn btn-primary rounded-pill fw-bold text-initial" href="#we-testimonials"
+                            title="{{ __('Lire nos témoignages') }}">{{ __('On témoigne') }}</a>
+                    </div>
+                    <div class="col-12 my-3">
+                        <div class="bg-primary-light rounded-3 p-lg-5 p-3">
+                            <div class="ck-content text-center">
+                                <h3>{{ $formationSection->data['bloc_string_titre_h3_de_la_section']['value'] }}</h3>
+                            </div>
+                            <div class="d-flex flex-column flex-lg-row justify-content-center align-items-center">
+                                <div class="d-flex flex-column flex-sm-row justify-content-center align-items-center">
+                                    @include('fo.partials.key-number', [
+                                        'color' => 'tertiary',
+                                        'value' => '+' . $formationSection->data['bloc_key_nombre_n2']['value'] . '%',
+                                        'text' => clean(
+                                            $formationSection->data['bloc_text_accompagnant_le_nombre_n2_content']['value']),
+                                        'wysiwyg' => true,
+                                    ])
+                                    @include('fo.partials.key-number', [
+                                        'color' => 'primary',
+                                        'value' => '+' . $formationSection->data['bloc_key_nombre_n3']['value'] . '%',
+                                        'text' => clean(
+                                            $formationSection->data['bloc_text_accompagnant_le_nombre_n3_content']['value']),
+                                        'wysiwyg' => true,
+                                    ])
+                                </div>
+                                <div class="ck-content text-lg-start ms-lg-5 text-center">
+                                    {!! clean($formationSection->data['bloc_n2_content']['value']) !!}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-12 mt-1">
+                        <div class="ck-content text-center">
+                            {!! clean($formationSection->data['bloc_n3_content']['value']) !!}
+                        </div>
+                    </div>
+                    <div class="col-12 mt-1 text-center">
+                        <img class="rounded-3 img-fluid" src="{{ asset($formationSection->data['bloc_image_n2']['value']) }}"
+                            alt="{{ $formationSection->data['bloc_image_n2']['alt'] }}"
+                            alt="{{ $formationSection->data['bloc_image_n2']['title'] }}">
+                    </div>
                </div>
            </div>
        </section>
@ -142,10 +186,9 @@
                    <h3>{{ $testimonialSection->data['bloc_string_titre_h3_de_la_section']['value'] }}</h3>
                </div>
                <div class="row">
-                    <div class="col-lg-10 offset-lg-2 col-11 offset-1 mask-white">
-                        {{-- FIXME: scroll du swiper NOK ne va pas jusqu'a centrer la dernière vignette --}}
-                        <div class="swiper mt-lg-0 h-fit overflow-visible" id="swiper-we-hire-testimonials">
-                            <div class="swiper-wrapper h-fit gap-3">
+                    <div class="col-12 position-relative">
+                        <div class="swiper mt-lg-0 mask-white h-fit overflow-visible" id="swiper-we-hire-testimonials">
+                            <div class="swiper-wrapper h-fit">
                                @foreach ($testimonialModels as $testimonial)
                                    <div class="swiper-slide h-auto">
                                        @include('fo.partials.testimonials.card', [
@ -167,11 +210,11 @@
                                @endforeach
                            </div>
                        </div>
-                        <button class="swiper-button swiper-button-prev-custom testi-prev d-none d-lg-block mx-3" type="button">
+                        <button class="swiper-button swiper-button-prev-custom testi-prev mx-3" type="button">
                            <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
                                title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
                        </button>
-                        <button class="swiper-button swiper-button-next-custom testi-next d-none d-lg-block mx-3" type="button">
+                        <button class="swiper-button swiper-button-next-custom testi-next mx-3" type="button">
                            <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}"
                                title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
                        </button>
@ -187,68 +230,59 @@
                        <h2 class="fw-bold">{{ $paritySection->h2_title }}</h2>
                    </div>
                    <div class="col-12 mt-4 text-center">
-                        <img class="img-fluid rounded-4 parity-img" src="{{ $paritySection->data['bloc_image']['value'] }}"
-                            title="{{ $paritySection->data['bloc_image']['title'] }}" alt="{{ $paritySection->data['bloc_image']['alt'] }}">
+                        <img class="img-fluid rounded-4 parity-img" src="{{ $paritySection->data['bloc_banniere']['value'] }}"
+                            title="{{ $paritySection->data['bloc_banniere']['title'] }}"
+                            alt="{{ $paritySection->data['bloc_banniere']['alt'] }}">
                    </div>
                </div>
-                {{-- wysiwyg unique --}}
                <div class="row mb-3 mt-4">
                    <div class="col-12">
-                        @if ($paritySection->text)
-                            <div class="ck-content text-primary text-center">
-                                {!! clean($paritySection->text) !!}
-                            </div>
-                        @endif
+                        <div class="ck-content text-primary text-center">
+                            {!! clean($paritySection->data['bloc_contenu_n1_content']['value']) !!}
+                        </div>
                    </div>
                </div>
-                {{-- FIXME: Tout ce qui suit a été défini comme optionnel donc non présent en BO --}}
-                {{-- On doit avoir un text riche (optionnel) et une photo associé a ce texte (défini comme optionnelle aussi en bo donc non présente) --}}
                <div class="row justify-content-center">
-                    <div class="col-12 col-lg-6 my-3">
+                    <div class="col-12 my-3">
                        <div class="card bg-quad-light">
-                            <img class="card-img-top rounded-top-4 p-2" src="{{ $paritySection->data['bloc_image']['value'] }}"
-                                alt="{{ $paritySection->data['bloc_image']['alt'] }}">
+                            <img class="card-img-top rounded-top-4 p-2" src="{{ $paritySection->data['bloc_image_n1']['value'] }}"
+                                alt="{{ $paritySection->data['bloc_image_n1']['alt'] }}">
                            <div class="card-body text-center">
-                                <p class="card-text">{{ $paritySection->data['bloc_image']['title'] }}</p>
+                                <p class="card-text">{{ $paritySection->data['bloc_image_n1']['title'] }}</p>
                            </div>
                        </div>
-                        @if ($paritySection->text)
-                            <div class="ck-content my-1 text-center">
-                                {!! clean($paritySection->text) !!}
-                            </div>
-                        @endif
+                        <div class="ck-content my-1 text-center">
+                            {!! clean($paritySection->data['bloc_contenu_n2_content']['value']) !!}
+                        </div>
                    </div>
                    <div class="col-12 w-lg-75 my-3">
                        <div class="text-center">
-                            {{-- FIXME: src de l'img a changer, devrait être administrable --}}
                            <img class="card-img-top p-2" src="{{ Vite::asset('resources/assets/images/infographie.png') }}"
-                                alt="{{ $paritySection->data['bloc_image']['alt'] }}">
+                                alt="{{ __('Schéma des activités') }}">
                        </div>
                    </div>
-                    <div class="col-12 col-lg-6 my-3">
+                    <div class="col-12 my-3">
                        <div class="card bg-tertiary-light">
-                            <img class="card-img-top rounded-top-4 p-2" src="{{ $paritySection->data['bloc_image']['value'] }}"
-                                alt="{{ $paritySection->data['bloc_image']['alt'] }}">
+                            <img class="card-img-top rounded-top-4 p-2" src="{{ $paritySection->data['bloc_image_n2']['value'] }}"
+                                alt="{{ $paritySection->data['bloc_image_n2']['alt'] }}">
                            <div class="card-body text-center">
-                                <p class="card-text">{{ $paritySection->data['bloc_image']['title'] }}</p>
+                                <p class="card-text">{{ $paritySection->data['bloc_image_n2']['title'] }}</p>
                            </div>
                        </div>
-                        @if ($paritySection->text)
-                            <div class="ck-content my-1 text-center">
-                                {!! clean($paritySection->text) !!}
-                            </div>
-                        @endif
+                        <div class="ck-content my-1 text-center">
+                            {!! clean($paritySection->data['bloc_contenu_n3_content']['value']) !!}
+                        </div>
                    </div>
                </div>
-                {{-- @if ($paritySection->data['bloc_button_on_bouge_ensemble']['value']) --}}
-                <div class="row">
-                    <div class="col-12 text-center">
-                        <a class="btn btn-primary rounded-pill fw-semibold text-initial" href="{{ route('fo.news.index') }}">
-                            {{ __('On bouge') }}
-                        </a>
+                @if ($paritySection->data['bloc_button_on_bouge_ensemble']['value'])
+                    <div class="row">
+                        <div class="col-12 text-center">
+                            <a class="btn btn-primary rounded-pill fw-semibold text-initial" href="{{ route('fo.news.index') }}">
+                                {{ __('On bouge') }}
+                            </a>
+                        </div>
                    </div>
-                </div>
-                {{-- @endif --}}
+                @endif
            </div>
        </section>
        {{-- FIND --}}
@ -258,22 +292,20 @@
                    <div class="container-fluid">
                        <div class="row text-primary text-center">
                            <div class="col-12 mb-3">
-                                <h2 class="fw-bold">{{ $findSection->h2_title }}</h2>
+                                <h2 class="fw-bold">{{ $findSection->data['bloc_string_titre_h3_de_la_section']['value'] }}</h2>
                            </div>
-                            @if ($findSection->text)
-                                <div class="col-10 offset-1">
-                                    <div class="ck-content mb-5">
-                                        {!! clean($findSection->text) !!}
-                                    </div>
+                            <div class="col-10 offset-1">
+                                <div class="ck-content mb-5">
+                                    {!! clean($findSection->data['bloc_contenu_n1_content']['value']) !!}
                                </div>
-                            @endif
+                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 text-center">
                                <img class="img-fluid rounded-4 find-img"
                                    src="{{ Vite::asset('resources/assets/images/banners/alternative_banner_reworked.jpg') }}"
-                                    title="{{ $paritySection->data['bloc_image']['title'] }}"
-                                    alt="{{ $paritySection->data['bloc_image']['alt'] }}">
+                                    title="{{ $findSection->data['bloc_image']['title'] }}"
+                                    alt="{{ $findSection->data['bloc_image']['alt'] }}">
                            </div>
                        </div>
                        <div class="row text-primary row-gap-3 mt-4 text-center">
@ -294,6 +326,11 @@
                                    <img src="{{ Vite::asset('resources/assets/images/misc/blue-arrow.svg') }}" />
                                </a>
                            </div>
+                            <div class="col-12">
+                                <div class="ck-content mb-5">
+                                    {!! clean($findSection->data['bloc_contenu_n2_content']['value']) !!}
+                                </div>
+                            </div>
                        </div>
                    </div>
                </div>
--- a/resources/views/fo/partials/testimonials/card.blade.php
+++ b/resources/views/fo/partials/testimonials/card.blade.php
@ -1,5 +1,5 @@
 <div @class([
-    'card testimonial-card rounded-4 h-100 position-relative me-1 p-1',
+    'card testimonial-card rounded-4 h-100 position-relative',
    $bgClass => !empty($bgClass),
 ])>
    <img src="{{ Vite::asset('resources/assets/images/misc/quotes.svg') }}" title="{{ __('Guillemets décoratifs') }}"
@ -10,7 +10,7 @@
    <div class="card-body">
        <div class="d-flex align-items-end mb-3">
            @if (!empty($picture))
-                <img class="w-25 rounded-3 me-3" src="{{ asset($picture['path']) }}" title="{{ $picture['title'] ?? '' }}"
+                <img class="img-fluid rounded-3 me-3" src="{{ asset($picture['path']) }}" title="{{ $picture['title'] ?? '' }}"
                    alt="{{ $picture['alt'] ?? '' }}">
            @endif
            <div class="person-infos">
--- a/resources/views/vendor/cn-cookies.blade.php
+++ b/resources/views/vendor/cn-cookies.blade.php
@ -31,95 +31,24 @@ $strings = (object)[

 $cookies = [];

-// YOUTUBE
+// youtube
 $cookies['youtube'] = [
-    'name' => 'VIDEOS - Youtube',
-    'description' => __('Les cookies déposés via les services de partage de vidéo ont pour finalité de permettre à l’utilisateur de visionner directement sur le site le contenu multimédia.'),
+    'name' => __('cookie-notice.custom.youtube.name'),
+    'description' => __('cookie-notice.custom.youtube.description'),
+    'labelLink' => __('cookie-notice.custom.youtube.labelLink'),
    'link' => 'https://policies.google.com/technologies/cookies?hl=fr&utm_source=ucb',
-    'labelLink' => __('En savoir +'),
    'cookies' => ['NID', 'VISITOR_INFO1_LIVE', 'YSC']
 ];
-
 $cookies['youtube']['script'] = <<<SCRIPT
 function () {
-    let youtubeVids = document.getElementsByClassName('cn-youtube');
-    for (let item of youtubeVids) {
-        let id = item.dataset.id;
-        let e = document.createElement('iframe');
-        e.src = "https://www.youtube.com/embed/" + id;
-        e.width = "640";
-        e.height = "360";
-        e.frameBorder = "0";
-        e.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
-        e.allowFullscreen = true;
-        item.innerHTML = "";
-        item.appendChild(e);
-    }
+    window.__CN_VIDEO = window.__CN_VIDEO ?? {};
+    window.__CN_VIDEO.youtube = true;
 }
 SCRIPT;
 $cookies['youtube']['fallback'] = <<<FALLBACK
 function () {
-    let youtubeVids = document.getElementsByClassName('cn-youtube');
-    for (let item of youtubeVids) {
-        let a = document.createElement('a');
-        a.innerText = 'Autoriser';
-        a.classList.add('cn-cookie-link');
-        a.setAttribute('role', 'button');
-        a.onclick = function () {
-            WebCookieNotice.openCookieModalToCookiePage();
-        };
-        let e = document.createElement('p');
-        e.innerHTML = 'Youtube est désactivé. ';
-        item.innerHTML = "";
-        e.appendChild(a);
-        item.appendChild(e);
-    }
-}
-FALLBACK;
-
-// VIMEO
-$cookies['vimeo'] = [
-    'name' => 'VIDEOS - Vimeo',
-    'description' => __('Les cookies déposés via les services de partage de vidéo ont pour finalité de permettre à l’utilisateur de visionner directement sur le site le contenu multimédia.'),
-    'link' => 'https://vimeo.com/cookie_policy',
-    'labelLink' => __('En savoir +'),
-    'cookies' => ['NID', 'VISITOR_INFO1_LIVE', 'YSC']
-];
-
-$cookies['vimeo']['script'] = <<<SCRIPT
-function () {
-    let vimeoVids = document.getElementsByClassName('cn-vimeo');
-    for (let item of vimeoVids) {
-        let id = item.dataset.id;
-        let e = document.createElement('iframe');
-        e.src = "https://player.vimeo.com/video/" + id;
-        e.width = "100%";
-        e.height = "100%";
-        e.frameBorder = "0";
-        e.allow = "autoplay; fullscreen; picture-in-picture";
-        e.allowFullscreen = true;
-        item.innerHTML = "";
-        item.appendChild(e);
-    }
-}
-SCRIPT;
-$cookies['vimeo']['fallback'] = <<<FALLBACK
-function () {
-    let vimeoVids = document.getElementsByClassName('cn-vimeo');
-    for (let item of vimeoVids) {
-        let a = document.createElement('a');
-        a.innerText = 'Autoriser';
-        a.classList.add('cn-cookie-link');
-        a.setAttribute('role', 'button');
-        a.onclick = function () {
-            WebCookieNotice.openCookieModalToCookiePage();
-        };
-        let e = document.createElement('p');
-        e.innerHTML = 'Vimeo est désactivé. ';
-        item.innerHTML = "";
-        e.appendChild(a);
-        item.appendChild(e);
-    }
+    window.__CN_VIDEO = window.__CN_VIDEO ?? {};
+    window.__CN_VIDEO.youtube = false;
 }
 FALLBACK;

@ -140,41 +69,6 @@ function () {
 }
 SCRIPT;

-// ANALYCTICS
-$analyticKey = config('services.google.analytics.id');
-$cookies['analytics'] = [
-    'name' =>  __('cookie-notice.custom.analytics.title'),
-    'description' =>  __('cookie-notice.custom.analytics.description'),
-    'link' =>  'https://policies.google.com/privacy',
-    'labelLink' => __('En savoir +'),
-    'cookies' => [
-        '_ga',
-        '_gat_gtag_' . str_replace("-", "_", $analyticKey),
-        '_gid'
-    ]
-];
-
-$cookies['analytics']['script'] = <<<SCRIPT
-function () {
-    (function (d, t) {
-        var g = d.createElement(t),
-            s = d.getElementsByTagName(t)[0];
-        g.src = 'https://www.googletagmanager.com/gtag/js?id={$analyticKey}';
-        g.id = 'analytics';
-        s.parentNode.insertBefore(g, s)
-    }(document, 'script'));
-
-    window.dataLayer = window.dataLayer || [];
-
-    function gtag() {
-        dataLayer.push(arguments);
-    }
-    gtag('js', new Date());
-
-    gtag('config', '{$analyticKey}');
-}
-SCRIPT;
-
 // MATOMO
 $cookies['matomo'] = [
    'name'        => __('cookie-notice.custom.matomo.title'),
--- a/routes/web-fo.php
+++ b/routes/web-fo.php
@ -31,7 +31,6 @@ Route::middleware(['throttle:web'])->name('fo.')->group(function () {
        ->name('listen.send');

    // * Iframe cookies
-    Route::get('/frame/{frame}', function (string $frame) {
-        return view('fo.modules.frame', ['frame' => $frame]);
-    })->where('frame', '[a-z]+')->name('frame');
+    Route::get('/frame/{frame}', fn (string $frame) => view('fo.modules.frame', ['frame' => $frame]))
+        ->where('frame', '[a-z]+')->name('frame');
 });
				`@ -1 +0,0 @@`
				`@import "@fancyapps/ui/dist/fancybox/fancybox.css";`