diff --git a/public/images/hutopymedia/icons/black/youtube.png b/public/images/hutopymedia/icons/black/youtube.png
new file mode 100644
index 0000000..c35edd6
Binary files /dev/null and b/public/images/hutopymedia/icons/black/youtube.png differ
diff --git a/public/images/usersmedia/mathieuCaron/banners/bannerMathieuCaron01.png b/public/images/usersmedia/mathieuCaron/banners/bannerMathieuCaron01.png
new file mode 100644
index 0000000..17b378a
Binary files /dev/null and b/public/images/usersmedia/mathieuCaron/banners/bannerMathieuCaron01.png differ
diff --git a/public/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png b/public/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png
new file mode 100644
index 0000000..45e0897
Binary files /dev/null and b/public/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png differ
diff --git a/src/router/index.js b/src/router/index.js
index aa17029..f255aae 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,7 @@ import YourProfile from '../views/main/YourProfile.vue'
 import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
 import Hutopy from '../views/manualusers/HutopyProfile.vue'
 import Leffet from '../views/manualusers/LeffetProfile.vue'
+import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -123,6 +124,12 @@ const router = createRouter({
       name: 'guillaumeaime',
       component: GuillaumeAime
     },
+
+    {
+      path: '/mathieucaron',
+      name: 'mathieucaron',
+      component: MathieuCaron
+    },
   ],
   scrollBehavior(to, from, savedPosition) {
     return { top: 0 };
diff --git a/src/views/PayementCompleted.vue b/src/views/PayementCompleted.vue
index c8a1769..7a54e56 100644
--- a/src/views/PayementCompleted.vue
+++ b/src/views/PayementCompleted.vue
@@ -5,24 +5,20 @@
     <DefaultLayout></DefaultLayout>
     <v-container>
       <div class="margin-top-mobile">
-        <v-row style="margin-top: 8%; margin-bottom: 2%" class="d-flex justify-center align-center">
-          <v-col cols="12" xxl="3" xl="4" lg="6" md="7" sm="9"> <v-card class="custom-dialog"
+        <v-row style="margin-top: 4%; margin-bottom: 2%" class="d-flex justify-center align-center">
+          <v-col cols="12" xxl="4" xl="4" lg="5" md="7" sm="9"> <v-card class="custom-dialog"
               style="background-color: white;">
               <v-container>
                 <!-- Title Card -->
-                <v-card-text style="font-weight: 600; margin-top: 25px; margin-bottom: 25px; font-size: 2.5rem;"
+                <v-card-text style="font-weight: 600; margin-top: 20px; margin-bottom: 20px; font-size: 2rem;"
                   class="text-center">
                   Paiement complété
                 </v-card-text>
-
-                <v-text-field v-model="email" label="Email"></v-text-field>
-                <v-btn @click="getReceipt">Reçu</v-btn>
-
                 <v-row justify="center">
 
                   <!-- Icon Check -->
                   <v-col cols="12" class="text-center">
-                    <v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
+                    <v-icon color=#a30e79 size="150">mdi-check-circle</v-icon>
                   </v-col>
                 </v-row>
                 <!-- Informations -->
@@ -31,17 +27,23 @@
                     <v-card-text style="font-size: 1.2rem; text-align: center;">
                       Merci de supporter
                     </v-card-text>
-                    <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
+                    <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center; margin-bottom: 10px;">
                       {{ creatorName }}
                     </v-card-text>
                   </v-col>
                 </v-row>
                 <!-- Ok btn -->
                 <v-row>
+                  <v-row style="margin-left: 30px; margin-right: 30px; margin-bottom: 10px;">
+                    <v-text-field variant="underlined" style=" opacity: 0.80; margin-right: 10px;" v-model="email"
+                      label="Email"></v-text-field>
+                    <v-btn variant="plain" style="margin-top: 10px;" @click="getReceipt">Reçu</v-btn>
+                  </v-row>
                   <v-col cols="12">
+
                     <v-card-actions class="justify-center">
                       <v-btn color="white" outlined elevation="2"
-                        style="font-size: 2rem; width: 250px; height: 50px; margin-bottom: 25px; background-color: #a30e79;"
+                        style="font-size: 2rem; width: 175px; height: 45px; margin-bottom: 25px; background-color: #a30e79;"
                         @click="router.push({ path: `/${creatorUserName}` })">Ok</v-btn>
                     </v-card-actions>
                   </v-col>
@@ -66,9 +68,9 @@
 <script async setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import { useRouter } from 'vue-router';
 import { useClient } from '@/plugins/api.js';
-import {onBeforeMount, ref} from 'vue';
+import { onBeforeMount, ref } from 'vue';
+import { useRouter } from 'vue-router';
 const router = useRouter()
 const client = useClient();
 
diff --git a/src/views/UsersBrowser.vue b/src/views/UsersBrowser.vue
index c57b587..91b5eb6 100644
--- a/src/views/UsersBrowser.vue
+++ b/src/views/UsersBrowser.vue
@@ -89,6 +89,14 @@ const profiles = ref([
         description: "Spécialiste en médias sociaux",
         imageUrl: '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png',
         routerLink: 'chloebeaugrand'
+    },
+
+    {
+        id: 5,
+        name: "Mathieu Caron",
+        description: "Entrevue Atypique",
+        imageUrl: '/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png',
+        routerLink: 'mathieuCaron'
     }
 ]);
 </script>
diff --git a/src/views/manualusers/MathieuCaron.vue b/src/views/manualusers/MathieuCaron.vue
new file mode 100644
index 0000000..28441d8
--- /dev/null
+++ b/src/views/manualusers/MathieuCaron.vue
@@ -0,0 +1,1184 @@
+<template>
+    <div style="background-color: #f4f4f4;">
+        <DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
+
+        <!-- "Mobile -->
+        <v-row class="fluid hidden-md-and-up social-mobile-container"
+            style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
+            <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
+                <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
+                    style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
+            </v-col>
+        </v-row>
+
+        <!-- "PurpleLine" -->
+        <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
+        </v-row>
+
+        <!-- "Mobile-Profile" -->
+        <!-- "Profile picture" -->
+        <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
+            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+        </v-row>
+
+        <!-- User Social Network Links -->
+        <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
+            hidden-md-and-down>
+
+            <!-- Facebook -->
+            <v-row no-gutters class="d-flex justify-space-between align-center"
+                style="margin-left: 3%; margin-right: 3%;">
+                <v-col cols="6" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
+                    class="d-flex justify-center align-center">
+                    <a href="https://www.facebook.com/MathieuCaronPro/">
+                        <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
+                            alt="Facebook"></v-img>
+                    </a>
+                </v-col>
+
+                <!-- Profile picture - Small -->
+                <v-col cols="4" sm="4" xs="0" class="hidden-xs">
+                    <v-row class="d-flex justify-center align-center">
+                        <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+                    </v-row>
+                </v-col>
+
+                <!-- L'effet -->
+                <v-col cols="6" sm="2" xs="3" style="margin-top: 60px; z-index: 50;"
+                    class="d-flex justify-center align-center">
+                    <a href="https://www.youtube.com/@lesinterviewsatypiquesdema4692">
+                        <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/youtube.png"
+                            alt="Instagram"></v-img>
+                    </a>
+                </v-col>
+            </v-row>
+
+            <!-- User informations Name title and description  -->
+            <v-row class="social-container-mobile">
+                <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
+                    <v-row class="d-flex justify-center" style="font-size: 2rem">
+                        {{ name }}
+                    </v-row>
+                </v-col>
+                <v-spacer xs="12" sm="4"></v-spacer>
+                <v-col cols="12" xs="12" sm="4" class="d-flex justify-center ">
+                    <v-row class="d-flex justify-center">
+                        {{ title }}
+                    </v-row>
+                </v-col>
+            </v-row>
+            <v-row>
+                <v-container
+                    style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
+                    class="social-icon-group-mobile">
+                    <v-expansion-panels style="min-width: 320px;">
+                        <v-col cols="12" offset="-1">
+                            <v-expansion-panel class="background-pink text-justify" style="color: white;"
+                                text="Mathieu Caron est un intervieweur et un conférencier peu banal. Étant lui-même neuro-atypique, il concilie travail, entrevues et conférences avec l’objectif de démystifier le trouble de l’autisme ainsi que promouvoir la différence et le droit d’être atypique.
+
+Il réalise des allocutions et de nombreuses entrevues avec des personnalités du monde artistique, politique et des affaires. C’est sur les médias sociaux, dont Facebook et YouTube, qu’il diffuse ces communications et rencontres inusitées. Son engagement et le dépassement de soi dans ses réalisations lui permettent de contribuer à élargir l’acceptation sociale de la différence et de la singularité."
+                                title="À propos des Entrevues Atypiques :">
+
+
+                            </v-expansion-panel>
+                        </v-col>
+                    </v-expansion-panels>
+                </v-container>
+            </v-row>
+        </v-container>
+
+        <!-- Bannière Pc -->
+        <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
+            hidden-sm-and-up>
+            <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
+                <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
+                    style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
+            </v-col>
+        </v-row>
+        <v-row class="hidden-sm-and-down"
+            style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);" hidden-sm-and-up>
+        </v-row>
+
+        <!-- "Core (Menu / Center / Donation)" -->
+        <v-row>
+            <!-- "Menu" -->
+            <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
+                <v-col style="margin: 0;">
+                    <v-row class="Hutopy-menu-sticky-mobile">
+                        <v-spacer></v-spacer>
+                        <v-col>
+                            <v-container style=" overflow-y: hidden;">
+                                <!-- Nav-Btn -->
+                                <v-col cols="12" class="px-0">
+                                    <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
+                                        style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
+                                    <v-list dense class="main-background">
+                                        <v-list-item v-for="item in navigationItems" :key="item.link">
+                                            <router-link :to="item.link">
+                                                <v-btn text class="d-flex align-start align-center main-background"
+                                                    elevation="0" outlined="false">
+                                                    <v-icon left class="mr-4">{{ item.icon }}</v-icon>
+                                                    {{ item.text }}
+                                                </v-btn>
+                                            </router-link>
+                                        </v-list-item>
+
+                                        <v-list-item>
+                                            <v-dialog transition="dialog-top-transition" width="auto">
+                                                <!-- <template v-slot:activator="{ props: activatorProps }">
+                             <v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
+                              elevation="0" outlined="false">
+                              <v-icon left class="mr-4">mdi-wallet</v-icon>
+                              <p @click="isActive.value = false">Bourse</p>
+                            </v-btn>
+                          </template>-->
+
+                                                <!-- Wallet Modale -->
+                                                <template v-slot:default="{ isActive }">
+                                                    <v-card style="border-radius: 30px;">
+                                                        <div class="text-center"
+                                                            style=" margin-top: 2%; margin-bottom: 2%;">
+                                                            <v-icon left size="48">mdi-wallet</v-icon>
+                                                            <v-toolbar title="PORTEFEUILLE"
+                                                                style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
+                                                        </div>
+                                                        <v-card-text class="text-h1 pa-12">
+                                                            <v-row>
+                                                                <v-col>
+                                                                    <v-row>
+                                                                        <v-col cols="7">
+                                                                            <h1
+                                                                                style="margin-bottom: 4%; font-size: 1.3rem;">
+                                                                                Balance actuelle</h1>
+                                                                            <h1
+                                                                                style="margin-bottom: 4%; font-size: 1.3rem;">
+                                                                                Montant reçu</h1>
+                                                                            <h1
+                                                                                style="margin-bottom: 4%; font-size: 1.3rem;">
+                                                                                Dernier don</h1>
+                                                                        </v-col>
+                                                                        <v-col>
+                                                                            <h1
+                                                                                style="margin-bottom: 4%; font-size: 1.3rem;">
+                                                                                0$</h1>
+                                                                            <h1
+                                                                                style="margin-bottom: 4%; font-size: 1.3rem;">
+                                                                                0$</h1>
+                                                                            <h1
+                                                                                style="margin-bottom: 4%; font-size: 1.3rem;">
+                                                                                2024-10-04</h1>
+                                                                            <p></p>
+                                                                        </v-col>
+                                                                    </v-row>
+                                                                </v-col>
+                                                                <v-col>
+                                                                    <v-row>
+                                                                        <v-col cols="8">
+                                                                            <h1
+                                                                                style="margin-bottom: 4%; font-size: 1.2rem;">
+                                                                                Dons</h1>
+                                                                            <h1
+                                                                                style="margin-bottom: 4%; font-size: 1.2rem;">
+                                                                                Montant retiré</h1>
+                                                                        </v-col>
+                                                                        <v-col>
+                                                                            <h1
+                                                                                style="margin-bottom: 4%; font-size: 1.2rem;">
+                                                                                0</h1>
+                                                                            <h1
+                                                                                style="margin-bottom: 4%; font-size: 1.2rem;">
+                                                                                0$</h1>
+                                                                            <p></p>
+                                                                        </v-col>
+                                                                    </v-row>
+                                                                </v-col>
+                                                            </v-row>
+                                                        </v-card-text>
+
+                                                        <v-card-actions class="justify-center">
+                                                            <v-btn text="Fermer"
+                                                                @click="isActive.value = false"></v-btn>
+                                                        </v-card-actions>
+                                                    </v-card>
+
+                                                    <v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
+                                                        <v-row>
+                                                            <v-col style="margin-right: -2%;" cols="1"
+                                                                class="text-truncate text-center font-weight-bold">#T</v-col>
+                                                            <v-col style="margin-right: -1%; background-color: #fbccee;"
+                                                                cols="1"
+                                                                class="text-truncate text-center font-weight-bold">$</v-col>
+                                                            <v-col cols="2"
+                                                                class="text-truncate text-center font-weight-bold">Date</v-col>
+                                                            <v-col cols="3"
+                                                                class="text-truncate text-center font-weight-bold"
+                                                                style="margin-right: 2%; background-color: #fbccee">Name</v-col>
+                                                            <v-col cols="5"
+                                                                class="text-truncate text-center font-weight-bold">message</v-col>
+                                                        </v-row>
+                                                    </v-card>
+
+                                                    <v-card
+                                                        style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
+                                                        <v-row>
+                                                            <v-col style="margin-right: -2%;" cols="1"
+                                                                class="text-truncate">1</v-col>
+                                                            <v-col style="margin-right: -1%; background-color: #fbccee;"
+                                                                cols="1" class="text-truncate">10$</v-col>
+                                                            <v-col cols="2" class="text-truncate">20-10-2025</v-col>
+                                                            <v-col cols="3" class="text-truncate"
+                                                                style="margin-right: 2%;  background-color: #fbccee">Pascal</v-col>
+                                                            <v-col cols="5" class="text-truncate">Good Job</v-col>
+                                                        </v-row>
+                                                    </v-card>
+                                                </template>
+                                            </v-dialog>
+                                        </v-list-item>
+                                    </v-list>
+                                </v-col>
+                            </v-container>
+                        </v-col>
+                    </v-row>
+                    <v-row style="height: 3000px;"></v-row>
+                </v-col>
+            </v-col>
+
+            <!-- Profile Info Picture name title & description -->
+            <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
+                <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
+                    <v-container>
+                        <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+                        <!-- User informations Name & title  -->
+                        <v-container class="background-profile-container" style="margin-top: -8%;">
+                            <v-row>
+                                <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
+                                    <h1 class="name-info">{{ name }}</h1>
+                                </v-col>
+                                <v-col></v-col>
+                            </v-row>
+                            <v-row>
+                                <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
+                                    <h1 class="occupation-info">{{ title }}</h1>
+                                </v-col>
+                                <v-col></v-col>
+                            </v-row>
+
+                            <!-- User Social Network Links -->
+                            <v-row>
+                                <v-spacer></v-spacer>
+                                <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
+                                    <v-row>
+                                        <a href="https://www.facebook.com/MathieuCaronPro/">
+                                            <img class="socialicons"
+                                                src="/images/hutopymedia/icons/black/facebookblack.png"
+                                                alt="Description image 2">
+                                        </a>
+                                        <a href="https://www.youtube.com/@lesinterviewsatypiquesdema4692">
+                                            <img class="socialicons" src="/images/hutopymedia/icons/black/youtube.png"
+                                                alt="Description image 2">
+                                        </a>
+                                    </v-row>
+                                </v-col>
+                                <v-col background-color="primary"></v-col>
+                            </v-row>
+
+                            <!-- Description  -->
+                            <v-row>
+                                <v-container
+                                    style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
+                                    <v-expansion-panels style="min-width: 320px;">
+                                        <v-col cols="12" offset="-1">
+                                            <v-expansion-panel class="background-pink text-justify"
+                                                style="color: white;"
+                                                text="Mathieu Caron est un intervieweur et un conférencier peu banal. Étant lui-même neuro-atypique, il concilie travail, entrevues et conférences avec l’objectif de démystifier le trouble de l’autisme ainsi que promouvoir la différence et le droit d’être atypique.
+
+Il réalise des allocutions et de nombreuses entrevues avec des personnalités du monde artistique, politique et des affaires. C’est sur les médias sociaux, dont Facebook et YouTube, qu’il diffuse ces communications et rencontres inusitées. Son engagement et le dépassement de soi dans ses réalisations lui permettent de contribuer à élargir l’acceptation sociale de la différence et de la singularité."
+                                                title="À propos des Entrevues Atypiques:">
+                                            </v-expansion-panel>
+                                        </v-col>
+                                    </v-expansion-panels>
+                                </v-container>
+                            </v-row>
+                        </v-container>
+                    </v-container>
+                </v-container>
+                <v-container>
+                </v-container>
+
+                <!-- LES DENIS DROLETS -->
+                <v-container style="margin-top: -30px"> <v-card class="flow-menu m-0 youtube-card">
+                        <!-- Title, date and btn -->
+                        <v-col>
+                            <v-row>
+                                <v-col class="text-center">
+                                    <h1 class="card-title">
+                                        ENTREVUE ATYPIQUE AVEC LES DENIS DROLETS</h1>
+                                </v-col>
+
+                                <!--<v-col class="text-right">
+  <v-btn class="btn-card-options" flat tile elevation="0">
+                      <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
+                    </v-btn>          (a intégrer)
+                  </v-col> -->
+                            </v-row>
+
+                        </v-col>
+
+                        <!-- Card core Video  LES DENIS DROLETS -->
+                        <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+                            <v-container>
+                                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                                    src="https://www.youtube.com/embed/bj4QTpzEO6E?si=9NrwEpsZ-f_KPsNo"
+                                    title="Guillaumem" frameborder="0"
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                    allowfullscreen></iframe>
+
+                                <!-- Date -->
+                                <v-row class="text-right">
+                                    <v-col>
+                                        <h1 style=" margin-right: 40px; margin-top: 10px">
+                                            16-05-2024
+                                        </h1>
+                                    </v-col>
+                                </v-row>
+
+
+                                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
+
+                                    Cette belle entrevue atypique est sans aucun doute un must dont j'en suis fiers !
+                                    Office des personnes handicapées du Québec, sans vous cette vidéo n'aurait pas été
+                                    possible.
+                                    <br> <br>
+                                    Merci aussi à Nissan et à J’achète Québécois, J’achète local ! JQJL !.
+                                    Vidéo et montage par Jacob Lacroix.
+                                </p>
+
+
+                                <!-- Like dislike commment Section -->
+                                <div style="height: 20px;"></div>
+                                <div
+                                    style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                                </div>
+                                <div
+                                    style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                                </div>
+
+                                <!-- Comments -->
+                                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                                    placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+                            </v-container>
+                        </div>
+
+                    </v-card></v-container>
+
+                <!-- Jocelyn Grégoire -->
+                <v-container> <v-card class="flow-menu m-0 youtube-card">
+                        <!-- Title, date and btn -->
+                        <v-col>
+                            <v-row>
+                                <v-col class="text-center">
+                                    <h1 class="card-title">
+                                        ENTREVUE ATYPIQUE AVEC JOCELYN GRÉGOIRE</h1>
+                                </v-col>
+
+                                <!--<v-col class="text-right">
+  <v-btn class="btn-card-options" flat tile elevation="0">
+                      <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
+                    </v-btn>          (a intégrer)
+                  </v-col> -->
+                            </v-row>
+
+                        </v-col>
+
+                        <!-- Card core Video  -->
+                        <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+                            <v-container>
+                                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                                    src="https://www.youtube.com/embed//61ZNNeuQV_Y?si=Yl1lzDvuNkaAFdPU"
+                                    title="Guillaumem" frameborder="0"
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                    allowfullscreen></iframe>
+
+                                <!-- Date -->
+                                <v-row class="text-right">
+                                    <v-col>
+                                        <h1 style=" margin-right: 40px; margin-top: 10px">
+                                            28-04-2024
+                                        </h1>
+                                    </v-col>
+                                </v-row>
+
+
+                                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
+
+                                    Le 14 mars dernier, j'organisais un marathon d'entrevues atypiques au profit de
+                                    Autisme Estrie,
+                                    un organisme de mon coin dans le garage de Luc Poirier Perso.
+                                    Ici, vous avez la dernière entrevue « atypique » réalisé avec Jocelyn Grégoire de
+                                    Mordus
+                                    d'immobilier
+                                    <br> <br>
+                                    Le montage de la vidéo a été réalisé par Marius Lome et le maquillage par Artiste
+                                    maquilleuse
+                                    Anick Bonhomme.
+                                    <br> <br>
+                                    Merci à mon assistant technique Éthienne Lafond-Lessard.
+                                    À mes ''petits'' sponsors :
+                                    Véronique Bibeau, Nicolas Jachète Québécois Beaudry, Nissan et Office des personnes
+                                    handicapées
+                                    du Québec.
+                                    Musique : Lydie Morneau.
+                                </p>
+
+
+                                <!-- Like dislike commment Section -->
+                                <div style="height: 20px;"></div>
+                                <div
+                                    style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                                </div>
+                                <div
+                                    style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                                </div>
+
+                                <!-- Comments -->
+                                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                                    placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+                            </v-container>
+                        </div>
+
+                    </v-card></v-container>
+
+                <!-- Virginie Roy -->
+                <v-container> <v-card class="flow-menu m-0 youtube-card">
+                        <!-- Title, date and btn -->
+                        <v-col>
+                            <v-row>
+                                <v-col class="text-center">
+                                    <h1 class="card-title">
+                                        ENTREVUE ATYPIQUE AVEC VIRGINIE ROY</h1>
+                                </v-col>
+
+                                <!--<v-col class="text-right">
+  <v-btn class="btn-card-options" flat tile elevation="0">
+                      <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
+                    </v-btn>          (a intégrer)
+                  </v-col> -->
+                            </v-row>
+
+                        </v-col>
+
+                        <!-- Card core Video -->
+                        <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
+                            <v-container>
+                                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                                    src="https://www.youtube.com/embed/dYZZCDVUcuQ?si=g_97RA0w9Vs5hl13"
+                                    title="Guillaumem" frameborder="0"
+                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                    allowfullscreen></iframe>
+
+                                <!-- Date -->
+                                <v-row class="text-right">
+                                    <v-col>
+                                        <h1 style=" margin-right: 40px; margin-top: 10px">
+                                            28-04-2024
+                                        </h1>
+                                    </v-col>
+                                </v-row>
+
+
+                                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
+
+                                    Le 14 mars dernier, j'organisais un marathon d'entrevues atypiques au profit de
+                                    Autisme Estrie,
+                                    un organisme de mon coin dans le garage de Luc Poirier Perso.
+                                    Ici, vous avez la dernière entrevue « atypique » réalisé avec Jocelyn Grégoire de
+                                    Mordus
+                                    d'immobilier
+                                    <br> <br>
+                                    Le montage de la vidéo a été réalisé par Marius Lome et le maquillage par Artiste
+                                    maquilleuse
+                                    Anick Bonhomme.
+                                    <br> <br>
+                                    Merci à mon assistant technique Éthienne Lafond-Lessard.
+                                    À mes ''petits'' sponsors :
+                                    Véronique Bibeau, Nicolas Jachète Québécois Beaudry, Nissan et Office des personnes
+                                    handicapées
+                                    du Québec.
+                                    Musique : Lydie Morneau.
+                                </p>
+
+
+                                <!-- Like dislike commment Section -->
+                                <div style="height: 20px;"></div>
+                                <div
+                                    style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                                </div>
+                                <div
+                                    style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                                </div>
+
+                                <!-- Comments -->
+                                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                                    placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+                            </v-container>
+                        </div>
+
+                    </v-card></v-container>
+
+
+
+
+            </v-col>
+
+            <!-- "Large-Monitor-RightCol" Donation -->
+            <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
+                <v-row>
+                    <v-col>
+                        <v-container class="sticky-bottom-label Je-soutien-container"
+                            style="max-width: 400px ;  bottom: 0;">
+                            <!-- Donnation -->
+                            <v-card style="border-radius: 20px;">
+                                <v-container>
+                                    <v-row class="mb-0"
+                                        style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
+                                        <v-card-title class="text-soutiens" style="margin-top: 15px;">
+                                            JE SOUTIENS!
+                                        </v-card-title>
+                                    </v-row>
+                                    <StripePayment creator-id="1578f5ee-6cd0-42ac-9959-249cd10b6bfb"></StripePayment>
+                                </v-container>
+                            </v-card>
+                        </v-container>
+                        <v-container style="height: 3000px;">
+                        </v-container>
+                    </v-col>
+                    <v-spacer>
+                    </v-spacer>
+                </v-row>
+            </v-col>
+        </v-row>
+
+        <!-- "Mobile" Donation -->
+        <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
+            style="background-color: #6b0065; margin-top: 30px; text-align: center;">
+
+            <!-- Barre cliquable pour ouvrir le drawer -->
+            <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
+                style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
+                JE SOUTIENS
+            </v-btn>
+        </v-col>
+
+        <!-- Drawer du bas -->
+        <template>
+            <div>
+                <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
+                    <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
+                        <h1 class="text-soutiens">JE SOUTIENS</h1>
+                        <StripePayment></StripePayment>
+                    </v-container>
+                </v-bottom-sheet>
+
+            </div>
+        </template>
+
+        <FooterLayout></FooterLayout>
+    </div>
+</template>
+
+<script setup>
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+import { ref } from 'vue';
+import StripePayment from '../StripePayment.vue';
+let imageSrc = '/images/usersmedia/mathieuCaron/banners/bannerMathieuCaron01.png';
+let profilePicture = '/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png';
+let name = 'Mathieu Caron'
+let title = 'Intervieweur'
+let drawerbottom = ref(false)
+
+let navigationItems = [
+    { icon: 'mdi-home', text: 'Accueil', link: 'home' },
+    { icon: 'mdi-account-group', text: 'Membres', link: '/userbrowser' },
+    //{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
+];
+</script>
+
+<style scoped>
+.invert-color {
+    filter: invert(1);
+}
+
+
+.Hutopy-menu-sticky-mobile {
+    position: sticky;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+    margin-top: -40px;
+}
+
+.sticky-bottom-label {
+    position: sticky;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+    margin-top: 20px;
+}
+
+.sticky-top-label {
+    position: sticky;
+    bottom: 0;
+    right: 10%;
+    width: 100%;
+    z-index: 1000;
+}
+
+.text-soutiens {
+    margin-bottom: 15px;
+    color: white;
+    font-size: 1.5rem;
+    letter-spacing: 7px;
+    text-align: center;
+}
+
+.name-info {
+    margin-top: -10px;
+    margin-left: 15%;
+}
+
+.occupation-info {
+    margin-left: 15%;
+    font-size: large;
+}
+
+.name-info-mobile {
+    margin-left: 22px;
+    font-size: 1.3rem
+}
+
+.main-background {
+    background-color: #f4f4f4;
+}
+
+.profile-container {
+    margin-top: -16%;
+}
+
+.btn-custom {
+    width: 100%;
+    background-color: transparent;
+}
+
+.background-profile-container {
+    background-color: #ececec;
+    color: white;
+    border-top: 3px solid #a30e79;
+    border-right: 3px solid #a30e79;
+    font-weight: 700;
+    font-size: 1.15rem;
+    border-radius: 25px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
+}
+
+.background-pink {
+    background-color: #1d1d1b;
+    color: white;
+    font-weight: 400;
+}
+
+.label-text {
+    font-weight: 400;
+    margin-left: 3%;
+    font-size: 1rem;
+}
+
+.profile-name {
+    margin-top: -15%;
+}
+
+.socialicons {
+    width: 35px;
+    max-width: 100px;
+    margin-top: 3px;
+    margin-left: 40px;
+}
+
+.socialicons-mobile {
+    width: 35px;
+    max-width: 100px;
+    margin-top: 27px;
+    margin-left: 20px;
+}
+
+.youtube-card {
+    margin-left: 2%;
+    margin-right: 2%;
+    border-radius: 15px;
+    background-color: #f4f4f4;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
+}
+
+.card-title {
+    font-size: 1.4rem;
+    margin-top: 10px;
+}
+
+.card-date {
+    margin-left: 10px;
+    margin-top: -18px;
+    margin-bottom: -20px;
+    font-size: .8rem;
+}
+
+.social-container {
+    background-color: #101b49;
+    border-top-right-radius: 30px;
+    border-bottom-right-radius: 30px;
+    font-size: 1.7rem;
+    font-weight: 600;
+    color: white;
+}
+
+.social-container2 {
+    background-color: #698fe7;
+    border-bottom-right-radius: 30px;
+    font-size: 1.4rem;
+    font-weight: 500;
+    color: white;
+}
+
+.social-container-mobile {
+    background-color: #101b49;
+    font-size: 1.4rem;
+    font-weight: 600;
+    color: white;
+    z-index: 1000;
+    margin: auto;
+    text-align: center;
+}
+
+.social-container2-mobile {
+    background-color: #698fe7;
+    z-index: 1000;
+    font-size: 1.2rem;
+    font-weight: 500;
+    color: white;
+}
+
+.social-icon-group-mobile {
+    background-color: #698fe7;
+}
+
+.mini-profile-picture {
+    border-radius: 100px;
+}
+
+.btn-card-options {
+    background-color: #f4f4f4;
+    width: 50px;
+    margin-left: -12px;
+    margin-top: 10px;
+}
+
+.mobile-profile-picture-creator {
+    height: 150px;
+    width: 150px;
+    border-radius: 50%;
+    max-width: 150px;
+    border: 6px solid white;
+    z-index: 1000;
+}
+
+.mobile-header {
+    height: 50px;
+    margin-left: -13%;
+    margin-top: 6%;
+}
+
+.h1-navigation {
+    text-align: center;
+    font-weight: 600;
+    margin-bottom: 10%;
+}
+
+.mobile-profile-picture {
+    height: 40px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+    border: 2px solid #a30e79;
+    margin-right: 10px
+}
+
+.profile-banner {
+    margin-top: 25px;
+    min-height: 200px
+}
+
+.v-navigation-drawer {
+    max-height: 100vh;
+}
+
+@media (min-width: 150px) and (max-width: 474px) {
+    .mobile-profile-picture-creator {
+        transform: scale(1.5) translateY(-30%) translateX(0%);
+    }
+
+    .socialicons-mobile {
+        width: 35px;
+        max-width: 100px;
+        margin-top: 0px;
+        margin-left: 20px;
+    }
+}
+
+
+@media (min-width: 475px) and (max-width: 599px) {
+    .socialicons-mobile {
+        width: 35px;
+        max-width: 100px;
+        margin-top: 0px;
+        margin-left: px;
+    }
+
+    .mobile-profile-picture-creator {
+        transform: scale(1.5) translateY(-30%) translateX(0%);
+    }
+
+    .profile-container-mobile {
+        width: 110%;
+        margin-left: -3%;
+        margin-top: -112px;
+    }
+
+    .occupation-info {
+        font-size: 1rem;
+    }
+
+    .card-youtube {
+        min-height: 250px;
+    }
+
+    .name-info-mobile {
+        font-size: 1.6rem;
+    }
+}
+
+@media (min-width: 599px) and (max-width: 749px) {
+    .mobile-profile-picture-creator {
+        transform: scale(1.5) translateY(25%) translateX(0%);
+    }
+
+    .profile-container {
+
+        width: 110%;
+        margin-left: -3%;
+    }
+
+    .profile-container-mobile {
+
+        width: 110%;
+        margin-left: -3%;
+        margin-top: -110px;
+    }
+
+    .name-info {
+        font-size: 1.2rem;
+    }
+
+    .occupation-info {
+        font-size: 1rem;
+    }
+
+    .card-youtube {
+        min-height: 330px;
+    }
+}
+
+@media (min-width: 750px) and (max-width: 960px) {
+    .mobile-profile-picture-creator {
+        transform: scale(1.8) translateY(25%) translateX(0%);
+    }
+
+    .profile-container {
+        width: 110%;
+        margin-left: -3%;
+    }
+
+    .profile-container-mobile {
+        width: 110%;
+        margin-left: -3%;
+        margin-top: -110px;
+    }
+
+    .name-info {
+        font-size: 1.2rem;
+    }
+
+    .occupation-info {
+        font-size: 1rem;
+    }
+
+    .card-youtube {
+        min-height: 425px;
+    }
+}
+
+@media (min-width: 960px) and (max-width: 1280px) {
+    .middle-col {
+        margin-left: -30px;
+    }
+
+    .text-soutiens {
+        font-size: 1.2rem;
+        letter-spacing: 5px;
+    }
+
+    .profile-container {
+        margin-top: -185px;
+        min-width: 480px
+    }
+
+    .card-youtube {
+        min-height: 270px;
+    }
+
+    .Je-soutien-container {
+        min-width: 325px;
+        margin-left: -35px;
+    }
+
+    .mobile-profile-picture-creator {
+        transform: scale(1.3) translateY(25%) translateX(-50px);
+    }
+
+    .name-info {
+        font-size: 1.2rem;
+        margin-left: 20px;
+        margin-top: -6px
+    }
+
+    .occupation-info {
+        margin-left: 40px;
+        margin-top: -8px
+    }
+
+    .social-container {
+        margin-left: 80px;
+        min-width: 270px;
+        max-height: 40px
+    }
+
+    .social-container2 {
+        margin-left: 50px;
+        min-width: 250px;
+        max-height: 35px
+    }
+
+    .socialicons {
+        width: 34px;
+        max-width: 100px;
+        margin-top: 15px;
+        margin-left: 25px;
+    }
+}
+
+@media (min-width: 1280px) and (max-width: 1600px) {
+    .text-soutiens {
+        font-size: 1.3rem;
+        letter-spacing: 8px;
+    }
+
+    .mobile-profile-picture-creator {
+        transform: scale(1.3) translateY(25%) translateX(-50px);
+    }
+
+    .profile-container {
+        margin-top: -180px;
+    }
+
+    .card-youtube {
+        min-height: 290px;
+    }
+
+    .menu-col {
+        margin-left: -4%;
+    }
+
+    .Je-soutien-container {
+        min-width: 350px;
+    }
+
+    .name-info {
+        font-size: 1.2rem;
+        margin-left: 20px;
+        margin-top: -6px
+    }
+
+    .social-container {
+        margin-left: 90px;
+        min-width: 350;
+        max-height: 40px
+    }
+
+    .occupation-info {
+        margin-left: 70px;
+        margin-top: -8px
+    }
+
+    .social-container2 {
+
+        margin-left: 40px;
+        min-width: 290px;
+        max-height: 35px
+    }
+
+    .socialicons {
+        width: 34px;
+        max-width: 100px;
+        margin-top: 15px;
+        margin-left: 25px;
+    }
+}
+
+@media (min-width: 1600px) and (max-width: 1919px) {
+    .text-soutiens {
+        font-size: 1.3rem;
+
+    }
+
+    .mobile-profile-picture-creator {
+        transform: scale(1.4) translateY(25%) translateX(-40px);
+    }
+
+    .profile-container {
+        margin-top: -171px;
+    }
+
+    .card-youtube {
+        min-height: 355px;
+    }
+
+    .menu-col {
+        margin-left: -4%;
+    }
+
+    .Je-soutien-container {
+        min-width: 400px;
+    }
+
+    .name-info {
+        font-size: 1.5rem;
+        margin-top: -4px;
+        margin-left: 35px;
+    }
+
+    .occupation-info {
+        font-size: 1.3rem;
+        margin-left: 75px;
+        margin-top: -2px
+    }
+
+    .social-container2 {
+        margin-left: 70px;
+        min-width: 300px;
+    }
+}
+
+@media (min-width: 1920px) and (max-width: 2559px) {
+    .text-soutiens {
+        font-size: 1.3rem;
+    }
+
+    .profile-container {
+        margin-top: -160px;
+    }
+
+    .card-youtube {
+        min-height: 380px;
+    }
+
+    .Je-soutien-container {
+        min-width: 400px;
+    }
+
+    .mobile-profile-picture-creator {
+        transform: scale(1.4) translateY(25%) translateX(-40px);
+    }
+
+    .name-info {
+        font-size: 1.5rem;
+        margin-left: 35px;
+        margin-top: -4px;
+    }
+
+    .social-container {
+        margin-left: 100px;
+    }
+
+    .occupation-info {
+        font-size: 1.3rem;
+        margin-left: 110px;
+        margin-top: -4px
+    }
+
+    .social-container2 {
+        margin-left: 30px;
+        min-width: 360px;
+    }
+
+    .socialicons {
+        width: 38px;
+        max-width: 100px;
+        margin-top: 13px;
+        margin-left: 40px;
+    }
+}
+
+@media (min-width: 2560px) {
+    .mobile-profile-picture-creator {
+        transform: scale(1.5) translateY(25%) translateX(-20px);
+    }
+
+    .profile-container {
+        margin-top: -150px
+    }
+
+    .card-youtube {
+        min-height: 380px;
+    }
+
+    .text-soutiens {
+        font-size: 1.5rem;
+    }
+
+    .name-info {
+        font-size: 2rem;
+
+    }
+
+    .social-container {
+        margin-left: 140px;
+    }
+
+    .social-container2 {
+        margin-left: 130px;
+    }
+
+    .occupation-info {
+        font-size: 1.5rem;
+        margin-left: 65px;
+        margin-top: -6px
+    }
+
+    .socialicons {
+        width: 45px;
+        max-width: 100px;
+        margin-top: 15px;
+        margin-left: 40px;
+    }
+}
+</style>
\ No newline at end of file