<!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
href="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css
"
rel="stylesheet"
/>
<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>
Electricité, gaz, eau : Ecolyo l'appli pour réduire ses consos à Lyon
</title>
<!-- Open Graph general -->
<meta content="Ecolyo" property="og:site_name" />
<meta
content="Electricité, gaz, eau : Ecolyo l'appli pour réduire ses consos à Lyon"
property="og:title"
/>
<meta
content="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."
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="index.html">
<img src="./assets/ecolyo-icon.svg" alt="" />
Ecolyo
</a>
<div class="separator"></div>
<a
href="https://www.grandlyon.com/"
aria-label="Accéder au site de la métropole de Lyon"
title="Accéder au site de la métropole de Lyon (nouvel onglet)"
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 nav-sign-in"
href="https://manager.cozygrandlyon.cloud/v2/grdlyon/login"
title="Se connecter à Ecolyo (nouvel onglet)"
>Se connecter
<img src="assets/launch.svg" alt="" />
</a>
<a
class="external-link nav-sign-up"
href="https://manager.cozygrandlyon.cloud/v2/grdlyon/ecolyo"
title="Créer un compte Ecolyo (nouvel onglet)"
>Se créer un compte <img src="assets/launch-black.svg" alt=""
/></a>
</div>
</nav>
</header>
<main>
<section id="service">
<div class="main-cta">
<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>
<p 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.
</p>
<div class="button-container-cta">
<a
href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
target="_blank"
class="sign-up robots-nocontent"
title="Créer un compte Ecolyo (nouvel onglet)"
>
Créer un compte
<img src="assets/launch-black.svg" alt="" />
</a>
<a
href="https://manager.cozygrandlyon.cloud/v2/grdlyon/login"
target="_blank"
class="sign-in robots-nocontent"
title="Se connecter à Ecolyo (nouvel onglet)"
>
Connectez vous !
<img src="assets/launch.svg" alt="" />
</a>
</div>
</div>
</div>
<div class="illu">
<!-- Use object tag instead of img to not have a blurry svg on IOS -->
<object
id="illu"
type="image/svg+xml"
data="assets/illu-landing.svg"
tabindex="-1"
aria-hidden="true"
>
Illustration Ecolyo
</object>
</div>
</div>
</section>
<section id="how-it-works">
<h2 class="text-40-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>
<h3 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 :
</h3>
<ul class="compteurs">
<li class="bloc elec-border">
<object
class="compteur-img"
type="image/svg+xml"
data="./assets/partners/Linky.svg"
tabindex="-1"
aria-hidden="true"
>
Compteur Linky
</object>
<div>
<p class="compteur-title elec-color">Linky</p>
<p class="text-22-white">pour l’électricité</p>
</div>
<img alt="Logo Enedis" src="assets/partners/enedis-logo.svg" />
</li>
<span class="compteurs-ou" aria-hidden="true">ou</span>
<li class="bloc water-border">
<object
class="compteur-img"
type="image/svg+xml"
data="./assets/partners/Teleo.svg"
tabindex="-1"
aria-hidden="true"
>
Compteur Téléo
</object>
<div>
<p class="compteur-title water-color">Téléo</p>
<p class="text-22-white">pour l'eau</p>
</div>
<img
alt="Logo Eau Publique du Grand Lyon"
src="assets/partners/epgl-logo.svg"
/>
</li>
<span class="compteurs-ou" aria-hidden="true">ou</span>
<li class="bloc gaz-border">
<object
class="compteur-img"
type="image/svg+xml"
data="./assets/partners/Gazpar.svg"
tabindex="-1"
aria-hidden="true"
>
Compteur Gazpar
</object>
<div>
<p class="compteur-title gaz-color">Gazpar</p>
<p class="text-22-white">pour le gaz</p>
</div>
<img alt="Logo GRDF" src="assets/partners/grdf-logo.svg" />
</li>
</ul>
<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="" />
<h4 class="vp">
<span>Suivez</span> <br />
vos consommations
</h4>
</div>
<div class="screen challenge">
<img src="assets/screen-2.svg" alt="" />
<h4 class="vp"><span>Relevez</span> <br />des défis ludiques</h4>
</div>
<div class="screen ecogesture">
<img src="assets/screen-3.svg" alt="" />
<h4 class="vp">
<span>Découvrez</span> <br />
des astuces efficaces
</h4>
</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">Connectez 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="sign-up"
>
Créez-vous un compte !
<img src="assets/launch-black.svg" alt="" />
</a>
<a
href="https://manager.cozygrandlyon.cloud/v2/grdlyon/login"
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="splide" aria-label="Articles parlant d'Ecolyo">
<div class="splide__track">
<div class="splide__list">
<div class="splide__slide" aria-label="Article 1 sur 5">
<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>
</div>
<div class="splide__slide" aria-label="Article 2 sur 5">
<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>
</div>
<div class="splide__slide" aria-label="Article 3 sur 5">
<a
href="https://www.bfmtv.com/lyon/replay-emissions/bonsoir-lyon/chauffage-eau-chaude-appareils-trois-conseils-pour-reduire-sa-facture-d-electricite_VN-202401220761.html"
target="_blank"
>
<img
src="assets/logos/bfm-logo.svg"
alt="Business FM (BFM)"
/>
</a>
</div>
<div class="splide__slide" aria-label="Article 4 sur 5">
<a
href="https://tribunedelyon.fr/economie/energie-le-grand-lyon-lance-une-appli-pour-piloter-sa-consommation/"
target="_blank"
>
<img
src="assets/logos/tribune-de-lyon-logo.svg"
alt="Tribune de Lyon"
/>
</a>
</div>
<div class="splide__slide" aria-label="Article 5 sur 5">
<a
href="https://www.grdf.fr/institutionnel/actualite/newsroom/liste/communiques-presse/1er-data-challenge-2020"
target="_blank"
>
<img
src="assets/logos/grdf-logo.svg"
alt="Gaz Réseau Distribution France (GRDF)"
/>
</a>
</div>
</div>
</div>
<div class="splide-nav">
<button id="prev" aria-label="Article précédent">
<img src="assets/arrow_left.svg" alt="" />
</button>
<div class="current-page"></div>
<button id="next" aria-label="Article suivant">
<img src="assets/arrow_right.svg" alt="" />
</button>
</div>
</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"
aria-label="Facebook"
target="_blank"
title="Partager sur Facebook (nouvel onglet)"
>
<svg
aria-hidden="true"
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9.37737 18.1509H12.3208V12.4151H14.5094L14.9245 9.69811H12.3208V7.92453C12.3208 6.96855 12.8239 6.49056 13.8302 6.49056H15V4.18868C14.2956 4.06289 13.6038 4 12.9245 4C12.195 4 11.5661 4.13836 11.0377 4.41509C10.5346 4.69182 10.1321 5.10692 9.8302 5.66037C9.52832 6.21383 9.37737 6.86792 9.37737 7.62264V9.69811H7.00001V12.4151H9.37737V18.1509Z"
fill="#e3b82a"
/>
</svg>
</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/"
aria-label="X"
target="_blank"
title="Partager sur Twitter (nouvel onglet)"
>
<svg
aria-hidden="true"
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.223 2.87H18.983L12.923 9.77L20.003 19.13H14.447L10.097 13.442L5.11699 19.13H2.35699L8.77699 11.75L1.99699 2.87H7.69099L11.621 8.066L16.223 2.87ZM15.257 17.51H16.787L6.88699 4.43H5.24299L15.257 17.51Z"
fill="#e3b82a"
/>
</svg>
</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"
aria-label="Linkedin"
target="_blank"
title="Partager sur Linkedin (nouvel onglet)"
>
<svg
aria-hidden="true"
width="40"
height="41"
viewBox="0 0 40 41"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Ico22/RS / Linkedin">
<path
id="Subtract"
fill-rule="evenodd"
clip-rule="evenodd"
d="M14.4091 31.4091H14.3353H9.46026V15.6023H14.4091V31.4091ZM11.8978 13.4602C11.1099 13.4602 10.4451 13.1894 9.90344 12.6477C9.36178 12.0568 9.09094 11.392 9.09094 10.6534C9.09094 9.86551 9.36178 9.20074 9.90344 8.65907C10.4451 8.06816 11.1099 7.77271 11.8978 7.77271C12.6856 7.77271 13.3504 8.06816 13.8921 8.65907C14.483 9.20074 14.7784 9.86551 14.7784 10.6534C14.7784 11.392 14.483 12.0568 13.8921 12.6477C13.3504 13.1894 12.6856 13.4602 11.8978 13.4602ZM32.7273 22.767V31.4091H27.8523V23.7272C27.8523 23.1363 27.8277 22.6685 27.7784 22.3238C27.7292 21.9299 27.6307 21.4867 27.483 20.9943C27.3845 20.5019 27.1383 20.1326 26.7444 19.8863C26.3504 19.6401 25.858 19.517 25.2671 19.517C24.1345 19.517 23.3712 19.8863 22.9773 20.625C22.5834 21.3636 22.3864 22.3485 22.3864 23.5795V31.4091H17.4375V15.6023H22.1648V17.7443H22.2387C22.5834 17.0549 23.1497 16.464 23.9375 15.9716C24.7747 15.4791 25.7595 15.2329 26.8921 15.2329C28.0739 15.2329 29.0587 15.4299 29.8466 15.8238C30.6837 16.1685 31.2993 16.7102 31.6932 17.4488C32.0872 18.1382 32.358 18.9015 32.5057 19.7386C32.6534 20.5757 32.7273 21.5852 32.7273 22.767Z"
fill="#e3b82a"
/>
</g>
</svg>
</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/"
aria-label="Accéder au site de la métropole de Lyon"
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 - 80,
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
);
};
window.addEventListener('resize', () => {
setDeviceWidth();
setDeviceHeight();
});
window.addEventListener('load', () => {
setDeviceWidth();
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%']);
}
});
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll(
'main section#service, main section#create-account, main section#about-us'
);
const navLinks = document.querySelectorAll('nav .navlink');
let currentSection = '';
for (let section of sections) {
const sectionTop = section.offsetTop - 80; // Adjust for header height
if (pageYOffset < sectionTop + section.clientHeight) {
currentSection = section.getAttribute('id');
break;
}
}
navLinks.forEach((link) => {
link.classList.remove('active');
if (link.getAttribute('href').includes(currentSection)) {
link.classList.add('active');
}
});
});
let articleNumber = document.querySelectorAll('.splide__slide').length;
// Carousel based on splide => https://splidejs.com/
document.addEventListener('DOMContentLoaded', function () {
var splide = new Splide('.splide', {
type: 'slide',
perPage: 'auto',
focus: 'first',
gap: '40px',
fixedWidth: '200px',
pagination: false,
arrows: false,
drag: false,
breakpoints: {
1200: {
type: 'loop',
perPage: 1,
gap: '20px',
padding: '60px',
focus: 'center',
drag: true,
},
},
});
splide.mount();
const updateCurrentPage = (index) => {
document.querySelector(
'.current-page'
).innerHTML = `<span class="bold yellow">${
index + 1
}</span> sur ${articleNumber}`;
};
document
.querySelector('#prev')
.addEventListener('click', () => splide.go('-1'));
document
.querySelector('#next')
.addEventListener('click', () => splide.go('+1'));
splide.on('move', (newIndex) => {
updateCurrentPage(newIndex);
});
updateCurrentPage(0);
});
</script>
<script src="
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js
"></script>
<script src="./matomo.js" defer></script>
</html>