diff --git a/angular.json b/angular.json
index eb49900d0b3b8a838190bf9338aaf4bdff1d3f33..01c15efae2a3f4a235517cb1f4b8418eb151097e 100644
--- a/angular.json
+++ b/angular.json
@@ -29,12 +29,21 @@
             "assets": [
               "src/assets",
               "src/favicon.ico",
-              "src/robots.txt"
+              "src/robots.txt",
+              {
+                "glob": "**/*",
+                "input":"./node_modules/tarteaucitronjs",
+                "output":"/"
+              }
+
             ],
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "./node_modules/tarteaucitronjs/tarteaucitron.js",
+              "./node_modules/tarteaucitronjs/tarteaucitron.services.js"
+            ]
           },
           "configurations": {
             "aot-fr": {
diff --git a/nginx.conf.template b/nginx.conf.template
index 817b4220811ae11099af94a3cc2eca07dad45a42..1c02c2c59bc332747577a67fec238a672295a6cd 100644
--- a/nginx.conf.template
+++ b/nginx.conf.template
@@ -4,39 +4,21 @@ server {
     server_name _;
     root /usr/share/nginx/html/;
 
-    set $matomo_script
-        "<script type='text/javascript'>
-        var _paq = _paq || [];
-        var siteId = <MATOMO_SITE_ID>;
-        window['siteId'] = siteId;
-
-        _paq.push(['enableLinkTracking']);
-        (function() {
-        var u='<MATOMO_SERVER_URL>/';
-
-        _paq.push(['setTrackerUrl', u+'piwik.php']);
-        _paq.push(['setSiteId', siteId]);
-        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
-        })();
-        </script>";
 
     # rule serving the fr build
     location / {
         try_files $uri$args /index.html;
-        sub_filter '</head>' '$matomo_script</head>'; 
-        sub_filter '<html lang="en">' '<html lang="fr">'; 
+        sub_filter '<html lang="en">' '<html lang="fr">';
     }
 
     # Rule serving the en build
     location /en {
         try_files $uri$args /en/index.html;
-        sub_filter '</head>' '$matomo_script</head>'; 
     }
 
     # redirecting the /fr url to the new location of the fr build
     location ~ ^/fr(.*)$ {
-        return 301 $scheme://$http_host$1$is_args$args;      
+        return 301 $scheme://$http_host$1$is_args$args;
     }
 
     #location /robots.txt {
diff --git a/package-lock.json b/package-lock.json
index a9e9b80c1139f88cf2e30bd6acc31911a472856e..fec8ab2b7f0ac998c5882de49e7298e98072ef23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
         "ngx-infinite-scroll": "^10.0.0",
         "node-rsa": "^1.0.3",
         "rxjs": "^6.5.4",
+        "tarteaucitronjs": "^1.9.0",
         "tslib": "^2.0.0",
         "xml2js": "^0.4.19",
         "zone.js": "~0.10.2"
@@ -7933,9 +7934,9 @@
       "dev": true
     },
     "node_modules/dns-packet": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.2.tgz",
-      "integrity": "sha512-qH/MS6fDOeNBTsF3k/v/SrwaXlDeewxgddXGUUfwauEBZkz7u59oF+3ZNSzcZeCuPWOfkqmcAnXW1gliiFW+1A==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.3.tgz",
+      "integrity": "sha512-dDwDMOJU+m6Qx+LhltSV+BWNrMaTqx3eXkAqgt/iouWTXGZMffg1rOSnG2xa3lWqmJ9xTBc7fgIe/css4S1rxA==",
       "dev": true,
       "dependencies": {
         "ip": "^1.1.0",
@@ -8105,9 +8106,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.3.737",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.737.tgz",
-      "integrity": "sha512-P/B84AgUSQXaum7a8m11HUsYL8tj9h/Pt5f7Hg7Ty6bm5DxlFq+e5+ouHUoNQMsKDJ7u4yGfI8mOErCmSH9wyg=="
+      "version": "1.3.738",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.738.tgz",
+      "integrity": "sha512-vCMf4gDOpEylPSLPLSwAEsz+R3ShP02Y3cAKMZvTqule3XcPp7tgc/0ESI7IS6ZeyBlGClE50N53fIOkcIVnpw=="
     },
     "node_modules/elliptic": {
       "version": "6.5.4",
@@ -17272,6 +17273,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/tarteaucitronjs": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/tarteaucitronjs/-/tarteaucitronjs-1.9.0.tgz",
+      "integrity": "sha512-P3Q8xK7/gRMHMIuBDmYUnJdZQIG62SU3eigSOmNJLo4D1YyyddDx6ncc5SzgZM0Tx/d5sFGTu3BOjlQx+kD/qw=="
+    },
     "node_modules/terser": {
       "version": "5.5.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz",
@@ -19868,13 +19874,10 @@
       }
     },
     "node_modules/y18n": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.2.tgz",
-      "integrity": "sha512-DnBDwcL54b5xWMM/7RfFg4xs5amYxq2ot49aUfLjQSAracXkGvlZq0txzqr3Pa6Q0ayuCxBcwTzrPUScKY0O8w==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "dev": true
     },
     "node_modules/yallist": {
       "version": "4.0.0",
@@ -27290,9 +27293,9 @@
       "dev": true
     },
     "dns-packet": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.2.tgz",
-      "integrity": "sha512-qH/MS6fDOeNBTsF3k/v/SrwaXlDeewxgddXGUUfwauEBZkz7u59oF+3ZNSzcZeCuPWOfkqmcAnXW1gliiFW+1A==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.3.tgz",
+      "integrity": "sha512-dDwDMOJU+m6Qx+LhltSV+BWNrMaTqx3eXkAqgt/iouWTXGZMffg1rOSnG2xa3lWqmJ9xTBc7fgIe/css4S1rxA==",
       "dev": true,
       "requires": {
         "ip": "^1.1.0",
@@ -27433,9 +27436,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.737",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.737.tgz",
-      "integrity": "sha512-P/B84AgUSQXaum7a8m11HUsYL8tj9h/Pt5f7Hg7Ty6bm5DxlFq+e5+ouHUoNQMsKDJ7u4yGfI8mOErCmSH9wyg=="
+      "version": "1.3.738",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.738.tgz",
+      "integrity": "sha512-vCMf4gDOpEylPSLPLSwAEsz+R3ShP02Y3cAKMZvTqule3XcPp7tgc/0ESI7IS6ZeyBlGClE50N53fIOkcIVnpw=="
     },
     "elliptic": {
       "version": "6.5.4",
@@ -34909,6 +34912,11 @@
         }
       }
     },
+    "tarteaucitronjs": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/tarteaucitronjs/-/tarteaucitronjs-1.9.0.tgz",
+      "integrity": "sha512-P3Q8xK7/gRMHMIuBDmYUnJdZQIG62SU3eigSOmNJLo4D1YyyddDx6ncc5SzgZM0Tx/d5sFGTu3BOjlQx+kD/qw=="
+    },
     "terser": {
       "version": "5.5.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.5.1.tgz",
@@ -37110,9 +37118,9 @@
       "dev": true
     },
     "y18n": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.2.tgz",
-      "integrity": "sha512-DnBDwcL54b5xWMM/7RfFg4xs5amYxq2ot49aUfLjQSAracXkGvlZq0txzqr3Pa6Q0ayuCxBcwTzrPUScKY0O8w==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
       "dev": true
     },
     "yallist": {
diff --git a/package.json b/package.json
index c0faa92a801cee122fa62fc8b4fcbd88dc2a3335..60e03878494ca3e76789700a675ed2f829904b60 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "ngx-infinite-scroll": "^10.0.0",
     "node-rsa": "^1.0.3",
     "rxjs": "^6.5.4",
+    "tarteaucitronjs": "^1.9.0",
     "tslib": "^2.0.0",
     "xml2js": "^0.4.19",
     "zone.js": "~0.10.2"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 330754000933f2cedd9c31712fc48993b90c11fa..d185e512f50438d63fe552834b3a00c2f084ef4c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -9,6 +9,7 @@ import { AppRoutes } from './routes';
 import { SeoSErvice } from './editorialisation/services';
 import { pageTitles } from '../i18n/traductions';
 
+declare var tarteaucitron: any;
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -26,7 +27,8 @@ export class AppComponent implements OnInit {
     this._angulartics2Piwik.startTracking();
   }
 
-  ngOnInit() {
+  ngOnInit()
+  {
     this._router.events.pipe(
       filter(e => e instanceof NavigationEnd),
     ).subscribe((e) => {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 163dc5c2add0af7747609a4b6dbaf64262408474..e0f0f14d19236c10a2dd5a25ad434ee7f7d7f58b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -10,13 +10,13 @@ import { EditorialisationModule } from './editorialisation/editorialisation.modu
 import { Angulartics2Module } from 'angulartics2';
 import { UserModule } from './user/user.module';
 import { UserService } from './user/services';
-import { AppConfigService, NotificationService } from './core/services';
+import { AppConfigService, NotificationService, TarteAuCitronService } from './core/services';
 import { timeout } from 'rxjs/operators';
 import { notificationMessages } from '../i18n/traductions';
 
 // Function used by APP_INITIALIZER before the app start: init user info / statut (expect a promise)
 export function initUserService(authService: UserService, notificationService: NotificationService) {
-  return (): Promise<any> => {
+  return (): Promise<void> => {
     return new Promise((resolve, reject) => {
       authService.initializeService().pipe(timeout(3000)).subscribe(
         () => {
@@ -35,8 +35,17 @@ export function initUserService(authService: UserService, notificationService: N
   };
 }
 
+export function initTarteaucitronService(tarteaucitronService: TarteAuCitronService) {
+  return (): Promise<void> => {
+    return new Promise( (resolve, reject) => {
+      tarteaucitronService.load();
+      resolve();
+    });
+  }
+}
+
 export function initAppConfig(appConfigService: AppConfigService) {
-  return (): Promise<any> => {
+  return (): Promise<void> => {
     return new Promise((resolve, reject) => {
       appConfigService.load();
       resolve();
@@ -66,6 +75,12 @@ export function initAppConfig(appConfigService: AppConfigService) {
       deps: [AppConfigService],
       multi: true,
     },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initTarteaucitronService,
+      deps: [TarteAuCitronService],
+      multi: true,
+    },
     {
       provide: APP_INITIALIZER,
       useFactory: initUserService,
diff --git a/src/app/core/components/cookie-banner/cookie-banner.component.html b/src/app/core/components/cookie-banner/cookie-banner.component.html
deleted file mode 100644
index 13467410fef9fa99c91b243ecbc3b8fee750e03d..0000000000000000000000000000000000000000
--- a/src/app/core/components/cookie-banner/cookie-banner.component.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<div class="cookie-baner-container" *ngIf="displayCookieBanner">
-  <div class="cross" (click)="hideCookieBanner()">
-    <svg color="white" width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M1 13.0144L7 7.00723L0.999999 1.00006" stroke="white" stroke-width="2" stroke-linecap="round"
-        stroke-linejoin="round" />
-      <path d="M13 1L7 7.00717L13 13.0143" stroke="white" stroke-width="2" stroke-linecap="round"
-        stroke-linejoin="round" />
-    </svg>
-  </div>
-  <div class="cookie-icon">
-    <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M26.9018 6.53255L27.7391 7.07925L28.4427 6.00157L27.2246 5.58609L26.9018 6.53255ZM23.303 1.52707L24.303 1.52213L24.2984 0.576451L23.3539 0.528362L23.303 1.52707ZM32.2251 14.6798L33.225 14.6928L33.2405 13.4994L32.0628 13.693L32.2251 14.6798ZM40.3328 19.2742L41.2178 18.8087L40.7186 17.8597L39.8067 18.4238L40.3328 19.2742ZM42.8507 21.6482L43.8504 21.6258L43.8364 20.9966L43.263 20.7372L42.8507 21.6482ZM27.2246 5.58609C25.5304 5.00824 24.3123 3.40671 24.303 1.52213L22.3031 1.53201C22.3167 4.2941 24.1026 6.63438 26.579 7.47901L27.2246 5.58609ZM27.0403 9.43481C27.0403 8.56391 27.2972 7.75606 27.7391 7.07925L26.0644 5.98585C25.4167 6.97791 25.0403 8.16392 25.0403 9.43481H27.0403ZM31.356 13.7505C28.9725 13.7505 27.0403 11.8183 27.0403 9.43481H25.0403C25.0403 12.9229 27.8679 15.7505 31.356 15.7505V13.7505ZM32.0628 13.693C31.8334 13.7308 31.5974 13.7505 31.356 13.7505V15.7505C31.7065 15.7505 32.0511 15.7218 32.3873 15.6665L32.0628 13.693ZM33.2246 14.7502C33.2246 14.731 33.2247 14.7119 33.225 14.6928L31.2252 14.6668C31.2248 14.6946 31.2246 14.7224 31.2246 14.7502H33.2246ZM37.5403 19.0659C35.1568 19.0659 33.2246 17.1337 33.2246 14.7502H31.2246C31.2246 18.2383 34.0522 21.0659 37.5403 21.0659V19.0659ZM39.8067 18.4238C39.1487 18.8308 38.3735 19.0659 37.5403 19.0659V21.0659C38.7557 21.0659 39.8938 20.7216 40.8588 20.1247L39.8067 18.4238ZM43.263 20.7372C42.3862 20.3403 41.6644 19.6577 41.2178 18.8087L39.4477 19.7398C40.1008 20.9812 41.1544 21.9781 42.4383 22.5592L43.263 20.7372ZM43.856 22.1187C43.856 21.954 43.8541 21.7897 43.8504 21.6258L41.8509 21.6706C41.8543 21.8195 41.856 21.9689 41.856 22.1187H43.856ZM22.2373 43.7373C34.177 43.7373 43.856 34.0583 43.856 22.1187H41.856C41.856 32.9537 33.0724 41.7373 22.2373 41.7373V43.7373ZM0.618652 22.1187C0.618652 34.0583 10.2977 43.7373 22.2373 43.7373V41.7373C11.4022 41.7373 2.61865 32.9537 2.61865 22.1187H0.618652ZM22.2373 0.5C10.2977 0.5 0.618652 10.179 0.618652 22.1187H2.61865C2.61865 11.2836 11.4022 2.5 22.2373 2.5V0.5ZM23.3539 0.528362C22.984 0.509527 22.6117 0.5 22.2373 0.5V2.5C22.5778 2.5 22.9161 2.50866 23.2522 2.52577L23.3539 0.528362Z"
-        fill="white" />
-      <circle cx="11.9937" cy="14.875" r="1.375" fill="white" />
-      <circle cx="22.2373" cy="35.125" r="1.375" fill="white" />
-      <circle cx="12.8374" cy="27.0312" r="2.71875" fill="white" />
-      <circle cx="25.1748" cy="19.9375" r="1.5625" fill="white" />
-      <circle cx="31.356" cy="31.75" r="2" fill="white" />
-      <circle cx="19.4873" cy="9.5" r="2" fill="white" />
-    </svg>
-  </div>
-  <p class="banner-text"><span i18n="@@cookieBanner.message">We care about your personal data and we use cookies in
-      order to improve your experience.</span>
-    <div class="button-wrapper">
-      <button class="button" i18n="@@cookieBanner.close" (click)="hideCookieBanner();">Close</button>
-      <button class="button button-white" i18n="@@cookieBanner.more" (click)="showMore();hideCookieBanner();">Learn
-        more</button>
-    </div>
-</div>
-<div class="modal" *ngIf="modalOpen">
-  <div class="box">
-    <div>
-      <p class="title" i18n="@@cookieModal.title">Cookies manager</p>
-      <svg class="cross" (click)="hideModal()" color="white" width="14" height="15" viewBox="0 0 14 15" fill="none"
-        xmlns="http://www.w3.org/2000/svg">
-        <path d="M1 13.0144L7 7.00723L0.999999 1.00006" stroke="white" stroke-width="2" stroke-linecap="round"
-          stroke-linejoin="round" />
-        <path d="M13 1L7 7.00717L13 13.0143" stroke="white" stroke-width="2" stroke-linecap="round"
-          stroke-linejoin="round" />
-      </svg>
-    </div>
-
-
-    <div class="content">
-      <div class="tabs">
-        <div class="tab" (click)='toggleTab(0)' [ngClass]="{'tab-active' : tab === 0}">
-          <p i18n="@@cookieModal.tab1title">Why do we use cookies?</p>
-        </div>
-        <div class="tab" (click)='toggleTab(1)' [ngClass]="{'tab-active' : tab === 1}">
-          <p i18n="@@cookieModal.tab2title">Necessary cookies</p>
-        </div>
-      </div>
-      <div class="description">
-        <div class="tab-description" [ngClass]="{'hidden' : tab !== 0}">
-          <p class="tab-title" i18n="@@cookieModal.tab1">Why do we use cookies?</p>
-          <div class="tab-content">
-            <p i18n="@@cookieModal.tab1.p1">We use cookies to learn about how you interact with us, improve your
-              experience on our site and personalize your relationship with the platform data.grandlyon.com.</p>
-            <p i18n="@@cookieModal.tab1.p2">Cookies are not used for commercial purposes.</p>
-            <p i18n="@@cookieModal.tab1.p3">Click on the « Necessary cookies » tab to find out more.</p>
-          </div>
-        </div>
-        <div class="tab-description" [ngClass]="{'hidden' : tab !== 1}">
-          <p class="tab-title" i18n="@@cookieModal.tab2">Necessary cookies</p>
-          <div class="tab-content">
-            <p i18n="@@cookieModal.tab2.p1">Active cookies allow to :</p>
-            <p i18n="@@cookieModal.tab2.p2">- save your awareness of how cookies are managed, so that you will not have
-              to go through it at each visit.</p>
-            <p i18n="@@cookieModal.tab2.p3">- save your awareness and acceptance of the Terms of use, so that we will
-              not have to ask you to renew this acceptance at each visit.</p>
-            <p i18n="@@cookieModal.tab2.p4">- avoid, during authenticated sessions, to systematically prompt you for
-              your credentials at each visit or new page</p>
-            <p i18n="@@cookieModal.tab2.p5">- measure the data.grandlyon.com platform's traffic</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/app/core/components/cookie-banner/cookie-banner.component.scss b/src/app/core/components/cookie-banner/cookie-banner.component.scss
deleted file mode 100644
index 8eae3a3cc1922eca8008a6904082ef8961d67934..0000000000000000000000000000000000000000
--- a/src/app/core/components/cookie-banner/cookie-banner.component.scss
+++ /dev/null
@@ -1,253 +0,0 @@
-@import '../../../../scss/variables.scss';
-@import '../../../../../node_modules/bulma/sass/utilities/_all.sass';
-
-.cookie-baner-container {
-  background: rgba(36, 43, 63, 0.9);
-  position: fixed;
-  border: 1px solid #FFFFFF;
-  box-sizing: border-box;
-  border-radius: 4px;
-  z-index: 5;
-  min-height: 200px;
-  right: 0;
-  max-width: 300px;
-  margin: 1rem;
-  bottom: 0;
-
-  @media screen and(max-width: $tablet) {
-    right: 0;
-    max-width: 700px;
-    margin: auto;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background: rgba(36, 43, 63, 1);
-  }
-
-  .cross {
-    float: right;
-    color: white;
-    cursor: pointer;
-    margin: 0.8rem;
-  }
-
-  .cookie-icon {
-    margin: 1rem 0 0.7rem 2rem;
-    text-align: center;
-
-  }
-
-  .banner-text,
-  .banner-text span {
-    color: white;
-    font-size: 15px;
-    margin: auto;
-  }
-
-  span {
-    display: block;
-    text-align: center;
-    padding: 0 1rem;
-  }
-
-
-  a {
-    color: $tomato-color;
-    font-weight: 600;
-    display: inline-block;
-  }
-
-  .button-wrapper {
-    display: flex;
-    justify-content: space-evenly;
-
-    @media screen and (max-width: $tablet) {
-      justify-content: center;
-      margin-top: 0.4rem;
-
-      button:first-of-type {
-        margin-right: 1rem;
-      }
-    }
-  }
-
-  button.button {
-    width: 120px;
-    height: 36px;
-    border: 1px solid white;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: bold;
-    background-color: #242B3F;
-    color: white;
-    display: block;
-    margin-top: 1rem;
-    padding: 0.5rem 1.5rem;
-
-    &:hover {
-      border-color: $tomato-color;
-    }
-  }
-
-  button.button.button-white {
-    background-color: white;
-    color: #242B3F;
-  }
-}
-
-.modal {
-  width: 100%;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: rgba(36, 43, 63, 0.8);
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-
-  .box {
-    width: 100%;
-    max-width: 600px;
-    min-height: 400px;
-    background: #FFFFFF;
-    box-shadow: 0px 4px 28px rgba(0, 0, 0, 0.55);
-    position: relative;
-
-    @media screen and(max-width: $tablet) {
-      width: calc(100% - 50px);
-      height: 450px;
-      max-width: unset;
-    }
-
-    .title {
-      background: #242B3F;
-      color: white;
-      text-align: left;
-      margin-bottom: 0;
-      font-size: 1.2rem;
-      padding: 1rem;
-    }
-
-    .cross {
-      position: absolute;
-      top: 0;
-      right: 0;
-      margin: 1.2rem 1rem;
-      color: white;
-      cursor: pointer;
-    }
-
-    .content {
-      display: flex;
-      height: calc(450px - 53px); // minus the height of the popup header
-
-      @media screen and(max-width: $tablet) {
-        flex-direction: column;
-      }
-
-      .tabs {
-        width: 35%;
-        background: #EBEBEB;
-        color: #242B3F;
-
-        @media screen and(max-width: $tablet) {
-          width: 100%;
-          display: flex;
-        }
-
-        .tab {
-          cursor: pointer;
-          padding: 1rem;
-          border-bottom: 1px solid #B4B4B4;
-          position: relative;
-
-          @media screen and(max-width: $tablet) {
-            width: 50%;
-
-            &:not(:last-of-type) {
-              border-right: 1px solid $grey-super-light-color;
-            }
-          }
-
-          p {
-            display: inline-block;
-          }
-
-          .circle {
-            margin-right: 8px;
-            display: inline-block;
-          }
-        }
-
-        .tab-active {
-          background: white;
-
-          @media screen and(max-width: $tablet) {
-
-            //remove border
-            &:after {
-              content: '';
-              height: 2px;
-              width: 100%;
-              position: absolute;
-              bottom: -2px;
-              left: 0;
-              background: white;
-            }
-          }
-
-          @media screen and(min-width: $tablet) {
-
-            //remove border
-            &:after {
-              content: '';
-              height: 100%;
-              width: 2px;
-              position: absolute;
-              right: -2px;
-              top: 0;
-              background: white;
-            }
-          }
-        }
-      }
-
-      .description {
-        width: 65%;
-        border-left: 1px solid #B4B4B4;
-        padding: 1.3rem 1rem;
-        background-color: #fff;
-        overflow: auto;
-
-        @media screen and(max-width: $tablet) {
-          width: 100%;
-          border: none;
-        }
-
-        .tab-description {
-          color: #242B3F;
-          text-align: left;
-
-          .tab-title {
-            font-weight: bold;
-            font-size: 1.2rem;
-          }
-
-          .tab-content {
-            margin-top: 1rem;
-
-            p {
-              margin-bottom: 0.7rem;
-            }
-          }
-        }
-
-        .hidden {
-          display: none;
-        }
-      }
-    }
-  }
-}
diff --git a/src/app/core/components/cookie-banner/cookie-banner.component.ts b/src/app/core/components/cookie-banner/cookie-banner.component.ts
deleted file mode 100644
index 9afc3586037edc50c7c15a26236787c1acd8a736..0000000000000000000000000000000000000000
--- a/src/app/core/components/cookie-banner/cookie-banner.component.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { CookieService } from 'ngx-cookie-service';
-import { Subscription } from 'rxjs';
-import { AppRoutes } from '../../../routes';
-import { AppStateService } from '../../services';
-
-@Component({
-  selector: 'app-cookie-banner',
-  templateUrl: './cookie-banner.component.html',
-  styleUrls: ['./cookie-banner.component.scss'],
-})
-export class CookieBannerComponent implements OnInit, OnDestroy {
-  modalOpen: boolean;
-  tab = 0;
-
-  AppRoutes = AppRoutes;
-  private cookiesAccepted: boolean;
-  private cookiesAcceptedKey = 'COOKIES_ACCEPTED';
-  private sub: Subscription;
-
-  constructor(
-    private _cookieService: CookieService,
-    private _appStateService: AppStateService,
-  ) { }
-
-  ngOnInit() {
-    this.cookiesAccepted = (this._cookieService.get(this.cookiesAcceptedKey) === 'true');
-
-    this.modalOpen = this._appStateService.cookieModalOpened;
-
-    this.sub = this._appStateService.cookieModalStateChanged$.subscribe((state) => {
-      this.modalOpen = state;
-    });
-  }
-
-  hideCookieBanner() {
-    if (!this.cookiesAccepted) {
-      this._cookieService.set(
-        this.cookiesAcceptedKey, // Key
-        'true', // Value
-        new Date(new Date().setFullYear(new Date().getFullYear() + 1)), // Expiration date now + 1 year
-        '/',
-        document.location.hostname,
-        false,
-        'Strict',
-      );
-      this.cookiesAccepted = true;
-    }
-  }
-
-  hideModal() {
-    this._appStateService.changeCookieModalState(false);
-  }
-
-  showMore() {
-    this._appStateService.changeCookieModalState(true);
-  }
-
-  toggleTab(tabNumber) {
-    this.tab = tabNumber;
-  }
-
-  get displayCookieBanner() {
-    return !this.cookiesAccepted;
-  }
-
-  ngOnDestroy() {
-    this.sub.unsubscribe();
-  }
-}
diff --git a/src/app/core/components/index.ts b/src/app/core/components/index.ts
index ecbaefc324cb3dca8c56ed4fc829bfb71cae5152..2ac86af347f909cfa67cd50bbb5be6d0bfaa741d 100644
--- a/src/app/core/components/index.ts
+++ b/src/app/core/components/index.ts
@@ -5,7 +5,6 @@ import { NotificationsComponent } from './notifications/notifications.component'
 import { ContactComponent } from './contact/contact.component';
 import { SideMenuComponent } from './main/side-menu/side-menu.component';
 import { FeedbackComponent } from './feedback/feedback.component';
-import { CookieBannerComponent } from './cookie-banner/cookie-banner.component';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 
 export {
@@ -15,7 +14,6 @@ export {
   NotificationsComponent,
   ContactComponent,
   FeedbackComponent,
-  CookieBannerComponent,
   PageNotFoundComponent
 };
 
@@ -28,6 +26,5 @@ export const CoreComponents = [
   ContactComponent,
   SideMenuComponent,
   FeedbackComponent,
-  CookieBannerComponent,
   PageNotFoundComponent,
 ];
diff --git a/src/app/core/components/main/footer/footer.component.ts b/src/app/core/components/main/footer/footer.component.ts
index 968bc6a618caf9a44d40140881a00b570b9afadc..56cad8cac1da2f8d249cf087be060c4c687dac65 100644
--- a/src/app/core/components/main/footer/footer.component.ts
+++ b/src/app/core/components/main/footer/footer.component.ts
@@ -3,6 +3,8 @@ import { AppRoutes } from '../../../../routes';
 import { AppStateService } from '../../../services';
 import { APP_CONFIG } from '../../../services/app-config.service';
 
+declare var tarteaucitron: any;
+
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
@@ -21,7 +23,8 @@ export class FooterComponent implements OnInit {
   ngOnInit() { }
 
   openCookieModal() {
-    this._appStateService.changeCookieModalState(true);
+    //this._appStateService.changeCookieModalState(true);
+    tarteaucitron.userInterface.openPanel();
   }
 
 }
diff --git a/src/app/core/components/main/main.component.html b/src/app/core/components/main/main.component.html
index fb6b7cbe1efc7cece13b32ee5a1c8b33477c30de..9d0a081166f4e694a88ccd8ef7fdb86df3295f84 100644
--- a/src/app/core/components/main/main.component.html
+++ b/src/app/core/components/main/main.component.html
@@ -14,8 +14,6 @@
     <router-outlet></router-outlet>
 
     <app-notifications></app-notifications>
-
-    <app-cookie-banner></app-cookie-banner>
   </main>
 
   <a id="site-footer" tabindex="-1"></a>
diff --git a/src/app/core/services/app-config.service.ts b/src/app/core/services/app-config.service.ts
index f6932d7e9f217b8fe359615f045f3bc6f7ae0938..f9e894f40356379b86519721da79c07f229ee1cc 100644
--- a/src/app/core/services/app-config.service.ts
+++ b/src/app/core/services/app-config.service.ts
@@ -18,6 +18,10 @@ export class AppConfig {
     seo: string;
     datasetUsageStatistics: string;
   };
+  statistics: {
+    matomoHost: string;
+    matomoId: string;
+  };
   layer3d: {
     url: string;
   };
@@ -46,7 +50,7 @@ export class AppConfigService {
   constructor() { }
 
   public load() {
-    return new Promise((resolve, reject) => {
+    return new Promise<void>((resolve, reject) => {
       const conf = new AppConfig();
       APP_CONFIG = Object.assign(conf, window['portailDataEnvConfig']);
       resolve();
diff --git a/src/app/core/services/index.ts b/src/app/core/services/index.ts
index dfd0f3ab0eb4d04e39f9cad93a373d4c79a0f5dd..559306ab20af5ac644221ca41f27d39b1e37dc11 100644
--- a/src/app/core/services/index.ts
+++ b/src/app/core/services/index.ts
@@ -7,10 +7,11 @@ import { MatomoService } from './matomo.service';
 import { NavigationHistoryService } from './navigation-history.service';
 import { NotificationService } from './notification.service';
 import { StorageService } from './storage.service';
+import { TarteAuCitronService } from './tarteaucitron.service';
 import { ToolsService } from './tools.service';
 
 // tslint:disable-next-line: max-line-length
-export { ErrorService, NotificationService, MatomoService, NavigationHistoryService, EmailService, FileService, AppConfigService, AppStateService, };
+export { ErrorService, NotificationService, MatomoService, TarteAuCitronService, NavigationHistoryService, EmailService, FileService, AppConfigService, AppStateService, };
 
 // tslint:disable-next-line:variable-name
 export const CoreServices = [
@@ -22,6 +23,7 @@ export const CoreServices = [
   EmailService,
   FileService,
   AppConfigService,
+  TarteAuCitronService,
   AppStateService,
   ToolsService,
 ];
diff --git a/src/app/core/services/tarteaucitron.service.ts b/src/app/core/services/tarteaucitron.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bc279692e537e9849e91ca5d46cb373c0dffdedf
--- /dev/null
+++ b/src/app/core/services/tarteaucitron.service.ts
@@ -0,0 +1,51 @@
+import { Injectable } from "@angular/core";
+import { APP_CONFIG } from "./app-config.service";
+
+declare var tarteaucitron: any;
+
+@Injectable()
+export class TarteAuCitronService {
+
+  public load ()
+  {
+    return new Promise<void>((resolve, reject) => {
+      tarteaucitron.init({
+        "privacyUrl":"",
+
+        "hashtag" : "#tarteaucitron",
+        "cookieName" : "tarteaucitron",
+
+        "orientation" : "bottom",
+
+        "showAlertSmall" : false,
+        "cookieslist" : true,
+        "iconPosition": "BottomRight",
+
+        "AcceptAllCta" : true,
+        "DenyAllCta": false,
+        "highPrivacy" : true,
+
+        "adblocker" : false,
+
+        "handleBrowserDNTRequest" : false,
+
+        "removeCredit" : true,
+        "moreInfoLink": false,
+
+        "useExternalCss" : false,
+        "readmoreLink": "",
+
+      });
+      console.log(tarteaucitron);
+      var tarteaucitronForceLanguage = 'fr';
+      var tarteaucitronForceExpire = '365';
+
+      tarteaucitron.user.matomoId = APP_CONFIG.statistics.matomoId;
+      tarteaucitron.user.matomoHost = APP_CONFIG.statistics.matomoHost;
+
+      (tarteaucitron.job = tarteaucitron.job || []).push('matomo');
+
+      resolve();
+    });
+  }
+}
diff --git a/src/assets/config/config.template.json b/src/assets/config/config.template.json
index f604cce19d3e5c2652edbab3142a030012deea97..83f179e99b906db5bbcefc45506a67ec7054548d 100644
--- a/src/assets/config/config.template.json
+++ b/src/assets/config/config.template.json
@@ -16,10 +16,17 @@
     "seo": "",
     "datasetUsageStatistics": ""
   },
+  "statistics": {
+    "matomoHost": "",
+    "matomoId": ""
+  },
+  "layer3d": {
+    "url": ""
+  },
   "theFunctionalitiesInterruptor": {
     "credits": true,
     "reuses": true,
     "partners": true
   },
   "licenses": []
-}
\ No newline at end of file
+}