Charcoal — Framework Web et gestionnaire de contenu

<!doctype html> <html class="has-no-js" lang="fr" data-template="home" > <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <base href="https://charcoal.locomotive.ca/"> <title>Charcoal — Framework Web et gestionnaire de contenu | Charcoal</title> <link rel="alternate" hreflang="en" href="https://charcoal.locomotive.ca/en"> <meta name="description" content="Une boite à outils web qui s'adapte à tous les besoins de votre projet."> <meta property="og:type" content="website"> <meta property="og:url" content="https://charcoal.locomotive.ca/fr"> <meta property="og:site_name" content="Charcoal"> <meta property="og:title" content="Charcoal — Framework Web et gestionnaire de contenu"> <meta property="og:image" content="https://charcoal.locomotive.ca/assets/app/images/placeholders/default-meta-image.png"> <meta property="og:description" content="Une boite à outils web qui s'adapte à tous les besoins de votre projet."> <meta property="twitter:title" content="Charcoal — Framework Web et gestionnaire de contenu"> <meta property="twitter:description" content="Une boite à outils web qui s'adapte à tous les besoins de votre projet.">  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="HandheldFriendly" content="true">  <link rel="apple-touch-icon" sizes="180x180" href="assets/app/images/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/app/images/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/app/images/favicons/favicon-16x16.png"> <link rel="manifest" href="assets/app/images/favicons/site.webmanifest"> <link rel="mask-icon" href="assets/app/images/favicons/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="theme-color" content="#ffffff">   <link rel="icon" href="assets/app/images/favicons/favicon.svg"> <link id="css-app-main" rel="stylesheet" href="assets/app/styles/main.css?v=202206141126" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true"> <style media="all"> html{min-height:100%;color:#222;font-family:"Suisse BP Int'l";line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}@media (max-width: 699px){html{font-size:15px}}@media (min-width: 700px) and (max-width: 999px){html{font-size:15px}}@media (min-width: 1000px) and (max-width: 1199px){html{font-size:15px}}@media (min-width: 1200px) and (max-width: 1599px){html{font-size:16px}}@media (min-width: 1600px) and (max-width: 1999px){html{font-size:17px}}@media (min-width: 2000px) and (max-width: 2399px){html{font-size:17px}}@media (min-width: 2400px){html{font-size:18px}}html.is-loading{cursor:wait}html.has-scroll-smooth,html:not(.has-scroll-module-init){overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0}html.has-scroll-dragging{user-select:none}html.has-menu-mobile-open{overflow:hidden}body{overflow-x:hidden}.has-scroll-smooth body{overflow:hidden}.has-menu-mobile-open body{overflow:hidden}.is-first-load body{opacity:1 !important}::selection{background-color:#fff;color:#3297FD;text-shadow:none}a{color:currentColor}a:hover{color:currentColor}svg{display:block}[data-scroll-section]{will-change:transform}[data-load-container]{position:relative;z-index:10}.c-preloader{position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;transition:visibility 0s cubic-bezier(0.4, 0, 0, 1) 0s;visibility:visible}.c-preloader::before{content:"";position:absolute;top:0;bottom:0;right:0;left:0;z-index:-1;background-color:#4958E5;transform:scale3d(1, 1, 1);transform-origin:center bottom;transition:transform 0.6s cubic-bezier(0.4, 0, 0, 1) 0.3s}.is-loaded .c-preloader{visibility:hidden;transition-delay:0.8s}.is-loaded .c-preloader::before{transform:scale3d(1, 0, 1);transform-origin:center top;transition-duration:0.8s;transition-delay:0s}.c-loader{position:absolute;top:50%;left:50%;margin-left:-30px;margin-top:-30px;z-index:1;transition:visibility .3s cubic-bezier(0.4, 0, 0, 1),opacity .3s cubic-bezier(0.4, 0, 0, 1);color:#F1F2FE;visibility:visible;opacity:1;overflow:visible;padding-top:60px;width:60px}.is-loaded .c-loader{visibility:hidden;opacity:0}form.is-loading .c-loader{opacity:1;z-index:10;visibility:visible;color:#4D5DF1}.c-loader_inner{position:absolute;top:0;left:0;width:60px;height:60px;box-sizing:border-box;z-index:1}.c-loader_inner:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;animation:loader-figure 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);animation-play-state:running;background-color:currentColor;z-index:1}.c-loader_inner:after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;animation:loader-label 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);animation-play-state:running;background-color:currentColor;z-index:-1;transform:scale(0);opacity:0}.is-loaded .c-loader_inner:before,.is-loaded .c-loader_inner:after{animation-play-state:paused}form.is-loading .c-loader_inner:before,form.is-loading .c-loader_inner:after{animation-play-state:running}@keyframes loader-figure{0%{transform:scale(1)}50%{transform:scale(0.75)}100%{transform:scale(1)}}@keyframes loader-label{0%{opacity:1;transform:scale(0)}50%{}75%{opacity:0;transform:scale(1.6)}100%{}} /*# sourceMappingURL=critical.css.map */ </style> </head> <body data-module-load style="opacity: 0;"> <div class="c-preloader"> <div class="c-loader"> <span class="c-loader_inner"></span> </div> </div> <div data-load-container> <nav class="c-products-nav"> <div class="c-products-nav_background" data-module-products-button></div> <div class="c-products-nav_container"> <div class="o-container"> <div class="c-products-nav_inner"> <ul class="c-products-nav_list"> <li class="c-products-nav_list_item "> <span class="c-products-nav_list_item_icon"> <svg role="img"><use href="assets/app/images/sprite.svg#arrow-right"></use></svg> </span> <a href="fr/fonctionnalite/gestion-de-contenu"> Gestionnaire de contenu </a> </li> <li class="c-products-nav_list_item "> <span class="c-products-nav_list_item_icon"> <svg role="img"><use href="assets/app/images/sprite.svg#arrow-right"></use></svg> </span> <a href="fr/fonctionnalite/commerce-electronique"> Commerce électronique </a> </li> <li class="c-products-nav_list_item "> <span class="c-products-nav_list_item_icon"> <svg role="img"><use href="assets/app/images/sprite.svg#arrow-right"></use></svg> </span> <a href="fr/fonctionnalite/donnees-interfaces-api"> Données et interfaces API </a> </li> </ul> </div> </div> <div class="c-products-nav_image"> <div class="c-products-nav_image_inner" style="background-image:url('assets/app/images/shapes/shape-01.png');"> </div> </div> </div> </nav> <div class="c-nav-mobile"> <div class="c-nav-mobile_inner o-container"> <div class="c-nav-mobile_container"> <ul class="c-nav-mobile_list"> <li class="c-nav-mobile_list_item"> <span class="c-nav-mobile_list_item_label">Fonctionnalités</span> <ul class="c-nav-mobile_sublist"> <li class="c-nav-mobile_sublist_item"> <a href="fr/fonctionnalite/gestion-de-contenu" class="c-nav-mobile_list_item_label">Gestionnaire de contenu</a> </li> <li class="c-nav-mobile_sublist_item"> <a href="fr/fonctionnalite/commerce-electronique" class="c-nav-mobile_list_item_label"> Commerce électronique</a> </li> <li class="c-nav-mobile_sublist_item"> <a href="fr/fonctionnalite/donnees-interfaces-api" class="c-nav-mobile_list_item_label"> Données et interfaces API</a> </li> </ul> </li> <li class="c-nav-mobile_list_item"> <a href="fr/technologie" class="c-nav-mobile_list_item_label">Technologie</a> </li> </ul> <div class="c-nav-mobile_buttons">  <a href="fr/contact" class="c-button -black"> <span class="c-button_label">Nous joindre</span> </a> </div> </div> </div> </div> <header class="c-header -fixed"> <div class="o-container"> <div class="c-header_container"> <div class="c-header_container_item"> <a class="c-header_logo" href="fr"> <svg role="img" aria-label="Charcoal"> <use href="assets/app/images/sprite.svg#logo"></use> </svg> </a> <ul class="c-header_menu u-none@to-medium"> <li class="c-header_menu_item -products"> <button class="c-header_menu_item_inner c-link" data-module-split data-split-type="chars" data-module-products-button type="button"> Fonctionnalités <span class="c-header_menu_item_inner_arrow"> <svg role="img"> <use href="assets/app/images/sprite.svg#arrow-down-tip"></use> </svg> </span> </button> </li> <li class="c-header_menu_item"> <a class="c-header_menu_item_inner c-link" data-module-split data-split-type="chars" href="fr/technologie"> Technologie </a> </li> </ul> </div> <div class="c-header_container_item -right"> <ul class="c-header_menu"> <li class="c-header_menu_item u-none@to-medium"> <a class="c-header_menu_item_inner c-link u-capitalize" href="https://charcoal.locomotive.ca/en" data-module-split data-split-type="chars" data-load="false"> en </a> </li> <li class="c-header_menu_item u-none@to-medium"> <a href="fr/contact" class="c-button"> <span class="c-button_label">Nous joindre</span> </a> </li> </ul> <button class="c-header_burger" type="button" aria-label="Toggle Menu" data-module-nav-mobile-button> <span class="c-header_burger_open"> <span class="c-header_burger_open_item"></span> <span class="c-header_burger_open_item"></span> </span> <span class="c-header_burger_close"> <span class="c-header_burger_close_item"></span> <span class="c-header_burger_close_item"></span> </span> </button> </div> </div> </div> </header> <div class="o-scroll" data-module-scroll="main"> <div class="u-background-blue"> <div data-scroll-section> <div class="c-hero" id="hero" data-module-hero="main" data-scroll data-scroll-position="top" data-scroll-id="hero" data-scroll-call="toggle,Hero" data-scroll-repeat data-scroll-offset="0"> <div class="c-hero_container" data-scroll data-scroll-sticky data-scroll-offset="0" data-scroll-target="#hero"> <header class="c-header -difference"> <div class="o-container"> <div class="c-header_container"> <div class="c-header_container_item"> <a class="c-header_logo" href="fr"> <svg role="img" aria-label="Charcoal"> <use href="assets/app/images/sprite.svg#logo"></use> </svg> </a> <ul class="c-header_menu u-none@to-medium"> <li class="c-header_menu_item -products"> <button class="c-header_menu_item_inner c-link" data-module-split data-split-type="chars" data-module-products-button type="button"> Fonctionnalités <span class="c-header_menu_item_inner_arrow"> <svg role="img"> <use href="assets/app/images/sprite.svg#arrow-down-tip"></use> </svg> </span> </button> </li> <li class="c-header_menu_item"> <a class="c-header_menu_item_inner c-link" data-module-split data-split-type="chars" href="fr/technologie"> Technologie </a> </li> </ul> </div> <div class="c-header_container_item -right"> <ul class="c-header_menu"> <li class="c-header_menu_item u-none@to-medium"> <a class="c-header_menu_item_inner c-link u-capitalize" href="https://charcoal.locomotive.ca/en" data-module-split data-split-type="chars" data-load="false"> en </a> </li> <li class="c-header_menu_item u-none@to-medium"> <a href="fr/contact" class="c-button"> <span class="c-button_label">Nous joindre</span> </a> </li> </ul> <button class="c-header_burger" type="button" aria-label="Toggle Menu" data-module-nav-mobile-button> <span class="c-header_burger_open"> <span class="c-header_burger_open_item"></span> <span class="c-header_burger_open_item"></span> </span> <span class="c-header_burger_close"> <span class="c-header_burger_close_item"></span> <span class="c-header_burger_close_item"></span> </span> </button> </div> </div> </div> </header> <div class="c-hero_content"> <h1 class="c-heading -h4"> Une boite à outils <br> web qui s'adapte<br> à tous les besoins<br> de votre projet. </h1> <a href="#learn-more" data-scroll-to class="c-button -big -white -hover-black"> En savoir plus </a> </div> <div class="c-hero_scroll-indicator"> <a href="#learn-more" data-scroll-to class="c-scroll-indicator"> <span class="c-scroll-indicator_label">Défiler</span> <span class="c-scroll-indicator_icon"> <svg role="img" aria-hidden="true"> <use href="assets/app/images/sprite.svg#arrow-down"></use> </svg> </span> </a> </div> <div class="c-hero_mask-wrap"> <div class="c-mask-shape" data-module-lottie="charcoal-intro" data-lottie-file-path="https://charcoal.locomotive.ca/assets/app/lottie" data-lottie-file-name="charcoal-intro" data-hero="mask"> </div> </div> <div class="c-hero_logo-wrap || o-container u-text-center"> <div class="c-hero_logo" data-hero="logo"> <svg role="img" aria-label="Charcoal"> <use href="assets/app/images/sprite.svg#logo"></use> </svg> </div> </div> <div class="c-hero_device || c-device" data-module-device-manager="hero" data-texture-laptop="https://charcoal.locomotive.ca/assets/app/3d/textures/laptop.jpg" data-texture-smartphone="https://charcoal.locomotive.ca/assets/app/3d/textures/smartphone.jpg" data-autoshow="false"> </div> </div> </div> </div> <div data-scroll-section> <div class="c-section" id="learn-more"> <div class="o-container"> <div class="o-layout"> <div class="o-layout_item u-4/5@from-small"> <div class="c-wysiwyg u-anim"> <p class="c-heading -h3 u-anim-text-line" data-scroll data-module-split>Vous êtes sur le point de prendre une décision cruciale, soit choisir votre CMS pour développer votre prochain projet numérique?</p> </div> </div> </div> <div class="o-layout -gutter-huge u-text-right"> <div class="o-layout_item u-1/3@from-small u-text-left"> <div class="c-wysiwyg u-anim" data-scroll data-scroll-offset="5%"> <p>Laissez-nous vous faire découvrir les avantages de Charcoal ainsi que vous présenter la comparaison entre notre environnement de développement et certaines des meilleures plateformes de gestion de contenu, notamment WordPress et Craft CMS. Notre guide complet vous aidera à comprendre en quoi Charcoal se démarque des autres plateformes de confiance et à quel moment considérer l’implantation de Charcoal.</p> </div> </div> <div class="o-layout_item u-1/3@from-small u-text-left"> <div class="c-wysiwyg u-anim" data-scroll data-scroll-offset="15%"> <p>Conçue pour ceux qui aspirent à offrir la meilleure expérience utilisateur, et ce, sans compromis ni limites, Charcoal saura réaliser (presque) tous vos rêves. Cette interface conviviale à plusieurs dispositifs peut gérer votre site web, propulser votre commerce électronique, contrôler vos notifications et traiter des données. Charcoal est un outil libre, performant, sécurisé et conforme au W3C. </p> </div> </div> </div> </div> </div> </div> <div data-scroll-section> <div class="c-section"> <div class="o-container"> <div class="c-video || o-ratio || u-16:9 || u-border-radius" data-module-video data-scroll data-scroll-repeat data-scroll-call="toggle,Video" data-module-video-modal-toggler data-video-modal-toggler="toggler" data-video-modal-toggler-host="vimeo" data-video-modal-toggler-id="677921921"> <button class="c-video_button" aria-label="play" type="button"> <span class="c-video_button_icon"> <svg role="img" aria-hidden="true"> <use href="assets/app/images/sprite.svg#play"></use> </svg> </span> </button> <video src="https://player.vimeo.com/progressive_redirect/playback/677921921/rendition/720p?loc=external&signature=50fb569d9b7aa61dfbf15672711f62930ad09f318e5eb19988655eb8e0fa7af2" autoplay="false" muted="true" loop="true" data-video="video"> </video> </div> </div> </div> </div> <div data-scroll-section> <div class="c-section -padding-bottom-big"> <div class="u-relative"> <p class="c-splash-words"> <span class="c-splash-words_row"> <span class="c-splash-words_row_item -offset" data-scroll data-scroll-offset="10%">Le dernier </span> </span> <span class="c-splash-words_row"> <span class="c-splash-words_row_item" data-scroll data-scroll-offset="10%">gestionnaire </span> </span> <span class="c-splash-words_row"> <span class="c-splash-words_row_item" data-scroll data-scroll-offset="10%">de contenu </span> </span> <span class="c-splash-words_row"> <span class="c-splash-words_row_item -offset-small" data-scroll data-scroll-offset="10%">dont vous</span> </span> <span class="c-splash-words_row"> <span class="c-splash-words_row_item -offset" data-scroll data-scroll-offset="10%">aurez</span> </span> <span class="c-splash-words_row"> <span class="c-splash-words_row_item -offset-small" data-scroll data-scroll-offset="10%">besoin.</span> </span> </p> <div class="c-splash-words_features"> <a href="#features" class="c-tile -small u-border-radius" data-scroll data-scroll-to data-scroll-offset="0" data-scroll-speed="2.5"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Découvrez ce que Charcoal peut apporter à votre marque ou organisation.</span> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="assets/app/images/sprite.svg#arrow-right"></use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">Fonctionnalités</span> </span> </div> </div> </a> <a href="https://charcoal.locomotive.ca/fr/technologie" class="c-tile -small u-border-radius" data-scroll data-scroll-offset="0" data-scroll-speed="4"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Un framework PHP complet et libre de droits développé par Locomotive.</span> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">Technologie</span> </span> </div> </div> </a> <a href="https://charcoal.locomotive.ca/fr/contact" class="c-tile -small u-border-radius" data-scroll data-scroll-offset="0" data-scroll-speed="2"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Si vous souhaitez développer un projet sur Charcoal, notre équipe se fera un plaisir de vous aider.</span> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">Support</span> </span> </div> </div> </a> </div> </div> </div> </div> </div> <div data-scroll-section> <div class="c-section u-overflow-hidden -no-padding-bottom -no-padding-top -margin-top u-background-light" data-module-carousel> <div class="o-layout"> <div class="o-layout_item u-5/8@from-medium u-none@to-medium u-overflow-hidden"> <div class="c-carousel swiper-container" data-carousel="main"> <div class="c-carousel_wrapper swiper-wrapper"> <div class="c-carousel_slide swiper-slide"> <img class="c-carousel_slide_image" data-swiper-parallax="10%" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 930'%3E%3C/svg%3E" alt="" data-load-src="assets/app/images/gallery/bewegen.jpg"> </div> <div class="c-carousel_slide swiper-slide"> <img class="c-carousel_slide_image" data-swiper-parallax="10%" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 930'%3E%3C/svg%3E" alt="" data-load-src="assets/app/images/gallery/bus.jpg"> </div> <div class="c-carousel_slide swiper-slide"> <img class="c-carousel_slide_image" data-swiper-parallax="10%" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 930'%3E%3C/svg%3E" alt="" data-load-src="assets/app/images/gallery/agora.jpg"> </div> </div> </div> </div> <div class="o-layout_item u-3/8@from-medium u-overflow-hidden u-background-blue"> <div class="c-carousel -content swiper-container" data-carousel="content"> <div class="c-carousel_wrapper swiper-wrapper"> <div class="c-carousel_slide swiper-slide"> <div class="c-carousel_slide_inner"> <p class="c-heading -h3 c-carousel_slide_title u-anim" data-scroll> Libérez votre potentiel numérique </p> <p class="u-anim" data-scroll> Libérez tout le potentiel de votre marque et améliorez votre intelligence d'affaires en ligne. </p> </div> </div> <div class="c-carousel_slide swiper-slide"> <div class="c-carousel_slide_inner"> <p class="c-heading -h3 c-carousel_slide_title u-anim" data-scroll> Dynamisez vos ventes en ligne </p> <p class="u-anim" data-scroll> Gérez votre commerce en ligne grâce à notre boîte à outils flexible et personnalisable. </p> </div> </div> <div class="c-carousel_slide swiper-slide"> <div class="c-carousel_slide_inner"> <p class="c-heading -h3 c-carousel_slide_title u-anim" data-scroll> Rejoignez votre audience </p> <p class="u-anim" data-scroll> Envoyez de brefs messages à votre organisation grâce à notre système de messagerie automatisé. </p> </div> </div> </div> </div> <div class="c-carousel_controls"> <div class="c-carousel_controls_buttons u-anim" data-scroll> <button class="c-carousel_controls_buttons_item" type="button" aria-label="Prev" data-carousel="prev"> <span class="c-carousel_controls_buttons_item_icon"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-tip-left"> </use> </svg> </span> </button> <button class="c-carousel_controls_buttons_item" type="button" aria-label="Next" data-carousel="next"> <span class="c-carousel_controls_buttons_item_icon"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-tip-right"> </use> </svg> </span> </button> </div> </div> <div class="c-carousel swiper-container" data-carousel="visuals"> <div class="c-carousel_wrapper swiper-wrapper"> <div class="c-carousel_slide swiper-slide"> <img class="c-carousel_slide_image" data-swiper-parallax="10%" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 930'%3E%3C/svg%3E" alt="" data-load-src="assets/app/images/gallery/bewegen-small.jpg"> </div> <div class="c-carousel_slide swiper-slide"> <img class="c-carousel_slide_image" data-swiper-parallax="10%" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 930'%3E%3C/svg%3E" alt="" data-load-src="assets/app/images/gallery/bus-small.jpg"> </div> <div class="c-carousel_slide swiper-slide"> <img class="c-carousel_slide_image" data-swiper-parallax="10%" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 930'%3E%3C/svg%3E" alt="" data-load-src="assets/app/images/gallery/agora-small.jpg"> </div> </div> </div> </div> </div> </div> </div> <section data-scroll-section> <div class="c-section -no-padding-bottom u-background-light" id="features"> <div class="o-container"> <h2 class="c-heading -h1 u-color-blue u-anim-text-line" data-module-split data-scroll> Outils Essentiels </h2> <div class="o-layout -gutter-small u-text-center c-tiles"> <div class="o-layout_item u-1/3@from-medium u-1/2@from-small"> <a href="fr/fonctionnalite/gestion-de-contenu" class="c-tile u-border-radius -offset-top" data-scroll data-scroll-offset="0" data-scroll-speed="2" data-scroll-target="#features"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Améliorez votre croissance numérique grâce à notre système complet de gestion de contenu.</span> <span class="c-tile_inner_top_item">01</span> </div> <div class="c-tile_inner_middle"> <div class="c-tile_inner_middle_lottie" data-module-lottie data-lottie-file-path="https://charcoal.locomotive.ca/assets/app/lottie/" data-lottie-file-name="square" data-lottie-autoplay="true" data-lottie-yoyo="true" data-lottie-delay="0"></div> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">Gestionnaire de contenu</span> </span> </div> </div> </a> </div> <div class="o-layout_item u-1/3@from-medium u-1/2@from-small"> <a href="fr/fonctionnalite/commerce-electronique" class="c-tile u-border-radius" data-scroll data-scroll-offset="0" data-scroll-speed="3" data-scroll-target="#features"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Dynamisez vos ventes en ligne grâce à notre boîte à outils de commerce électronique polyvalente et personnalisable.</span> <span class="c-tile_inner_top_item">02</span> </div> <div class="c-tile_inner_middle"> <div class="c-tile_inner_middle_lottie" data-module-lottie data-lottie-file-path="https://charcoal.locomotive.ca/assets/app/lottie/" data-lottie-file-name="hexagon" data-lottie-autoplay="true" data-lottie-yoyo="true" data-lottie-delay="300"></div> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title"> Commerce électronique</span> </span> </div> </div> </a> </div> <div class="o-layout_item u-1/3@from-medium u-1/2@from-small"> <a href="fr/fonctionnalite/donnees-interfaces-api" class="c-tile u-border-radius -offset-top" data-scroll data-scroll-offset="0" data-scroll-speed="2" data-scroll-target="#features"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Gérez les données entrantes et sortantes avec notre logiciel intégré d’interface API polyvalent et libre.</span> <span class="c-tile_inner_top_item">03</span> </div> <div class="c-tile_inner_middle"> <div class="c-tile_inner_middle_lottie" data-module-lottie data-lottie-file-path="https://charcoal.locomotive.ca/assets/app/lottie/" data-lottie-file-name="circle" data-lottie-autoplay="true" data-lottie-yoyo="true" data-lottie-delay="600"></div> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title"> Données et interfaces API</span> </span> </div> </div> </a> </div> <div class="o-layout_item u-1/3@from-medium u-none@to-medium"></div> <div class="o-layout_item u-1/3@from-medium u-none@to-medium"></div> </div> </div> </div> </section> <section data-scroll-section> <div class="c-section u-background-light u-overflow-hidden" data-modules-carousel-cases> <div class="o-container"> <h2 class="c-heading -h1 u-color-blue u-anim-text-line" data-module-split data-scroll> Études <br>de Cas </h2> <div class="c-carousel-cases"> <div class="c-carousel-cases-visual_container swiper-container" data-scroll data-scroll-speed="1.5" data-scroll-offset="0" data-carousel-cases="carousel-visual"> <div class="c-carousel-cases-visual_wrapper swiper-wrapper"> <div class="c-carousel-cases-visual_slide swiper-slide"> <img class="c-carousel-cases-visual_slide_image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 895 679'%3E%3C/svg%3E" alt="Ville de Mirabel" data-load-src="uploads/caseStudies/Mirabel-895x679.png"> </div> <div class="c-carousel-cases-visual_slide swiper-slide"> <img class="c-carousel-cases-visual_slide_image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 895 679'%3E%3C/svg%3E" alt="The English Bus" data-load-src="uploads/caseStudies/englishbus-895x679.png"> </div> <div class="c-carousel-cases-visual_slide swiper-slide"> <img class="c-carousel-cases-visual_slide_image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 895 679'%3E%3C/svg%3E" alt="Rugby Canada" data-load-src="uploads/caseStudies/rugby-895x679.png"> </div> <div class="c-carousel-cases-visual_slide swiper-slide"> <img class="c-carousel-cases-visual_slide_image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 895 679'%3E%3C/svg%3E" alt="Air Inuit" data-load-src="uploads/caseStudies/airinuit-895x679.png"> </div> <div class="c-carousel-cases-visual_slide swiper-slide"> <img class="c-carousel-cases-visual_slide_image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 895 679'%3E%3C/svg%3E" alt="K72" data-load-src="uploads/caseStudies/k72-895x679.png"> </div> </div> </div> <div class="c-carousel_controls -absolute"> <div class="c-carousel_controls_buttons"> <button class="c-carousel_controls_buttons_item" type="button" aria-label="Prev" data-carousel-cases="prev"> <span class="c-carousel_controls_buttons_item_icon"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-tip-left"> </use> </svg> </span> </button> <button class="c-carousel_controls_buttons_item" type="button" aria-label="Next" data-carousel-cases="next"> <span class="c-carousel_controls_buttons_item_icon"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-tip-right"> </use> </svg> </span> </button> </div> </div> <div class="c-carousel-cases-info_container swiper-container" data-carousel-cases="carousel-info"> <div class="c-carousel-cases-info_wrapper swiper-wrapper"> <div class="c-carousel-cases-info_slide swiper-slide" data-project-url="https://mirabel.ca/"> <div class="c-carousel-cases-info_slide_inner"> <div class="c-carousel-cases-info_slide_left"> <span class="c-heading -h3">Ville de Mirabel</span> </div> <div class="c-carousel-cases-info_slide_right"> <span class="c-carousel-cases-info_slide_label">Fonctionnalités</span> <ul class="c-carousel-cases-info_features_list"> <li class="c-carousel-cases-info_features_list_item">Gestionnaire de contenu</li> <li class="c-carousel-cases-info_features_list_item">Données et interfaces API</li> <li class="c-carousel-cases-info_features_list_item">Gestionnaire de notifications</li> <li class="c-carousel-cases-info_features_list_item"> <a href="https://mirabel.ca/" target="_blank" rel="noopener noreferer">Voir le site <svg role="img"><use href="assets/app/images/sprite.svg#arrow-tip-right"></use></svg></a> </li> </ul> </div> </div> </div> <div class="c-carousel-cases-info_slide swiper-slide" data-project-url="https://theenglishbus.com"> <div class="c-carousel-cases-info_slide_inner"> <div class="c-carousel-cases-info_slide_left"> <span class="c-heading -h3">The English Bus</span> </div> <div class="c-carousel-cases-info_slide_right"> <span class="c-carousel-cases-info_slide_label">Fonctionnalités</span> <ul class="c-carousel-cases-info_features_list"> <li class="c-carousel-cases-info_features_list_item">Gestionnaire de contenu</li> <li class="c-carousel-cases-info_features_list_item">Commerce électronique</li> <li class="c-carousel-cases-info_features_list_item">Données et interfaces API</li> <li class="c-carousel-cases-info_features_list_item">Gestionnaire de notifications</li> <li class="c-carousel-cases-info_features_list_item"> <a href="https://theenglishbus.com" target="_blank" rel="noopener noreferer">Voir le site <svg role="img"><use href="assets/app/images/sprite.svg#arrow-tip-right"></use></svg></a> </li> </ul> </div> </div> </div> <div class="c-carousel-cases-info_slide swiper-slide" data-project-url="https://rugby.ca/fr"> <div class="c-carousel-cases-info_slide_inner"> <div class="c-carousel-cases-info_slide_left"> <span class="c-heading -h3">Rugby Canada</span> </div> <div class="c-carousel-cases-info_slide_right"> <span class="c-carousel-cases-info_slide_label">Fonctionnalités</span> <ul class="c-carousel-cases-info_features_list"> <li class="c-carousel-cases-info_features_list_item">Gestionnaire de contenu</li> <li class="c-carousel-cases-info_features_list_item">Data & APIs</li> <li class="c-carousel-cases-info_features_list_item"> <a href="https://rugby.ca/fr" target="_blank" rel="noopener noreferer">Voir le site <svg role="img"><use href="assets/app/images/sprite.svg#arrow-tip-right"></use></svg></a> </li> </ul> </div> </div> </div> <div class="c-carousel-cases-info_slide swiper-slide" data-project-url="https://www.airinuit.com/fr"> <div class="c-carousel-cases-info_slide_inner"> <div class="c-carousel-cases-info_slide_left"> <span class="c-heading -h3">Air Inuit</span> </div> <div class="c-carousel-cases-info_slide_right"> <span class="c-carousel-cases-info_slide_label">Fonctionnalités</span> <ul class="c-carousel-cases-info_features_list"> <li class="c-carousel-cases-info_features_list_item">Gestionnaire de contenu</li> <li class="c-carousel-cases-info_features_list_item">Données et interfaces API</li> <li class="c-carousel-cases-info_features_list_item">Gestionnaire de notifications</li> <li class="c-carousel-cases-info_features_list_item"> <a href="https://www.airinuit.com/fr" target="_blank" rel="noopener noreferer">Voir le site <svg role="img"><use href="assets/app/images/sprite.svg#arrow-tip-right"></use></svg></a> </li> </ul> </div> </div> </div> <div class="c-carousel-cases-info_slide swiper-slide" data-project-url="https://k72.ca/fr"> <div class="c-carousel-cases-info_slide_inner"> <div class="c-carousel-cases-info_slide_left"> <span class="c-heading -h3">K72</span> </div> <div class="c-carousel-cases-info_slide_right"> <span class="c-carousel-cases-info_slide_label">Fonctionnalités</span> <ul class="c-carousel-cases-info_features_list"> <li class="c-carousel-cases-info_features_list_item">Gestionnaire de contenu</li> <li class="c-carousel-cases-info_features_list_item">Données et interfaces API</li> <li class="c-carousel-cases-info_features_list_item"> <a href="https://k72.ca/fr" target="_blank" rel="noopener noreferer">Voir le site <svg role="img"><use href="assets/app/images/sprite.svg#arrow-tip-right"></use></svg></a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="c-clients"> <div class="o-container"> <p>Ils nous font confiance</p> </div> <div class="c-clients_rail" data-module-rail="clients-rail" data-rail-speed="1" data-scroll data-scroll-offset="0" data-scroll-call="trigger,Rail,clients-rail"> <span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-muraflex"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-kvell"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-pienso"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-vooban"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-volleyball"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-sos"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-airinuit"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-bewegen"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-usports"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-k72"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-rugby"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-2ndstreet"></use> </svg> </span> <span class="c-clients_rail_item"> <svg role="img"> <use href="assets/app/images/sprite.svg#client-pbsc"></use> </svg> </span> </span> </div> </div> </div> </section> <section data-scroll-section> <footer class="c-footer"> <div class="c-footer_background"> <div class="c-footer_background_shape -one" data-scroll data-scroll-speed="1.5" data-scroll-position="bottom" data-scroll-offset="0" data-scroll-delay="0.15"> <div class="c-footer_background_shape_inner"> <svg role="img"> <use href="assets/app/images/sprite.svg#shape-1"></use> </svg> </div> </div> <div class="c-footer_background_shape -two" data-scroll data-scroll-speed="3" data-scroll-position="bottom" data-scroll-offset="0" data-scroll-delay="0.07"> <div class="c-footer_background_shape_inner"> <svg role="img"> <use href="assets/app/images/sprite.svg#shape-2"></use> </svg> </div> </div> <div class="c-footer_background_shape -three" data-scroll data-scroll-speed="4" data-scroll-position="bottom" data-scroll-offset="0"> <div class="c-footer_background_shape_inner"> <svg role="img"> <use href="assets/app/images/sprite.svg#shape-3"></use> </svg> </div> </div> </div> <div class="o-container"> <nav class="o-layout -bottom c-footer_nav"> <div class="o-layout_item u-1/3@from-small"> <a class="c-footer_logo u-anim" data-scroll data-scroll-offset="0" href="fr"> <svg role="img" aria-label="Charcoal"> <use href="assets/app/images/sprite.svg#logo"></use> </svg> </a> </div> <div class="o-layout_item u-1/3@from-small"> <ul class="c-footer_nav_list" data-scroll data-scroll-offset="0"> <li class="c-footer_nav_list_item u-anim -parent"> <a href="fr#features" class="c-link" data-module-split data-split-type="chars"> Fonctionnalités </a> </li> <li class="c-footer_nav_list_item u-anim -delay-1 -parent"> <a href="fr/technologie" class="c-link" data-module-split data-split-type="chars"> Technologie </a> </li> <li class="c-footer_nav_list_item u-anim -delay-2 -parent"> <a href="fr/technologie#meet-the-team" class="c-link" data-module-split data-split-type="chars"> L'équipe </a> </li> </ul> </div> <div class="o-layout_item u-1/3@from-small u-text-right@from-small u-anim -delay-4" data-scroll data-scroll-offset="0"> <a href="fr/contact" class="c-button -white -hover-gray"> <span class="c-button_label"> Nous joindre </span> </a> </div> </nav> <div class="c-footer_copy"> <div class="o-layout"> <div class="o-layout_item u-1/3@from-medium u-1/2@to-medium u-anim" data-scroll data-scroll-offset="0"> © 2025 Charcoal </div> <div class="o-layout_item u-2/3@from-medium u-1/2@to-medium u-anim u-text-right@to-medium" data-scroll data-scroll-offset="0"> Site web par <a href="https://locomotive.ca" target="_blank" rel="noopener">Locomotive</a> </div> </div> </div> </div> </footer> </section> </div> <div class="c-video-modal" data-module-video-modal> <button type="button" class="c-button -white || c-video-modal_close" data-video-modal="close"> <span class="c-button_bg"></span> <span class="c-button_label">Fermer</span> </button> <div class="c-video-modal_content"> <div class="c-video-modal_inner" data-video-modal="inner"></div> </div> </div> </div> <script nomodule crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"></script> <script defer src="assets/app/scripts/vendors.js?v=202206141126"></script> <script defer src="assets/app/scripts/app.js?v=202206141126"></script> </body> </html>

CINXE.COM

Charcoal — Framework Web et gestionnaire de contenu | Charcoal