CINXE.COM
Editorial New | Locomotive
<!doctype html> <html class="has-no-js is-first-loading is-loading" lang="fr" data-template="work-single" data-theme="default"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <base href="https://locomotive.ca/"> <title>Editorial New | Locomotive</title> <link rel="canonical" href="https://locomotive.ca/fr/projets/editorial-new"> <meta property="og:url" content="https://locomotive.ca/fr/projets/editorial-new"> <meta property="og:title" content="Editorial New | Locomotive"> <meta property="twitter:title" content="Editorial New | Locomotive"> <meta property="og:site_name" content="Locomotive"> <meta name="description" content="Nous sommes Locomotive®. Une agence indépendante avec un large éventail de capacités, de grandes idées, un coeur gros comme ça et une réputation mondiale."> <meta property="og:description" content="Nous sommes Locomotive®. Une agence indépendante avec un large éventail de capacités, de grandes idées, un coeur gros comme ça et une réputation mondiale."> <meta property="twitter:description" content="Nous sommes Locomotive®. Une agence indépendante avec un large éventail de capacités, de grandes idées, un coeur gros comme ça et une réputation mondiale."> <meta property="og:image" content="https://locomotive.ca/uploads/metadata/Open_Graph_Loco_%281%29.png"> <meta property="twitter:image" content="https://locomotive.ca/uploads/metadata/Open_Graph_Loco_%281%29.png"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@LocomotiveMTL"> <!-- Viewport --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="HandheldFriendly" content="true"> <!-- Appearance --> <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png"> <link rel="manifest" href="site.webmanifest"> <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#000000"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff"> <!-- Styles --> <style media="all"> /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html{box-sizing:border-box}template,[hidden]{display:none}*,:before,:after{box-sizing:inherit}address{font-style:inherit}dfn,cite,em,i{font-style:italic}b,strong{font-weight:700}a{text-decoration:none}a svg{pointer-events:none}ul,ol{margin:0;padding:0;list-style:none}p,figure{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:initial;margin:0}a,area,button,input,label,select,textarea,[tabindex]{touch-action:manipulation}[hreflang]>abbr[title]{text-decoration:none}table{border-spacing:0;border-collapse:collapse}hr{display:block;margin:1em 0;padding:0;height:1px;border:0;border-top:1px solid #CCCCCC}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio:not([controls]){display:none;height:0}img,svg{max-width:100%;height:auto}img[width],img[height],svg[width],svg[height]{max-width:none}img{font-style:italic}svg{fill:currentColor}input,select,textarea{display:block;margin:0;padding:0;width:100%;outline:0;border:0;border-radius:0;background:none transparent;color:inherit;font:inherit;line-height:normal;-webkit-appearance:none;-moz-appearance:none;appearance:none}select{text-transform:none}select::-ms-expand{display:none}select::-ms-value{background:none;color:inherit}textarea{overflow:auto;resize:vertical}button,.c-button{display:inline-block;overflow:visible;margin:0;padding:0;outline:0;border:0;background:none transparent;color:inherit;vertical-align:middle;text-align:center;text-decoration:none;text-transform:none;font:inherit;line-height:normal;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button:focus,button:hover,.c-button:focus,.c-button:hover{text-decoration:none}:root{--spacing-micro-mobile: 8;--spacing-micro: 14;--spacing-tiny-mobile: 20;--spacing-tiny: 20;--spacing-small-mobile: 30;--spacing-small: 30;--spacing-medium-mobile: 40;--spacing-medium: 40;--spacing-large-mobile: 52;--spacing-large: 80;--spacing-big-mobile: 80;--spacing-big: 150;--spacing-huge-mobile: 100;--spacing-huge: 200;--spacing-enormous-mobile: 140;--spacing-enormous: 250;--color: #000;--color-bg: #fff;--border: solid var(--border-size);--grid-columns: 12;--grid-gutter: 20px;--grid-margin: 2.66667rem;--grid-color: var(--color);--header-height: 4rem;--head-padding-vh: 0.25;--about-head-content-offset-vh: 0.15;--menu-color: #fff;--menu-color-bg: #312DFB;--font-size: 15px;--font-size-medium: 1.73333rem;--font-size-huge: 7.63889vw;--font-size-h1: 4.66667rem;--font-size-h2: 1.73333rem;--font-size-h3: 1.46667rem;--font-size-h4: 1.33333rem;--font-size-h5: 1.2rem;--font-size-h6: 1.06667rem}@media (min-width: 1025px){:root{--border-size: 2px}}@media (max-width: 1024px){:root{--border-size: 1px}}@media (max-width: 1024px){:root{--grid-columns: 8;--grid-margin: 1.33333rem}}@media (max-width: 699px){:root{--grid-columns: 4;--grid-gutter: calc(20px/2)}}@media (max-width: 1024px){:root{--font-size-medium: 1.6rem;--font-size-h1: 3.33333rem}}@media (max-width: 699px){:root{--font-size-h1: 2.4rem;--font-size-medium: 18px;--about-head-content-offset-vh: 0.20;--font-size-huge: 40px}}@media (max-width: 699px){:root{--font-size: 15px}}@media (min-width: 700px) and (max-width: 1024px){:root{--font-size: 15px}}@media (min-width: 1025px) and (max-width: 1199px){:root{--font-size: 15px}}@media (min-width: 1200px) and (max-width: 1599px){:root{--font-size: 15px}}@media (min-width: 1600px) and (max-width: 1999px){:root{--font-size: 17px}}@media (min-width: 2000px) and (max-width: 2399px){:root{--font-size: 19px}}@media (min-width: 2400px){:root{--font-size: 21px}}html{min-height:100%;line-height:1.3;font-family:ff("primary");color:var(--color);background-color:var(--color-bg);line-height:1.3;font-size:var(--font-size);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s cubic-bezier(0.215, 0.61, 0.355, 1);width:100%}html.is-loading{cursor:wait}html.has-scroll-smooth{overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0}html.has-scroll-dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html[data-theme="dark"]{--color-bg: #000;--color: #fff;--menu-color: #000;--menu-color-bg: #DA382E}html[data-theme="primary"]{--color-bg: #DA382E;--menu-color: #fff;--menu-color-bg: #000}html[data-theme="secondary"]{--color-bg: #312DFB;--color: #fff;--menu-color: #000;--menu-color-bg: #fff}body{width:100%}.is-first-loading body{overflow:hidden}::-moz-selection{background-color:var(--color);color:var(--color-bg);text-shadow:none}::selection{background-color:var(--color);color:var(--color-bg);text-shadow:none}a{color:currentColor}a:focus,a:hover{color:currentColor}.focus-visible:not(input):not(textarea){outline-color:var(--color);outline-style:auto;outline-width:10px;outline-offset:5px}.grecaptcha-badge{visibility:hidden}.c-preloader{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000;color:#fff;z-index:9999;transition:opacity .9s cubic-bezier(0.215, 0.61, 0.355, 1)}.c-preloader svg{display:block;width:calc(min(250px, 70vw));height:10vh}html:not(.is-first-loading) .c-preloader{opacity:0;pointer-events:none}.c-preloader_outer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;align-items:center;justify-content:center}.c-preloader_logo{display:block;opacity:1;animation:preloaderAppear .9s cubic-bezier(0.215, 0.61, 0.355, 1) .3s;animation-fill-mode:backwards}@keyframes preloaderAppear{0%{opacity:0;transform:scale(0.9) translate3d(0, 0, 0)}100%{opacity:1;transform:scale(1) translate3d(0, 0, 0)}}@keyframes preloaderDisappear{0%{opacity:1;transform:scale(1) translate3d(0, 0, 0)}100%{opacity:0;transform:scale(1.1) translate3d(0, 0, 0)}} </style> <link id="main-css" rel="stylesheet" href="https://locomotive.ca/assets/styles/main.css?v=1723754399977" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true"> <script async defer src="https://www.google.com/recaptcha/api.js?render=explicit"></script> <!-- Google tag (gtag.js) --> <script type="text/plain" data-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=G-WYYJ9ZP43V"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-WYYJ9ZP43V'); gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied' }); </script> </head> <body data-module-load data-load="wrapper" data-module-hovers data-module-cookie-consent data-cookie-consent-config="{"language":{"autoDetect":"document","default":"fr","translations":{"fr":{"consentModal":{"title":"Nous utilisons des cookies !","description":"Ce site web utilise des témoins (cookies) essentiels pour garantir son bon fonctionnement, ainsi que des cookies de suivi pour comprendre comment vous interagissez avec lui. Ces derniers ne seront configurés qu'après avoir obtenu votre consentement. {{revisionMessage}} <button class=\"cc__link\" data-cookie-consent=\"show-preferences\">Préférences</button>","revisionMessage":"<br><br>Notre <a href=\"fr/politique-de-confidentialite?hide-cookie-consent\" target=\"_self\" rel=\"\">Politique de confidentialité</a> a changé depuis votre dernière visite.","footer":"<a href=\"fr/politique-de-confidentialite?hide-cookie-consent\" target=\"_self\" rel=\"\">politique de confidentialité</a>","acceptAllBtn":"Tout accepter","acceptNecessaryBtn":"Accepter le nécessaire"},"preferencesModal":{"title":"Préférences de témoins","acceptAllBtn":"Tout accepter","acceptNecessaryBtn":"Accepter le nécessaire","savePreferencesBtn":"Enregistrer mes préférences","closeIconLabel":"Accepter le nécessaire","sections":[{"description":"Nous utilisons certains témoins (cookies) pour personnaliser nos contenus et améliorer votre expérience numérique. D'autres sont indispensables au bon fonctionnement et à la sécurité de notre site Web et ne peuvent pas être désactivés.<br><br>Vous pouvez activer ou désactiver votre autorisation à recueillir vos données de navigation en tout temps. Si vous désactivez certains témoins, votre expérience de navigation peut être affectée.<br><br>Pour en savoir plus, consultez notre <a href=\"fr/politique-de-confidentialite?hide-cookie-consent\" target=\"_self\" rel=\"\">politique de confidentialité</a>."},{"title":"Témoins strictement nécessaires<span class=\"pm__badge\">Requis</span>","description":"Ces cookies sont stockés pour garantir le bon fonctionnement de notre site Web. Ils ne peuvent pas être désactivés.","linkedCategory":"necessary","cookieTable":{"headers":{"name":"Nom","service":"Service","duration":"Durée","purpose":"Usage"},"body":[{"name":"PHPSESSID","service":"Locomotive","duration":"Session","purpose":"Utilisé pour partager des données de fonctionnalités à travers les pages du site Web comme le suivi de la langue actuelle."},{"name":"locomotive.quickpreload","service":"Locomotive","duration":"Session","purpose":"Utilisé pour raccourcir la durée de l'écran de préchargement lors de la navigation sur les pages suivantes."},{"name":"cc_cookie","service":"Locomotive","duration":"6 mois","purpose":"Utilisé pour stocker vos préférences de consentement de témoins."},{"name":"_grecaptcha","service":"Google reCAPTCHA","duration":"6 mois","purpose":"Utilisé pour stocker l'évaluation si la visite, l'interaction, ou la soumission du formulaire, est légitime ou malveillante."},{"name":"__cf_bm","service":"Cloudflare","duration":"30 minutes","purpose":"Utilisé pour stocker l'évaluation si la visite est légitime ou malveillante."}]}},{"title":"Témoins de performance","description":"Ces cookies sont utilisés pour analyser la navigation sur le site afin d'améliorer son bon fonctionnement.","linkedCategory":"analytics","cookieTable":{"headers":{"name":"Nom","service":"Service","duration":"Durée","purpose":"Usage"},"body":[{"name":"_ga","service":"Google Analytics","duration":"2 ans","purpose":"Utilisé pour distinguer les utilisateurs uniques et compter les pages vues."},{"name":"_gat","service":"Google Analytics","duration":"1 minute","purpose":"Utilisé pour limiter la fréquence de collecte des données."},{"name":"_gid","service":"Google Analytics","duration":"1 jour","purpose":"Utilisé pour distinguer les utilisateurs uniques et compter les pages vues."}]}}]}}}},"guiOptions":{"consentModal":{"layout":"box inline","position":"bottom right","equalWeightButtons":false},"preferencesModal":{"equalWeightButtons":false}},"revision":1,"categories":{"necessary":{"enabled":true,"readOnly":true},"analytics":{"autoClear":{"cookies":[{"name":"_ga"},{"name":"_gat"},{"name":"_gid"},{"name":"/^_gat?_/"}]}}}}"> <script> window.preloaderEnterPromise = new Promise(resolve => { setTimeout(resolve, 1200); }) window.preloaderPromise = new Promise(resolve => { window.preloaderPromiseResolve = resolve; }) </script> <div class="c-preloader" aria-hidden="true" id="preloader"> <div class="c-preloader_outer"> <div class="c-preloader_inner"> <div class="c-preloader_head" id="preloaderHead" style="display: none;"> </div> <div class="c-preloader_content" id="preloaderContent" style="display: none;"> <div> Digital<br> Digital-First<br> Digital-First Design<br> Digital-First Design<br> Digital-First Agency<br> Digital-First Agency<br> </div> <div> Basée<br> Basée à<br> Basée à Montréal<br> Basée à Montréal<br> Basée à Montréal, Canada<br> Basée à Montréal, Canada<br> Basée à Montréal, Canada<br> </div> </div> <div class="c-preloader_logo"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 246.5033 33.28001" id="preloaderLogo"> <g> <path d="M0,.64v32H32V.64Zm30,30H2v-28H30Z" transform="translate(0 0.00001)"/> <polygon points="20.12 19.4 16.12 19.4 16.12 12.32 14.24 12.32 14.24 20.96 20.12 20.96 20.12 19.4"/> </g> <path d="M52.41557,8.24h-6.4l2.28-2.28c2.32-2.32,4-3.2,6.12-3.2s3.8.88,6.12,3.2l2.28,2.28h-6.4v1.6h7.6v7.6h1.6v-6.4l6,6,1.2-1.2-6-6h6.4V8.24h-7.6V.64h-1.6v6.4l-2.28-2.28c-2.6-2.6-4.64-3.6-7.32-3.6s-4.72,1-7.32,3.6l-2.28,2.28V.64h-1.6v7.6h-7.6v1.6h6.4l-6,6,1.2,1.2,6-6v6.4h1.6V9.84h7.6Z" transform="translate(0 0.00001)"/> <path d="M86.13717.64h-10.52v.84c3.84,0,4.16.52,4.16,2.96v24.4c0,2.44-.32,2.96-4.16,2.96v.84h18.96l.12-.52,1.92-9.48-.84-.16c-1.64,7.96-2.36,8.8-4.96,8.8h-6.84c-1.64,0-2-.4-2-2.36V4.44c0-2.44.32-2.96,4.16-2.96Z" transform="translate(0 0.00001)"/> <path d="M105.56207,10.96c-4.72,0-7.4002,5.08-7.4002,11.24,0,6.28,3.04022,11.08,7.4002,11.08,4.68,0,7.36-5.08,7.36-11.24C112.92206,15.76,109.88208,10.96,105.56207,10.96Zm0,21c-3.2,0-5.2-4.36-5.2-9.76,0-5.36,1.72-9.92,5.2-9.92,3.16,0,5.2,4.36,5.2,9.76C110.76208,27.4,109.00208,31.96,105.56207,31.96Z" transform="translate(0 0.00001)"/> <path d="M121.77708,33.28c3.6,0,5.16-3.32,6.08-10.56l-.84-.16c-1.04,6.68-2.28,8.76-4.6,8.76-3.04,0-4.8-4.4-4.8-9.64,0-4.64,1.32-9.4,4.8-9.4a2.04221,2.04221,0,0,1,2.24,2.24c0,.84-.28,1.64-.28,2.2a1.25663,1.25663,0,0,0,1.28,1.36c1,0,1.56-.8,1.56-2.24a4.66084,4.66084,0,0,0-4.43418-4.877q-.18279-.00869-.36582-.003c-4.52,0-6.96,5.04-6.96,11.44C115.45707,28.68,117.77707,33.28,121.77708,33.28Z" transform="translate(0 0.00001)"/> <path d="M136.9881,10.96c-4.72,0-7.4,5.08-7.4,11.24,0,6.28,3.04,11.08,7.4,11.08,4.68,0,7.36-5.08,7.36-11.24C144.34808,15.76,141.30811,10.96,136.9881,10.96Zm0,21c-3.2,0-5.2-4.36-5.2-9.76,0-5.36,1.72-9.92,5.2-9.92,3.16,0,5.2,4.36,5.2,9.76C142.18811,27.4,140.4281,31.96,136.9881,31.96Z" transform="translate(0 0.00001)"/> <path d="M146.17506,32.64h7.08V31.8c-2.2,0-2.48-.48-2.48-2.96V16.04c1.44-1.88,2.88-3.2,4.64-3.2,1.64,0,2.56,1.12,2.56,3.52V28.84c0,2.48-.28,2.96-2.48,2.96v.84h6.96V31.8c-2.2,0-2.48-.48-2.48-2.96v-13c1.4-1.76,2.84-3,4.52-3,1.6,0,2.52,1.12,2.52,3.52V28.84c0,2.48-.28,2.96-2.48,2.96v.84h7.04V31.8c-2.28,0-2.56-.48-2.56-2.96V16.28c0-3.16-1.08-5.32-3.76-5.32-2.32,0-3.88,1.56-5.32,3.76h-.08c-.32-2.28-1.44-3.76-3.68-3.76-2.28,0-3.88,1.56-5.28,3.76h-.12V12.08l-.52-.48h-4.36v.84c2.52,0,2.84.48,2.84,3v13.4c0,2.48-.28,2.96-2.56,2.96Z" transform="translate(0 0.00001)"/> <path d="M180.3681,10.96c-4.72,0-7.4,5.08-7.4,11.24,0,6.28,3.04,11.08,7.4,11.08,4.68,0,7.36-5.08,7.36-11.24C187.72809,15.76,184.68811,10.96,180.3681,10.96Zm0,21c-3.2,0-5.2-4.36-5.2-9.76,0-5.36,1.72-9.92,5.2-9.92,3.16,0,5.2,4.36,5.2,9.76C185.56805,27.4,183.80811,31.96,180.3681,31.96Z" transform="translate(0 0.00001)"/> <path d="M199.87808,22.72l-.84-.16c-1.4,6.68-2.12,8.92-3.44,8.92-1.8,0-1.96-2.8-1.96-6.72V12.92h4.88V11.6h-4.88V6h-1c-.08,3.4-1.08,5.8-3.92,5.8v1.12h2.92V26.2c0,5.28,1.28,7.08,3.48,7.08,2.76,0,3.48-3.32,4.76-10.56Z" transform="translate(0 0.00001)"/> <g> <path d="M205.82108,28.84V12.08l-.48-.48h-4.24v.84c2.44,0,2.72.48,2.72,3v13.4c0,2.48-.28,2.96-2.6,2.96v.84h7.2V31.8C206.10107,31.8,205.82108,31.32,205.82108,28.84Z" transform="translate(0 0.00001)"/> <rect x="202.34108" y="3.36001" width="3.96001" height="3.56"/> </g> <path d="M220.75908,15.24l-3.96,13.64h-.2l-3.88-13.64c-.68-2.36-.72-2.8,2-2.8V11.6h-7.28v.84c1.8,0,2.36.44,3.08,2.8l5.2,17.76h1.12l5.28-17.76c.72-2.36,1.32-2.8,3.24-2.8V11.6h-6.56v.84c2.72,0,2.68.44,1.96,2.8Z" transform="translate(0 0.00001)"/> <path d="M236.76508,22.56c-1.04,6.68-2.68,8.8-4.76,8.8-3.24,0-5.04-4.36-5.04-9.6,0-.44,0-.84.04-1.28h10.36c0-5.56-2.16-9.52-5.92-9.52-4.16,0-6.6,5.12-6.6,11.48,0,6.28,2.36,10.84,6.56,10.84,3.44,0,5.28-3.32,6.2-10.56Zm-5.32-10.28c2.72,0,3.76,3.68,3.76,6.88h-8.08C227.52509,15.4,228.92511,12.28,231.44507,12.28Z" transform="translate(0 0.00001)"/> <g> <path d="M241.66309,0a4.86034,4.86034,0,1,0,4.84,4.92l.00012-.01178A4.87429,4.87429,0,0,0,241.66309,0Zm0,9.04q-.03132.00018-.0625,0a4.08887,4.08887,0,0,1-4.0575-4.12q-.00064-.04239-.00043-.08471A4.09794,4.09794,0,0,1,241.66309.76q.04422.00018.08856.00134A4.05635,4.05635,0,0,1,245.70306,4.92l.00068.06714A4.04677,4.04677,0,0,1,241.66309,9.04Z" transform="translate(0 0.00001)"/> <path d="M242.23743,5.24692A1.49633,1.49633,0,0,0,243.743,3.76q-.00045-.06555-.00653-.13092a1.53782,1.53782,0,0,0-1.67346-1.389h-2.16V7.48h.72V5.24h.64l1.64,2.24h.88l-1.68-2.24C242.14771,5.24429,242.19257,5.24661,242.23743,5.24692ZM240.62305,4.6V2.96h1.36c.64,0,1,.28,1,.8,0,.52-.4.84-1,.84Z" transform="translate(0 0.00001)"/> </g> </svg> </div> </div> </div> </div> <div class="c-header_bg"></div> <div data-load="container"> <header data-module-header> <div class="c-header" data-header="header"> <a href="fr" class="c-header_logo" data-header="logo"> <span class="c-header_logo_inner" data-hover-shuffle>Locomotive</span>® </a> <span aria-hidden="true" class="c-header_icon"></span> <nav class="c-header_menu || c-header-menu"> <ul class="c-header-menu_list"> <li class="c-header-menu_item"><a href="fr/projets" class="c-header-menu_link" data-hover-shuffle>Projets</a></li> <li class="c-header-menu_item"><a href="fr/agence" class="c-header-menu_link" data-hover-shuffle>Agence</a></li> <li class="c-header-menu_item"><a href="fr/carrieres" class="c-header-menu_link" data-hover-shuffle>Carrières</a></li> <li class="c-header-menu_item"> <a target="_blank" rel="noopener noreferrer" href="https://store.locomotive.ca/fr" class="c-header-menu_link" data-hover-shuffle>Store</a> </li> </ul> </nav> <a href="fr/contact" class="c-header_cta " data-hover-shuffle>Contact</a> <button class="c-header_menu-toggler" data-header="menu-toggler" data-header-open-label="Menu" data-header-close-label="Fermer" aria-expanded="false" aria-controls="mobile-menu" aria-label="Navigation mobile"> Menu </button> </div> <nav class="c-menu" data-header="menu" id="mobile-menu" aria-label="Navigation mobile"> <div class="c-menu_inner"> <ul class="c-menu_nav"> <li class="c-menu_nav_item"> <a href="fr/projets" class="c-menu_nav_link ">Projets</a> </li> <li class="c-menu_nav_item"> <a href="fr/agence" class="c-menu_nav_link ">Agence</a> </li> <li class="c-menu_nav_item"> <a href="fr/carrieres" class="c-menu_nav_link ">Carrières</a> </li> <li class="c-menu_nav_item"> <a href="fr/contact" class="c-menu_nav_link ">Contact</a> </li> <li class="c-menu_nav_item"> <a class="c-menu_nav_link" target="_blank" rel="noopener noreferrer" href="https://store.locomotive.ca/fr">Store</a> </li> </ul> <div class="c-menu_footer"> <a href="https://locomotive.ca/en/work/editorial-new" class="c-menu_langswitcher" data-load="false">English</a> <span class="c-menu_location"> <span class="u-screen-reader-text">Montréal, Quebec</span> <span aria-hidden="true">🛑🚹🚺</span> </span> </div> </div> </nav> </header> <div class="o-scroll" data-module-scroll="main" data-scroll-smooth="true" > <main> <div class="c-work-single-hero" data-module-work-single-hero> <div class="c-work-single-hero_container || o-container"> <div class="c-work-single-hero_inner"> <div class="c-work-single-hero_grid -top || o-grid -col-4 -gutters"> <div class="c-work-single-hero_content-type"> <span class="o-text -medium">Étude de cas</span> </div> <div class="c-work-single-hero_context-label"> <div class="u-screen-reader-text">Catégories</div> <ul class="o-text -medium"> <li>Digital</li> <li>Expérience</li> <li>Contenu</li> </ul> </div> </div> <div class="c-work-single-hero_grid -bottom || o-grid -col-4 -gutters" data-work-single-hero="grid-bottom"> <div class="c-work-single-hero_title || o-padding -huge-top" data-work-single-hero="title"> <h1 class="c-heading -huge || c-work-single-hero_heading">Editorial New</h1> </div> <div class="c-work-single-hero_year"> <span class="o-text -medium">©2019</span> </div> <div class="c-work-single-hero_category"> <span class="o-text -medium"> Typographie <br> Montréal, Canada </span> </div> </div> </div> </div> <div class="o-container" > <div class="c-work-single-hero_visual"> <div class="c-work-single-hero_grid -visual || o-grid -col-4 -gutters"> <div class="c-work-single-hero_featured-image || o-padding -tiny-top -tiny-bottom"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/EDITORIAL/ligature_image_1-10w.png');"> <img class="c-image_img " alt="" width="1806" height="1116" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201806%201116'%3E%3C/svg%3E" data-src="uploads/projects/EDITORIAL/ligature_image_1.png" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate data-scroll-ignore-fold > </span> </div> <p class="c-work-single-hero_caption || o-text -medium"> <span></span> <span></span> </p> </div> </div> </div> </div> </div> <div class="o-container"> <div class="c-work-single-pitch_wrapper"> <div class="c-work-single-pitch"> <div class="c-work-single-pitch_head"> <span>Site(s) web</span> <span><a href="https://editorialnew.com/" target="_blank" rel="noopener noreferrer">editorialnew.com</a></span> </div> <div class="c-work-single-pitch_content"> <a class="c-work-single-pitch_link" href="https://editorialnew.com/" target="_blank" rel="noopener noreferrer">editorialnew.com</a><span aria-hidden="true">🦉</span><p class="">une sérif conçue pour du texte long avec une personnalité assez forte pour créer un impact en tant que titre.</p> </div> </div> </div> </div> <div class="c-attachment || u-margin -visual"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/EDITORIAL/Frame_1462-10w.png');"> <img class="c-image_img " alt="" width="3852" height="2708" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%203852%202708'%3E%3C/svg%3E" data-src="uploads/projects/EDITORIAL/Frame_1462-2000w.png" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" > </span> </div> </div> <div class="c-section-overline -no-border || u-margin -huge-bottom -small-top"> <div class="o-container"> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">À Propos</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || "> <div class="c-wysiwyg || o-text -medium"> Après le lancement officiel de la nouvelle typographie, Pangram souhaitait créer une expérience complète en utilisant la nouvelle police variable en action. L'approche créative s’articule autour de la typographie elle-même, de sa dualité vintage / moderne et de ses capacités variables. Ainsi, après avoir défini notre stratégie d'expérience utilisateur, notre équipe propose une direction artistique hautement graphique pour aborder le thème rétro de la publicité éditoriale. </div> </div> </div> </div> </div></div> <div class="c-section-overline || u-margin -huge-top -huge-bottom"> <div class="o-container"> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">Prix (6)</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || u-gc-2/5"> <ul class="c-list -alternative"> <li class="c-list_row"> <div class="c-list_item"> Prix Or </div> <div class="c-list_item"> Idéa </div> </li> <li class="c-list_row"> <div class="c-list_item"> Prix Argent </div> <div class="c-list_item"> Idéa </div> </li> <li class="c-list_row"> <div class="c-list_item"> Site du mois </div> <div class="c-list_item"> Awwwards </div> </li> <li class="c-list_row"> <div class="c-list_item"> Site du jour </div> <div class="c-list_item"> Awwwards </div> </li> <li class="c-list_row"> <div class="c-list_item"> Prix Développeur </div> <div class="c-list_item"> Awwwards </div> </li> <li class="c-list_row"> <div class="c-list_item"> Excellence Mobile </div> <div class="c-list_item"> Awwwards </div> </li> </ul> </div> </div> </div> </div></div> <div class="c-attachment || u-margin -big-top -big-bottom -visuals-dual"> <div class="o-container"> <div class="o-grid -col-12 -gutters"> <div class="o-grid_item u-gc-1/6@from-small"> <div class="c-video "> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/Visual_brand-2-10w.png');"> <img class="c-image_img " alt="" width="2000" height="1330" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%201330'%3E%3C/svg%3E" data-src="uploads/Visual_brand-2-2000w.png" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate > </span> </div> <video class="c-video_media" playsinline muted loop data-module-video-inview poster="uploads/Visual_brand-2-2000w.png" data-scroll data-scroll-repeat data-scroll-call="toggle, VideoInview" > <source src="https://player.vimeo.com/progressive_redirect/playback/782626257/rendition/1080p/file.mp4?loc=external&signature=54a8adb5450489233e051390ed9bcee2742ad1aa53ca64c4508f232bb5ad856c" type="video/mp4"> </video> </div> </div> <div class="o-grid_item u-gc-7/13@from-small"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/Frame_1463-10w.png');"> <img class="c-image_img " alt="" width="2000" height="2843" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%202843'%3E%3C/svg%3E" data-src="uploads/Frame_1463-2000w.png" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate > </span> </div> </div> </div> </div> </div> <div class="c-attachment || u-margin -big-top -big-bottom -visual"> <div class="o-container"> <div class="o-grid -col-12@from-medium -gutters"> <div class="o-grid_item u-gc-2/12@from-medium"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/Frame_1461-2-10w.png');"> <img class="c-image_img " alt="" width="2000" height="1288" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%201288'%3E%3C/svg%3E" data-src="uploads/Frame_1461-2-2000w.png" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate > </span> </div> </div> </div> </div> </div> <div class="c-attachment || u-margin -big-top -big-bottom -visual"> <div class="o-container"> <div class="o-grid -col-12@from-medium -gutters"> <div class="o-grid_item u-gc-2/12@from-medium"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/EDITORIAL/Frame_1461-1-10w.png');"> <img class="c-image_img " alt="" width="2000" height="1288" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%201288'%3E%3C/svg%3E" data-src="uploads/projects/EDITORIAL/Frame_1461-1-2000w.png" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate > </span> </div> </div> </div> </div> </div> <div class="c-attachment || u-margin -big-top -big-bottom -visual"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/EDITORIAL/Big-10w.png');"> <img class="c-image_img " alt="" width="2000" height="2550" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%202550'%3E%3C/svg%3E" data-src="uploads/projects/EDITORIAL/Big-2000w.png" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" > </span> </div> </div> <div class="c-attachment || u-margin -big-top -big-bottom -visual"> <div class="o-container"> <div class="o-grid -col-12@from-medium -gutters"> <div class="o-grid_item u-gc-2/12@from-medium"> <div class="c-video "> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/EDITORIAL/Frame_1461-10w.png');"> <img class="c-image_img " alt="" width="2000" height="1288" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%201288'%3E%3C/svg%3E" data-src="uploads/projects/EDITORIAL/Frame_1461-2000w.png" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" data-depixelate > </span> </div> <video class="c-video_media" playsinline muted loop data-module-video-inview poster="uploads/projects/EDITORIAL/Frame_1461-2000w.png" data-scroll data-scroll-repeat data-scroll-call="toggle, VideoInview" > <source src="https://player.vimeo.com/progressive_redirect/playback/782626269/rendition/1080p/file.mp4?loc=external&signature=b72642e7bca28619bdbf37ee019db8db312a6608211830fbd9066a6a158f656c" type="video/mp4"> </video> </div> </div> </div> </div> </div> <div class="c-attachment || u-margin -big-top -big-bottom -visual"> <div class="c-image -lazy-load" > <span class="c-image_inner" style="background-image: url('uploads/projects/EDITORIAL/Big-1-10w.png');"> <img class="c-image_img " alt="" width="2000" height="1714" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%202000%201714'%3E%3C/svg%3E" data-src="uploads/projects/EDITORIAL/Big-1-2000w.png" data-scroll data-scroll-offset="15%" data-scroll-call="lazyLoad, Scroll" > </span> </div> </div> <div class="o-container"> <div class="c-website-cta"> <span class="c-website-cta_label">©2019</span> <p class="c-website-cta_content"> Visiter<span aria-hidden="true">🦉</span><a href="https://editorialnew.com/" target="_blank" rel="noopener noreferrer">editorialnew.com</a> </p> </div> </div> <div class="c-section-overline || u-padding -huge-top"> <div class="o-container"> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">Credits</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || "> <ul class="c-list -no-border-last-child -align-start"> <li class="c-list_row"> <div class="c-list_item"> Directeur de création </div> <div class="c-list_item"> Louis Paquet </div> </li> <li class="c-list_row"> <div class="c-list_item"> Développeur Front-end </div> <div class="c-list_item"> Antoine Boulanger </div> </li> <li class="c-list_row"> <div class="c-list_item"> Développeur Front-end </div> <div class="c-list_item"> Jérémy Minié </div> </li> <li class="c-list_row"> <div class="c-list_item"> Développeur Back-end </div> <div class="c-list_item"> Benjamin Roch </div> </li> <li class="c-list_row"> <div class="c-list_item"> Producteur </div> <div class="c-list_item"> Maxime Moulin </div> </li> <li class="c-list_row"> <div class="c-list_item"> Directeur de compte </div> <div class="c-list_item"> Frédéric Marchand </div> </li> <li class="c-list_row"> <div class="c-list_item"> Image de marque </div> <div class="c-list_item"> Mathieu Desjardins </div> </li> </ul> </div> </div> </div> </div></div> <article class="c-work-next || u-margin -big-top" data-module-work-next data-scroll data-scroll-module-progress data-scroll-css-progress data-scroll-position="start,end" data-scroll-offset="0,110%" > <div class="c-section-overline c-work-next_overline || "> <div class="o-container"> <div class="c-section-overline_inner"> <h2 class="c-section-overline_title">Prochain projet</h2> <div class="o-grid -col-4 -gutters"> <div class="o-grid_item || u-gc-3/5@from-medium || "> <div class="c-work-next_cta"> <span class="o-text -medium">Défiler vers le bas↓</span> <span class="c-work-next_progress"></span> </div> </div> </div> </div> </div></div> <div class="c-work-next_container || o-container"> <div class="c-work-next_inner"> <div class="c-work-next_grid -bottom || o-grid -col-4 -gutters"> <div class="c-work-next_title || o-padding -huge-top"> <h1 class="c-heading -huge || c-work-next_heading">C'est pas violent</h1> </div> <div class="c-work-next_year"> <span class="o-text -medium">©2018</span> </div> <div class="c-work-next_category"> <span class="o-text -medium"> Cause sociale <br> Montréal, Canada </span> </div> </div> <div class="c-work-next_visual"> <div class="c-work-next_grid -visual || o-grid -col-4 -gutters"> <div class="c-work-next_featured-image || o-padding -tiny-top -tiny-bottom" data-work-next="image"> <div class="c-image " > <span class="c-image_inner" style="background-image: url('uploads/projects/ITSNOTVIOLENT/Visual_brand-10w.png');"> <img class="c-image_img " alt="" width="1498" height="997" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201498%20997'%3E%3C/svg%3E" data-src="uploads/projects/ITSNOTVIOLENT/Visual_brand.png" > </span> </div> </div> </div> </div> </div> </div> <a data-work-next="link" class="c-work-next_link" data-scroll href="/fr/projets/c-est-pas-violent" data-load-transition="work-next">Voir plus</a> </article> </main> </div> <div class="c-video-modal" data-module-video-modal> <button type="button" class="c-video-modal_close || o-text -medium" data-video-modal="close"> Fermer </button> <div class="c-video-modal_content"> <div class="c-video-modal_inner" data-video-modal="inner"></div> </div> </div> </div> <script src="https://locomotive.ca/assets/scripts/vendors.js?v=1723754399977" defer></script> <script src="https://locomotive.ca/assets/scripts/app.js?v=1723754399977" defer></script> </body> </html>