<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Ecolyo est le service proposé par la Métropole de Lyon pour suivre et comprendre la consommation énergétique globale de votre foyer."
/>
<link rel="stylesheet" href="./index.css" />
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link rel="icon" href="assets/ecolyo-icon.svg" />
<link rel="canonical" href="https://ecolyo.com/" />
<title>
ECOLYO est l’application gratuite développée par la Métropole de Lyon qui permet de maîtriser ses consommations d’énergie et d’eau grâce à des défis ludiques.
</title>
<!-- Open Graph general -->
<meta content="Ecolyo" property="og:site_name" />
<meta
content="Électricité, gaz, eau : Ecolyo l'appli pour réduire ses consos à Lyon"
property="og:title"
/>
<meta
content="Ecolyo est le service proposé par la Métropole de Lyon pour suivre et comprendre la consommation énergétique globale de votre foyer."
property="og:description"
/>
<meta property="og:url" content="https://ecolyo.com" />
<meta property="og:type" content="website" />
<!-- 1024x512 -->
<meta
property="og:image"
itemprop="image"
content="https://ecolyo.com/assets/socials/1024x512.png"
/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="Illustration Ecolyo" />
<meta property="og:image:width" content="1024" />
<meta property="og:image:height" content="512" />
<meta property="og:image:type" content="image/png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:image"
content="https://ecolyo.com/assets/socials/1200x630.png"
/>
<meta
name="twitter:title"
content="Électricité, gaz, eau : Ecolyo l'appli pour réduire ses consos à Lyon"
/>
</head>
<body>
<header>
<nav>
<div class="logo-container">
<a class="main-logo" href="/">
<img src="./assets/ecolyo-icon.svg" alt="" />
Ecolyo
</a>
<div class="separator"></div>
<a href="https://www.grandlyon.com/" target="_blank">
<img src="./assets/legal/mglLogo.svg" alt="" />
</a>
</div>
<div class="links">
<a class="navlink" href="#service">Le service</a>
<a class="navlink" href="#create-account">Mode d'emploi</a>
<a class="navlink" href="#about-us">Autour d'Ecolyo</a>
</div>
<!--Externals links-->
<div class="links">
<a
class="external-link login"
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
>Se connecter
<img src="assets/launch.svg" alt="" />
</a>
<a
class="external-link sign-in"
href="https://manager.cozygrandlyon.cloud/v2/grdlyon/ecolyo"
>Se créer un compte <img src="assets/launch-black.svg" alt=""
/></a>
</div>
</nav>
</header>
<main>
<section class="main-cta" id="service">
<div class="content-txt">
<div class="yellow-blur"></div>
<div class="left">
<h1 class="text-60-white">
Suivez vos consommations <br />
et passez à l'action
</h1>
<h2 class="text-20-white">
Ecolyo est une application gratuite développée par la
<strong>Métropole de Lyon</strong> qui permet de suivre, mais
également de maîtriser vos consommations d’énergie et d’eau grâce
à des défis ludiques et des astuces personnalisées.
</h2>
<div class="button-container-cta">
<a
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
target="_blank"
class="sign-up robots-nocontent"
>
Créer un compte
<img src="assets/launch-black.svg" alt="" />
</a>
<a
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
target="_blank"
class="sign-in robots-nocontent"
>
Connectez vous !
<img src="assets/launch.svg" alt="" />
</a>
</div>
</div>
</div>
<div>
<!-- Use object tag instead of img to not have a blurry svg on IOS -->
<object
id="illu"
class="illu"
type="image/svg+xml"
data="assets/illu-landing.svg"
tabindex="-1"
role="img"
aria-hidden="true"
>
Illustration Ecolyo
</object>
</div>
</section>
<section id="how-it-works">
<h2 class="text-45-white">
Comment analyser ses consommations avec Ecolyo ?
</h2>
<p class="text-22-white pt-2">
Ecolyo vous permet de suivre vos consommations d’électricité, d’eau et
de gaz au jour près. <br />
</p>
<p class="text-24-white-bold pt-2" id="text-before-compteurs">
Pour cela, il vous suffit d'être équipé de l'un ou de plusieurs
compteurs communicants :
</p>
<div class="compteurs" role="list">
<div class="bloc elec-color" role="listitem">
<object
class="compteur-img"
type="image/svg+xml"
data="./assets/partners/Linky.svg"
tabindex="-1"
aria-hidden="true"
>
Compteur Linky
</object>
<h3>Linky</h3>
<p class="text-22-white">pour l’électricité</p>
<div class="provider-logo">
<img alt="enedis-logo" src="assets/partners/enedis-logo.svg" />
</div>
</div>
<span class="compteurs-ou">ou</span>
<div class="bloc water-color" role="listitem">
<object
class="compteur-img"
type="image/svg+xml"
data="./assets/partners/Teleo.svg"
tabindex="-1"
aria-hidden="true"
>
Compteur Téléo
</object>
<h3>Téléo</h3>
<p class="text-22-white">pour l'eau</p>
<div class="provider-logo">
<img alt="Logo EPGL" src="assets/partners/epgl-logo.svg" />
</div>
</div>
<span class="compteurs-ou">ou</span>
<div class="bloc gaz-color" role="listitem">
<object
class="compteur-img"
type="image/svg+xml"
data="./assets/partners/Gazpar.svg"
tabindex="-1"
aria-hidden="true"
>
Compteur Gazpar
</object>
<h3>Gazpar</h3>
<p class="text-22-white">pour le gaz</p>
<div class="provider-logo">
<img alt="grdf-logo" src="assets/partners/grdf-logo.svg" />
</div>
</div>
</div>
<div class="fluid-pipes">
<picture>
<source
media="(max-width: 1200px)"
srcset="assets/fluid-icons-pipes-mobile.svg"
/>
<img src="assets/fluid-icons-pipes.svg" alt="" aria-hidden="true" />
</picture>
</div>
<div class="security">
<div class="container">
<div class="container-img">
<img src="assets/cozy-metropole-de-lyon-shield.svg" alt="" />
</div>
<p class="security-text">
Parce que nous tenons à votre confidentialité, Ecolyo utilise
<br />
<a
href="https://www.grandlyon.com/services/self-data-cloud-personnel"
alt="Cloud personnel Cozy Métropole de Lyon"
>
Cozy Métropole de Lyon</a
>, un cloud 100% personnel permettant de sécuriser toutes vos
données !
</p>
</div>
</div>
<div class="views-app">
<div class="multi-pipes">
<img
src="assets/fluid-pipes-yellow.svg"
alt=""
aria-hidden="true"
/>
</div>
<div class="screens-container">
<div class="screen consumption">
<img src="assets/screen-1.svg" alt="" />
<p><span>Suivez</span> vos consommations</p>
</div>
<div class="screen challenge">
<img src="assets/screen-2.svg" alt="" />
<p><span>Relevez</span>des défis ludiques</p>
</div>
<div class="screen ecogesture">
<img src="assets/screen-3.svg" alt="" />
<p class="no-margin-padding-bottom">
<span>Découvrez</span> des astuces efficaces
</p>
</div>
</div>
</div>
</section>
<section id="create-account">
<h2 class="text-40-white">Créez-vous un compte en deux étapes !</h2>
<div class="step">
<div class="flex">
<div class="number">1.</div>
<div class="text">
<h3 class="header">Créez votre compte Cozy Métropole de Lyon</h3>
<p class="content">
Véritable coffre-fort de la donnée personnelle, Cozy Métropole
de Lyon<br />
est un espace sécurisé auquel vous (et seulement vous) avez
accès.<br />
Avec lui, vos données de consommation sont gardées bien au chaud
(et en sécurité) !
</p>
</div>
</div>
<img src="assets/steps/step1.svg" class="steppicture" alt="" />
</div>
<div class="step">
<div class="flex">
<div class="number">2.</div>
<div class="text">
<h3 class="header">Connecter vos compteurs à Ecolyo</h3>
<p class="content">
Facture à la main, et après avoir donné votre accord, nous vous
<br />
guiderons tout au long du parcours pour connecter vos compteurs.
<br />
Ensuite, nul besoin d’y toucher : vos données seront
automatiquement
<br />
mises à jour.
</p>
</div>
</div>
<img src="assets/steps/step2.svg" class="steppicture" alt="" />
</div>
<div class="steps-buttons-container">
<a
href="https://manager.cozygrandlyon.cloud/v2/grdlyon/ecolyo"
target="_blank"
class="createAccountButton sign-up"
>
Créez-vous un compte !
<img src="assets/launch-black.svg" alt="" />
</a>
<a
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
target="_blank"
class="sign-in"
>
J'ai déjà un compte
<img src="assets/launch.svg" alt="" />
</a>
</div>
</section>
<section id="about-us">
<h2 class="text-40-white">On parle de nous !</h2>
<p>Retrouvez les articles parlant d’Ecolyo sur ces plateformes :</p>
<div class="carousel-container">
<button class="carousel-prev">
<img src="assets/Arrow.svg" class="arrow-left" alt="" />
</button>
<div class="carousel-and-dots">
<div class="carousel">
<div class="carousel-slide">
<a
href="https://www.alec-lyon.org/ecolyo-mes-consommations-denergie-et-deau-a-portee-de-main/"
target="_blank"
>
<img
src="assets/logos/alec-logo.svg"
alt="Agence Locale de l'Energie et du Climat (ALEC)"
/>
</a>
<a
href="https://www.eaudugrandlyon.com/voir-actualite.aspx?ida=145"
target="_blank"
>
<img
src="assets/logos/epgl-logo.svg"
alt="Eau publique du Grand Lyon (EPGL)"
/>
</a>
<a
href="https://www.grandlyon.com/services/habitat-et-logement/consommer-moins-denergie-chez-soi"
target="_blank"
>
<img
src="assets/legal/mglLogo.svg"
alt="Métropole du Grand Lyon"
/>
</a>
<a
href="https://wiki.resilience-territoire.ademe.fr/wiki/Service_de_suivi_des_consommations_%C3%A9lectricit%C3%A9,_gaz_et_eau"
target="_blank"
>
<img
src="assets/logos/ademe-logo.svg"
alt="Appel à projet ADEME"
/>
</a>
<a
href="https://met.grandlyon.com/ecolyo-prenez-le-controle-sur-vos-consommations-denergie/"
target="_blank"
>
<img
src="assets/logos/met-logo.svg"
alt="Le Magasine de la Métropole de Lyon"
/>
</a>
<!-- <a
href="https://www.sytral.fr/TPL_CODE/TPL_ACTUALITE/PAR_TPL_IDENTIFIANT/5326/440-sytral.htm"
target="_blank"
>
<img src="https://picsum.photos/200" alt="Sytral" />
</a>
<a
href="https://tribunedelyon.fr/economie/energie-le-grand-lyon-lance-une-appli-pour-piloter-sa-consommation/"
target="_blank"
>
<img src="https://picsum.photos/200" alt="Tribune de Lyon" />
</a>
<a
href="https://www.lesechos.fr/pme-regions/auvergne-rhone-alpes/a-lyon-le-quartier-de-la-confluence-vise-lenergie-positive-1909258"
target="_blank"
>
<img src="https://picsum.photos/200" alt="Les Échos" />
</a> -->
</div>
</div>
<div class="carousel-dots"></div>
</div>
<button class="carousel-next">
<img src="assets/Arrow.svg" class="arrow-right" />
</button>
</div>
</section>
<section id="share">
<div class="blur-container">
<div class="yellow-blur"></div>
<img src="assets/bullhorn.svg" alt="" />
</div>
<h2>Vous aussi, parlez d'Ecolyo autour de vous!</h2>
<p>
N’hésitez pas à parler d’Ecolyo à vos amis et proches ! <br />
Il vous suffit de cliquer sur les boutons juste en dessous pour
accéder aux réseaux sociaux :
</p>
<div class="logos-container">
<a
href="https://www.facebook.com/sharer/sharer.php?u=https://ecolyo.com"
target="_blank"
>
<img src="assets/socials/facebook.svg" alt="Facebook" />
</a>
<a
href="https://twitter.com/intent/tweet?url=⚡ J’utilise Ecolyo, l'application gratuite développée par la Métropole de Lyon, pour suivre et réduire mes consommations d'eau et d’énergie. Et toi tu fais quoi ? 👉https://ecolyo.com/"
target="_blank"
>
<img src="assets/socials/Twitter.svg" alt="Twitter" />
</a>
<a
href="https://www.instagram.com/?url=https://ecolyo.com"
target="_blank"
>
<img src="assets/socials/Insta.svg" alt="Instagram" />
</a>
<a
href="https://www.linkedin.com/shareArticle?mini=true&url=https://ecolyo.com&title=Electricité, gaz, eau : Ecolyo l'appli pour réduire ses consos à Lyon"
target="_blank"
>
<img src="assets/socials/Linkedin.svg" alt="LinkedIn" />
</a>
</div>
</section>
</main>
<footer>
<div class="logos-footer" aria-label="Logo des financeurs">
<img
class="gl"
src="assets/legal/mglLogo.svg"
alt="Logo Métropole de Lyon"
/>
<img
class="gouv"
src="assets/legal/Gouvernement.svg"
alt="Logo du gouvernement Français"
/>
<img
class="tiga"
src="assets/legal/BDT.svg"
alt="Logo de la Banque des Territoires"
/>
<img
class="territory"
src="assets/legal/2030TI.svg"
alt="Logo du programme France 2030"
/>
<img
class="territory"
src="assets/legal/logo-eu-funding.svg"
alt="Logo Financé par l'Union Européenne"
/>
</div>
<div class="contact">
<span>Il vous reste des questions ?</span>
<a
class="footerLink"
href="https://support.grandlyon.com/ecolyo/"
target="_blank"
>
Contactez-nous
</a>
</div>
<div class="legal-notice">
<a class="footerLink" href="mentions-legales.html">Mentions légales</a>
<a class="footerLink" href="accessibilite.html">Accessibilité</a>
</div>
<div class="info">
<a href="https://www.grandlyon.com/" target="_blank">
<img src="assets/legal/info.svg" alt="" />
Un site de la Métropole de Lyon
</a>
</div>
</footer>
</body>
<script>
const navBar = document.querySelector('nav');
//smooth scroll
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
let item = document.querySelector(this.getAttribute('href'));
window.scrollTo({
top: item.offsetTop - 50,
behavior: 'smooth',
});
});
});
//Hide menu on scroll down
let scrollUp = true;
let hideDistance = 200;
let headerHeight = '6.25rem';
let vw;
let vh;
let scrollHeightSent = false;
const setDeviceWidth = () => {
vw = Math.max(
document.documentElement.clientWidth || 0,
window.innerWidth || 0
);
};
const setDeviceHeight = () => {
vh = Math.max(
document.body.scrollHeight,
document.body.offsetHeight,
document.documentElement.clientHeight,
document.documentElement.scrollHeight,
document.documentElement.offsetHeight
);
};
onload = setDeviceWidth();
window.addEventListener('resize', () => {
setDeviceWidth();
});
window.addEventListener('load', () => {
setDeviceHeight();
});
window.addEventListener('scroll', (event) => {
if (vw < 1200) {
if (scrollY > hideDistance) {
scrollUp = this.oldScroll > this.scrollY;
if (scrollUp === false) {
navBar.style.marginTop = '-' + headerHeight;
}
if (scrollUp === true) {
navBar.style.marginTop = '0';
}
this.oldScroll = this.scrollY;
}
}
// Send scroll event to matomo if user has scrolled 50% of page, then disable event
if (scrollY > vh / 2 && !scrollHeightSent) {
scrollHeightSent = true;
_paq.push(['trackEvent', 'Scroll_depth', '50%']);
}
});
//el carousel
document.addEventListener('DOMContentLoaded', function () {
const carousel = document.querySelector('.carousel');
const slides = document.querySelectorAll('.carousel-slide img');
const prevBtn = document.querySelector('.carousel-prev');
const nextBtn = document.querySelector('.carousel-next');
const dotsContainer = document.querySelector('.carousel-dots');
const totalSlides = slides.length;
// Initialize currentIndex to center around the second slide
let currentIndex = 0;
// Set up event listeners for prev and next buttons
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
updateCarousel();
});
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % totalSlides;
updateCarousel();
});
// Generate dots
slides.forEach((_, index) => {
const dot = document.createElement('span');
dot.classList.add('carousel-dot');
dot.addEventListener('click', () => {
currentIndex = index;
updateCarousel();
});
dotsContainer.appendChild(dot);
});
// Update carousel position and active dot
function updateCarousel() {
carousel.style.transform = `translateX(${-currentIndex * 110}px)`;
document.querySelectorAll('.carousel-dot').forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
}
// Initialize carousel
updateCarousel();
});
</script>
<script src="./matomo.js" defer></script>
</html>