From cd8290c9d9aeb65fd0e7f40cc910688839800cac Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 8 Jun 2023 17:51:15 +0200
Subject: [PATCH] wip #5941 @0:15 ajouter les langues

---
 app.css       |  23 +++++++
 app.min.css   |   2 +-
 index.html    | 183 +++++++++++++++++++++++---------------------------
 index_en.html |   3 +
 index_fr.html | 183 +++++++++++++++++++++++---------------------------
 sass/app.sass |  16 +++++
 6 files changed, 213 insertions(+), 197 deletions(-)

diff --git a/app.css b/app.css
index 924f76e..1f5718e 100644
--- a/app.css
+++ b/app.css
@@ -376,6 +376,29 @@ b {
   position: relative;
 }
 
+.app-lang {
+  position: absolute;
+  text-align: right;
+  width: 100%;
+  padding: 30px var(--space-l-3xl) 0;
+  top: 0;
+  z-index: 1;
+  box-sizing: border-box;
+}
+@media screen and (max-width: 1024px) {
+  .app-lang {
+    padding-top: 33px;
+  }
+}
+.app-lang a {
+  color: #ffffff;
+  font-size: var(--step-3);
+}
+@media screen and (max-width: 1024px) {
+  .app-lang a {
+    font-size: 18px;
+  }
+}
 .app-header {
   padding-top: var(--space-l-xl);
   padding-bottom: 100px;
diff --git a/app.min.css b/app.min.css
index 0033fc9..c9fdb38 100644
--- a/app.min.css
+++ b/app.min.css
@@ -1 +1 @@
-@charset "UTF-8";a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}@font-face{font-family:"Maison Neue Book";src:url("assets/fonts/MaisonNeue-Book.woff2") format("woff2"),url("assets/fonts/MaisonNeue-Book.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Maison Neue";src:url("assets/fonts/MaisonNeue-Bold.woff2") format("woff2"),url("assets/fonts/MaisonNeue-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"Maison Neue Book";src:url("assets/fonts/MaisonNeue-BookItalic.woff2") format("woff2"),url("assets/fonts/MaisonNeue-BookItalic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:"Maison Neue";src:url("assets/fonts/MaisonNeue-Medium.woff2") format("woff2"),url("assets/fonts/MaisonNeue-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}:root{--space-3xs:clamp(0.25rem, calc(0.25rem + 0.00vw), 0.25rem);--space-2xs:clamp(0.50rem, calc(0.50rem + 0.00vw), 0.50rem);--space-xs:clamp(0.75rem, calc(0.75rem + 0.00vw), 0.75rem);--space-s:clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem);--space-m:clamp(1.50rem, calc(1.50rem + 0.00vw), 1.50rem);--space-l:clamp(2.25rem, calc(2.25rem + 0.00vw), 2.25rem);--space-xl:clamp(3.00rem, calc(3.00rem + 0.00vw), 3.00rem);--space-2xl:clamp(4.00rem, calc(4.00rem + 0.00vw), 4.00rem);--space-3xl:clamp(5.25rem, calc(5.25rem + 0.00vw), 5.25rem);--space-4xl:clamp(6.00rem, calc(6.00rem + 0.00vw), 6.00rem);--space-3xs-2xs:clamp(0.25rem, calc(0.18rem + 0.30vw), 0.50rem);--space-2xs-xs:clamp(0.50rem, calc(0.43rem + 0.30vw), 0.75rem);--space-xs-s:clamp(0.75rem, calc(0.68rem + 0.30vw), 1.00rem);--space-s-m:clamp(1.00rem, calc(0.86rem + 0.61vw), 1.50rem);--space-m-l:clamp(1.50rem, calc(1.30rem + 0.91vw), 2.25rem);--space-l-xl:clamp(2.25rem, calc(2.05rem + 0.91vw), 3.00rem);--space-xl-2xl:clamp(3.00rem, calc(2.73rem + 1.21vw), 4.00rem);--space-2xl-3xl:clamp(4.00rem, calc(3.66rem + 1.52vw), 5.25rem);--space-3xl-4xl:clamp(5.25rem, calc(5.05rem + 0.91vw), 6.00rem);--space-l-xl-custom:clamp(2.00rem, calc(1.73rem + 1.21vw), 3.00rem);--space-l-3xl:clamp(2.25rem, calc(1.43rem + 3.64vw), 5.25rem);--space-2xl-5xl:clamp(3.38rem, calc(0.03rem + 14.85vw), 15.63rem);--space-4xs-6xl:clamp(2.25rem, calc(-2.86rem + 12.73vw), 10.50rem);--space-xl-6xl:clamp(3.00rem, calc(0.95rem + 9.09vw), 10.50rem);--space-3xs-9xl:clamp(0.25rem, calc(-2.20rem + 10.91vw), 9.25rem);--space-m-xl:clamp(1.50rem, calc(1.09rem + 1.82vw), 3.00rem);--space-custom-title-1:clamp(3.94rem, calc(2.91rem + 4.55vw), 7.69rem);--space-custom-title-3:clamp(0.25rem, calc(-2.20rem + 10.91vw), 9.25rem);--step--2:clamp(0.64rem, calc(0.71rem + -0.07vw), 0.69rem);--step--1:clamp(0.80rem, calc(0.84rem + -0.04vw), 0.83rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem);--step-1:clamp(1.20rem, calc(1.19rem + 0.06vw), 1.25rem);--step-2:clamp(1.44rem, calc(1.41rem + 0.15vw), 1.56rem);--step-3:clamp(1.73rem, calc(1.67rem + 0.27vw), 1.95rem);--step-4:clamp(2.07rem, calc(1.97rem + 0.45vw), 2.44rem);--step-5:clamp(2.49rem, calc(2.33rem + 0.68vw), 3.05rem);--step-7:clamp(3.58rem, calc(3.26rem + 1.44vw), 4.77rem);--step-10:clamp(3.00rem, calc(0.65rem + 10.45vw), 11.63rem)}@keyframes line-first{0%{width:0}100%{width:100%}}@keyframes line-second{0%{width:0}100%{width:100vw}}@keyframes overlay{0%{width:100%}100%{width:0}}@keyframes arrow{from{transform:translateY(0)}to{transform:translateY(20px)}}body{background-color:#07090a;font-family:"Maison Neue Book",sans-serif;color:#fff;line-height:1.25;overflow-x:hidden;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bg-blue{background-color:#0a7dff}.color-blue{color:#0a7dff}.italic{font-style:italic}.container{width:100%;margin:0 auto}@media screen and (min-width:1680px){.container{width:100%;max-width:1680px}}.container:not(.full){padding:0 var(--space-l-3xl);box-sizing:border-box}.grid{display:grid;gap:32px}@media screen and (min-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}.grid .grid{grid-template-columns:repeat(1,1fr)}@media screen and (min-width:1024px){.grid .grid{grid-template-columns:repeat(1,1fr)}}@media screen and (min-width:1344px){.grid .grid{grid-template-columns:repeat(2,1fr)}}.grid-item{overflow:hidden}@media screen and (min-width:1024px){.grid-item{width:100%}}@media screen and (min-width:1024px){.grid-reverse .grid-item:first-child{grid-column:2;grid-row:1}.grid-reverse .grid-item:nth-child(2){grid-column:1;grid-row:1}}@media screen and (min-width:1024px){.grid-reverse .grid{margin-left:auto!important}}.gap-xl{gap:0 var(--space-3xs-9xl)}.flex{display:flex}.justify-between{justify-content:space-between}.align-center{align-items:center}.wrap{flex-wrap:wrap}@media screen and (min-width:1680px){body>.app-section{margin-top:var(--space-4xs-6xl)}}@media screen and (min-width:1680px){body>.app-section~.app-section{margin-top:0}}.border-title{width:100%;font-size:var(--step-3);margin-bottom:var(--space-l-xl-custom);padding:18px 0;position:relative}@media screen and (max-width:1680px){.border-title{margin-top:var(--space-xl-6xl)}}.border-title.active:after,.border-title.active:before{width:100%}.border-title:after,.border-title:before{content:"";position:absolute;width:0;height:1px;background-color:#0a7dff;left:0;transition:width cubic-bezier(.82, 0, .65, .93) .9s}.border-title:before{top:0}.border-title:after{bottom:0}.text-center{text-align:center}.text-right{text-align:right}.text-md{font-size:var(--step-2)}.text-xl{font-size:var(--step-7)}.font-neue{font-family:"Maison Neue",sans-serif}.font-book{font-family:"Maison Neue Book",sans-serif}b{font-weight:700}@media screen and (min-width:1024px){.max-content{width:-moz-max-content;width:max-content}}.relative{position:relative}.app-header{padding-top:var(--space-l-xl);padding-bottom:100px}@media screen and (max-width:1024px){.app-header{padding-bottom:288px}}.app-header .logo{position:relative;z-index:1;max-width:100px;display:inline-block}@media screen and (min-width:1024px){.app-header .logo{max-width:160px}}.app-header .logo img{width:100%}.app-header .video-container-mobile{width:288px;height:288px;position:absolute;top:0;right:0}@media screen and (min-width:1024px){.app-header .video-container-mobile{display:none}}.app-header .video-container-mobile svg,.app-header .video-container-mobile video{position:absolute;width:100%}.app-header .video-container-mobile video{height:100%;-o-object-fit:cover;object-fit:cover}.app-banner{overflow:hidden;padding-bottom:169px}.app-banner .container{box-sizing:border-box;padding:0 var(--space-l-3xl)}.app-banner p{font-size:var(--step-10);position:relative}.app-banner p.first{padding-left:var(--space-custom-title-1)}.app-banner p.second{width:-moz-max-content;width:max-content;position:relative}@media screen and (min-width:1024px){.app-banner p.second:after{display:none}}.app-banner p.second:after{content:"";width:0;position:absolute;height:1px;left:calc(100% + 24px);background-color:#fff;top:45%;animation-name:line-second;animation-timing-function:cubic-bezier(0.82,0,0.65,0.93);animation-fill-mode:forwards;animation-duration:.8s}@media screen and (min-width:768px){.app-banner p.third{padding-left:var(--space-custom-title-3)}}@media screen and (max-width:768px){.app-banner .last-phrase{flex-direction:column-reverse;padding-left:var(--space-custom-title-3)}}.app-banner span{font-size:var(--step-3);transform:translateY(25%)}@media screen and (max-width:1024px){.app-banner span{width:100%;max-width:200px;font-size:18px}}@media screen and (max-width:768px){.app-banner span{font-size:16px}}.app-banner .video-container{height:0;padding-bottom:24.52%;width:24.52%;position:absolute;top:2.2vw;right:var(--space-l-3xl);display:none}@media screen and (min-width:1024px){.app-banner .video-container{display:block}}@media screen and (min-width:1680px){.app-banner .video-container{right:145px}}.app-banner .video-container:after,.app-banner .video-container:before{content:"";height:2px;background-color:#fff;position:absolute;bottom:29%;z-index:4}.app-banner .video-container:before{width:93%;left:-117%}@media screen and (min-width:1024px){.app-banner .video-container:before{animation-name:line-first;animation-timing-function:cubic-bezier(0.82,0,0.65,0.93);animation-fill-mode:forwards;animation-duration:.8s}}@media screen and (min-width:1680px){.app-banner .video-container:before{width:0}}.app-banner .video-container:after{width:100vw;left:80%}@media screen and (min-width:1024px){.app-banner .video-container:after{width:0;animation-name:line-second;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-delay:1s;animation-duration:1s}}.app-banner .video-container .mask{height:100%;position:absolute;width:100%;overflow:hidden}.app-banner .video-container .mask video{left:50%;transform:translateX(-50%) scale(1.009)}.app-banner .video-container .overlay{position:absolute;width:100%;height:100%;top:0;right:0;background:#0a7dff;z-index:3;transform:skewX(-35deg);animation-name:overlay;animation-fill-mode:forwards;animation-duration:.8s;animation-delay:.7s}.app-banner .video-container svg,.app-banner .video-container video{position:absolute;width:100%}.app-banner .video-container video{height:100%;-o-object-fit:cover;object-fit:cover}.app-show-more{padding:24px var(--space-l-3xl) 0;text-align:right}@media screen and (max-width:1024px){.app-show-more{display:none}}.app-show-more svg{animation-name:arrow;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.app-intro{padding:var(--space-2xl-5xl) 0;position:relative;overflow:hidden}@media screen and (min-width:768px){.app-intro{font-size:var(--step-4)}}.app-intro.active .line:before{animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.6,0,0.3,1);animation-duration:.75s;animation-name:line-second}.app-intro .line{position:relative}.app-intro .line:before{content:"";width:0;height:2px;background-color:#fff;position:absolute;z-index:-1;left:calc((-100vw + 100%)/ 2);top:.5ch}.app-intro .container{position:relative;z-index:1;padding:0 var(--space-2xl-5xl);box-sizing:border-box}.app-intro .container:after,.app-intro .container:before{content:"";width:calc(100% + 84px);position:absolute;height:100%;background-color:#0a7dff}.app-intro .container:before{content:"";width:78%;height:100%;position:absolute;left:50%;transform:translateX(-50%)}.app-intro .container:after{height:0}.app-section{margin-bottom:var(--space-4xs-6xl)}.app-section .image{height:0;padding-bottom:100%;margin-bottom:36px;position:relative}@media screen and (min-width:1024px){.app-section .image{padding-bottom:0;position:sticky;height:80vh;top:0}}@media screen and (min-width:1680px){.app-section .image{height:72vh;top:15vh}}.app-section .image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;-o-object-position:0 25%;object-position:0 25%}.app-section .text{width:100%;max-width:85%;margin:auto}@media screen and (min-width:1024px){.app-section .text{margin:initial}}@media screen and (min-width:1680px){.app-section .text{width:90%}}.app-section .content p:not(:last-of-type){margin:0 0 1.73rem}.app-section .content h3{margin-bottom:1rem}.app-section .signature{margin-top:32px}.app-section .signature.pp img{max-width:80px}.app-section .signature.fp img{max-width:60px}.app-section .signature img{flex-shrink:0}.app-section .signature p{font-size:12px}.app-footer .block{width:100%;height:0;padding-bottom:100%;background-repeat:no-repeat;background-size:cover;background-position:0 50%;position:relative;overflow:hidden}@media screen and (min-width:1024px){.app-footer .block{width:50%;height:100vh;padding:0}.app-footer .block:hover img{transform:scale(1.05)}}.app-footer .block *{color:#fff}.app-footer img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;left:0;top:0;-o-object-position:left center;object-position:left center;transition:all .5s cubic-bezier(.19, 1, .22, 1)}.app-footer .text{padding:var(--space-xl-6xl) 0;position:relative;z-index:2}.app-footer .title{margin-bottom:var(--space-m-xl)}.app-footer .subtitle{font-size:25px;margin-bottom:var(--space-l-xl)}.app-footer .link-block{display:inline-block;width:100%;height:100%}.app-footer .link{color:#fff;font-size:var(--step-4)}.app-footer .link svg{margin-left:18px}
\ No newline at end of file
+@charset "UTF-8";a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}a{text-decoration:none}@font-face{font-family:"Maison Neue Book";src:url("assets/fonts/MaisonNeue-Book.woff2") format("woff2"),url("assets/fonts/MaisonNeue-Book.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Maison Neue";src:url("assets/fonts/MaisonNeue-Bold.woff2") format("woff2"),url("assets/fonts/MaisonNeue-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"Maison Neue Book";src:url("assets/fonts/MaisonNeue-BookItalic.woff2") format("woff2"),url("assets/fonts/MaisonNeue-BookItalic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:"Maison Neue";src:url("assets/fonts/MaisonNeue-Medium.woff2") format("woff2"),url("assets/fonts/MaisonNeue-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}:root{--space-3xs:clamp(0.25rem, calc(0.25rem + 0.00vw), 0.25rem);--space-2xs:clamp(0.50rem, calc(0.50rem + 0.00vw), 0.50rem);--space-xs:clamp(0.75rem, calc(0.75rem + 0.00vw), 0.75rem);--space-s:clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem);--space-m:clamp(1.50rem, calc(1.50rem + 0.00vw), 1.50rem);--space-l:clamp(2.25rem, calc(2.25rem + 0.00vw), 2.25rem);--space-xl:clamp(3.00rem, calc(3.00rem + 0.00vw), 3.00rem);--space-2xl:clamp(4.00rem, calc(4.00rem + 0.00vw), 4.00rem);--space-3xl:clamp(5.25rem, calc(5.25rem + 0.00vw), 5.25rem);--space-4xl:clamp(6.00rem, calc(6.00rem + 0.00vw), 6.00rem);--space-3xs-2xs:clamp(0.25rem, calc(0.18rem + 0.30vw), 0.50rem);--space-2xs-xs:clamp(0.50rem, calc(0.43rem + 0.30vw), 0.75rem);--space-xs-s:clamp(0.75rem, calc(0.68rem + 0.30vw), 1.00rem);--space-s-m:clamp(1.00rem, calc(0.86rem + 0.61vw), 1.50rem);--space-m-l:clamp(1.50rem, calc(1.30rem + 0.91vw), 2.25rem);--space-l-xl:clamp(2.25rem, calc(2.05rem + 0.91vw), 3.00rem);--space-xl-2xl:clamp(3.00rem, calc(2.73rem + 1.21vw), 4.00rem);--space-2xl-3xl:clamp(4.00rem, calc(3.66rem + 1.52vw), 5.25rem);--space-3xl-4xl:clamp(5.25rem, calc(5.05rem + 0.91vw), 6.00rem);--space-l-xl-custom:clamp(2.00rem, calc(1.73rem + 1.21vw), 3.00rem);--space-l-3xl:clamp(2.25rem, calc(1.43rem + 3.64vw), 5.25rem);--space-2xl-5xl:clamp(3.38rem, calc(0.03rem + 14.85vw), 15.63rem);--space-4xs-6xl:clamp(2.25rem, calc(-2.86rem + 12.73vw), 10.50rem);--space-xl-6xl:clamp(3.00rem, calc(0.95rem + 9.09vw), 10.50rem);--space-3xs-9xl:clamp(0.25rem, calc(-2.20rem + 10.91vw), 9.25rem);--space-m-xl:clamp(1.50rem, calc(1.09rem + 1.82vw), 3.00rem);--space-custom-title-1:clamp(3.94rem, calc(2.91rem + 4.55vw), 7.69rem);--space-custom-title-3:clamp(0.25rem, calc(-2.20rem + 10.91vw), 9.25rem);--step--2:clamp(0.64rem, calc(0.71rem + -0.07vw), 0.69rem);--step--1:clamp(0.80rem, calc(0.84rem + -0.04vw), 0.83rem);--step-0:clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem);--step-1:clamp(1.20rem, calc(1.19rem + 0.06vw), 1.25rem);--step-2:clamp(1.44rem, calc(1.41rem + 0.15vw), 1.56rem);--step-3:clamp(1.73rem, calc(1.67rem + 0.27vw), 1.95rem);--step-4:clamp(2.07rem, calc(1.97rem + 0.45vw), 2.44rem);--step-5:clamp(2.49rem, calc(2.33rem + 0.68vw), 3.05rem);--step-7:clamp(3.58rem, calc(3.26rem + 1.44vw), 4.77rem);--step-10:clamp(3.00rem, calc(0.65rem + 10.45vw), 11.63rem)}@keyframes line-first{0%{width:0}100%{width:100%}}@keyframes line-second{0%{width:0}100%{width:100vw}}@keyframes overlay{0%{width:100%}100%{width:0}}@keyframes arrow{from{transform:translateY(0)}to{transform:translateY(20px)}}body{background-color:#07090a;font-family:"Maison Neue Book",sans-serif;color:#fff;line-height:1.25;overflow-x:hidden;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bg-blue{background-color:#0a7dff}.color-blue{color:#0a7dff}.italic{font-style:italic}.container{width:100%;margin:0 auto}@media screen and (min-width:1680px){.container{width:100%;max-width:1680px}}.container:not(.full){padding:0 var(--space-l-3xl);box-sizing:border-box}.grid{display:grid;gap:32px}@media screen and (min-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}.grid .grid{grid-template-columns:repeat(1,1fr)}@media screen and (min-width:1024px){.grid .grid{grid-template-columns:repeat(1,1fr)}}@media screen and (min-width:1344px){.grid .grid{grid-template-columns:repeat(2,1fr)}}.grid-item{overflow:hidden}@media screen and (min-width:1024px){.grid-item{width:100%}}@media screen and (min-width:1024px){.grid-reverse .grid-item:first-child{grid-column:2;grid-row:1}.grid-reverse .grid-item:nth-child(2){grid-column:1;grid-row:1}}@media screen and (min-width:1024px){.grid-reverse .grid{margin-left:auto!important}}.gap-xl{gap:0 var(--space-3xs-9xl)}.flex{display:flex}.justify-between{justify-content:space-between}.align-center{align-items:center}.wrap{flex-wrap:wrap}@media screen and (min-width:1680px){body>.app-section{margin-top:var(--space-4xs-6xl)}}@media screen and (min-width:1680px){body>.app-section~.app-section{margin-top:0}}.border-title{width:100%;font-size:var(--step-3);margin-bottom:var(--space-l-xl-custom);padding:18px 0;position:relative}@media screen and (max-width:1680px){.border-title{margin-top:var(--space-xl-6xl)}}.border-title.active:after,.border-title.active:before{width:100%}.border-title:after,.border-title:before{content:"";position:absolute;width:0;height:1px;background-color:#0a7dff;left:0;transition:width cubic-bezier(.82, 0, .65, .93) .9s}.border-title:before{top:0}.border-title:after{bottom:0}.text-center{text-align:center}.text-right{text-align:right}.text-md{font-size:var(--step-2)}.text-xl{font-size:var(--step-7)}.font-neue{font-family:"Maison Neue",sans-serif}.font-book{font-family:"Maison Neue Book",sans-serif}b{font-weight:700}@media screen and (min-width:1024px){.max-content{width:-moz-max-content;width:max-content}}.relative{position:relative}.app-lang{position:absolute;text-align:right;width:100%;padding:30px var(--space-l-3xl) 0;top:0;z-index:1;box-sizing:border-box}@media screen and (max-width:1024px){.app-lang{padding-top:33px}}.app-lang a{color:#fff;font-size:var(--step-3)}@media screen and (max-width:1024px){.app-lang a{font-size:18px}}.app-header{padding-top:var(--space-l-xl);padding-bottom:100px}@media screen and (max-width:1024px){.app-header{padding-bottom:288px}}.app-header .logo{position:relative;z-index:1;max-width:100px;display:inline-block}@media screen and (min-width:1024px){.app-header .logo{max-width:160px}}.app-header .logo img{width:100%}.app-header .video-container-mobile{width:288px;height:288px;position:absolute;top:0;right:0}@media screen and (min-width:1024px){.app-header .video-container-mobile{display:none}}.app-header .video-container-mobile svg,.app-header .video-container-mobile video{position:absolute;width:100%}.app-header .video-container-mobile video{height:100%;-o-object-fit:cover;object-fit:cover}.app-banner{overflow:hidden;padding-bottom:169px}.app-banner .container{box-sizing:border-box;padding:0 var(--space-l-3xl)}.app-banner p{font-size:var(--step-10);position:relative}.app-banner p.first{padding-left:var(--space-custom-title-1)}.app-banner p.second{width:-moz-max-content;width:max-content;position:relative}@media screen and (min-width:1024px){.app-banner p.second:after{display:none}}.app-banner p.second:after{content:"";width:0;position:absolute;height:1px;left:calc(100% + 24px);background-color:#fff;top:45%;animation-name:line-second;animation-timing-function:cubic-bezier(0.82,0,0.65,0.93);animation-fill-mode:forwards;animation-duration:.8s}@media screen and (min-width:768px){.app-banner p.third{padding-left:var(--space-custom-title-3)}}@media screen and (max-width:768px){.app-banner .last-phrase{flex-direction:column-reverse;padding-left:var(--space-custom-title-3)}}.app-banner span{font-size:var(--step-3);transform:translateY(25%)}@media screen and (max-width:1024px){.app-banner span{width:100%;max-width:200px;font-size:18px}}@media screen and (max-width:768px){.app-banner span{font-size:16px}}.app-banner .video-container{height:0;padding-bottom:24.52%;width:24.52%;position:absolute;top:2.2vw;right:var(--space-l-3xl);display:none}@media screen and (min-width:1024px){.app-banner .video-container{display:block}}@media screen and (min-width:1680px){.app-banner .video-container{right:145px}}.app-banner .video-container:after,.app-banner .video-container:before{content:"";height:2px;background-color:#fff;position:absolute;bottom:29%;z-index:4}.app-banner .video-container:before{width:93%;left:-117%}@media screen and (min-width:1024px){.app-banner .video-container:before{animation-name:line-first;animation-timing-function:cubic-bezier(0.82,0,0.65,0.93);animation-fill-mode:forwards;animation-duration:.8s}}@media screen and (min-width:1680px){.app-banner .video-container:before{width:0}}.app-banner .video-container:after{width:100vw;left:80%}@media screen and (min-width:1024px){.app-banner .video-container:after{width:0;animation-name:line-second;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-delay:1s;animation-duration:1s}}.app-banner .video-container .mask{height:100%;position:absolute;width:100%;overflow:hidden}.app-banner .video-container .mask video{left:50%;transform:translateX(-50%) scale(1.009)}.app-banner .video-container .overlay{position:absolute;width:100%;height:100%;top:0;right:0;background:#0a7dff;z-index:3;transform:skewX(-35deg);animation-name:overlay;animation-fill-mode:forwards;animation-duration:.8s;animation-delay:.7s}.app-banner .video-container svg,.app-banner .video-container video{position:absolute;width:100%}.app-banner .video-container video{height:100%;-o-object-fit:cover;object-fit:cover}.app-show-more{padding:24px var(--space-l-3xl) 0;text-align:right}@media screen and (max-width:1024px){.app-show-more{display:none}}.app-show-more svg{animation-name:arrow;animation-duration:2s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.app-intro{padding:var(--space-2xl-5xl) 0;position:relative;overflow:hidden}@media screen and (min-width:768px){.app-intro{font-size:var(--step-4)}}.app-intro.active .line:before{animation-fill-mode:forwards;animation-timing-function:cubic-bezier(0.6,0,0.3,1);animation-duration:.75s;animation-name:line-second}.app-intro .line{position:relative}.app-intro .line:before{content:"";width:0;height:2px;background-color:#fff;position:absolute;z-index:-1;left:calc((-100vw + 100%)/ 2);top:.5ch}.app-intro .container{position:relative;z-index:1;padding:0 var(--space-2xl-5xl);box-sizing:border-box}.app-intro .container:after,.app-intro .container:before{content:"";width:calc(100% + 84px);position:absolute;height:100%;background-color:#0a7dff}.app-intro .container:before{content:"";width:78%;height:100%;position:absolute;left:50%;transform:translateX(-50%)}.app-intro .container:after{height:0}.app-section{margin-bottom:var(--space-4xs-6xl)}.app-section .image{height:0;padding-bottom:100%;margin-bottom:36px;position:relative}@media screen and (min-width:1024px){.app-section .image{padding-bottom:0;position:sticky;height:80vh;top:0}}@media screen and (min-width:1680px){.app-section .image{height:72vh;top:15vh}}.app-section .image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;-o-object-position:0 25%;object-position:0 25%}.app-section .text{width:100%;max-width:85%;margin:auto}@media screen and (min-width:1024px){.app-section .text{margin:initial}}@media screen and (min-width:1680px){.app-section .text{width:90%}}.app-section .content p:not(:last-of-type){margin:0 0 1.73rem}.app-section .content h3{margin-bottom:1rem}.app-section .signature{margin-top:32px}.app-section .signature.pp img{max-width:80px}.app-section .signature.fp img{max-width:60px}.app-section .signature img{flex-shrink:0}.app-section .signature p{font-size:12px}.app-footer .block{width:100%;height:0;padding-bottom:100%;background-repeat:no-repeat;background-size:cover;background-position:0 50%;position:relative;overflow:hidden}@media screen and (min-width:1024px){.app-footer .block{width:50%;height:100vh;padding:0}.app-footer .block:hover img{transform:scale(1.05)}}.app-footer .block *{color:#fff}.app-footer img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;left:0;top:0;-o-object-position:left center;object-position:left center;transition:all .5s cubic-bezier(.19, 1, .22, 1)}.app-footer .text{padding:var(--space-xl-6xl) 0;position:relative;z-index:2}.app-footer .title{margin-bottom:var(--space-m-xl)}.app-footer .subtitle{font-size:25px;margin-bottom:var(--space-l-xl)}.app-footer .link-block{display:inline-block;width:100%;height:100%}.app-footer .link{color:#fff;font-size:var(--step-4)}.app-footer .link svg{margin-left:18px}
\ No newline at end of file
diff --git a/index.html b/index.html
index 77241b2..5a97843 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Activity and ESG 2022 - Pomerleau</title>
+    <title>Rapport d’activités et ESG 2022 - Pomerleau</title>
     <link rel="stylesheet" href="app.min.css" >
     <script>
         window.addEventListener("DOMContentLoaded", (event) => {
@@ -26,6 +26,9 @@
 </head>
 <body>
 <header class="app-header bg-blue">
+    <div class="app-lang">
+        <a href="../en/index.html">EN</a>
+    </div>
     <div class="container">
         <div class="logo">
             <img src="assets/images/logo_pomerleau.svg" alt="Pomerleau" />
@@ -48,24 +51,22 @@
 <div class="app-banner bg-blue">
     <div class="container full relative">
         <div class="video-container">
-            <div class="mask">
-                <video loop muted autoplay playsinline>
-                    <source src="assets/video_banner_promerleau_.mp4" type="video/mp4">
-                </video>
-                <svg xmlns="http://www.w3.org/2000/svg" id="Calque_2" viewBox="0 0 888 890">
-                    <defs><style>.cls-1{fill:#0a7dff;}</style></defs>
-                    <g id="Calque_1-2">
-                        <polygon class="cls-1" points="379.36 890 888 890 888 175.17 379.36 890"/>
-                        <polygon class="cls-1" points="0 0 0 630.51 448.64 0 0 0"/>
-                    </g>
-                </svg>
-                <div class="overlay"></div>
-            </div>
+            <video loop muted autoplay playsinline>
+                <source src="assets/video_banner_promerleau_.mp4" type="video/mp4">
+            </video>
+            <svg xmlns="http://www.w3.org/2000/svg" id="Calque_2" viewBox="0 0 888 890">
+                <defs><style>.cls-1{fill:#0a7dff;}</style></defs>
+                <g id="Calque_1-2">
+                    <polygon class="cls-1" points="379.36 890 888 890 888 175.17 379.36 890"/>
+                    <polygon class="cls-1" points="0 0 0 630.51 448.64 0 0 0"/>
+                </g>
+            </svg>
+            <div class="overlay"></div>
         </div>
-        <p class="first">Building.</p>
-        <p class="second">Our</p>
+        <p class="first">Construire.</p>
+        <p class="second">Notre</p>
         <div class="last-phrase flex">
-            <span>Activity and ESG<br>report 2022</span>
+            <span>Rapport d’activités<br>et ESG 2022</span>
             <p class="third">perspective.</p>
         </div>
     </div>
@@ -78,16 +79,15 @@
 <div id="intro" class="app-intro bg-blue">
     <div class="container full">
         <div class="text relative">
-            <p><span class="italic">Building. Our perspective.</span> is Pomerleau’s first integrated report.
-                It covers our activities, our strategy and our performance in 2022.
-                It spotlights our commitments to environmental protection, social
-                action and good governance (ESG), and our progress over the
-                last year.</p>
+            <p><span class="italic">Construire. Notre perspective.</span> est le premier rapport intégré de Pomerleau. Il couvre nos activités, notre
+                stratégie et nos performances de 2022. Il met l’accent sur nos engagements en matière de protection de
+                l’environnement, d’engagement social et de saine gouvernance (ESG) et sur nos progrès de la dernière année.
+            </p>
             <br>
-            <p class="line">Its number one objective is to explain how, over time, we plan
-                to create value for our stakeholders—not only as a construction
-                services provider, but also as a responsible employer and an active
-                contributor to the growth of our industry and society as a whole.
+            <p class="line">Son objectif premier est d’expliquer comment, au fil du temps, nous envisageons de créer de la valeur pour
+                nos parties prenantes – non seulement en tant que fournisseur de services de construction, mais aussi en
+                tant qu’employeur responsable et contributeur actif à l’essor de notre industrie et de la société dans son
+                ensemble.
             </p>
         </div>
     </div>
@@ -103,44 +103,39 @@
         </div>
         <div class="text grid-item">
             <h2 id="border-title" class="border-title text-center font-neue">
-                Destined for a sustainable future
+                Promis à un avenir durable
             </h2>
             <div class="grid">
                 <div class="content">
-                    <p>We’re building momentum. The year 2022 was particularly decisive, a year of transformations and
-                        exponential growth.
-                    <p>Our sales figures grew from $3 billion in 2021 to $4.4
-                        billion in 2022. This allowed us to climb the ranks
-                        of Canada’s biggest construction companies in a
-                        $140-billion industry.</p>
-                    <p>With the acquisition of ITC Construction Group,
-                        we’re now generating as much revenue in the rest
-                        of Canada as in Quebec.</p>
-                    <p>For the second year in a row, we’ve reached historic
-                        sales and profit levels.</p>
-                    <p>Our performance is all the more gratifying given that
-                        we had to contend with skyrocketing inflation—in a
-                        context of agreements that were already signed or
-                        in the midst of being negotiated.
-                    <p>Our ability to anticipate market responses and our
-                        teams’ capacity for adaptation and innovation made
-                        all the difference.</p>
+                    <p>Nous poursuivons notre lancée. L’année 2022 a été particulièrement déterminante, marquée par des
+                        transformations et une croissance exponentielle.
+                    <p>Notre chiffre d’affaires est passé de 3 milliards $ en 2021 à 4,4 milliards $ en 2022. Cela nous fait
+                        grimper au rang des plus grandes entreprises de construction canadiennes dans une industrie de 140
+                        milliards $.</p>
+                    <p>Avec l’acquisition d’ITC Construction Group, nous générons aujourd’hui autant de revenus dans le
+                        reste du Canada qu’au Québec.</p>
+                    <p>Pour une deuxième année consécutive, nous avons atteint des niveaux de ventes et de profitabilité
+                        historiques.</p>
+                    <p>Notre performance est d’autant plus satisfaisante que nous avons dû composer avec une inflation
+                        faramineuse, et ce, dans le cadre d’ententes déjà signées et d’autres en cours de négociation.</p>
+                    <p>L’habileté à anticiper les réactions du marché et la capacité d’adaptation et d’innovation de nos
+                        équipes ont fait toute la différence.</p>
                 </div>
                 <div class="content">
-                    <h3 class="color-blue text-md font-neue">A new era of collaboration</h3>
+                    <h3 class="color-blue text-md font-neue">Une nouvelle ère de collaboration</h3>
                     <p>
-                        Last year was impactful for the entire construction industry. All of its players started truly working
-                        together to improve productivity and to more equitably share the financial risks inherent to projects.</p>
-                    <p>We’ve clearly entered a new and healthier era of
-                        collaboration, trust and transparency.</p>
+                        La dernière année a été marquante pour l’ensemble de l’industrie de la construction. Tous les
+                        joueurs ont commencé à réellement travailler ensemble pour améliorer leur productivité et partager
+                        plus équitablement les risques financiers inhérents aux projets.</p>
+                    <p>Nous sommes clairement entrés dans une ère plus saine de collaboration, de confiance et de
+                        transparence.</p>
 
-                    <p>This is a giant step forward. But we still have a ways
-                        to go before this genuine collaboration becomes
-                        the <span class="italic">M.O.</span> of our industry.</p>
+                    <p>Le pas est géant. Malgré tout, il reste encore un bout de chemin à faire avant que cette réelle
+                        collaboration soit ancrée dans le <span class="italic">modus operandi</span> de notre industrie.</p>
 
-                    <p>This progress has special meaning for us—it’s the
-                        reality we’ve been advocating for years: an industry that collaborates and innovates, while showing
-                        integrity and accountability.
+                    <p>Cette avancée revêt un caractère particulier pour nous. Nous y voyons la concrétisation de ce que
+                        nous prônons depuis plusieurs années : une industrie qui collabore, innove, fait preuve d’intégrité
+                        et est responsable.
 
                         <svg xmlns="http://www.w3.org/2000/svg" width="14.668" height="11" viewBox="0 0 14.668 11">
                             <g id="Groupe_22" data-name="Groupe 22" transform="translate(0 11)">
@@ -172,58 +167,50 @@
         </div>
         <div class="text grid grid-item">
             <div class="content">
-                <h3 class="color-blue text-md">Confident about the future</h3>
-                <p>Despite the looming recession, we’re well positioned
-                    to continue to move forward in a sustainable fashion,
-                    thanks to our past investments.</p>
+                <h3 class="color-blue text-md">Confiants en l’avenir</h3>
+                <p>Malgré la récession annoncée, nous sommes bien positionnés pour continuer à progresser de façon durable,
+                    et ce, grâce à nos investissements passés.</p>
 
-                <p>With an ample and diverse backlog, we’re now present where business opportunities abound.</p>
+                <p>Avec un carnet de commandes bien garni et diversifié, nous sommes aujourd’hui partout où les occasions
+                    d’affaires sont encore nombreuses.</p>
 
-                <p>Bolstered by a well-articulated environmental protection, social engagement and sound governance
-                    (ESG) strategy, we keep a close eye on how to
-                    improve the way we do things. The following pages
-                    clearly lay out the progress we’ve made in attaining
-                    our ESG goals. We hope to motivate other players to
-                    follow suit and take action for the wellbeing of the
-                    planet and the communities served by our projects.</p>
+                <p>Forts d’une stratégie de protection de l’environnement, d’engagement social et de saine gouvernance
+                    (ESG) bien articulée, nous veillons à améliorer nos façons de faire. Vous serez à même de le constater
+                    dans les pages qui suivent, en découvrant notre cheminement vers l’atteinte de nos objectifs ESG. Nous
+                    espérons aussi motiver d’autres joueurs à emboîter le pas et à poser des gestes pour le bien-être de la
+                    planète et des communautés desservies par nos projets.</p>
             </div>
             <div class="content">
-                <h3 class="color-blue text-md">The next chapter</h3>
-                <p>And so, it is with great pride that we’re passing the
-                    torch of the company’s leadership to Philippe Adam,
-                    who will become the President and Chief Executive
-                    Officer in August 2023.</p>
+                <h3 class="color-blue text-md">Le prochain chapitre</h3>
+                <p>C’est donc avec une fierté énorme que nous confions le gouvernail de l’entreprise à Philippe Adam.
+                    Philippe deviendra président-directeur général en août 2023.</p>
 
-                <p>The experience and leadership Philippe has shown
-                    since joining us in 2021 make him the obvious choice
-                    for successfully shepherding the next phase of
-                    growth and transformation. He’s guided by the same
-                    entrepreneurial values, authenticity, excellence,
-                    adaptability, innovation and love that drive us.</p>
+                <p>L’expérience et le leadership démontrés depuis son arrivée en 2021 en font la personne tout indiquée
+                    pour mener à bien la prochaine phase de croissance et de transformation. Il est guidé par les mêmes
+                    valeurs entrepreneuriales, d’authenticité, d’excellence, d’adaptabilité, d’innovation et d’amour qui
+                    nous animent.</p>
 
-                <p>As for us, we’ll gradually step back from the daily activities while continuing to be the majority shareholders and sitting on the Board of Directors.</p>
+                <p>Quant à nous, nous nous retirons progressivement des activités quotidiennes tout en demeurant les
+                    principaux actionnaires et en siégeant au conseil d’administration.</p>
 
-                <p>If the future is promising, it’s first and foremost thanks
-                    to our people, our partners, our Board members and
-                    our clients. We’d like to take this pivotal moment to
-                    warmly thank you for your commitment to joining us
-                    in shaping an innovative collective future, and contributing to building a greener and more open world.</p>
+                <p>Si l’avenir est prometteur, c’est d’abord et avant tout grâce à nos gens, à nos partenaires, aux membres
+                    du conseil d’administration et à nos clients. Nous profitons de ce moment charnière pour vous remercier
+                    chaleureusement de votre engagement à façonner avec nous un futur collectif innovant, et ainsi
+                    contribuer à bâtir un monde plus vert et plus ouvert.</p>
                 <div class="signature pp flex justify-between">
                     <img src="assets/images/Signature-PP_blanc_90.png" alt="Signature de Pierre Pomerleau" />
                     <p class="text-right">
-                        <b>Pierre Pomerleau</b>, Eng., MBA<br>
-                        Outgoing President,<br>
-                        Chief Executive Officer<br>
-                        and Shareholder
+                        <b>Pierre Pomerleau</b>, Ing., MBA<br>
+                        Président-directeur général<br>
+                        sortant et actionnaire
                     </p>
                 </div>
                 <div class="signature fp flex justify-between">
                     <img src="assets/images/Signature_Francis-Pomerleau_Blanc.png" alt="Signature de Francis Pomerleau" />
                     <p class="text-right">
                         <b>Francis Pomerleau</b>, P.Eng., MBA<br>
-                        Outgoing Executive Chief,<br>
-                        National Strategies,<br>
-                        and Shareholder
+                        Chef exécutif, Stratégies nationales,<br>
+                        sortant et actionnaire
                     </p>
                 </div>
             </div>
@@ -235,9 +222,9 @@
         <div class="leftblock block">
             <a class="link-block" href="./rapport-activites/index.html">
                 <div class="text text-center">
-                    <h2 class="title text-xl">Building.</h2>
-                    <p class="subtitle">Activity report</p>
-                    <div class="link">Enter
+                    <h2 class="title text-xl">Construire.</h2>
+                    <p class="subtitle">Rapport d'activités</p>
+                    <div class="link">Entrez
                         <svg xmlns="http://www.w3.org/2000/svg" width="24.817" height="21.587" viewBox="0 0 24.817 21.587">
                             <g id="Groupe_32" data-name="Groupe 32" transform="translate(0 21.586)">
                                 <g id="Groupe_31" data-name="Groupe 31" transform="translate(13.751 -21.587)">
@@ -257,9 +244,9 @@
         <div class="rightblock block text-center">
             <a class="link-block" href="./rapport-esg/index.html">
                 <div class="text text-center">
-                    <h2 class="title text-xl">Our perspective.</h2>
-                    <p class="subtitle">ESG report</p>
-                    <div class="link">Enter
+                    <h2 class="title text-xl">Notre perspective.</h2>
+                    <p class="subtitle">Rapport ESG</p>
+                    <div class="link">Entrez
                         <svg xmlns="http://www.w3.org/2000/svg" width="24.817" height="21.587" viewBox="0 0 24.817 21.587">
                             <g id="Groupe_32" data-name="Groupe 32" transform="translate(0 21.586)">
                                 <g id="Groupe_31" data-name="Groupe 31" transform="translate(13.751 -21.587)">
diff --git a/index_en.html b/index_en.html
index 77241b2..1b4ab7e 100644
--- a/index_en.html
+++ b/index_en.html
@@ -26,6 +26,9 @@
 </head>
 <body>
 <header class="app-header bg-blue">
+    <div class="app-lang">
+        <a href="../fr/index.html">FR</a>
+    </div>
     <div class="container">
         <div class="logo">
             <img src="assets/images/logo_pomerleau.svg" alt="Pomerleau" />
diff --git a/index_fr.html b/index_fr.html
index 77241b2..5a97843 100644
--- a/index_fr.html
+++ b/index_fr.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Activity and ESG 2022 - Pomerleau</title>
+    <title>Rapport d’activités et ESG 2022 - Pomerleau</title>
     <link rel="stylesheet" href="app.min.css" >
     <script>
         window.addEventListener("DOMContentLoaded", (event) => {
@@ -26,6 +26,9 @@
 </head>
 <body>
 <header class="app-header bg-blue">
+    <div class="app-lang">
+        <a href="../en/index.html">EN</a>
+    </div>
     <div class="container">
         <div class="logo">
             <img src="assets/images/logo_pomerleau.svg" alt="Pomerleau" />
@@ -48,24 +51,22 @@
 <div class="app-banner bg-blue">
     <div class="container full relative">
         <div class="video-container">
-            <div class="mask">
-                <video loop muted autoplay playsinline>
-                    <source src="assets/video_banner_promerleau_.mp4" type="video/mp4">
-                </video>
-                <svg xmlns="http://www.w3.org/2000/svg" id="Calque_2" viewBox="0 0 888 890">
-                    <defs><style>.cls-1{fill:#0a7dff;}</style></defs>
-                    <g id="Calque_1-2">
-                        <polygon class="cls-1" points="379.36 890 888 890 888 175.17 379.36 890"/>
-                        <polygon class="cls-1" points="0 0 0 630.51 448.64 0 0 0"/>
-                    </g>
-                </svg>
-                <div class="overlay"></div>
-            </div>
+            <video loop muted autoplay playsinline>
+                <source src="assets/video_banner_promerleau_.mp4" type="video/mp4">
+            </video>
+            <svg xmlns="http://www.w3.org/2000/svg" id="Calque_2" viewBox="0 0 888 890">
+                <defs><style>.cls-1{fill:#0a7dff;}</style></defs>
+                <g id="Calque_1-2">
+                    <polygon class="cls-1" points="379.36 890 888 890 888 175.17 379.36 890"/>
+                    <polygon class="cls-1" points="0 0 0 630.51 448.64 0 0 0"/>
+                </g>
+            </svg>
+            <div class="overlay"></div>
         </div>
-        <p class="first">Building.</p>
-        <p class="second">Our</p>
+        <p class="first">Construire.</p>
+        <p class="second">Notre</p>
         <div class="last-phrase flex">
-            <span>Activity and ESG<br>report 2022</span>
+            <span>Rapport d’activités<br>et ESG 2022</span>
             <p class="third">perspective.</p>
         </div>
     </div>
@@ -78,16 +79,15 @@
 <div id="intro" class="app-intro bg-blue">
     <div class="container full">
         <div class="text relative">
-            <p><span class="italic">Building. Our perspective.</span> is Pomerleau’s first integrated report.
-                It covers our activities, our strategy and our performance in 2022.
-                It spotlights our commitments to environmental protection, social
-                action and good governance (ESG), and our progress over the
-                last year.</p>
+            <p><span class="italic">Construire. Notre perspective.</span> est le premier rapport intégré de Pomerleau. Il couvre nos activités, notre
+                stratégie et nos performances de 2022. Il met l’accent sur nos engagements en matière de protection de
+                l’environnement, d’engagement social et de saine gouvernance (ESG) et sur nos progrès de la dernière année.
+            </p>
             <br>
-            <p class="line">Its number one objective is to explain how, over time, we plan
-                to create value for our stakeholders—not only as a construction
-                services provider, but also as a responsible employer and an active
-                contributor to the growth of our industry and society as a whole.
+            <p class="line">Son objectif premier est d’expliquer comment, au fil du temps, nous envisageons de créer de la valeur pour
+                nos parties prenantes – non seulement en tant que fournisseur de services de construction, mais aussi en
+                tant qu’employeur responsable et contributeur actif à l’essor de notre industrie et de la société dans son
+                ensemble.
             </p>
         </div>
     </div>
@@ -103,44 +103,39 @@
         </div>
         <div class="text grid-item">
             <h2 id="border-title" class="border-title text-center font-neue">
-                Destined for a sustainable future
+                Promis à un avenir durable
             </h2>
             <div class="grid">
                 <div class="content">
-                    <p>We’re building momentum. The year 2022 was particularly decisive, a year of transformations and
-                        exponential growth.
-                    <p>Our sales figures grew from $3 billion in 2021 to $4.4
-                        billion in 2022. This allowed us to climb the ranks
-                        of Canada’s biggest construction companies in a
-                        $140-billion industry.</p>
-                    <p>With the acquisition of ITC Construction Group,
-                        we’re now generating as much revenue in the rest
-                        of Canada as in Quebec.</p>
-                    <p>For the second year in a row, we’ve reached historic
-                        sales and profit levels.</p>
-                    <p>Our performance is all the more gratifying given that
-                        we had to contend with skyrocketing inflation—in a
-                        context of agreements that were already signed or
-                        in the midst of being negotiated.
-                    <p>Our ability to anticipate market responses and our
-                        teams’ capacity for adaptation and innovation made
-                        all the difference.</p>
+                    <p>Nous poursuivons notre lancée. L’année 2022 a été particulièrement déterminante, marquée par des
+                        transformations et une croissance exponentielle.
+                    <p>Notre chiffre d’affaires est passé de 3 milliards $ en 2021 à 4,4 milliards $ en 2022. Cela nous fait
+                        grimper au rang des plus grandes entreprises de construction canadiennes dans une industrie de 140
+                        milliards $.</p>
+                    <p>Avec l’acquisition d’ITC Construction Group, nous générons aujourd’hui autant de revenus dans le
+                        reste du Canada qu’au Québec.</p>
+                    <p>Pour une deuxième année consécutive, nous avons atteint des niveaux de ventes et de profitabilité
+                        historiques.</p>
+                    <p>Notre performance est d’autant plus satisfaisante que nous avons dû composer avec une inflation
+                        faramineuse, et ce, dans le cadre d’ententes déjà signées et d’autres en cours de négociation.</p>
+                    <p>L’habileté à anticiper les réactions du marché et la capacité d’adaptation et d’innovation de nos
+                        équipes ont fait toute la différence.</p>
                 </div>
                 <div class="content">
-                    <h3 class="color-blue text-md font-neue">A new era of collaboration</h3>
+                    <h3 class="color-blue text-md font-neue">Une nouvelle ère de collaboration</h3>
                     <p>
-                        Last year was impactful for the entire construction industry. All of its players started truly working
-                        together to improve productivity and to more equitably share the financial risks inherent to projects.</p>
-                    <p>We’ve clearly entered a new and healthier era of
-                        collaboration, trust and transparency.</p>
+                        La dernière année a été marquante pour l’ensemble de l’industrie de la construction. Tous les
+                        joueurs ont commencé à réellement travailler ensemble pour améliorer leur productivité et partager
+                        plus équitablement les risques financiers inhérents aux projets.</p>
+                    <p>Nous sommes clairement entrés dans une ère plus saine de collaboration, de confiance et de
+                        transparence.</p>
 
-                    <p>This is a giant step forward. But we still have a ways
-                        to go before this genuine collaboration becomes
-                        the <span class="italic">M.O.</span> of our industry.</p>
+                    <p>Le pas est géant. Malgré tout, il reste encore un bout de chemin à faire avant que cette réelle
+                        collaboration soit ancrée dans le <span class="italic">modus operandi</span> de notre industrie.</p>
 
-                    <p>This progress has special meaning for us—it’s the
-                        reality we’ve been advocating for years: an industry that collaborates and innovates, while showing
-                        integrity and accountability.
+                    <p>Cette avancée revêt un caractère particulier pour nous. Nous y voyons la concrétisation de ce que
+                        nous prônons depuis plusieurs années : une industrie qui collabore, innove, fait preuve d’intégrité
+                        et est responsable.
 
                         <svg xmlns="http://www.w3.org/2000/svg" width="14.668" height="11" viewBox="0 0 14.668 11">
                             <g id="Groupe_22" data-name="Groupe 22" transform="translate(0 11)">
@@ -172,58 +167,50 @@
         </div>
         <div class="text grid grid-item">
             <div class="content">
-                <h3 class="color-blue text-md">Confident about the future</h3>
-                <p>Despite the looming recession, we’re well positioned
-                    to continue to move forward in a sustainable fashion,
-                    thanks to our past investments.</p>
+                <h3 class="color-blue text-md">Confiants en l’avenir</h3>
+                <p>Malgré la récession annoncée, nous sommes bien positionnés pour continuer à progresser de façon durable,
+                    et ce, grâce à nos investissements passés.</p>
 
-                <p>With an ample and diverse backlog, we’re now present where business opportunities abound.</p>
+                <p>Avec un carnet de commandes bien garni et diversifié, nous sommes aujourd’hui partout où les occasions
+                    d’affaires sont encore nombreuses.</p>
 
-                <p>Bolstered by a well-articulated environmental protection, social engagement and sound governance
-                    (ESG) strategy, we keep a close eye on how to
-                    improve the way we do things. The following pages
-                    clearly lay out the progress we’ve made in attaining
-                    our ESG goals. We hope to motivate other players to
-                    follow suit and take action for the wellbeing of the
-                    planet and the communities served by our projects.</p>
+                <p>Forts d’une stratégie de protection de l’environnement, d’engagement social et de saine gouvernance
+                    (ESG) bien articulée, nous veillons à améliorer nos façons de faire. Vous serez à même de le constater
+                    dans les pages qui suivent, en découvrant notre cheminement vers l’atteinte de nos objectifs ESG. Nous
+                    espérons aussi motiver d’autres joueurs à emboîter le pas et à poser des gestes pour le bien-être de la
+                    planète et des communautés desservies par nos projets.</p>
             </div>
             <div class="content">
-                <h3 class="color-blue text-md">The next chapter</h3>
-                <p>And so, it is with great pride that we’re passing the
-                    torch of the company’s leadership to Philippe Adam,
-                    who will become the President and Chief Executive
-                    Officer in August 2023.</p>
+                <h3 class="color-blue text-md">Le prochain chapitre</h3>
+                <p>C’est donc avec une fierté énorme que nous confions le gouvernail de l’entreprise à Philippe Adam.
+                    Philippe deviendra président-directeur général en août 2023.</p>
 
-                <p>The experience and leadership Philippe has shown
-                    since joining us in 2021 make him the obvious choice
-                    for successfully shepherding the next phase of
-                    growth and transformation. He’s guided by the same
-                    entrepreneurial values, authenticity, excellence,
-                    adaptability, innovation and love that drive us.</p>
+                <p>L’expérience et le leadership démontrés depuis son arrivée en 2021 en font la personne tout indiquée
+                    pour mener à bien la prochaine phase de croissance et de transformation. Il est guidé par les mêmes
+                    valeurs entrepreneuriales, d’authenticité, d’excellence, d’adaptabilité, d’innovation et d’amour qui
+                    nous animent.</p>
 
-                <p>As for us, we’ll gradually step back from the daily activities while continuing to be the majority shareholders and sitting on the Board of Directors.</p>
+                <p>Quant à nous, nous nous retirons progressivement des activités quotidiennes tout en demeurant les
+                    principaux actionnaires et en siégeant au conseil d’administration.</p>
 
-                <p>If the future is promising, it’s first and foremost thanks
-                    to our people, our partners, our Board members and
-                    our clients. We’d like to take this pivotal moment to
-                    warmly thank you for your commitment to joining us
-                    in shaping an innovative collective future, and contributing to building a greener and more open world.</p>
+                <p>Si l’avenir est prometteur, c’est d’abord et avant tout grâce à nos gens, à nos partenaires, aux membres
+                    du conseil d’administration et à nos clients. Nous profitons de ce moment charnière pour vous remercier
+                    chaleureusement de votre engagement à façonner avec nous un futur collectif innovant, et ainsi
+                    contribuer à bâtir un monde plus vert et plus ouvert.</p>
                 <div class="signature pp flex justify-between">
                     <img src="assets/images/Signature-PP_blanc_90.png" alt="Signature de Pierre Pomerleau" />
                     <p class="text-right">
-                        <b>Pierre Pomerleau</b>, Eng., MBA<br>
-                        Outgoing President,<br>
-                        Chief Executive Officer<br>
-                        and Shareholder
+                        <b>Pierre Pomerleau</b>, Ing., MBA<br>
+                        Président-directeur général<br>
+                        sortant et actionnaire
                     </p>
                 </div>
                 <div class="signature fp flex justify-between">
                     <img src="assets/images/Signature_Francis-Pomerleau_Blanc.png" alt="Signature de Francis Pomerleau" />
                     <p class="text-right">
                         <b>Francis Pomerleau</b>, P.Eng., MBA<br>
-                        Outgoing Executive Chief,<br>
-                        National Strategies,<br>
-                        and Shareholder
+                        Chef exécutif, Stratégies nationales,<br>
+                        sortant et actionnaire
                     </p>
                 </div>
             </div>
@@ -235,9 +222,9 @@
         <div class="leftblock block">
             <a class="link-block" href="./rapport-activites/index.html">
                 <div class="text text-center">
-                    <h2 class="title text-xl">Building.</h2>
-                    <p class="subtitle">Activity report</p>
-                    <div class="link">Enter
+                    <h2 class="title text-xl">Construire.</h2>
+                    <p class="subtitle">Rapport d'activités</p>
+                    <div class="link">Entrez
                         <svg xmlns="http://www.w3.org/2000/svg" width="24.817" height="21.587" viewBox="0 0 24.817 21.587">
                             <g id="Groupe_32" data-name="Groupe 32" transform="translate(0 21.586)">
                                 <g id="Groupe_31" data-name="Groupe 31" transform="translate(13.751 -21.587)">
@@ -257,9 +244,9 @@
         <div class="rightblock block text-center">
             <a class="link-block" href="./rapport-esg/index.html">
                 <div class="text text-center">
-                    <h2 class="title text-xl">Our perspective.</h2>
-                    <p class="subtitle">ESG report</p>
-                    <div class="link">Enter
+                    <h2 class="title text-xl">Notre perspective.</h2>
+                    <p class="subtitle">Rapport ESG</p>
+                    <div class="link">Entrez
                         <svg xmlns="http://www.w3.org/2000/svg" width="24.817" height="21.587" viewBox="0 0 24.817 21.587">
                             <g id="Groupe_32" data-name="Groupe 32" transform="translate(0 21.586)">
                                 <g id="Groupe_31" data-name="Groupe 31" transform="translate(13.751 -21.587)">
diff --git a/sass/app.sass b/sass/app.sass
index b0eb87c..abcde21 100644
--- a/sass/app.sass
+++ b/sass/app.sass
@@ -158,6 +158,22 @@ b
 
 
 .app
+  &-lang
+    position: absolute
+    text-align: right
+    width: 100%
+    padding: 30px var(--space-l-3xl) 0
+    top: 0
+    z-index: 1
+    box-sizing: border-box
+    +screen-size(small-desktop, max)
+      padding-top: 33px
+    a
+      color: $w
+      font-size: var(--step-3)
+      +screen-size(small-desktop, max)
+        font-size: 18px
+
   &-header
     padding-top: var(--space-l-xl)
     padding-bottom: 100px
-- 
2.39.5