From 32c9b9ee6424fbed3c634add057bc64b65ea8e17 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Wed, 16 Oct 2024 15:28:48 +0200
Subject: [PATCH] Style ModeSelection upload PDF button and VPdfViewer

---
 package-lock.json                             | 167 +++++++++--------
 .../1_client-brief/client-brief.txt           |   2 +-
 src/assets/css/src/0.2.variables.css          |   1 +
 src/assets/css/src/1.0.global.css             |   6 -
 src/assets/css/src/2.blocks.button.css        |   2 +-
 src/assets/css/src/2.blocks.card.css          |   2 +-
 src/assets/css/src/3.utilities.colors.css     |   4 +
 .../project/client-brief/ModeSelection.vue    |  59 ++++--
 .../project/client-brief/PdfViewer.vue        | 177 +++++++++++++++++-
 9 files changed, 320 insertions(+), 100 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1396613..c04fdef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -488,201 +488,218 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.2.tgz",
-      "integrity": "sha512-fSuPrt0ZO8uXeS+xP3b+yYTCBUd05MoSp2N/MFOgjhhUhMmchXlpTQrTpI8T+YAwAQuK7MafsCOxW7VrPMrJcg==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
+      "integrity": "sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==",
       "cpu": [
         "arm"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.21.2.tgz",
-      "integrity": "sha512-xGU5ZQmPlsjQS6tzTTGwMsnKUtu0WVbl0hYpTPauvbRAnmIvpInhJtgjj3mcuJpEiuUw4v1s4BimkdfDWlh7gA==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.0.tgz",
+      "integrity": "sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "android"
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.2.tgz",
-      "integrity": "sha512-99AhQ3/ZMxU7jw34Sq8brzXqWH/bMnf7ZVhvLk9QU2cOepbQSVTns6qoErJmSiAvU3InRqC2RRZ5ovh1KN0d0Q==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.0.tgz",
+      "integrity": "sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.21.2.tgz",
-      "integrity": "sha512-ZbRaUvw2iN/y37x6dY50D8m2BnDbBjlnMPotDi/qITMJ4sIxNY33HArjikDyakhSv0+ybdUxhWxE6kTI4oX26w==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.0.tgz",
+      "integrity": "sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.21.2.tgz",
-      "integrity": "sha512-ztRJJMiE8nnU1YFcdbd9BcH6bGWG1z+jP+IPW2oDUAPxPjo9dverIOyXz76m6IPA6udEL12reYeLojzW2cYL7w==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.0.tgz",
+      "integrity": "sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==",
       "cpu": [
         "arm"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.21.2.tgz",
-      "integrity": "sha512-flOcGHDZajGKYpLV0JNc0VFH361M7rnV1ee+NTeC/BQQ1/0pllYcFmxpagltANYt8FYf9+kL6RSk80Ziwyhr7w==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.0.tgz",
+      "integrity": "sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==",
       "cpu": [
         "arm"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.21.2.tgz",
-      "integrity": "sha512-69CF19Kp3TdMopyteO/LJbWufOzqqXzkrv4L2sP8kfMaAQ6iwky7NoXTp7bD6/irKgknDKM0P9E/1l5XxVQAhw==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.0.tgz",
+      "integrity": "sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.21.2.tgz",
-      "integrity": "sha512-48pD/fJkTiHAZTnZwR0VzHrao70/4MlzJrq0ZsILjLW/Ab/1XlVUStYyGt7tdyIiVSlGZbnliqmult/QGA2O2w==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.0.tgz",
+      "integrity": "sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.21.2.tgz",
-      "integrity": "sha512-cZdyuInj0ofc7mAQpKcPR2a2iu4YM4FQfuUzCVA2u4HI95lCwzjoPtdWjdpDKyHxI0UO82bLDoOaLfpZ/wviyQ==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.0.tgz",
+      "integrity": "sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==",
       "cpu": [
         "ppc64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.21.2.tgz",
-      "integrity": "sha512-RL56JMT6NwQ0lXIQmMIWr1SW28z4E4pOhRRNqwWZeXpRlykRIlEpSWdsgNWJbYBEWD84eocjSGDu/XxbYeCmwg==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.0.tgz",
+      "integrity": "sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==",
       "cpu": [
         "riscv64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.21.2.tgz",
-      "integrity": "sha512-PMxkrWS9z38bCr3rWvDFVGD6sFeZJw4iQlhrup7ReGmfn7Oukrr/zweLhYX6v2/8J6Cep9IEA/SmjXjCmSbrMQ==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.0.tgz",
+      "integrity": "sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==",
       "cpu": [
         "s390x"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.21.2.tgz",
-      "integrity": "sha512-B90tYAUoLhU22olrafY3JQCFLnT3NglazdwkHyxNDYF/zAxJt5fJUB/yBoWFoIQ7SQj+KLe3iL4BhOMa9fzgpw==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.0.tgz",
+      "integrity": "sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.21.2.tgz",
-      "integrity": "sha512-7twFizNXudESmC9oneLGIUmoHiiLppz/Xs5uJQ4ShvE6234K0VB1/aJYU3f/4g7PhssLGKBVCC37uRkkOi8wjg==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.0.tgz",
+      "integrity": "sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "linux"
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.21.2.tgz",
-      "integrity": "sha512-9rRero0E7qTeYf6+rFh3AErTNU1VCQg2mn7CQcI44vNUWM9Ze7MSRS/9RFuSsox+vstRt97+x3sOhEey024FRQ==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.0.tgz",
+      "integrity": "sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==",
       "cpu": [
         "arm64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.21.2.tgz",
-      "integrity": "sha512-5rA4vjlqgrpbFVVHX3qkrCo/fZTj1q0Xxpg+Z7yIo3J2AilW7t2+n6Q8Jrx+4MrYpAnjttTYF8rr7bP46BPzRw==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.0.tgz",
+      "integrity": "sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==",
       "cpu": [
         "ia32"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.21.2.tgz",
-      "integrity": "sha512-6UUxd0+SKomjdzuAcp+HAmxw1FlGBnl1v2yEPSabtx4lBfdXHDVsW7+lQkgz9cNFJGY3AWR7+V8P5BqkD9L9nA==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.0.tgz",
+      "integrity": "sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==",
       "cpu": [
         "x64"
       ],
+      "license": "MIT",
       "optional": true,
       "os": [
         "win32"
       ]
     },
     "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "license": "MIT"
     },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
@@ -1614,11 +1631,12 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.2.tgz",
-      "integrity": "sha512-e3TapAgYf9xjdLvKQCkQTnbTKd4a6jwlpQSJJFokHGaX2IVjoEqkIIhiQfqsi0cdwlOD+tQGuOd5AJkc5RngBw==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz",
+      "integrity": "sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==",
+      "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.5"
+        "@types/estree": "1.0.6"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -1628,22 +1646,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.21.2",
-        "@rollup/rollup-android-arm64": "4.21.2",
-        "@rollup/rollup-darwin-arm64": "4.21.2",
-        "@rollup/rollup-darwin-x64": "4.21.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.21.2",
-        "@rollup/rollup-linux-arm-musleabihf": "4.21.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.21.2",
-        "@rollup/rollup-linux-arm64-musl": "4.21.2",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.21.2",
-        "@rollup/rollup-linux-riscv64-gnu": "4.21.2",
-        "@rollup/rollup-linux-s390x-gnu": "4.21.2",
-        "@rollup/rollup-linux-x64-gnu": "4.21.2",
-        "@rollup/rollup-linux-x64-musl": "4.21.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.21.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.21.2",
-        "@rollup/rollup-win32-x64-msvc": "4.21.2",
+        "@rollup/rollup-android-arm-eabi": "4.24.0",
+        "@rollup/rollup-android-arm64": "4.24.0",
+        "@rollup/rollup-darwin-arm64": "4.24.0",
+        "@rollup/rollup-darwin-x64": "4.24.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.24.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.24.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.24.0",
+        "@rollup/rollup-linux-arm64-musl": "4.24.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.24.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.24.0",
+        "@rollup/rollup-linux-x64-gnu": "4.24.0",
+        "@rollup/rollup-linux-x64-musl": "4.24.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.24.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.24.0",
+        "@rollup/rollup-win32-x64-msvc": "4.24.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -1816,9 +1834,10 @@
       "optional": true
     },
     "node_modules/vite": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz",
-      "integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==",
+      "version": "5.4.9",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.9.tgz",
+      "integrity": "sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==",
+      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.21.3",
         "postcss": "^8.4.43",
diff --git a/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/client-brief.txt b/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/client-brief.txt
index 43233b3..223978d 100644
--- a/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/client-brief.txt
+++ b/public/content/projects/1_miss-dior-blooming-bouquet/1_client-brief/client-brief.txt
@@ -6,7 +6,7 @@ Stepname: clientBrief
 
 ----
 
-Clientbriefpdf: - file://pWG1Dz4i9spu0X02
+Clientbriefpdf: 
 
 ----
 
diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css
index 46d79c9..3a05ce2 100755
--- a/src/assets/css/src/0.2.variables.css
+++ b/src/assets/css/src/0.2.variables.css
@@ -8,6 +8,7 @@
 
   /* Colors */
   --color-white-10: hsla(0, 0%, 100%, .1); /* White 10 */
+  --color-white-20: hsla(0, 0%, 100%, .2); /* White 20 */
   --color-white-50: hsla(0, 0%, 100%, .5); /* White 50 */
   --color-white-70: hsla(0, 0%, 100%, .7); /* White 70 */
   --color-white-100: hsla(0, 0%, 100%, 1); /* White 100 */
diff --git a/src/assets/css/src/1.0.global.css b/src/assets/css/src/1.0.global.css
index d5e719f..72dae18 100644
--- a/src/assets/css/src/1.0.global.css
+++ b/src/assets/css/src/1.0.global.css
@@ -207,12 +207,6 @@ a {
   color: inherit;
   text-decoration: none;
 }
-a:visited {
-  color: currentColor;
-}
-a:hover {
-  color: currentColor;
-}
 
 a.link-full::after {
   content: '';
diff --git a/src/assets/css/src/2.blocks.button.css b/src/assets/css/src/2.blocks.button.css
index 8d286b1..941eba5 100644
--- a/src/assets/css/src/2.blocks.button.css
+++ b/src/assets/css/src/2.blocks.button.css
@@ -75,7 +75,7 @@ input[type="checkbox"]:checked + .btn--primary {
 }
 .btn--white-10 {
   --background: var(--color-white-10);
-  --color: var(--color-white);
+  --color: var(--color-grey-700);
 }
 
 .btn--sm {
diff --git a/src/assets/css/src/2.blocks.card.css b/src/assets/css/src/2.blocks.card.css
index bc9b593..893253f 100644
--- a/src/assets/css/src/2.blocks.card.css
+++ b/src/assets/css/src/2.blocks.card.css
@@ -72,6 +72,6 @@
   border-color: var(--color-primary-10);
 }
 .card--cta:hover svg,
-.card--cta:hover h2 {
+.card--cta:hover .text-lg {
   color: var(--color-primary-100);
 }
diff --git a/src/assets/css/src/3.utilities.colors.css b/src/assets/css/src/3.utilities.colors.css
index ae54a9d..10739b1 100644
--- a/src/assets/css/src/3.utilities.colors.css
+++ b/src/assets/css/src/3.utilities.colors.css
@@ -51,3 +51,7 @@
 .bg-primary {
   background-color: var(--color-primary);
 }
+
+.bg-black {
+  background-color: var(--color-black);
+}
diff --git a/src/components/project/client-brief/ModeSelection.vue b/src/components/project/client-brief/ModeSelection.vue
index ad4f57b..eb1c859 100644
--- a/src/components/project/client-brief/ModeSelection.vue
+++ b/src/components/project/client-brief/ModeSelection.vue
@@ -3,7 +3,7 @@
     class="h-full | flex flex-col justify-center items-center | mx-auto | max-w"
     style="--max-w: 42rem; --row-gap: var(--space-32)"
   >
-    <div class="flex">
+    <div class="flex items-baseline">
       <div
         @click="emit('update:step', 'Images')"
         class="card card--cta | flex-1 | h-full"
@@ -16,22 +16,51 @@
           viewBox="0 0 100 100"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          stroke="currentColor"
+          stroke-width="5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
-          <!-- SVG content -->
+          <path d="M92.8571 46.4292H64.2857C62.3133 46.4292 60.7143 48.0282 60.7143 50.0006V92.8577C60.7143 94.8302 62.3133 96.4292 64.2857 96.4292H92.8571C94.8296 96.4292 96.4286 94.8302 96.4286 92.8577V50.0006C96.4286 48.0282 94.8296 46.4292 92.8571 46.4292Z"/>
+          <path d="M92.8571 3.57202H64.2857C62.3133 3.57202 60.7143 5.171 60.7143 7.14345V21.5006C60.7143 23.473 62.3133 25.072 64.2857 25.072H92.8571C94.8296 25.072 96.4286 23.473 96.4286 21.5006V7.14345C96.4286 5.171 94.8296 3.57202 92.8571 3.57202Z"/>
+          <path d="M35.7143 3.57202H7.14284C5.17039 3.57202 3.57141 5.171 3.57141 7.14345V50.0006C3.57141 51.973 5.17039 53.572 7.14284 53.572H35.7143C37.6867 53.572 39.2857 51.973 39.2857 50.0006V7.14345C39.2857 5.171 37.6867 3.57202 35.7143 3.57202Z"/>
+          <path d="M35.7143 74.9291H7.14284C5.17039 74.9291 3.57141 76.5281 3.57141 78.5005V92.8577C3.57141 94.8301 5.17039 96.4291 7.14284 96.4291H35.7143C37.6867 96.4291 39.2857 94.8301 39.2857 92.8577V78.5005C39.2857 76.5281 37.6867 74.9291 35.7143 74.9291Z"/>
         </svg>
         <h2 class="font-serif text-lg">Créer via la plateforme</h2>
-        <p class="text-sm text-grey-700">
-          Ajouter différents éléments tels que des images et du texte sur la
-          plateforme afin de créer votre brief.
-        </p>
+        <p class="text-sm text-grey-700">Ajouter différents éléments tels que des images et du texte sur la plateforme afin de créer votre brief.</p>
       </div>
 
-      <input
-        type="file"
-        @change="addPdf($event)"
-        accept="application/pdf"
-        ref="pdfInput"
-      />
+      <div
+        class="card card--cta | flex-1 | h-full"
+        style="--padding: var(--space-32); --row-gap: var(--space-32)"
+      >
+        <svg
+          aria-hidden="true"
+          width="100"
+          height="100"
+          viewBox="0 0 100 100"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          stroke="currentColor"
+          stroke-width="5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M3.57153 75.0001V82.143C3.57153 85.9318 5.07663 89.5654 7.75572 92.2445C10.4348 94.9236 14.0684 96.4287 17.8572 96.4287H82.143C85.9318 96.4287 89.5654 94.9236 92.2445 92.2445C94.9236 89.5654 96.4287 85.9318 96.4287 82.143V75.0001M28.5715 28.5715L50.0001 3.57153M50.0001 3.57153L71.4287 28.5715M50.0001 3.57153V67.8573"/>
+        </svg>
+        <label class="font-serif text-lg" for="upload-pdf">
+          Ajouter un PDF
+          <input
+            id="upload-pdf"
+            type="file"
+            @change="addPdf($event)"
+            accept="application/pdf"
+            ref="pdfInput"
+            hidden
+          />
+        </label>
+        <p class="text-sm text-grey-700">Vous avez déjà constitué votre brief en amont et souhaitez directement l’importer.</p>
+      </div>
     </div>
 
     <div
@@ -92,7 +121,11 @@ async function addPdf(event) {
 </script>
 
 <style scoped>
-input[type="file"] {
+label[for="upload-pdf"]::after {
+  content: '';
   display: block;
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
 }
 </style>
diff --git a/src/components/project/client-brief/PdfViewer.vue b/src/components/project/client-brief/PdfViewer.vue
index f5a9734..92ea17c 100644
--- a/src/components/project/client-brief/PdfViewer.vue
+++ b/src/components/project/client-brief/PdfViewer.vue
@@ -1,18 +1,36 @@
 <template>
-  <div>
-    <div :style="{ width: '1028px', height: '700px', margin: '0 auto' }">
+  <Dialog
+    id="add-pdf"
+    v-model:visible="isOpen"
+    modal
+    :draggable="false"
+    header="Titre du PDF"
+    class="w-full | text-grey-800 | rounded-2xl | overflow-hidden"
+  >
+    <template #header>
+      <a class="btn">Valider et envoyer le brief</a>
+      <h2 class="font-serif text-lg">Titre du PDF</h2>
+    </template>
+    <div id="vpv-container">
       <VPdfViewer
         :darkMode="true"
+        :initialThumbnailsVisible="true"
         src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
         local="fr_FR"
         @loaded="onPdfLoaded"
       />
     </div>
-  </div>
+  </Dialog>
 </template>
 
 <script setup>
-import { VPdfViewer } from "@vue-pdf-viewer/viewer";
+import Dialog from "primevue/dialog";
+import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
+
+const licenseKey = import.meta.env.VITE_VPV_LICENSE;
+useLicense({ licenseKey });
+
+const isOpen = true;
 
 const onPdfLoaded = () => {
   const wrapper = document.querySelector(".vpv-pages-inner-container");
@@ -52,3 +70,154 @@ const onPdfLoaded = () => {
   observePages();
 };
 </script>
+
+<style>
+#add-pdf {
+  --max-w: min(100vw - var(--gutter) * 2, 77rem); 
+  --max-h: calc(100vh - var(--gutter) * 2 - 5.5rem);
+  --header-h: 4.5rem;
+  max-width: var(--max-w);
+  height: var(--max-h);
+  background: black;
+  margin: auto !important;
+}
+#add-pdf [data-pc-section="header"] {
+  height: var(--header-h);
+  padding: 1rem;
+  color: var(--color-white);
+  background: var(--color-white-20);
+  display: flex;
+  gap: 1rem;
+}
+#add-pdf [data-pc-section="header"] h2 {
+  font-family: var(--font-serif);
+  position: absolute;
+  left: 0;
+  right: 0;
+  text-align: center;
+  padding: 0 15rem;
+  line-height: 2.5rem;
+}
+#add-pdf [data-pc-name="pcclosebutton"] {
+  color: var(--color-white);
+}
+
+#vpv-container {
+  width: var(--max-w);
+  height: calc(var(--max-h) - var(--header-h));
+  background: black;
+}
+</style>
+
+<style scoped>
+:deep(.vpv-variables) {
+  /* Base styles */
+  --vpv-base-radius: var(--rounded-xl);
+  /* Viewer container */
+  --vpv-container-width-sm: 48rem;
+  /* Toolbar */
+  --vpv-toolbar-size: 4.5rem;
+}
+:deep(.vpv-variables.vpv-variables__dark) {
+  /* Base styles */
+  --vpv-base-border-color: var(--color-grey-700);
+  /* Viewer container */
+  --vpv-container-border-color: var(--vpv-base-border-color);
+  /* Loader */
+  --vpv-loader-backdrop-color: rgba(0, 0, 0, 0.8);
+  /* Toolbar */
+  --vpv-toolbar-background-color: var(--color-white-10);
+  --vpv-toolbar-color: white;
+  --vpv-toolbar-border-color: var(--vpv-base-border-color);
+  /* Sidebar */
+  --vpv-sidebar-content-background-color: var(--color-white-10);
+  --vpv-sidebar-content_thumbnail-focused-border-color: var(--color-white-20);
+  /* Drop file mask */
+  --vpv-drop-zone-background: #1c2024;
+  --vpv-drop-zone-border: #434c56;
+  /* PDF Pages Content*/
+  --vpv-pages-container-background: black;
+  /* Popover */
+  --vpv-popover-background-color: black;
+  --vpv-popover-color: var(--color-white);
+  --vpv-popover-border-color: transparent;
+  /* Menu Dropdown */
+  --vpv-dropdown-menu-content-background: #181818;
+  --vpv-dropdown-menu-content-menu-hover-background: var(--color-white-10);
+  --vpv-dropdown-menu-content-separator-background: var(--color-white-10);
+  --vpv-dropdown-menu-content-border-color: var(--color-white-10);
+  --vpv-dropdown-separator: var(--color-white-10);
+  /* Search Input */
+  --vpv-input-background-color: transparent;
+  --vpv-input-border-color: var(--color-white);
+  --vpv-input-placeholder-color: #596673;
+  /* Modal of PDF Properties */
+  --vpv-properties-content-background: var(--vpv-dropdown-menu-content-background);
+  --vpv-properties-content-secondary-color: #c6ccd2;
+  --vpv-properties-content-color: var(--vpv-toolbar-color);
+  --vpv-properties-separator: var(--vpv-dropdown-separator);
+  --vpv-properties-header: white;
+  /* Modal of Print Progress */
+  --vpv-print-progress-background: var(--vpv-dropdown-menu-content-background);
+  /* Tooltip */
+  --vpv-tooltip-background: #181818;
+  --vpv-tooltip-color: white;
+  --vpv-tooltip-border-color: var(--color-black);
+  /* Outline */
+  --vpv-outline-color: var(--color-white-10);
+}
+
+:deep(.vpv-container) {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+:deep(.vpv-body-wrapper),
+:deep(.vpv-container .vpv-sidebar-wrapper) {
+  margin-top: 0 !important;
+  margin-bottom: var(--vpv-toolbar-size) !important;
+}
+:deep(.vpv-splitter) {
+  max-width: 0;
+}
+
+/* Sidebar */
+:deep(.vpv-container .vpv-sidebar-wrapper__opened) {
+  max-width: 9rem;
+}
+:deep(.vpv-sidebar-features) {
+  display: none;
+}
+:deep(.pdf-thumbnail-wrapper .pdf-thumbnail img),
+:deep(.pdf-thumbnail-wrapper .pdf-thumbnail .placeholder) {
+  border-radius: var(--rounded-md);
+}
+
+/* Toolbar */
+:deep(.vpv-container .vpv-toolbar-wrapper) {
+  border-bottom-width: 0;
+  border-top-width: 1px;
+  padding-left: 1rem !important;
+}
+:deep(.vpv-toolbar-wrapper) {
+  top: unset !important;
+  bottom: 0 !important;
+}
+:deep(.vpv-toolbar-start .vpv-toolbar-btn) {
+  display: none;
+}
+:deep(.vpv-toolbar-start::before) {
+  content: "Page";
+}
+:deep(.vpv-input) {
+  border-radius: var(--rounded-sm) !important;
+  max-width: 1.5rem !important;
+}
+:deep(.vpv-input ~ span) {
+  color: var(--color-grey-400);
+}
+:deep(.vpv-toolbar-end > button:nth-child(1)),
+:deep(.vpv-toolbar-end > button:nth-child(3)),
+:deep(.vpv-toolbar-end > button:nth-child(4)) {
+  display: none;
+}
+</style>