Browse Source

ajout des cookies avec vue3 js

maha bouchiba 1 year ago
parent
commit
01a43781ef

+ 2 - 0
app.vue

@@ -1,5 +1,7 @@
 <template>
   <Html :lang="i18nHead.htmlAttrs.lang" :dir="i18nHead.htmlAttrs.dir">
+    <CommonCookiesConsent />
+
     <div id="top" />
 
     <LayoutNavigation />

+ 498 - 0
components/Common/CookiesConsent.vue

@@ -0,0 +1,498 @@
+<template>
+  <div v-if="showPopup || show" class="cookie-consent-banner">
+        <div class="continue-wrapper">
+          <a class="continue" href="#" @click.prevent="continueWithoutAccepting">
+            Continuer sans accepter
+          </a>
+          <v-icon size="20" class="fa-solid fa-arrow-right ml-6" @click="showPopup = false"></v-icon>
+        </div>
+    <v-row justify="center">
+      <v-col cols="12">
+        <img
+          src="/images/logos/cookies/A_cute_and_beautiful_illustration_of_a_cookie_list-removebg-preview.png"
+          alt="Cookie"
+          class="cookie-image"
+        />
+      </v-col>
+    </v-row>
+    <v-row no-gutters>
+      <v-col cols="12">
+        <div class="text">
+          <p>GESTION DES COOKIES ! !</p>
+        </div>
+      </v-col>
+    </v-row>
+    <p class="details-cookies" style="padding-left: 20px">
+      Le site Opentalent.fr utilise des cookies fonctionnels nécessaires à la
+      navigation du site et d'autres technologies similaire pour plusieurs
+      objectifs : des cookies d'analyse de l'audience du site, des cookies de
+      personnalisation de contenu et des cookies publicitaires. Pour plus de
+      détail, veuillez consulter notre
+      <NuxtLink to="/politique-de-confidentialite#cookie-policy">
+        Politique de confidentialité</NuxtLink
+      >. Vous pouvez ajuster vos préférences en matière de cookies à tout moment
+      en cliquant sur le bouton "Gérer mes préférences"
+    </p>
+    <div class="horizontal-line"></div>
+    <div class="actions">
+      <button class="customize-button" @click="customizeCookies">
+        Gérer mes préférences
+      </button>
+      <button class="accept-button" @click="acceptAllCookies">
+        Tout accepter
+      </button>
+      <!-- <button class="decline-button" @click="declineCookies">Refuser</button> -->
+    </div>
+  </div>
+  <v-dialog v-model="customizeDialog" persistent max-width="600px">
+    <v-card>
+      <v-row class="headline">
+        <v-btn class="close-dialog" icon @click="closeCustomizeDialog"
+          ><v-icon size="20" class="fas fa-times"></v-icon
+        ></v-btn>
+
+        <v-card-title>Gérer mes préferences</v-card-title>
+      </v-row>
+
+      <p class="gestion-preferences">
+        Vous pouvez définir vos préférences sur la manière dont vous souhaitez
+        que vos données soient utilisées en fonction des finalités et des
+        entreprises tierces ci-dessous. Certains tiers peuvent traiter des
+        données sur la base d'un intérêt légitime et vous pouvez choisir de vous
+        désinscrire.
+      </p>
+
+      <v-container class="text-end">
+        <button class="decline-button" @click="declineCookies">
+          Tout refuser
+        </button>
+        <button class="accept-button" @click="acceptAllCookies">
+          Tout accepter
+        </button>
+      </v-container>
+      <v-card-text>
+        <h4>Des cookies tiers permettant de réaliser des statistiques</h4>
+
+        <v-row align="center">
+          <v-col cols="auto">
+            <v-switch
+              v-model="tempCookiesOptions.googleAnalytics"
+              label="Google Analytics"
+              hide-details
+              color="green"
+              inset
+            />
+          </v-col>
+          <v-col></v-col>
+        </v-row>
+        <p>
+          Ces cookies nous permettent d'établir des statistiques, des volumes de
+          fréquentation et d'utilisation des divers éléments de notre site, nous
+          permettant d’optimiser son fonctionnement. Lien vers la Politique de
+          protection des données de Google Analytics :
+          <a href="https://policies.google.com/">
+            https://policies.google.com/</a
+          >
+        </p>
+        <h4 class="mt-6">Des cookies tiers à visée publicitaire</h4>
+
+        <v-row align="center">
+          <v-col cols="auto">
+            <v-switch
+              v-model="tempCookiesOptions.metaPixel"
+              label="Meta Pixel"
+              hide-details
+              color="green"
+              inset
+            />
+          </v-col>
+          <v-col></v-col>
+        </v-row>
+        <p>
+          Ces cookies sont installés par Facebook. Ce service nous permet
+          d'établir des statistiques de consultation des publicités. Lien vers
+          la Politique de protection des données de Facebook Pixel :
+          <a
+            href="https://www.facebook.com/privacy/policies/cookies/?entry_point=cookie_policy_redirect&entry=0"
+          >
+            https://www.facebook.com/privacy/policies/cookies/?entry_point=cookie_policy_redirect&entry=0
+          </a>
+        </p>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn color="secondary" @click="closeCustomizeDialog">Fermer</v-btn>
+        <v-spacer></v-spacer>
+        <button class="accept-button" @click="saveCookiesPreferences">
+          Sauvegarder
+        </button>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+  <div v-if="showNotification" class="cookie-notification">
+    Vous avez refusé nos cookies. Vous pouvez modifier votre décision
+    <a href="#" @click="modifyDecision">ici</a>.
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, defineProps } from 'vue'
+import { useCookies } from 'vue3-cookies'
+import { useEventStore } from '~/stores/eventStore'
+
+const { cookies } = useCookies()
+const showPopup = ref(false)
+const customizeDialog = ref(false)
+const showNotification = ref(false)
+const eventStore = useEventStore()
+
+/**
+ * Cookies options
+ */
+const cookiesOptions = ref({
+  googleAnalytics: true,
+  metaPixel: true,
+})
+
+/**
+ * Temporary cookies options
+ */
+const tempCookiesOptions = ref({
+  googleAnalytics: true,
+  metaPixel: true,
+})
+
+/**
+ * Continue without accepting cookies
+ */
+const continueWithoutAccepting = () => {
+  showPopup.value = false
+}
+
+/**
+ * Accept all cookies
+ */
+const acceptAllCookies = () => {
+  cookies.set('cookie_consent', 'accepted', '365d')
+  cookies.set('ga_consent', 'true', '365d')
+  cookies.set('mp_consent', 'true', '365d')
+  cookiesOptions.value.googleAnalytics = true
+  cookiesOptions.value.metaPixel = true
+  tempCookiesOptions.value.googleAnalytics = true
+  tempCookiesOptions.value.metaPixel = true
+  initializeAnalytics()
+  showPopup.value = false
+  customizeDialog.value = false
+}
+
+const removeCookie = (cookieName) => {
+  cookies.remove(cookieName)
+}
+
+const closeCustomizeDialog = () => {
+  customizeDialog.value = false
+  showPopup.value = true 
+}
+
+const declineCookies = () => {
+  cookies.set('cookie_consent', 'declined', '7d')
+  cookies.set('ga_consent', 'false', '7d')
+  cookies.set('mp_consent', 'false', '7d')
+  showPopup.value = false
+  showNotification.value = true
+  customizeDialog.value = false
+  // Hide the notification after 1 minute
+  setTimeout(() => {
+    showNotification.value = false
+  }, 60000)
+}
+
+const customizeCookies = () => {
+  tempCookiesOptions.value = { ...cookiesOptions.value }
+  customizeDialog.value = true
+  showPopup.value = false
+}
+
+const saveCookiesPreferences = () => {
+  console.log('Saving cookies preferences')
+  cookies.set('cookie_consent', 'customized', '365d')
+  cookies.set(
+    'ga_consent',
+    tempCookiesOptions.value.googleAnalytics.toString(),
+    '365d',
+  )
+  cookies.set('mp_consent', tempCookiesOptions.value.metaPixel.toString(), '365d')
+
+  // Supprimer les cookies si les options sont désactivées
+  if (!tempCookiesOptions.value.googleAnalytics) {
+    removeCookie('ga_consent')
+  }
+  if (!tempCookiesOptions.value.metaPixel) {
+    removeCookie('mp_consent')
+  }
+  // Stocker la preuve de consentement
+  localStorage.setItem(
+    'cookie_consent',
+    JSON.stringify({
+      date: new Date(),
+      consent: tempCookiesOptions.value,
+    }),
+  )
+
+  cookiesOptions.value = { ...tempCookiesOptions.value }
+
+  if (cookiesOptions.value.googleAnalytics) initializeAnalytics()
+  customizeDialog.value = false
+  showPopup.value = false
+}
+
+/**
+ * Modify the decision
+ */
+const modifyDecision = () => {
+  showNotification.value = false
+  showPopup.value = true
+}
+
+/**
+ * Initialize Google Analytics and Meta Pixel
+ */
+const initializeAnalytics = () => {
+  if (cookiesOptions.value.googleAnalytics) {
+    // Load Google Analytics script
+    ;(function (i, s, o, g, r, a, m) {
+      i['GoogleAnalyticsObject'] = r
+      ;(i[r] =
+        i[r] ||
+        function () {
+          ;(i[r].q = i[r].q || []).push(arguments)
+        }),
+        (i[r].l = 1 * new Date())
+      ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
+      a.async = 1
+      a.src = g
+      m.parentNode.insertBefore(a, m)
+    })(
+      window,
+      document,
+      'script',
+      'https://www.googletagmanager.com/gtag/js?id=G-L8PZ9TEFNX',
+      'ga',
+    )
+
+    ga('create', 'UA-XXXXX-Y', 'auto')
+    ga('send', 'pageview')
+  }
+  if (cookiesOptions.value.metaPixel) {
+    // Load Meta Pixel script
+    !(function (f, b, e, v, n, t, s) {
+      if (f.fbq) return
+      n = f.fbq = function () {
+        n.callMethod
+          ? n.callMethod.apply(n, arguments)
+          : n.queue.push(arguments)
+      }
+      if (!f._fbq) f._fbq = n
+      n.push = n
+      n.loaded = !0
+      n.version = '2.0'
+      n.queue = []
+      t = b.createElement(e)
+      t.async = !0
+      t.src = v
+      s = b.getElementsByTagName(e)[0]
+      s.parentNode.insertBefore(t, s)
+    })(
+      window,
+      document,
+      'script',
+      'https://connect.facebook.net/en_US/fbevents.js',
+    )
+    fbq('init', '1045498113172655')
+    fbq('track', 'PageView')
+  }
+}
+
+/**
+ * Check if the user has already accepted the cookies
+ */
+onMounted(() => {
+  const cookieConsent = cookies.get('cookie_consent')
+  if (!cookieConsent) {
+    showPopup.value = true
+  }
+  const gaConsent = cookies.get('ga_consent')
+  const mpConsent = cookies.get('mp_consent')
+  if (gaConsent !== undefined)
+    cookiesOptions.value.googleAnalytics = gaConsent === 'false'
+  if (mpConsent !== undefined)
+    cookiesOptions.value.metaPixel = mpConsent === 'false'
+
+    eventStore.on('openCustomizeDialog', customizeCookies)
+})
+
+</script>
+
+<style scoped>
+.gestion-preferences {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 10px;
+  padding: 20px;
+  text-align: justify;
+}
+
+.headline {
+  font-size: 1.5rem;
+  font-weight: 500;
+  margin-bottom: 10px;
+  background-color: #9edbdd;
+  text-transform: uppercase;
+  padding: 15px;
+}
+.cookie-consent-banner {
+  background: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  position: fixed;
+  bottom: 10px;
+  left: 15px;
+  max-width: 550px;
+  z-index: 1000 !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  border-radius: 15px;
+  padding: 20px;
+}
+
+.cookie-image {
+  width: 150px;
+  margin: 0;
+}
+
+.text {
+  padding-top: 10px;
+  padding-bottom: 0;
+  font-family: 'Barlow';
+  font-weight: 600;
+  font-size: 1.3rem;
+  text-align: center;
+}
+
+.details-cookies {
+  font-family: 'Barlow';
+  padding: 10px;
+  text-align: center;
+  text-align: justify;
+}
+
+.horizontal-line {
+  width: 90%;
+  height: 1px;
+  background-color: #7e7d7d;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.actions {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: center;
+}
+
+.accept-button,
+.customize-button {
+  background-color: var(--on-primary-color-alt);
+  border: none;
+  padding: 10px 20px;
+  margin: 5px;
+  cursor: pointer;
+}
+
+.decline-button {
+  border: 1px solid var(--on-neutral-color);
+  padding: 10px 20px;
+  margin: 5px;
+  cursor: pointer;
+}
+
+.accept-button:hover,
+.customize-button:hover {
+  background-color: var(--on-primary-color-alt);
+}
+
+.cookie-notification {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 15px;
+  border-radius: 5px;
+  z-index: 1100;
+}
+
+.cookie-description {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #555;
+}
+
+.custom-switch .v-input--selection-controls__ripple .v-ripple__container {
+  background-color: var(--v-primary-base);
+}
+
+.custom-switch
+  .v-input--selection-controls__ripple--active
+  .v-ripple__container {
+  background-color: var(--v-primary-darken4);
+}
+
+.custom-switch .v-input--selection-controls__input {
+  --v-theme-primary: var(--v-primary-base);
+  --v-theme-primary-lighten4: var(--v-primary-lighten4);
+  --v-theme-primary-darken4: var(--v-primary-darken4);
+}
+
+.custom-switch
+  .v-input--selection-controls__input
+  input:checked
+  + .v-input--selection-controls__ripple
+  .v-ripple__container {
+  background-color: var(--v-primary-darken4);
+}
+
+.custom-switch
+  .v-input--selection-controls__input
+  input:checked
+  + .v-input--selection-controls__ripple
+  .v-ripple__container
+  .v-ripple__animation {
+  background-color: var(--v-primary-darken4);
+}
+
+:deep().v-switch__track {
+  background-color: red;
+}
+
+.close-dialog {
+  background: none !important;
+  box-shadow: none !important;
+}
+.continue{
+  font-size: .9rem;
+  font-weight: 500;
+  text-decoration: underline;
+  cursor: pointer;
+  text-decoration: none !important;
+  color: black ;
+}
+
+.continue-wrapper{
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  margin-left: auto;
+}
+</style>

+ 31 - 31
nuxt.config.ts

@@ -69,37 +69,37 @@ export default defineNuxtConfig({
         },
       ],
       script: [
-        // Google Analytics
-        {
-          src: 'https://www.googletagmanager.com/gtag/js?id=G-L8PZ9TEFNX',
-          async: true,
-        },
-        {
-          innerHTML: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', 'G-L8PZ9TEFNX');
-          `,
-          type: 'text/javascript',
-        },
-        // Meta Pixel
-        {
-          src: 'https://connect.facebook.net/en_US/fbevents.js',
-          async: true,
-        },
-        {
-          innerHTML: `
-            !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
-            n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
-            n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
-            t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
-            document,'script','https://connect.facebook.net/en_US/fbevents.js');
-            fbq('init', '1045498113172655');
-            fbq('track', 'PageView');
-          `,
-          type: 'text/javascript',
-        },
+        // // Google Analytics
+        // {
+        //   src: 'https://www.googletagmanager.com/gtag/js?id=G-L8PZ9TEFNX',
+        //   async: true,
+        // },
+        // {
+        //   innerHTML: `
+        //     window.dataLayer = window.dataLayer || [];
+        //     function gtag(){dataLayer.push(arguments);}
+        //     gtag('js', new Date());
+        //     gtag('config', 'G-L8PZ9TEFNX');
+        //   `,
+        //   type: 'text/javascript',
+        // },
+        // // Meta Pixel
+        // {
+        //   src: 'https://connect.facebook.net/en_US/fbevents.js',
+        //   async: true,
+        // },
+        // {
+        //   innerHTML: `
+        //     !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+        //     n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
+        //     n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
+        //     t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
+        //     document,'script','https://connect.facebook.net/en_US/fbevents.js');
+        //     fbq('init', '1045498113172655');
+        //     fbq('track', 'PageView');
+        //   `,
+        //   type: 'text/javascript',
+        // },
       ],
     },
   },

+ 1 - 0
package.json

@@ -51,6 +51,7 @@
     "uuid": "^9.0.1",
     "vite-plugin-vuetify": "^2.0.3",
     "vue3-carousel": "^0.3.1",
+    "vue3-cookies": "^1.0.6",
     "vuetify": "^3.6.7"
   },
   "devDependencies": {

+ 759 - 610
pages/politique-de-confidentialite-et-protection-des-donnees-personnelles.vue

@@ -1,632 +1,781 @@
 <template>
-  <div>
-    <CommonMeta
-      title="Politique de confidentialité - Opentalent"
-      description="Politique de confidentialité"
-    />
-
-    <LayoutUITitlePage> POLITIQUE DE CONFIDENTIALITÉ </LayoutUITitlePage>
-
-    <CommonBanner
-      image-src="/images/pages/legal/Banniere_informations_legales.jpg"
-      image-alt="Ordinateur à côté d'une balance d'un livre et d'un maillet en bois"
-    />
-
-    <v-container>
-      <v-row class="center-90">
-        <v-col cols="12">
-          <h2>
-            POLITIQUE DE CONFIDENTIALITÉ ET PROTECTION DES DONNÉES PERSONNELLES
-          </h2>
-          <h3>Objet</h3>
-          <p>
-            2IOPENSERVICE développe la gamme de logiciels Opentalent qui permet
-            notamment à ses CLIENTS de mettre des informations en ligne et de
-            les mettre à jour, de gérer les relations entre les organisations et
-            leurs membres ou adhérents, de facturer et de faire le suivi des
-            règlements, de mettre à disposition certains services au profit des
-            membres, de créer des sites Internet consultables sur ordinateurs,
-            tablettes et smartphones.
-          </p>
-          <br />
-          <p>2IOPENSERVICE agit en tant que sous-traitant pour ses CLIENTS.</p>
-          <br />
-          <p>
-            Les CLIENTS sont considérés comme responsables des traitements, des
-            données saisies, qu'ils réalisent dans les logiciels Opentalent.
-          </p>
-          <br />
-          <p>
-            Les présentes clauses ont pour objet de définir les conditions dans
-            lesquelles 2IOPENSERVICE s’engage à effectuer pour le compte de ses
-            CLIENTS les opérations de traitement de données à caractère
-            personnel définies ci-après.
-          </p>
-          <br />
-          <p>
-            Dans le cadre de leurs relations contractuelles, les parties
-            s’engagent à respecter la réglementation en vigueur applicable au
-            traitement de données à caractère personnel et, en particulier, le
-            règlement (UE) 2016/679 du Parlement européen et du Conseil du 27
-            avril 2016 applicable à compter du 25 mai 2018 (ci-après,
-            <strong>
-              « le règlement européen sur la protection des données »</strong
-            >). Ce document a été établi sur la base des recommandations mises à
-            disposition par la CNIL.
-          </p>
-
-          <br />
-          <h3>
-            Description du traitement faisant l’objet de la sous-traitance
-          </h3>
-          <p>
-            2IOPENSERVICE est autorisé à traiter pour le compte du responsable
-            de traitement les données à caractère personnel nécessaires pour
-            fournir les service(s) suivant(s)
-          </p>
-
-          <div class="ml-12 mb-4">
-            <ul>
-              <li>Gestion administrative du CLIENT</li>
-              <li>Outils de communication en réseau entre les membres</li>
-              <li>
-                Outils de promotion des événements sur le portail et la lettre
-                d’information culturelle
-              </li>
-            </ul>
-          </div>
-          <p>
-            Les données à caractère personnel traitées sont :
-            <strong>en gras</strong> les données obligatoires,
-            <em>en italique</em> les données optionnelles, aucune obligation au
-            CLIENT de collecter cette information :
-          </p>
-
-          <div class="ml-12 mb-4">
-            <ul>
-              <li>
-                Identité des membres &lpar;
-                <strong>nom, prénom</strong>,
-                <em
-                  >date de naissance, photo, nationalité, identité des tuteurs
-                  pour les mineurs</em
-                >&rpar;
-              </li>
-              <li>
-                Localisation des membres &lpar;
-                <em
-                  >adresse complète : principale et secondaire, téléphones,
-                  adresses électroniques</em
-                >&rpar;
-              </li>
-              <li>
-                Gestion des accès aux services &lpar;<strong
-                  >identifiants, mot de passe, numéros de licence</strong
-                >&rpar;
-              </li>
-            </ul>
-          </div>
-          <p>Les catégories de personnes concernées sont</p>
-          <br />
-          <div class="ml-12 mb-4">
-            <ul>
-              <li>Les membres de la structure</li>
-              <li>Les donateurs de la structure</li>
-              <li>Les élèves de la structure</li>
-
-              <li>Les salariés de la structure</li>
-              <li>Les contacts de la structure</li>
-            </ul>
-          </div>
-          <p>
-            Pour l’exécution du service objet du présent contrat, le responsable
-            de traitement met à la disposition de 2IOPENSERVICE les informations
-            nécessaires suivantes :
-          </p>
-
-          <div class="ml-12 mb-4">
-            <ul>
-              <li>Coordonnées des responsables du CLIENT</li>
-            </ul>
-          </div>
-
-          <h3>Validité des clauses</h3>
-          <p>
-            Ces clauses entrent en vigueur dès la validation du client lors de
-            sa première connexion, et ce pour toute la durée du contrat de
-            service afférent.
-          </p>
-          <br />
-          <h3>
-            Obligations de 2IOPENSERVICE vis-à-vis du responsable de traitement
-          </h3>
-          <p>
-            2IOPENSERVICE s'engage dans le cadre des services qu'il fournit à
-            ses CLIENTS, à :
-          </p>
-          <div class="ml-12 mb-4">
-            <ul>
-              <li>
-                1.traiter les données
-                <strong> uniquement pour la ou les seule(s) finalité(s)</strong>
-                qui fait/font l’objet des services ;
-              </li>
-              <li>
-                2.traiter les données
-                <strong> conformément aux instructions documentées</strong> du
-                responsable de traitement. Si 2IOPENSERVICE considère qu’une
-                instruction constitue une violation du règlement européen sur la
-                protection des données ou de toute autre disposition du droit de
-                l’Union ou du droit des États membres relatifs à la protection
-                des données, il en <strong> informe immédiatement </strong>le
-                responsable de traitement. En outre, si 2IOPENSERVICE est tenu
-                de procéder à un transfert de données vers un pays tiers ou à
-                une organisation internationale, en vertu du droit de l’Union ou
-                du droit de l’Etat membre auquel il est soumis, il doit informer
-                le responsable du traitement de cette obligation juridique avant
-                le traitement, sauf si le droit concerné interdit une telle
-                information pour des motifs importants d'intérêt public.
-              </li>
-              <li>
-                3.garantir la <strong>confidentialité</strong> des données à
-                caractère personnel traitées ;
-              </li>
-              <li>
-                veiller à ce que les
-                <strong>
-                  personnes autorisées à traiter les données à caractère
-                  personnel</strong
-                >
-                en vertu du présent contrat :
-                <div class="ml-12">
-                  <ul>
-                    <li>
-                      s’engagent à respecter la
-                      <strong>confidentialité </strong> ou soient soumises à une
-                      obligation légale appropriée de confidentialité
-                    </li>
-                    <li>
-                      reçoivent la <strong> formation </strong>nécessaire en
-                      matière de protection des données à caractère
-                      personnel.fidentialité ou soient soumises à une obligation
-                      légale appropriée de confidentialité
-                    </li>
-                  </ul>
-                </div>
-              </li>
-              <li>
-                5. prendre en compte, s’agissant de ses outils, produits,
-                applications ou services, les principes de
-                <strong> protection des données dès la conception</strong> et de
-                <strong>protection des données par défaut</strong>.
-              </li>
-            </ul>
-          </div>
-
-          <h3>Sous-traitance</h3>
-          <p>
-            2IOPENSERVICE est autorisé à faire appel à l’entité
-            <strong>OVH et LIBRA-LINUX</strong> (ci-après, le
-            <strong> « sous-traitant ultérieur »</strong>) pour mener les
-            activités de traitement suivantes :
-          </p>
-
-          <div class="ml-12 mb-6">
-            <ul>
-              <li>Hébergement des données</li>
-              <li>Sécurisation des serveurs de données</li>
-              <li>Sauvegarde et restauration des données</li>
-            </ul>
-          </div>
-          <p>
-            2IOPENSERVICE prend l'engagement en cas de changement de
-            sous-traitant d'informer ses CLIENTS par email. Le nouveau
-            sous-traitant est tenu de respecter les obligations du présent
-            contrat pour le compte et selon les instructions du responsable de
-            traitement.
-          </p>
-          <br />
-          <p>
-            2IOPENSERVICE pour développer les produits, peut donner accès aux
-            données personnelles aux collaborateurs de la société.
-          </p>
-
-          <h3>Droit d’information des personnes concernées</h3>
-          <p>
-            Il appartient au responsable de traitement de fournir l’information
-            aux personnes concernées par les opérations de traitement au moment
-            de la collecte des données.
-          </p>
-          <h3>Exercice des droits des personnes</h3>
-          <p>
-            Dans la mesure du possible, 2IOPENSERVICE doit aider le responsable
-            de traitement à s’acquitter de son obligation de donner suite aux
-            demandes d’exercice des droits des personnes concernées : droit
-            d’accès, de rectification, d’effacement et d’opposition, droit à la
-            limitation du traitement, droit à la portabilité des données, droit
-            de ne pas faire l’objet d’une décision individuelle automatisée
-            &lpar;y compris le profilage&rpar;. Lorsque les personnes concernées
-            exercent auprès de 2IOPENSERVICE des demandes d’exercice de leurs
-            droits, 2IOPENSERVICE doit adresser ces demandes dès réception par
-            courrier électronique à l'adresse de contact de la structure.
-          </p>
-          <h3>Notification des violations de données à caractère personnel</h3>
-
-          <p>
-            2IOPENSERVICE notifie au responsable de traitement toute violation
-            de données à caractère personnel dans un délai maximum de 72 heures
-            après en avoir pris connaissance et par le moyen suivant : courriel.
-            Cette notification est accompagnée de toute documentation utile afin
-            de permettre au responsable de traitement, si nécessaire, de
-            notifier cette violation à l’autorité de contrôle compétente.
-          </p>
-          <br />
-          <p>
-            Après accord du responsable de traitement, 2IOPENSERVICE notifie à
-            l’autorité de contrôle compétente (la CNIL), au nom et pour le
-            compte du responsable de traitement, les violations de données à
-            caractère personnel dans les meilleurs délais et, si possible, 72
-            heures au plus tard après en avoir pris connaissance, à moins que la
-            violation en question ne soit pas susceptible d’engendrer un risque
-            pour les droits et libertés des personnes physiques.
-          </p>
-
-          <p>La notification contient au moins :</p>
-
-          <div class="ml-12 mb-4">
-            <ul>
-              <li>
-                la description de la nature de la violation de données à
-                caractère personnel y compris, si possible, les catégories et le
-                nombre approximatif de personnes concernées par la violation et
-                les catégories et le nombre approximatif d'enregistrements de
-                données à caractère personnel concernés ;
-              </li>
-              <li>
-                le nom et les coordonnées du délégué à la protection des données
-                ou d'un autre point de contact auprès duquel des informations
-                supplémentaires peuvent être obtenues ;
-              </li>
-              <li>
-                la description des conséquences probables de la violation de
-                données à caractère personnel ;
-              </li>
-              <li>
-                la description des mesures prises ou que le responsable du
-                traitement propose de prendre pour remédier à la violation de
-                données à caractère personnel, y compris, le cas échéant, les
-                mesures pour en atténuer les éventuelles conséquences négatives.
-              </li>
-            </ul>
-          </div>
-          <p>
-            Si, et dans la mesure où il n’est pas possible de fournir toutes ces
-            informations en même temps, les informations peuvent être
-            communiquées de manière échelonnée sans retard indu.
-          </p>
-          <br />
-          <p>
-            Après accord du responsable de traitement, 2IOPENSERVICE communique,
-            au nom et pour le compte du responsable de traitement, la violation
-            de données à caractère personnel à la personne concernée dans les
-            meilleurs délais, lorsque cette violation est susceptible
-            d'engendrer un risque élevé pour les droits et libertés d'une
-            personne physiq
-          </p>
-          <br />
-          <p>
-            La communication à la personne concernée décrit, en des termes
-            clairs et simples, la nature de la violation de données à caractère
-            personnel et contient au moins :
-          </p>
-          <div class="ml-12 mb-4">
-            <ul>
-              <li>
-                la description de la nature de la violation de données à
-                caractère personnel y compris, si possible, les catégories et le
-                nombre approximatif de personnes concernées par la violation et
-                les catégories et le nombre approximatif d'enregistrements de
-                données à caractère personnel concernés ;
-              </li>
-              <li>
-                le nom et les coordonnées du délégué à la protection des données
-                ou d'un autre point de contact auprès duquel des informations
-                supplémentaires peuvent être obtenues ;
-              </li>
-              <li>
-                la description des conséquences probables de la violation de
-                données à caractère personnel ;
-              </li>
-              <li>
-                la description des mesures prises ou que le responsable du
-                traitement propose de prendre pour remédier à la violation de
-                données à caractère personnel, y compris, le cas échéant, les
-                mesures pour en atténuer les éventuelles conséquences négatives.
-              </li>
-            </ul>
-          </div>
-          <h3>
-            Aide de 2IOPENSERVICE dans le cadre du respect par le responsable de
-            traitement de ses obligations
-          </h3>
-
-          <p>
-            2IOPENSERVICE informe le responsable de traitement pour la
-            réalisation d’analyses d’impact relative à la protection des
-            données.
-          </p>
-
-          <h3>Mesures de sécurité</h3>
-          <p>
-            2IOPENSERVICE s’engage à mettre en œuvre les mesures de sécurité
-            suivantes :
-          </p>
-
-          <div class="ml-12 mb-4">
-            <ul>
-              <li>
-                <em>
-                  la pseudonymisation et le chiffrement des données à caractère
-                  personnel ;
-                </em>
-              </li>
-
-              <li>
-                <em>
-                  les moyens permettant de garantir la confidentialité,
-                  l'intégrité, la disponibilité et la résilience constantes des
-                  systèmes et des services de traitement ;
-                </em>
-              </li>
-              <li>
-                <em>
-                  les moyens permettant de rétablir la disponibilité des données
-                  à caractère personnel et l'accès à celles-ci dans des délais
-                  appropriés en cas d'incident physique ou technique ;
-                </em>
-              </li>
-              <li>
-                <em>
-                  une procédure visant à tester, à ’analyser et à ’évaluer
-                  régulièrement l'efficacité des mesures techniques et
-                  organisationnelles pour assurer la sécurité du traitement.
-                </em>
-              </li>
-            </ul>
-          </div>
-
-          <h3>Sort des données</h3>
-          <p>
-            Au terme de la prestation de services relatifs au traitement de ces
-            données, 2IOPENSERVICE s’engage à :
-          </p>
-
-          <div class="ml-12 mb-4">
-            <ul>
-              <li>
-                détruire toutes les données à caractère personnel après un délai
-                d'un mois à la fin du service ;
-              </li>
-              <li>
-                à permettre à la structure d'extraire les données à caractère
-                personnel par le responsable de la structure dans un format
-                ouvert et ceci avant la fermeture de son accès.
-              </li>
-            </ul>
-          </div>
-          <p>
-            Le renvoi doit s’accompagner de la destruction de toutes les copies
-            existantes dans les systèmes d’information du sous-traitant. Une
-            fois détruites, le sous-traitant doit justifier par écrit de la
-            destruction.
-          </p>
-
-          <h3>Délégué à la protection des données</h3>
-          <p>
-            Monsieur Michel PERNET-SOLLIET,
-            <a href="mailto:michel.pernet-solliet@2iopenservice.fr">
-              michel.pernet-solliet@2iopenservice.fr</a
+  <AgendaUITitlePage>
+    <template #title>POLITIQUE DE CONFIDENTIALITÉ </template>
+  </AgendaUITitlePage>
+  <AgendaUIBanner
+    :imageSrc="'/images/agenda/Bannieres_Mentions_legales-CGV-Cookies.png'"
+  />
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <h3>Objet</h3>
+        <p>
+          2IOPENSERVICE développe la gamme de logiciels Opentalent qui permet
+          notamment à ses CLIENTS de mettre des informations en ligne et de les
+          mettre à jour, de gérer les relations entre les organisations et leurs
+          membres ou adhérents, de facturer et de faire le suivi des règlements,
+          de mettre à disposition certains services au profit des membres, de
+          créer des sites Internet consultables sur ordinateurs, tablettes et
+          smartphones.
+        </p>
+        <br />
+        <p>2IOPENSERVICE agit en tant que sous-traitant pour ses CLIENTS.</p>
+        <br />
+        <p>
+          Les CLIENTS sont considérés comme responsables des traitements, des
+          données saisies, qu'ils réalisent dans les logiciels Opentalent.
+        </p>
+        <br />
+        <p>
+          Les présentes clauses ont pour objet de définir les conditions dans
+          lesquelles 2IOPENSERVICE s’engage à effectuer pour le compte de ses
+          CLIENTS les opérations de traitement de données à caractère personnel
+          définies ci-après.
+        </p>
+        <br />
+        <p>
+          Dans le cadre de leurs relations contractuelles, les parties
+          s’engagent à respecter la réglementation en vigueur applicable au
+          traitement de données à caractère personnel et, en particulier, le
+          règlement (UE) 2016/679 du Parlement européen et du Conseil du 27
+          avril 2016 applicable à compter du 25 mai 2018 (ci-après,
+          <strong>
+            « le règlement européen sur la protection des données »</strong
+          >). Ce document a été établi sur la base des recommandations mises à
+          disposition par la CNIL.
+        </p>
+
+        <br />
+        <h3>Description du traitement faisant l’objet de la sous-traitance</h3>
+        <p>
+          2IOPENSERVICE est autorisé à traiter pour le compte du responsable de
+          traitement les données à caractère personnel nécessaires pour fournir
+          les service(s) suivant(s)
+        </p>
+
+        <div class="ml-12 mb-4">
+          <ul>
+            <li>Gestion administrative du CLIENT</li>
+            <li>Outils de communication en réseau entre les membres</li>
+            <li>
+              Outils de promotion des événements sur le portail et la lettre
+              d’information culturelle
+            </li>
+          </ul>
+        </div>
+        <p>
+          Les données à caractère personnel traitées sont :
+          <strong>en gras</strong> les données obligatoires,
+          <em>en italique</em> les données optionnelles, aucune obligation au
+          CLIENT de collecter cette information :
+        </p>
+
+        <div class="ml-12 mb-4">
+          <ul>
+            <li>
+              Identité des membres &lpar;
+              <strong>nom, prénom</strong>,
+              <em
+                >date de naissance, photo, nationalité, identité des tuteurs
+                pour les mineurs</em
+              >&rpar;
+            </li>
+            <li>
+              Localisation des membres &lpar;
+              <em
+                >adresse complète : principale et secondaire, téléphones,
+                adresses électroniques</em
+              >&rpar;
+            </li>
+            <li>
+              Gestion des accès aux services &lpar;<strong
+                >identifiants, mot de passe, numéros de licence</strong
+              >&rpar;
+            </li>
+          </ul>
+        </div>
+        <p>Les catégories de personnes concernées sont</p>
+        <br />
+        <div class="ml-12 mb-4">
+          <ul>
+            <li>Les membres de la structure</li>
+            <li>Les donateurs de la structure</li>
+            <li>Les élèves de la structure</li>
+
+            <li>Les salariés de la structure</li>
+            <li>Les contacts de la structure</li>
+          </ul>
+        </div>
+        <p>
+          Pour l’exécution du service objet du présent contrat, le responsable
+          de traitement met à la disposition de 2IOPENSERVICE les informations
+          nécessaires suivantes :
+        </p>
+
+        <div class="ml-12 mb-4">
+          <ul>
+            <li>Coordonnées des responsables du CLIENT</li>
+          </ul>
+        </div>
+
+        <h3>Validité des clauses</h3>
+        <p>
+          Ces clauses entrent en vigueur dès la validation du client lors de sa
+          première connexion, et ce pour toute la durée du contrat de service
+          afférent.
+        </p>
+        <br />
+        <h3>
+          Obligations de 2IOPENSERVICE vis-à-vis du responsable de traitement
+        </h3>
+        <p>
+          2IOPENSERVICE s'engage dans le cadre des services qu'il fournit à ses
+          CLIENTS, à :
+        </p>
+        <div class="ml-12 mb-4">
+          <ul class="liste">
+            <li>
+              1.traiter les données
+              <strong> uniquement pour la ou les seule(s) finalité(s)</strong>
+              qui fait/font l’objet des services ;
+            </li>
+            <li>
+              2.traiter les données
+              <strong> conformément aux instructions documentées</strong> du
+              responsable de traitement. Si 2IOPENSERVICE considère qu’une
+              instruction constitue une violation du règlement européen sur la
+              protection des données ou de toute autre disposition du droit de
+              l’Union ou du droit des États membres relatifs à la protection des
+              données, il en <strong> informe immédiatement </strong>le
+              responsable de traitement. En outre, si 2IOPENSERVICE est tenu de
+              procéder à un transfert de données vers un pays tiers ou à une
+              organisation internationale, en vertu du droit de l’Union ou du
+              droit de l’Etat membre auquel il est soumis, il doit informer le
+              responsable du traitement de cette obligation juridique avant le
+              traitement, sauf si le droit concerné interdit une telle
+              information pour des motifs importants d'intérêt public.
+            </li>
+            <li>
+              3.garantir la <strong>confidentialité</strong> des données à
+              caractère personnel traitées ;
+            </li>
+            <li>
+              veiller à ce que les
+              <strong>
+                personnes autorisées à traiter les données à caractère
+                personnel</strong
+              >
+              en vertu du présent contrat :
+              <div class="ml-12">
+                <ul>
+                  <li>
+                    s’engagent à respecter la
+                    <strong>confidentialité </strong> ou soient soumises à une
+                    obligation légale appropriée de confidentialité
+                  </li>
+                  <li>
+                    reçoivent la <strong> formation </strong>nécessaire en
+                    matière de protection des données à caractère
+                    personnel.fidentialité ou soient soumises à une obligation
+                    légale appropriée de confidentialité
+                  </li>
+                </ul>
+              </div>
+            </li>
+            <li>
+              5. prendre en compte, s’agissant de ses outils, produits,
+              applications ou services, les principes de
+              <strong> protection des données dès la conception</strong> et de
+              <strong>protection des données par défaut</strong>.
+            </li>
+          </ul>
+        </div>
+
+        <h3>Sous-traitance</h3>
+        <p>
+          2IOPENSERVICE est autorisé à faire appel à l’entité
+          <strong>OVH et LIBRA-LINUX</strong> (ci-après, le
+          <strong> « sous-traitant ultérieur »</strong>) pour mener les
+          activités de traitement suivantes :
+        </p>
+
+        <div class="ml-12 mb-6">
+          <ul>
+            <li>Hébergement des données</li>
+            <li>Sécurisation des serveurs de données</li>
+            <li>Sauvegarde et restauration des données</li>
+          </ul>
+        </div>
+        <p>
+          2IOPENSERVICE prend l'engagement en cas de changement de sous-traitant
+          d'informer ses CLIENTS par email. Le nouveau sous-traitant est tenu de
+          respecter les obligations du présent contrat pour le compte et selon
+          les instructions du responsable de traitement.
+        </p>
+        <br />
+        <p>
+          2IOPENSERVICE pour développer les produits, peut donner accès aux
+          données personnelles aux collaborateurs de la société.
+        </p>
+
+        <h3>Droit d’information des personnes concernées</h3>
+        <p>
+          Il appartient au responsable de traitement de fournir l’information
+          aux personnes concernées par les opérations de traitement au moment de
+          la collecte des données.
+        </p>
+        <h3>Exercice des droits des personnes</h3>
+        <p>
+          Dans la mesure du possible, 2IOPENSERVICE doit aider le responsable de
+          traitement à s’acquitter de son obligation de donner suite aux
+          demandes d’exercice des droits des personnes concernées : droit
+          d’accès, de rectification, d’effacement et d’opposition, droit à la
+          limitation du traitement, droit à la portabilité des données, droit de
+          ne pas faire l’objet d’une décision individuelle automatisée &lpar;y
+          compris le profilage&rpar;. Lorsque les personnes concernées exercent
+          auprès de 2IOPENSERVICE des demandes d’exercice de leurs droits,
+          2IOPENSERVICE doit adresser ces demandes dès réception par courrier
+          électronique à l'adresse de contact de la structure.
+        </p>
+        <h3>Notification des violations de données à caractère personnel</h3>
+
+        <p>
+          2IOPENSERVICE notifie au responsable de traitement toute violation de
+          données à caractère personnel dans un délai maximum de 72 heures après
+          en avoir pris connaissance et par le moyen suivant : courriel. Cette
+          notification est accompagnée de toute documentation utile afin de
+          permettre au responsable de traitement, si nécessaire, de notifier
+          cette violation à l’autorité de contrôle compétente.
+        </p>
+        <br />
+        <p>
+          Après accord du responsable de traitement, 2IOPENSERVICE notifie à
+          l’autorité de contrôle compétente (la CNIL), au nom et pour le compte
+          du responsable de traitement, les violations de données à caractère
+          personnel dans les meilleurs délais et, si possible, 72 heures au plus
+          tard après en avoir pris connaissance, à moins que la violation en
+          question ne soit pas susceptible d’engendrer un risque pour les droits
+          et libertés des personnes physiques.
+        </p>
+
+        <p>La notification contient au moins :</p>
+
+        <div class="ml-12 mb-4">
+          <ul>
+            <li>
+              la description de la nature de la violation de données à caractère
+              personnel y compris, si possible, les catégories et le nombre
+              approximatif de personnes concernées par la violation et les
+              catégories et le nombre approximatif d'enregistrements de données
+              à caractère personnel concernés ;
+            </li>
+            <li>
+              le nom et les coordonnées du délégué à la protection des données
+              ou d'un autre point de contact auprès duquel des informations
+              supplémentaires peuvent être obtenues ;
+            </li>
+            <li>
+              la description des conséquences probables de la violation de
+              données à caractère personnel ;
+            </li>
+            <li>
+              la description des mesures prises ou que le responsable du
+              traitement propose de prendre pour remédier à la violation de
+              données à caractère personnel, y compris, le cas échéant, les
+              mesures pour en atténuer les éventuelles conséquences négatives.
+            </li>
+          </ul>
+        </div>
+        <p>
+          Si, et dans la mesure où il n’est pas possible de fournir toutes ces
+          informations en même temps, les informations peuvent être communiquées
+          de manière échelonnée sans retard indu.
+        </p>
+        <br />
+        <p>
+          Après accord du responsable de traitement, 2IOPENSERVICE communique,
+          au nom et pour le compte du responsable de traitement, la violation de
+          données à caractère personnel à la personne concernée dans les
+          meilleurs délais, lorsque cette violation est susceptible d'engendrer
+          un risque élevé pour les droits et libertés d'une personne physiq
+        </p>
+        <br />
+        <p>
+          La communication à la personne concernée décrit, en des termes clairs
+          et simples, la nature de la violation de données à caractère personnel
+          et contient au moins :
+        </p>
+        <div class="ml-12 mb-4">
+          <ul>
+            <li>
+              la description de la nature de la violation de données à caractère
+              personnel y compris, si possible, les catégories et le nombre
+              approximatif de personnes concernées par la violation et les
+              catégories et le nombre approximatif d'enregistrements de données
+              à caractère personnel concernés ;
+            </li>
+            <li>
+              le nom et les coordonnées du délégué à la protection des données
+              ou d'un autre point de contact auprès duquel des informations
+              supplémentaires peuvent être obtenues ;
+            </li>
+            <li>
+              la description des conséquences probables de la violation de
+              données à caractère personnel ;
+            </li>
+            <li>
+              la description des mesures prises ou que le responsable du
+              traitement propose de prendre pour remédier à la violation de
+              données à caractère personnel, y compris, le cas échéant, les
+              mesures pour en atténuer les éventuelles conséquences négatives.
+            </li>
+          </ul>
+        </div>
+        <h3>
+          Aide de 2IOPENSERVICE dans le cadre du respect par le responsable de
+          traitement de ses obligations
+        </h3>
+
+        <p>
+          2IOPENSERVICE informe le responsable de traitement pour la réalisation
+          d’analyses d’impact relative à la protection des données.
+        </p>
+
+        <h3>Mesures de sécurité</h3>
+        <p>
+          2IOPENSERVICE s’engage à mettre en œuvre les mesures de sécurité
+          suivantes :
+        </p>
+
+        <div class="ml-12 mb-4">
+          <ul>
+            <li>
+              <em>
+                la pseudonymisation et le chiffrement des données à caractère
+                personnel ;
+              </em>
+            </li>
+
+            <li>
+              <em>
+                les moyens permettant de garantir la confidentialité,
+                l'intégrité, la disponibilité et la résilience constantes des
+                systèmes et des services de traitement ;
+              </em>
+            </li>
+            <li>
+              <em>
+                les moyens permettant de rétablir la disponibilité des données à
+                caractère personnel et l'accès à celles-ci dans des délais
+                appropriés en cas d'incident physique ou technique ;
+              </em>
+            </li>
+            <li>
+              <em>
+                une procédure visant à tester, à ’analyser et à ’évaluer
+                régulièrement l'efficacité des mesures techniques et
+                organisationnelles pour assurer la sécurité du traitement.
+              </em>
+            </li>
+          </ul>
+        </div>
+
+        <h3>Sort des données</h3>
+        <p>
+          Au terme de la prestation de services relatifs au traitement de ces
+          données, 2IOPENSERVICE s’engage à :
+        </p>
+
+        <div class="ml-12 mb-4">
+          <ul>
+            <li>
+              détruire toutes les données à caractère personnel après un délai
+              d'un mois à la fin du service ;
+            </li>
+            <li>
+              à permettre à la structure d'extraire les données à caractère
+              personnel par le responsable de la structure dans un format ouvert
+              et ceci avant la fermeture de son accès.
+            </li>
+          </ul>
+        </div>
+        <p>
+          Le renvoi doit s’accompagner de la destruction de toutes les copies
+          existantes dans les systèmes d’information du sous-traitant. Une fois
+          détruites, le sous-traitant doit justifier par écrit de la
+          destruction.
+        </p>
+
+        <h3>Délégué à la protection des données</h3>
+        <p>
+          Monsieur Michel PERNET-SOLLIET,
+          <a href="mailto:michel.pernet-solliet@2iopenservice.fr">
+            michel.pernet-solliet@2iopenservice.fr</a
+          >
+          est le délégué à la protection des données, conformément à l’article
+          37 du règlement européen sur la protection des données.
+        </p>
+
+        <h3>Registre des catégories d’activités de traitement</h3>
+        <p>
+          2IOPENSERVICE déclare <strong>tenir par écrit un registre</strong> de
+          toutes les catégories d’activités de traitement effectuées pour le
+          compte du responsable de traitement comprenant :
+        </p>
+        <div class="ml-12 ml-4">
+          <ul>
+            <li>
+              le nom et les coordonnées du responsable de traitement pour le
+              compte duquel il agit (le compte administrateur du client et le
+              responsable de la structure), des éventuels sous-traitants et, le
+              cas échéant, du délégué à la protection des données ;
+            </li>
+            <li>
+              les catégories de traitements effectués pour le compte du
+              responsable du traitement ;
+            </li>
+            <li>
+              le cas échéant, les transferts de données à caractère personnel
+              vers un pays tiers ou à une organisation internationale, y compris
+              l'identification de ce pays tiers ou de cette organisation
+              internationale et, dans le cas des transferts visés à l'article
+              49, paragraphe 1, deuxième alinéa du règlement européen sur la
+              protection des données, les documents attestant de l'existence de
+              garanties appropriées ;
+            </li>
+            <li>
+              dans la mesure du possible, une description générale des mesures
+              de sécurité techniques et organisationnelles, y compris entre
+              autres, selon les besoins :
+              <div class="ml-12">
+                <ul>
+                  <li>
+                    la pseudonymisation et le chiffrement des données à
+                    caractère personnel ;
+                  </li>
+                  <li>
+                    des moyens permettant de garantir la confidentialité,
+                    l'intégrité, la disponibilité et la résilience constantes
+                    des systèmes et des services de traitement ;
+                  </li>
+                  <li>
+                    des moyens permettant de rétablir la disponibilité des
+                    données à caractère personnel et l'accès à celles-ci dans
+                    des délais appropriés en cas d'incident physique ou
+                    technique ;
+                  </li>
+                  <li>
+                    une procédure visant à tester, à analyser et à évaluer
+                    régulièrement l'efficacité des mesures techniques et
+                    organisationnelles pour assurer la sécurité du traitement.
+                  </li>
+                </ul>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <h3>Documentation</h3>
+
+        <p>
+          2IOPENSERVICE met à la disposition du responsable de traitement la
+          <strong>
+            documentation nécessaire pour démontrer le respect de toutes ses
+            obligations</strong
+          >
+          et pour permettre la réalisation d'audits, y compris des inspections,
+          par le responsable du traitement ou un autre auditeur qu'il a mandaté,
+          et contribuer à ces audits.
+        </p>
+
+        <h3>
+          Obligations du responsable de traitement vis-à-vis de 2IOPENSERVICE
+        </h3>
+        <p>Le responsable de traitement s’engage à :</p>
+        <div class="ml-12 mb-4">
+          <ul class="liste">
+            <li>
+              1.fournir à 2IOPENSERVICE les données visées au II des présentes
+              clauses
+            </li>
+            <li>
+              2. documenter par écrit toute instruction concernant le traitement
+              des données par 2IOPENSERVICE
+            </li>
+            <li>
+              3. veiller, au préalable et pendant toute la durée du traitement,
+              au respect des obligations prévues par le règlement européen sur
+              la protection des données de la part 2IOPENSERVICE
+            </li>
+            <li>
+              4. superviser le traitement, y compris réaliser les audits et les
+              inspections auprès de 2IOPENSERVICE
+            </li>
+          </ul>
+        </div>
+        <h2 id="cookie-policy">POLITIQUE DE COOKIES</h2>
+        <h3>Utilisation des cookies</h3>
+        <p>
+          Un cookie est une suite d'informations envoyée par un site Internet à
+          un ordinateur sous la forme d’un petit fichier de données. Les cookies
+          peuvent être utilisés pour une authentification, une session, stocker
+          une information spécifique comme les préférences sur un site ou le
+          contenu d'un panier d'achat électronique.
+        </p>
+        <br />
+        <p>
+          Le stockage des cookies se fait par le biais du navigateur Web utilisé
+          par l’internaute (par exemple Internet Explorer).
+        </p>
+        <br />
+        <p>Il existe deux types de cookies :</p>
+        <div class="ml-12 mb-4">
+          <ul>
+            <li>
+              les cookies de session sont supprimés de votre ordinateur lorsque
+              vous fermez votre navigateur.
+            </li>
+            <li>
+              les cookies permanents restent stockés sur votre ordinateur après
+              la fermeture du navigateur.
+            </li>
+          </ul>
+        </div>
+        <p>
+          Les cookies sont cependant anonymes et ne sont en aucun cas utilisés
+          pour collecter des informations personnelles.
+        </p>
+
+        <p>
+          2IOPENSERVICE utilise des cookies pour permettre et faciliter la
+          communication par voie électronique, fournir les services en ligne
+          souscrits par ses abonnés, analyser l'utilisation du site dans
+          l’objectif d’améliorer la qualité de ses sites, collecter des données
+          générales (non-nominatives) sur ses CLIENTS à des fins de
+          communication ciblée, y compris la fourniture d'informations ciblées
+          sur les produits ou services fournis par 2IOPENSERVICE.
+        </p>
+        <br />
+        <p>
+          Le site internet Opentalent diffuse de la publicité utilisant
+          également des "cookies" à des fins publicitaires, afin de diriger
+          certaines publicités en fonction des annonces que nous estimons être
+          intéressantes pour vous sur notre site ou lorsque vous naviguez sur
+          internet d’une manière générale, de la zone géographique des
+          internautes, et/ou de ne présenter une publicité qu’un nombre de fois
+          limité par destinataire.
+        </p>
+
+        <br />
+        <p>
+          <i
+            >La non-acceptation des cookies publicitaires n’affectera pas votre
+            expérience utilisateur lorsque vous naviguez sur nos sites web.
+            Cependant, les annonces publicitaires qui vous seront proposées ne
+            seront pas modérées (pertinence, répétition).</i
+          >
+        </p>
+
+        <br />
+        <p>
+          Notre site vous permet d’interagir avec des réseaux sociaux via les
+          boutons de partage qui ont pour finalité de faciliter le partage de
+          contenu :
+        </p>
+
+        <ul class="mt-6 ml-12">
+          <li>
+            Facebook (voir
+            <a href="https://www.facebook.com/legal/terms"
+              >conditions d’utilisation</a
             >
-            est le délégué à la protection des données, conformément à l’article
-            37 du règlement européen sur la protection des données.
-          </p>
-
-          <h3>Registre des catégories d’activités de traitement</h3>
-          <p>
-            2IOPENSERVICE déclare
-            <strong>tenir par écrit un registre</strong> de toutes les
-            catégories d’activités de traitement effectuées pour le compte du
-            responsable de traitement comprenant :
-          </p>
-          <div class="ml-12 ml-4">
-            <ul>
-              <li>
-                le nom et les coordonnées du responsable de traitement pour le
-                compte duquel il agit (le compte administrateur du client et le
-                responsable de la structure), des éventuels sous-traitants et,
-                le cas échéant, du délégué à la protection des données ;
-              </li>
-              <li>
-                les catégories de traitements effectués pour le compte du
-                responsable du traitement ;
-              </li>
-              <li>
-                le cas échéant, les transferts de données à caractère personnel
-                vers un pays tiers ou à une organisation internationale, y
-                compris l'identification de ce pays tiers ou de cette
-                organisation internationale et, dans le cas des transferts visés
-                à l'article 49, paragraphe 1, deuxième alinéa du règlement
-                européen sur la protection des données, les documents attestant
-                de l'existence de garanties appropriées ;
-              </li>
-              <li>
-                dans la mesure du possible, une description générale des mesures
-                de sécurité techniques et organisationnelles, y compris entre
-                autres, selon les besoins :
-                <div class="ml-12">
-                  <ul>
-                    <li>
-                      la pseudonymisation et le chiffrement des données à
-                      caractère personnel ;
-                    </li>
-                    <li>
-                      des moyens permettant de garantir la confidentialité,
-                      l'intégrité, la disponibilité et la résilience constantes
-                      des systèmes et des services de traitement ;
-                    </li>
-                    <li>
-                      des moyens permettant de rétablir la disponibilité des
-                      données à caractère personnel et l'accès à celles-ci dans
-                      des délais appropriés en cas d'incident physique ou
-                      technique ;
-                    </li>
-                    <li>
-                      une procédure visant à tester, à analyser et à évaluer
-                      régulièrement l'efficacité des mesures techniques et
-                      organisationnelles pour assurer la sécurité du traitement.
-                    </li>
-                  </ul>
-                </div>
-              </li>
-            </ul>
-          </div>
-          <h3>Documentation</h3>
-
-          <p>
-            2IOPENSERVICE met à la disposition du responsable de traitement la
-            <strong>
-              documentation nécessaire pour démontrer le respect de toutes ses
-              obligations</strong
+            et
+            <a
+              href="https://www.facebook.com/privacy/policy/?entry_point=data_policy_redirect&entry=0"
+              >politique de confidentialité</a
+            >
+            )
+          </li>
+          <li>
+            Twitter (voir
+            <a href="https://twitter.com/fr/tos">conditions d’utilisation</a> et
+            <a href="https://twitter.com/fr/privacy"
+              >politique de confidentialité</a
+            >)
+          </li>
+
+          <li>
+            LinkedIn (voir
+            <a href="https://www.linkedin.com/legal/user-agreement"
+              >conditions d’utilisation</a
             >
-            et pour permettre la réalisation d'audits, y compris des
-            inspections, par le responsable du traitement ou un autre auditeur
-            qu'il a mandaté, et contribuer à ces audits.
-          </p>
-
-          <h3>
-            Obligations du responsable de traitement vis-à-vis de 2IOPENSERVICE
-          </h3>
-          <p>Le responsable de traitement s’engage à :</p>
-          <div class="ml-12 mb-4">
-            <ul>
-              <li>
-                1.fournir à 2IOPENSERVICE les données visées au II des présentes
-                clauses
-              </li>
-              <li>
-                2. documenter par écrit toute instruction concernant le
-                traitement des données par 2IOPENSERVICE
-              </li>
-              <li>
-                3. veiller, au préalable et pendant toute la durée du
-                traitement, au respect des obligations prévues par le règlement
-                européen sur la protection des données de la part 2IOPENSERVICE
-              </li>
-              <li>
-                4. superviser le traitement, y compris réaliser les audits et
-                les inspections auprès de 2IOPENSERVICE
-              </li>
-            </ul>
-          </div>
-          <h2>POLITIQUE DE COOKIES</h2>
-          <h3>Utilisation des cookies</h3>
-          <p>
-            Un cookie est une suite d'informations envoyée par un site Internet
-            à un ordinateur sous la forme d’un petit fichier de données. Les
-            cookies peuvent être utilisés pour une authentification, une
-            session, stocker une information spécifique comme les préférences
-            sur un site ou le contenu d'un panier d'achat électronique.
-          </p>
-          <br />
-          <p>
-            Le stockage des cookies se fait par le biais du navigateur Web
-            utilisé par l’internaute (par exemple Internet Explorer).
-          </p>
-          <br />
-          <p>Il existe deux types de cookies :</p>
-          <div class="ml-12 mb-4">
-            <ul>
-              <li>
-                les cookies de session sont supprimés de votre ordinateur
-                lorsque vous fermez votre navigateur.
-              </li>
-              <li>
-                les cookies permanents restent stockés sur votre ordinateur
-                après la fermeture du navigateur.
-              </li>
-            </ul>
-          </div>
-          <p>
-            Les cookies sont cependant anonymes et ne sont en aucun cas utilisés
-            pour collecter des informations personnelles.
-          </p>
-
-          <p>
-            2IOPENSERVICE utilise des cookies pour permettre et faciliter la
-            communication par voie électronique, fournir les services en ligne
-            souscrits par ses abonnés, analyser l'utilisation du site dans
-            l’objectif d’améliorer la qualité de ses sites, collecter des
-            données générales (non-nominatives) sur ses CLIENTS à des fins de
-            communication ciblée, y compris la fourniture d'informations ciblées
-            sur les produits ou services fournis par 2IOPENSERVICE.
-          </p>
-          <br />
-          <p>
-            Les sites Internet d'Opentalent qui diffusent de la publicité
-            utilisent également des "cookies" à des fins publicitaires, afin de
-            diriger certaines publicités en fonction de la zone géographique des
-            internautes, et/ou de ne présenter une publicité qu’un nombre de
-            fois limité par destinataire.
-          </p>
-
-          <h3>Refus des cookies</h3>
-          <p>
-            Vous êtes libre d'accepter ou de refuser les cookies en configurant
-            votre navigateur (désactivation de tout ou partie des cookies - voir
-            manuel de votre navigateur Web ou fonction d'aide).
-          </p>
-          <br />
-          <p>
-            La désactivation des cookies peut entraîner l’indisponibilité de
-            certains services auxquels ils sont associés. Elle n'empêche pas
-            l'accès aux espaces non-réservés du site.
-          </p>
-          <br />
-          <p>
-            Par ailleurs, nous gardons la trace des connexions à nos sites, et
-            notamment de leur origine. Cette utilisation est faite à des fins
-            d'analyses statistiques. Les données correspondantes ne comportent
-            pas de données personnelles, et sont détruites après usage.
-          </p>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
+            et
+            <a href="https://www.linkedin.com/legal/privacy-policy"
+              >politique de confidentialité</a
+            >)
+          </li>
+        </ul>
+
+        <h3>Liste tiers</h3>
+        <p>
+          <strong>
+            Ce site utilise plusieurs services qui déposeront des cookies et/ou
+            pourront récupérer certaines informations, dont notamment votre
+            adresse IP.
+          </strong>
+          En validant leur utilisation, vous autorisez leur traitement et leur
+          transfert hors UE par les services. Pour refuser ces utilisations,
+          désactiver les différents services :
+        </p>
+
+        <br />
+        <p>
+          Des cookies strictement nécessaires au fonctionnement de nos sites web
+          permettant de s’assurer de la performance technique du site :
+        </p>
+
+        <ul class="mt-6 ml-8">
+          <li>
+            <strong> hCaptcha - NÉCESSAIRE </strong>
+            <p>
+              Ce cookie est utilisé pour distinguer les humains des robots au
+              niveau des différents formulaires du site, afin d'éviter les SPAM
+              sur vos boîtes mails.
+            </p>
+          </li>
+        </ul>
+
+        <p>Des cookies tiers permettant de réaliser des statistiques:</p>
+        <ul class="mt-6 ml-8">
+          <li>
+            <strong> Google Analytics </strong>
+            <p>
+              Ces cookies nous permettent d'établir des statistiques, des
+              volumes de fréquentation et d'utilisation des divers éléments de
+              notre site, nous permettant d’optimiser son fonctionnement. Lien
+              vers la Politique de protection des données de Google Analytics :
+              <a href="https://policies.google.com/"
+                >https://policies.google.com/</a
+              >
+            </p>
+          </li>
+        </ul>
+
+        <p>Des cookies tiers à visée publicitaire:</p>
+        <ul class="mt-6 ml-8">
+          <li>
+            <strong> Facebook Pixel </strong>
+            <p>
+              Ces cookies sont installés par Facebook. Ce service nous permet
+              d'établir des statistiques de consultation des publicités. Lien
+              vers la Politique de protection des données de Facebook Pixel :
+
+              <a
+                href="https://www.facebook.com/privacy/policies/cookies/?entry_point=cookie_policy_redirect&entry=0"
+                >https://www.facebook.com/privacy/policies/cookies/?entry_point=cookie_policy_redirect&entry=0</a
+              >
+            </p>
+          </li>
+
+          <li>
+            <strong> Google Adwords </strong>
+            <p>
+              Ces cookies sont installés par Google Adwords. Ce service nous
+              permet d'établir des statistiques de consultation des publicités.
+              Lien vers la Politique de protection des données de Google Adwords
+              :
+
+              <a href="https://policies.google.com/"
+                >https://policies.google.com/</a
+              >
+            </p>
+          </li>
+        </ul>
+
+        <h3>Refus des cookies</h3>
+        <p>
+          Vous êtes libre d'accepter ou de refuser les cookies en configurant
+          votre navigateur (désactivation de tout ou partie des cookies - voir
+          manuel de votre navigateur Web ou fonction d'aide).
+        </p>
+        <br />
+        <p>
+          La désactivation des cookies peut entraîner l’indisponibilité de
+          certains services auxquels ils sont associés. Elle n'empêche pas
+          l'accès aux espaces non-réservés du site.
+        </p>
+        <br />
+        <p>
+          Par ailleurs, nous gardons la trace des connexions à nos sites, et
+          notamment de leur origine. Cette utilisation est faite à des fins
+          d'analyses statistiques. Les données correspondantes ne comportent pas
+          de données personnelles, et sont détruites après usage.
+        </p>
+
+        <h3>Gestion des cookies</h3>
+        Vous pouvez à tout moment modifier vos préférences en cliquant sur le
+        lien ci-contre :
+        <NuxtLink class="gestion-preferences" @click="openCustomizeDialog">Gérer mes préférences</NuxtLink>.
+      </v-col>
+
+
+    </v-row>
+  </v-container>
 </template>
-<script setup lang="ts"></script>
-<style scoped lang="scss">
-h2,
-h3 {
-  text-transform: uppercase;
-  font-weight: 500;
-  color: var(--on-neutral-color);
-  margin-top: 1rem;
+
+<script setup>
+import { useEventStore } from '~/stores/eventStore'
+
+const eventStore = useEventStore()
+
+const openCustomizeDialog = () => {
+  eventStore.emit('openCustomizeDialog')
+}
+
+</script>
+
+<style scoped>
+:deep().banner-container {
+  height: 20rem !important;
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  text-align: center !important;
 }
 
 h2 {
   font-size: 1.5rem !important;
+  font-weight: 500;
   line-height: 2.5rem;
   letter-spacing: 0.1rem;
+  text-transform: uppercase;
+  color: #000000;
   margin-bottom: 1rem;
+  margin-top: 1rem;
 }
 
 h3 {
   font-size: 1rem !important;
+  font-weight: 500;
   line-height: 2rem;
+  text-transform: uppercase;
+  color: #000000;
+  margin-top: 1rem;
 }
 
-ul {
+h2,
+h3,
+p,
+ul,
+li {
+  text-align: justify;
+}
+.liste {
   list-style-type: none;
   padding-left: 0;
 }
+
+.gestion-preferences {
+  color: #007bff;
+  cursor: pointer;
+}
 </style>

+ 6 - 0
plugins/vue3-cookies.js

@@ -0,0 +1,6 @@
+import { defineNuxtPlugin } from '#app'
+import  VueCookies  from 'vue3-cookies'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueCookies)
+})

BIN
public/images/logos/cookies/A_cute_and_beautiful_illustration_of_a_cookie_list-removebg-preview.png


+ 21 - 0
stores/eventStore.ts

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useEventStore = defineStore('eventStore', () => {
+  const events = ref(new Map<string, Function[]>())
+
+  function emit(event: string, ...args: any[]) {
+    if (events.value.has(event)) {
+      events.value.get(event)?.forEach(callback => callback(...args))
+    }
+  }
+
+  function on(event: string, callback: Function) {
+    if (!events.value.has(event)) {
+      events.value.set(event, [])
+    }
+    events.value.get(event)?.push(callback)
+  }
+
+  return { emit, on }
+})

+ 127 - 0
yarn.lock

@@ -3702,6 +3702,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-core@npm:3.4.27":
+  version: 3.4.27
+  resolution: "@vue/compiler-core@npm:3.4.27"
+  dependencies:
+    "@babel/parser": "npm:^7.24.4"
+    "@vue/shared": "npm:3.4.27"
+    entities: "npm:^4.5.0"
+    estree-walker: "npm:^2.0.2"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10c0/fbc9a4a6c467fa47609df3337c1b2012a55e3b07adbffc45a31435237ec1169d0a4ece22f3538607364427b779ce04154b86a0e8dd40d3bd4aa03358d4db136d
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-dom@npm:3.4.21, @vue/compiler-dom@npm:^3.3.4":
   version: 3.4.21
   resolution: "@vue/compiler-dom@npm:3.4.21"
@@ -3712,6 +3725,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-dom@npm:3.4.27":
+  version: 3.4.27
+  resolution: "@vue/compiler-dom@npm:3.4.27"
+  dependencies:
+    "@vue/compiler-core": "npm:3.4.27"
+    "@vue/shared": "npm:3.4.27"
+  checksum: 10c0/ceb8aef314b6b7df1ab6cd3c7c1290e5b60363a6092bbffc3ee6aca42f6f5247a070b0dcbe71530751e840d01beec00a6268e3663abcf4a6ac297a32bfb90e49
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-sfc@npm:3.4.21, @vue/compiler-sfc@npm:^3.2.47, @vue/compiler-sfc@npm:^3.3.4, @vue/compiler-sfc@npm:^3.4.15, @vue/compiler-sfc@npm:^3.4.21":
   version: 3.4.21
   resolution: "@vue/compiler-sfc@npm:3.4.21"
@@ -3729,6 +3752,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-sfc@npm:3.4.27":
+  version: 3.4.27
+  resolution: "@vue/compiler-sfc@npm:3.4.27"
+  dependencies:
+    "@babel/parser": "npm:^7.24.4"
+    "@vue/compiler-core": "npm:3.4.27"
+    "@vue/compiler-dom": "npm:3.4.27"
+    "@vue/compiler-ssr": "npm:3.4.27"
+    "@vue/shared": "npm:3.4.27"
+    estree-walker: "npm:^2.0.2"
+    magic-string: "npm:^0.30.10"
+    postcss: "npm:^8.4.38"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10c0/2ccb852c521bf799cf2b118ee8d2aa0eeaaaab1a2e8d3a4a0bd9db5aaccb6224d6673c0c8e39ff8a04e3a99b21128bdaa6ee643e08562af36d75803801cfd641
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-ssr@npm:3.4.21":
   version: 3.4.21
   resolution: "@vue/compiler-ssr@npm:3.4.21"
@@ -3739,6 +3779,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-ssr@npm:3.4.27":
+  version: 3.4.27
+  resolution: "@vue/compiler-ssr@npm:3.4.27"
+  dependencies:
+    "@vue/compiler-dom": "npm:3.4.27"
+    "@vue/shared": "npm:3.4.27"
+  checksum: 10c0/5c51a43481e5faa3f4e66a01a19a5de8a0c25db5df25183d7f9227853740d8ea75c12b1b89f47198f840de852d2e4c258be114528c0c322aff50c5982a973e1f
+  languageName: node
+  linkType: hard
+
 "@vue/devtools-api@npm:^6.5.0, @vue/devtools-api@npm:^6.5.1":
   version: 6.6.1
   resolution: "@vue/devtools-api@npm:6.6.1"
@@ -3845,6 +3895,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/reactivity@npm:3.4.27":
+  version: 3.4.27
+  resolution: "@vue/reactivity@npm:3.4.27"
+  dependencies:
+    "@vue/shared": "npm:3.4.27"
+  checksum: 10c0/5a30fa92cb1b467f56c467d9851a9d594475c80952a600db444c38a8fe2dfc53e4aa09fed6b0e6074eca667c915c730d02b386be26d5f7a0565e70ae04fe92b7
+  languageName: node
+  linkType: hard
+
 "@vue/runtime-core@npm:3.4.21":
   version: 3.4.21
   resolution: "@vue/runtime-core@npm:3.4.21"
@@ -3855,6 +3914,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/runtime-core@npm:3.4.27":
+  version: 3.4.27
+  resolution: "@vue/runtime-core@npm:3.4.27"
+  dependencies:
+    "@vue/reactivity": "npm:3.4.27"
+    "@vue/shared": "npm:3.4.27"
+  checksum: 10c0/dc02dfefebeec49c6b8aab9e133551b6cedef3c55e7441732a696aba66b865945549ba0f92a97a0f4ab080b828bca2cc2ce669ad7c6d2ee129d5050948f03817
+  languageName: node
+  linkType: hard
+
 "@vue/runtime-dom@npm:3.4.21":
   version: 3.4.21
   resolution: "@vue/runtime-dom@npm:3.4.21"
@@ -3866,6 +3935,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/runtime-dom@npm:3.4.27":
+  version: 3.4.27
+  resolution: "@vue/runtime-dom@npm:3.4.27"
+  dependencies:
+    "@vue/runtime-core": "npm:3.4.27"
+    "@vue/shared": "npm:3.4.27"
+    csstype: "npm:^3.1.3"
+  checksum: 10c0/2ace60cab29400c4d466b6743552ae3af360f908d7716316c23a641bd5adce7aa05d2b4522ecf3b6b2f912bb525c8e055708db11791e50aea24ff6b2a71e0a8e
+  languageName: node
+  linkType: hard
+
 "@vue/server-renderer@npm:3.4.21":
   version: 3.4.21
   resolution: "@vue/server-renderer@npm:3.4.21"
@@ -3878,6 +3958,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/server-renderer@npm:3.4.27":
+  version: 3.4.27
+  resolution: "@vue/server-renderer@npm:3.4.27"
+  dependencies:
+    "@vue/compiler-ssr": "npm:3.4.27"
+    "@vue/shared": "npm:3.4.27"
+  peerDependencies:
+    vue: 3.4.27
+  checksum: 10c0/5e6761ecd74c0a9ca9fd991f7a980140d2e09427712dbdc74b536bc5a9b97c06825ca4fa006b4a7cd6ba224fdb13c1c6a600e7d039d2a40f036b13ed611aa20f
+  languageName: node
+  linkType: hard
+
 "@vue/shared@npm:3.4.21, @vue/shared@npm:^3.4.21":
   version: 3.4.21
   resolution: "@vue/shared@npm:3.4.21"
@@ -3885,6 +3977,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/shared@npm:3.4.27":
+  version: 3.4.27
+  resolution: "@vue/shared@npm:3.4.27"
+  checksum: 10c0/4a21918858270bcc654bb94b3429d9acbe95af097ea3063e192b36bd502dc896ca47778fa74a863b01f677ec271b189eb90f8b372943c10e52725a6bdc7f6cd5
+  languageName: node
+  linkType: hard
+
 "@vuelidate/core@npm:^2.0.3":
   version: 2.0.3
   resolution: "@vuelidate/core@npm:2.0.3"
@@ -11329,6 +11428,7 @@ __metadata:
     uuid: "npm:^9.0.1"
     vite-plugin-vuetify: "npm:^2.0.3"
     vue3-carousel: "npm:^0.3.1"
+    vue3-cookies: "npm:^1.0.6"
     vuetify: "npm:^3.6.7"
   languageName: unknown
   linkType: soft
@@ -12950,6 +13050,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue3-cookies@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "vue3-cookies@npm:1.0.6"
+  dependencies:
+    vue: "npm:^3.0.0"
+  checksum: 10c0/f304253553944d0cab94bbcadb27da0a4212e19d5392ab1df8fb531f77bd8ced0cb46aacbc8d019694677b7c368b51f2e9bec009b3a8f4325d7383e7574394dc
+  languageName: node
+  linkType: hard
+
+"vue@npm:^3.0.0":
+  version: 3.4.27
+  resolution: "vue@npm:3.4.27"
+  dependencies:
+    "@vue/compiler-dom": "npm:3.4.27"
+    "@vue/compiler-sfc": "npm:3.4.27"
+    "@vue/runtime-dom": "npm:3.4.27"
+    "@vue/server-renderer": "npm:3.4.27"
+    "@vue/shared": "npm:3.4.27"
+  peerDependencies:
+    typescript: "*"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/73349e05cf554891d5e0076be10083150c92831c1cffdeee1e25c2222a8a4d8291630825a897049add753c4925e1c916c3614fe8d9c0392d9ff0186e553fe24b
+  languageName: node
+  linkType: hard
+
 "vue@npm:^3.2.19, vue@npm:^3.2.25, vue@npm:^3.4.21":
   version: 3.4.21
   resolution: "vue@npm:3.4.21"