diff --git a/_variables.scss b/_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d969df65cb78bc279052746b1eb1872407b834d8
--- /dev/null
+++ b/_variables.scss
@@ -0,0 +1,16 @@
+$yellow: #f1c017;
+$black: #121212;
+$elec-color: #d87b39;
+$gaz-color: #45d1b8;
+$water-color: #3a98ec;
+$grey: #a0a0a0;
+$grey-blue: #454b4e;
+$green: #4dab9a;
+$orange: #ffa344;
+$pink: #e255a1;
+$blue: #529cca;
+$red: #ff7369;
+$purple: #9a6dd7;
+
+$small-device: 768px;
+$large-device: 1200px;
diff --git a/assets/action-view.jpg b/assets/action-view.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..be89e070db759f7f581a60490aafa0bcae6120e1
Binary files /dev/null and b/assets/action-view.jpg differ
diff --git a/assets/anim-comparison.webp b/assets/anim-comparison.webp
new file mode 100644
index 0000000000000000000000000000000000000000..4eedd5607f5762fcea1678b192f347fde88c1e37
Binary files /dev/null and b/assets/anim-comparison.webp differ
diff --git a/assets/anim-connectors.webp b/assets/anim-connectors.webp
new file mode 100644
index 0000000000000000000000000000000000000000..66c18fcd5e7b0a9965f680ce4a60d108e3a24dbc
Binary files /dev/null and b/assets/anim-connectors.webp differ
diff --git a/assets/anim-method.webp b/assets/anim-method.webp
new file mode 100644
index 0000000000000000000000000000000000000000..08bc69a634dd823f87ddf492088720cc047f485b
Binary files /dev/null and b/assets/anim-method.webp differ
diff --git a/assets/anim-wow.webp b/assets/anim-wow.webp
new file mode 100644
index 0000000000000000000000000000000000000000..d1dd3ceb58b7f8b0a250d79f944b3fe2dc902bc9
Binary files /dev/null and b/assets/anim-wow.webp differ
diff --git a/assets/banner-experimentation.jpg b/assets/banner-experimentation.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..24ee907f78b13654c70f9692c9861a76e84906f7
Binary files /dev/null and b/assets/banner-experimentation.jpg differ
diff --git a/assets/challenge-view.PNG b/assets/challenge-view.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..632edc3e4beec87d88e0c9fecfe066e2c1026a5c
Binary files /dev/null and b/assets/challenge-view.PNG differ
diff --git a/assets/clouds.png b/assets/clouds.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3d3f27b04de2e1096afc43753f1c9721ae9dee8
Binary files /dev/null and b/assets/clouds.png differ
diff --git a/assets/exp-conso-graph.png b/assets/exp-conso-graph.png
new file mode 100644
index 0000000000000000000000000000000000000000..485b4d08f53d90dba513fb190d2a86cbf2e2c00f
Binary files /dev/null and b/assets/exp-conso-graph.png differ
diff --git a/assets/exp-subscribe-graph.png b/assets/exp-subscribe-graph.png
new file mode 100644
index 0000000000000000000000000000000000000000..a10bcbbda96802be1dc2ae317fca714c83e50b24
Binary files /dev/null and b/assets/exp-subscribe-graph.png differ
diff --git a/assets/glass.svg b/assets/glass.svg
new file mode 100644
index 0000000000000000000000000000000000000000..778ae77ef2f9ee1557f8d0c3ed475849284dcc25
--- /dev/null
+++ b/assets/glass.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#9AAAB4" d="M13.503 19.693l2.828 2.828-4.95 4.95-2.828-2.829z"/><path fill="#66757F" d="M1.257 29.11l5.88-5.879c.781-.781 2.047-.781 2.828 0l2.828 2.828c.781.781.781 2.047 0 2.828l-5.879 5.879c-1.562 1.563-4.096 1.563-5.658 0-1.561-1.561-1.56-4.094.001-5.656z"/><circle fill="#8899A6" cx="22.355" cy="13.669" r="13.5"/><circle fill="#BBDDF5" cx="22.355" cy="13.669" r="9.5"/></svg>
\ No newline at end of file
diff --git a/assets/icon-alert.png b/assets/icon-alert.png
new file mode 100644
index 0000000000000000000000000000000000000000..00e2dad3bf1e7be89408ea09055c55c72aac4625
Binary files /dev/null and b/assets/icon-alert.png differ
diff --git a/assets/icon-file-cabinet.png b/assets/icon-file-cabinet.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0bb92fe843a83d318b6f6f2b87cc7ff2e8708cf
Binary files /dev/null and b/assets/icon-file-cabinet.png differ
diff --git a/assets/icon-folded-hands.png b/assets/icon-folded-hands.png
new file mode 100644
index 0000000000000000000000000000000000000000..c160967a736539ea011b6141b18daee43510339d
Binary files /dev/null and b/assets/icon-folded-hands.png differ
diff --git a/assets/icon-lightbulb.png b/assets/icon-lightbulb.png
new file mode 100644
index 0000000000000000000000000000000000000000..e46cd496e60ac958b6c1ec7f5d1d5cee12857958
Binary files /dev/null and b/assets/icon-lightbulb.png differ
diff --git a/assets/icon-link.png b/assets/icon-link.png
new file mode 100644
index 0000000000000000000000000000000000000000..1cec9196d703bf72630d48413d40bd397ba33292
Binary files /dev/null and b/assets/icon-link.png differ
diff --git a/assets/icon-microscope.png b/assets/icon-microscope.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6113e8b53580c0019ebcbe0ce4cbdfd27ae165f
Binary files /dev/null and b/assets/icon-microscope.png differ
diff --git a/assets/icon-note.png b/assets/icon-note.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b2ae8c495f0f48f7c122418502742d29fc50400
Binary files /dev/null and b/assets/icon-note.png differ
diff --git a/assets/icon-speak.png b/assets/icon-speak.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3908011ce3836da4af6cc749d1740b8a76378c2
Binary files /dev/null and b/assets/icon-speak.png differ
diff --git a/assets/icon-star-struck.png b/assets/icon-star-struck.png
new file mode 100644
index 0000000000000000000000000000000000000000..51759ede841ca9f731f9c9d46619c143a18ef03e
Binary files /dev/null and b/assets/icon-star-struck.png differ
diff --git a/assets/icon-target.png b/assets/icon-target.png
new file mode 100644
index 0000000000000000000000000000000000000000..7666396137fd639651fdd4e49f4b3c7fd512456e
Binary files /dev/null and b/assets/icon-target.png differ
diff --git a/assets/icon-tools.png b/assets/icon-tools.png
new file mode 100644
index 0000000000000000000000000000000000000000..c66d940ebc048cf2b05ca638e25072bbdf54a348
Binary files /dev/null and b/assets/icon-tools.png differ
diff --git a/assets/icon-tree.png b/assets/icon-tree.png
new file mode 100644
index 0000000000000000000000000000000000000000..de196172edba82c7baeba57d1ec8d904f933474d
Binary files /dev/null and b/assets/icon-tree.png differ
diff --git a/assets/icon-wink.png b/assets/icon-wink.png
new file mode 100644
index 0000000000000000000000000000000000000000..aaa90fd8c0dfec335aa786913cd35634f3a7c94f
Binary files /dev/null and b/assets/icon-wink.png differ
diff --git a/assets/icon-wrestling.png b/assets/icon-wrestling.png
new file mode 100644
index 0000000000000000000000000000000000000000..031bfbe8199d0128738a67d6a538dd4580488beb
Binary files /dev/null and b/assets/icon-wrestling.png differ
diff --git a/assets/particles.png b/assets/particles.png
new file mode 100644
index 0000000000000000000000000000000000000000..37cc364ab756aeeda1f5ec962f7c8877ba5fb796
Binary files /dev/null and b/assets/particles.png differ
diff --git a/assets/plumber.png b/assets/plumber.png
new file mode 100644
index 0000000000000000000000000000000000000000..a46313563bfc652a44f8009790d02395449cf4bd
Binary files /dev/null and b/assets/plumber.png differ
diff --git a/assets/snowman.png b/assets/snowman.png
new file mode 100644
index 0000000000000000000000000000000000000000..6be37f69c5838e5c8a991a84bc3b0bc8edbc1889
Binary files /dev/null and b/assets/snowman.png differ
diff --git a/assets/system-usability-scale.png b/assets/system-usability-scale.png
new file mode 100644
index 0000000000000000000000000000000000000000..89f165e048b72971bbf17a9d4868a8dd9111053a
Binary files /dev/null and b/assets/system-usability-scale.png differ
diff --git a/experimentation-page.scss b/experimentation-page.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e6a0524baa7fe6eef43035a59b5996a8303bb709
--- /dev/null
+++ b/experimentation-page.scss
@@ -0,0 +1,543 @@
+.experimentation-page {
+ li {
+ list-style-type: none;
+ }
+ ul {
+ padding: 0;
+ }
+ a {
+ text-decoration: none;
+ }
+ img {
+ max-width: 100%;
+ }
+ p {
+ font-size: 1rem;
+ color: rgba(#ffffff, 0.9);
+ line-height: 1.5;
+ }
+ .green {
+ color: $green;
+ }
+ .orange {
+ color: $orange;
+ }
+ .pink {
+ color: $pink;
+ }
+ .blue {
+ color: $blue;
+ }
+ .red {
+ color: $red;
+ }
+ .yellow {
+ color: $yellow;
+ }
+ .purple {
+ color: $purple;
+ }
+ .icon {
+ padding-left: 0.75rem;
+ &::before {
+ content: "";
+ display: inline-block;
+ width: 17px;
+ height: 17px;
+ }
+ &-tools::before {
+ @extend .icon;
+ background: url("assets/icon-tools.png") no-repeat;
+ background-size: contain;
+ }
+ &-folded-hands::before {
+ @extend .icon;
+ background: url("assets/icon-folded-hands.png") no-repeat;
+ background-size: contain;
+ }
+ &-star-struck::before {
+ @extend .icon;
+ background: url("assets/icon-star-struck.png") no-repeat;
+ background-size: contain;
+ }
+ &-light-bulb::before {
+ @extend .icon;
+ background: url("assets/icon-lightbulb.png") no-repeat;
+ background-size: contain;
+ }
+ &-glass::before {
+ @extend .icon;
+ background: url("assets/glass.svg") no-repeat;
+ background-size: contain;
+ }
+ &-target::before {
+ @extend .icon;
+ background: url("assets/icon-target.png") no-repeat;
+ background-size: contain;
+ }
+ &-speak::before {
+ @extend .icon;
+ background: url("assets/icon-speak.png") no-repeat;
+ background-size: contain;
+ }
+ &-wink::before {
+ @extend .icon;
+ background: url("assets/icon-wink.png") no-repeat;
+ background-size: contain;
+ }
+ &-alert::before {
+ @extend .icon;
+ background: url("assets/icon-alert.png") no-repeat;
+ background-size: contain;
+ }
+ &-tree::before {
+ @extend .icon;
+ background: url("assets/icon-tree.png") no-repeat;
+ background-size: contain;
+ }
+ &-note::before {
+ @extend .icon;
+ background: url("assets/icon-note.png") no-repeat;
+ background-size: contain;
+ }
+ &-wrestling::before {
+ @extend .icon;
+ background: url("assets/icon-wrestling.png") no-repeat;
+ background-size: contain;
+ }
+ &-microscope::before {
+ @extend .icon;
+ background: url("assets/icon-microscope.png") no-repeat;
+ background-size: contain;
+ }
+ &-link::before {
+ @extend .icon;
+ background: url("assets/icon-link.png") no-repeat;
+ background-size: contain;
+ }
+ &-file-cabinet::before {
+ @extend .icon;
+ background: url("assets/icon-file-cabinet.png") no-repeat;
+ background-size: contain;
+ }
+ }
+ h2,
+ h3,
+ h4 {
+ color: $yellow;
+ padding-bottom: 0.75rem;
+ border-bottom: 1px solid rgba(#ffffff, 0.07);
+ }
+ h2 {
+ font-size: 1.875em;
+ line-height: 1.3;
+ margin-bottom: 0.75rem;
+ }
+ h3,
+ h4 {
+ font-size: 1rem;
+ line-height: 1.5;
+ margin-bottom: 1rem;
+ }
+ header {
+ height: calc(15vh + 75px);
+ overflow: hidden;
+ @media (min-width: $small-device) {
+ height: calc(20vh + 75px);
+ }
+ @media (min-width: $large-device) {
+ height: calc(30vh + 80px);
+ }
+ }
+ .item {
+ border: 1px solid rgba(#ffffff, 0.07);
+ padding: 1rem;
+ }
+ .banner-exp {
+ height: 100%;
+ width: 100%;
+ img {
+ display: inline-block;
+ object-fit: cover;
+ width: 100%;
+ height: 380px;
+ object-position: 20% 25%;
+ }
+ }
+ main,
+ footer {
+ background: rgb(47, 52, 55);
+ }
+ .wrapper {
+ width: 100%;
+ padding: 0 1rem;
+ @media (min-width: $large-device) {
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 0 6rem;
+ }
+ }
+ h1 {
+ font-size: 2rem;
+ padding-top: 5.2rem;
+ position: relative;
+ margin-bottom: 2.5rem;
+ @media (min-width: $small-device) {
+ font-size: 2.5rem;
+ }
+ &::before {
+ content: url("assets/glass.svg");
+ display: inline-block;
+ width: 78px;
+ position: absolute;
+ top: -44px;
+ left: 0;
+ }
+ }
+ #intro {
+ .title {
+ color: $yellow;
+ font-size: 1.25rem;
+ margin-bottom: 2rem;
+ font-style: italic;
+ border: none;
+ padding: 0;
+ }
+ p:not(.title) {
+ margin-bottom: 0.5rem;
+ }
+ .list {
+ margin: 2rem 0;
+ li {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: space-between;
+ padding-bottom: 1.5rem;
+ @media (min-width: $small-device) {
+ flex-direction: row;
+ align-items: center;
+ }
+ }
+ .item {
+ flex-basis: 80%;
+ color: $yellow;
+ position: relative;
+ padding: 1rem 1rem 1rem 3rem;
+ &::before {
+ position: absolute;
+ left: 1rem;
+ top: 1rem;
+ }
+ }
+ .item-img {
+ flex-basis: 20%;
+ text-align: center;
+ img {
+ max-width: 72px;
+ }
+ }
+ }
+ }
+ #method {
+ .method-container {
+ margin: 2rem 0;
+ }
+ .method-number {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: space-between;
+ padding: 0.75rem 0;
+ margin-bottom: 0.5rem;
+ @media (min-width: $small-device) {
+ flex-direction: row;
+ }
+ .content {
+ flex-basis: 70%;
+ }
+ .number {
+ text-align: center;
+ flex-basis: 30%;
+ font-size: 1.5em;
+ line-height: 1.3;
+ color: $yellow;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+ @media (min-width: $small-device) {
+ margin-bottom: 0;
+ }
+ }
+ }
+ .tips-frame {
+ p {
+ color: $yellow;
+ font-weight: bold;
+ padding-left: 2rem;
+ position: relative;
+ &::before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
+ .method-test {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin: 1rem 0;
+ @media (min-width: $small-device) {
+ flex-direction: row;
+ }
+ .container-img,
+ p {
+ flex-basis: 48%;
+ }
+ .container-img {
+ margin-bottom: 0.5rem;
+ @media (min-width: $small-device) {
+ margin-bottom: 0;
+ }
+ }
+ }
+ }
+ .tips-frame {
+ padding: 1rem;
+ background: rgba($grey-blue, 0.3);
+ }
+ #results {
+ h3 {
+ font-size: 1.25rem;
+ line-height: 1.3;
+ margin-top: 1.5rem;
+ }
+ .usages {
+ margin: 2rem 0;
+ border-bottom: 1px solid rgba(#ffffff, 0.07);
+ padding-bottom: 0.5rem;
+ h4 {
+ margin-bottom: 0.5rem;
+ }
+ p {
+ font-style: italic;
+ color: $yellow;
+ }
+ }
+ .list {
+ margin: 0.5rem 0;
+ }
+ .item {
+ margin-bottom: 0.5rem;
+ span,
+ p {
+ position: relative;
+ padding-left: 2rem;
+ display: block;
+ &:before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+ }
+ .consumption {
+ margin-bottom: 2.5rem;
+ }
+ .container-habits {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin: 1rem 0 4rem;
+ @media (min-width: $small-device) {
+ flex-direction: row;
+ }
+ img {
+ margin: 0.5rem 0;
+ }
+ }
+ .col-2 {
+ flex-basis: 48%;
+ }
+ .changes {
+ .icon-wink {
+ margin-left: 0.5rem;
+ }
+ }
+ .easy {
+ margin: 2.5rem 0;
+ .sus {
+ margin-bottom: 2rem;
+ }
+ .sus-title {
+ color: $yellow;
+ margin: 2rem 0;
+ font-weight: bold;
+ }
+ .btn-more {
+ color: $orange;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding-left: 0;
+ margin: 1rem 0;
+ font-size: 1rem;
+ &:focus {
+ outline: none;
+ }
+ &::before {
+ content: "";
+ display: inline-block;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 5.5px 0 5.5px 9.5px;
+ border-color: transparent transparent transparent $orange;
+ margin-right: 0.5rem;
+ transition: 0.3s all;
+ }
+ &.arrow-down::before {
+ transform: rotate(90deg);
+ }
+ }
+ .info-sus {
+ display: none;
+ p {
+ color: $orange;
+ padding-left: 1rem;
+ &:first-child {
+ margin-bottom: 2.5rem;
+ }
+ }
+ &.collapsed {
+ display: block;
+ }
+ }
+ }
+ .reasons {
+ margin: 2rem 0 1rem;
+ }
+ .container-alert {
+ h4,
+ p {
+ color: $red;
+ }
+ }
+ .alert {
+ display: flex;
+ justify-content: space-between;
+ & > div:first-child {
+ flex-basis: 75%;
+ }
+ & > div:last-child {
+ flex-basis: 18%;
+ padding-top: 2rem;
+ }
+ .icon-alert {
+ &:before {
+ top: 5px;
+ }
+ }
+ }
+ .features {
+ ul {
+ margin: 3rem 0;
+ }
+ }
+ }
+ #tasks {
+ .col-task {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ border-bottom: 1px solid rgba(#ffffff, 0.07);
+ padding-bottom: 1rem;
+ margin-bottom: 2rem;
+ &:nth-of-type(1) {
+ margin-top: 4rem;
+ }
+ .container-img {
+ flex-basis: 30%;
+ margin-bottom: 1rem;
+ @media (min-width: $small-device) {
+ margin-bottom: 0;
+ }
+ img {
+ max-width: 60%;
+ @media (min-width: $small-device) {
+ max-width: 100%;
+ }
+ }
+ }
+ .task-content {
+ flex-basis: 70%;
+ }
+ .item {
+ margin-bottom: 2rem;
+ }
+ &:nth-child(even) {
+ flex-direction: column-reverse;
+ .container-img {
+ padding: 0;
+ text-align: center;
+ @media (min-width: $small-device) {
+ padding-left: 1rem;
+ text-align: initial;
+ }
+ }
+ .task-content {
+ padding: 0;
+ @media (min-width: $small-device) {
+ padding-right: 3rem;
+ }
+ }
+ }
+ &:nth-child(odd) {
+ flex-direction: column;
+ .container-img {
+ padding: 0;
+ text-align: center;
+ @media (min-width: $small-device) {
+ padding-right: 1rem;
+ text-align: initial;
+ }
+ }
+ .task-content {
+ padding: 0;
+ @media (min-width: $small-device) {
+ padding-left: 3rem;
+ }
+ }
+ }
+ @media (min-width: $small-device) {
+ &:nth-child(odd),
+ &:nth-child(even) {
+ flex-direction: row;
+ }
+ }
+ }
+ }
+ .container-team {
+ margin: 3rem 0;
+ .msg {
+ font-weight: bold;
+ margin-bottom: 1rem;
+ }
+ .yellow {
+ margin-bottom: 2rem;
+ font-weight: bold;
+ }
+ .text-bold {
+ font-weight: bold;
+ margin: 1.5rem 0 3rem;
+ }
+ .team {
+ text-align: right;
+ font-size: 1.25em;
+ line-height: 1.3;
+ font-weight: bold;
+ }
+ }
+ #contact-form {
+ width: 100%;
+ height: 221px;
+ }
+}
diff --git a/experimentation_page.html b/experimentation_page.html
new file mode 100644
index 0000000000000000000000000000000000000000..c3d9ce82c5232ecc14a4a75cc6b909c3ae4e6f04
--- /dev/null
+++ b/experimentation_page.html
@@ -0,0 +1,366 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description"
+ content="Ecolyo, Premiers retours utilisateurs" />
+ <link rel="stylesheet" href="./style.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" />
+ <title>ECOLYO - Premiers retours utilisateurs</title>
+</head>
+<body class="experimentation-page">
+ <header>
+ <nav>
+ <div class="main-logo">
+ <img src="assets/logo-with-text.svg" alt="ecolyo-logo-with-text" />
+ <img src="assets/beta.svg" alt="beta-logo" class="beta-logo" />
+ </div>
+ <div class="links">
+ <a href="#intro">Intro</a>
+ <a class="navlink" href="#method">Méthode</a>
+ <a class="navlink" href="#results">Résultats</a>
+ <a class="navlink" href="#tasks">Nos tâches à venir</a>
+ <a class="navlink" href="#contact">Contact</a>
+ </div>
+ </nav>
+ <div class="banner-exp">
+ <img src="assets/banner-experimentation.jpg" alt="surface de la terre">
+ </div>
+ </header>
+ <main>
+ <div class="wrapper">
+ <h1>ECOLYO - Premiers retours utilisateurs</h1>
+ <section id="intro">
+ <h2 class="title">Commencez à économiser de l'énergie !</h2>
+ <p>A la fin de l'année 2020, l'équipe du service Ecolyo a souhaité proposer à un petit groupe de testeurs d'essayer une
+ première version de l'application.</p>
+ <p>Cette synthèse a pour objectif de vous partager succinctement les résultats de ces tests.</p>
+ <p>La version d'Ecolyo évaluée ici possède uniquement un premier niveau de fonctionnalités simples.</p>
+ <p>L'objectif de ces tests était de répondre à trois questions :</p>
+ <ul class="list">
+ <li>
+ <span class="item icon-tools">L'application propose-t-elle un service utile ?</span>
+ <span class="item-img">
+ <img src="assets/particles.png" alt="icone de particule">
+ </span>
+ </li>
+ <li>
+ <span class="item icon-folded-hands">Est-ce facile d'utiliser Ecolyo ?</span>
+ <span class="item-img">
+ <img src="assets/clouds.png" alt="homme sur un nuage tenant des éclairs">
+ </span>
+ </li>
+ <li>
+ <span class="item icon-star-struck">Quelle(s) fonctionnalité(s) aimeriez-vous voir apparaître dans Ecolyo ?</span>
+ <span class="item-img">
+ <img src="assets/snowman.png" alt="bonhomme de neige sur un radiateur">
+ </span>
+ </li>
+ </ul>
+ </section>
+ <section id="method">
+ <h2>Méthodes</h2>
+ <p>Pour répondre à ces trois questions deux méthodologies différentes ont été utilisées :</p>
+ <div class="method-container">
+ <h3>Une méthode quantitative :</h3>
+ <div class="method-number">
+ <p class="content">Consiste à diffuser l'application à un grand nombre de testeurs et recueillir leurs retours via un questionnaire.
+ </p>
+ <p class="number">80 personnes</p>
+ </div>
+ <div class="tips-frame">
+ <p class="icon-light-bulb">Ce retour d'expérience a été obtenu grâce au travail mené dans le cadre du DATA Challenge, concours organisé par
+ Enedis,
+ GRDF, l'ADEME et le Ministère de la Transition Energétique à l'automne 2020. Ecolyo y a d'ailleurs reçu le 3ème prix
+ du
+ Jury lors de ce concours !</p>
+ </div>
+ </div>
+ <div class="method-container">
+ <h3>Une méthode qualitative :</h3>
+ <div class="method-number">
+ <p class="content">Consiste à suivre un faible nombre de testeurs, individuellement, pendant une heure lors de son parcours dans
+ l'application. Nous observons ici ses remarques, ses réactions, ses parcours, etc...
+ </p>
+ <p class="number">6 personnes</p>
+ </div>
+ <div class="method-test">
+ <div class="container-img">
+ <img src="assets/anim-method.webp" alt="animation d'un laboratoire">
+ </div>
+ <p>A la suite de ce test, l'application était remise au testeurs pour plusieurs semaines et leurs utilisation était
+ ensuite
+ évaluée par un questionnaire en ligne.</p>
+ </div>
+ </div>
+ </section>
+ <section id="results">
+ <h2>Résultats</h2>
+ <h3>L'application propose-t-elle un service utile ?</h3>
+ <p>Pour synthétiser les retours concernant Ecolyo nous pouvons dire que <strong>ce premier niveau de service présente une réelle utilité perçue</strong></p>
+ <div class="usages">
+ <h4>Les usages principaux de l'applications</h4>
+ <p>Plusieurs réponses possibles</p>
+ <ul class="list">
+ <li class="item">
+ <span class="green icon-glass">
+ Suivre mes consommations d’énergies = 100% des répondants
+ </span>
+ </li>
+ <li class="item">
+ <span class="orange icon-target">
+ Me lancer un défi et suivre son avancement = 50% des répondants
+ </span>
+ </li>
+ <li class="item">
+ <span class="pink icon-light-bulb">
+ Consulter les écogestes = 33,3 % des répondants
+ </span>
+ </li>
+ </ul>
+ <p>Réponses des personnes ayant participé aux tests utilisateurs à la suite de la période d'autonomie (méthode
+ qualitative)</p>
+ </div>
+ <div class="consumption">
+ <h4>Plus fort suivi des consommations !</h4>
+ <p>Nous avons pu observer que le suivi des consommations est rendu plus fréquent grâce à l'existence et à l'utilisation
+ de
+ l'application. Cela illustre également une prise de conscience des dépenses énergétiques.</p>
+ <img src="assets/exp-conso-graph.png" alt="diagramme à barres">
+ </div>
+ <div class="changes">
+ <h4>Des changements d'habitudes ont également été relevés par les testeurs</h4>
+ <div class="container-habits">
+ <div class="col-2">
+ <div class="item">
+ <p class="orange icon-speak">Douches moins longues</p>
+ </div>
+ <img src="assets/anim-wow.webp" alt="homme qui dit wow">
+ <div class="item">
+ <p class="pink icon-speak">Je fais un peu plus attention à ma consommation (par exemple j'essaie d'éteindre mon ordi plus souvent)</p>
+ </div>
+ </div>
+ <div class="col-2">
+ <div class="item">
+ <p class="green icon-speak">On vivait les lumières allumées dans beaucoup de pièces. Maintenant j'ouvre les fenêtres (notamment les chambres)
+ pour
+ faire entrer la lumière naturelle. Je fais attention à décongeler au réfrigérateur et non au micro-ondes. Même si
+ les
+ compteurs d'eau ne sont pas reliés on fait plus attention aussi à la consommation d'eau et notamment d'eau chaude.
+ </p>
+ </div>
+ <div class="item icon-speak">
+ <p class="blue">Eteindre la lumière en quittant une pièce, veiller à ne plus laisser les appareils en veille ou en charge
+ </p>
+ </div>
+ </div>
+ </div>
+ <p>Cependant pour être encore plus pertinente l'application Ecolyo devra proposer de nouvelles fonctionnalités ! Et
+ là -dessus, nos testeurs n'ont pas manqué d'idées. <span class="icon-wink"></span></p>
+ </div>
+ <div class="easy">
+ <h3>Est-ce facile d'utiliser Ecolyo ?</h3>
+ <p>L'interface sobre et simple a plu à la totalité des testeurs. La visualisation est très facile même si on peut noter
+ des
+ attentes supplémentaires du coté de la manipulation des données (plus de comparaison, navigation plus simple entre les
+ fluides, plus d'infos contextualisées, etc.).</p>
+ <div class="sus">
+ <p class="sus-title">Score au System Usability Scale : 69,5/100</p>
+ <img src="assets/system-usability-scale.png" alt="scale usability scale">
+ <button class="btn-more" id="btn-sus">En savoir plus sur le System Usability Scale</button>
+ <div class="info-sus">
+ <p>Le SUS est un questionnaire créé par John Brooke en 1986, pour répondre à un besoin de mesure rapide d’un système
+ électronique. Le SUS se compose de dix questions qui permettent de recueillir le point de vue subjectif de
+ l’utilisateur
+ sur un système ou un service.</p>
+ <p>Le SUS se base sur une échelle de Likert qui permet à l’utilisateur de répondre sur une échelle en 5 ou 7 points de
+ “Pas
+ du tout d’accord†à “Tout à fait d’accordâ€. Le SUS donne un score unique représentant une mesure composite de la
+ convivialité générale du service étudié.</p>
+ </div>
+ </div>
+ <div class="access">
+ <h4>Un accès au service à simplifier</h4>
+ <p>L'accès à l'application n'est cependant pas aisée. La création de compte est assez simple, même si la compréhension
+ de
+ ce qu'est Cozy est à améliorer.</p>
+ <div class="reasons">
+ <h4 class="blue">Pour quelle(s) raison(s) n’avez-vous pas pu vous inscrire au service ?</h4>
+ <img src="assets/exp-subscribe-graph.png" alt="diagramme à barre horizontale">
+ </div>
+ <div class="container-alert">
+ <h4>Points d'alertes !</h4>
+ <div class="alert">
+ <div>
+ <div class="item">
+ <p class="icon-alert">Sur un groupe de 218 personnes 80 personnes soit environ 37% des utilisateurs ont pu accéder au service. L'accès
+ au
+ service est donc un point à améliorer grandement.</p>
+ </div>
+ <div class="item">
+ <p class="icon-alert">Les connecteurs qui permettent de récupérer la donnée énergétique ou eau restent encore trop instables pour
+ imaginer un
+ déploiement grand public d'Ecolyo.</p>
+ </div>
+ </div>
+ <div>
+ <img src="assets/plumber.png" alt="illustration d'un plombier">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="features">
+ <h3>Quelle(s) fonctionnalité(s) aimeriez-vous voir apparaître dans Ecolyo ?</h3>
+ <p>Ces tests ont été l'occasion d'évaluer les fonctionnalités attendues par les utilisateurs. Après analyse, nous
+ retenons
+ principalement :</p>
+ <ul>
+ <li class="item"><span class="green icon-tree">M'accompagner pour baisser ma consommation d'énergie</span></li>
+ <li class="item"><span class="orange icon-target">M'aider à identifier les moments où je consomme dans la journée et les appareils qui consomment le
+ plus</span></li>
+ <li class="item"><span class="purple icon-note">Me proposer un bilan tous les mois.</span></li>
+ <li class="item"><span class="red icon-alert">M'alerter en cas de surconsommation</span></li>
+ <li class="item"><span class="yellow icon-wrestling">Me comparer pour savoir si je consomme normalement ou non.</span></li>
+ </ul>
+ </div>
+ </section>
+ <section id="tasks">
+ <h2>Nos tâches à venir !</h2>
+ <p>Fort de ces retours nous allons poursuivre le travail sur Ecolyo dans différents axes :</p>
+ <div class="col-task">
+ <div class="container-img">
+ <img src="assets/anim-connectors.webp" alt="animation câble usb">
+ </div>
+ <div class="task-content">
+ <div class="item">
+ <p class="yellow icon-link">Améliorer les connecteurs</p>
+ </div>
+ <p>Simplifier et fiabiliser techniquement l'accès à l'application est crucial pour envisager un passage a l'échelle.</p>
+ </div>
+ </div>
+ <div class="col-task">
+ <div class="task-content">
+ <div class="item">
+ <p class="yellow icon-wrestling">Pouvoir se comparer !</p>
+ </div>
+ <p>Comme observé dans les tests, la possibilité de comparer sa consommation à une norme est une fonctionnalité clé que nous
+ ajouterons pour la version grand public d'Ecolyo.</p>
+ </div>
+ <div class="container-img"><img src="assets/anim-comparison.webp" alt="animation homme"></div>
+ </div>
+ <div class="col-task">
+ <div class="container-img">
+ <img src="assets/challenge-view.png" alt="ecran d'un défi">
+ </div>
+ <div class="task-content">
+ <div class="item">
+ <p class="yellow icon-target">Mieux accompagner dans les défis !</p>
+ </div>
+ <p>La partie défi était un élément manquant de clarté dans les actions à réaliser, nous l'avons donc entièrement
+ repensée.</p>
+ </div>
+ </div>
+ <div class="col-task">
+ <div class="task-content">
+ <div class="item">
+ <p class="yellow icon-file-cabinet">Plus d'informations mais mieux diffusées !</p>
+ </div>
+ <p>Mieux diffuser certaines informations et simplifier la présentation des écogestes sont des éléments sur lesquels nous
+ travaillons en ce moment également.</p>
+ </div>
+ <div class="container-img"><img src="assets/action-view.jpg" alt="ecran d'un cogeste"></div>
+ </div>
+ <div class="container-team">
+ <p class="msg">Nous profitons de cette synthèse pour vous remercier de l'intérêt que vous portez au projet !</p>
+ <p class="yellow">Vous êtes 195 inscrits à ce jour !</p>
+ <p>Nous vous solliciterons prochainement pour des tests sur cette nouvelle version ! <span class="icon-wink"></span><span class="icon-microscope"></span></p>
+ <p class="text-bold">A très vite,</p>
+ <p class="team">L'équipe Ecolyo</p>
+ </div>
+ </section>
+ <section id="contact">
+ <h2>Nous contacter</h2>
+ <iframe id="contact-form"
+ src="https://form.typeform.com/c/q1n59U?typeform-medium=embed-snippet">
+ </iframe>
+ </section>
+ </div>
+ </main>
+ <footer>
+ <div class="content">
+ <div class="bottom wrapper">
+ <div class="logos-footer">
+ <img src="assets/logo-grandlyon.svg" alt="logo-grandlyon" />
+ <img src="assets/logo-tiga.svg" alt="logo-tiga" />
+ </div>
+ <div class="info">
+ <img src="assets/info.svg" alt="info-métropole" />
+ <a href="https://www.grandlyon.com/" target="_blank">
+ <p>Un site de la Métropole de Lyon</p>
+ </a>
+ </div>
+ </div>
+ </div>
+ </footer>
+ <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 - 90,
+ behavior: "smooth",
+ });
+ });
+ });
+
+ //Hide menu on scroll down
+ let scrollUp = true;
+ let hideDistance = 200;
+
+ let headerHeight = "6.25rem";
+ let vw;
+ const setDeviceWidth = () => {
+ vw = Math.max(
+ document.documentElement.clientWidth || 0,
+ window.innerWidth || 0
+ );
+ };
+
+ onload = setDeviceWidth();
+ window.addEventListener("resize", () => {
+ setDeviceWidth();
+ });
+
+ window.addEventListener("scroll", () => {
+ 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;
+ }
+ }
+ });
+ const btnCollapse = document.querySelector('#btn-sus');
+ const infoSus = document.querySelector('.info-sus');
+ btnCollapse.addEventListener('click', (e) => {
+ e.preventDefault()
+ btnCollapse.classList.toggle('arrow-down');
+ infoSus.classList.toggle('collapsed');
+ })
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 94d55937b1b6661063f3cf14fff25c79303361fb..d8f5ac1f718ab1d785da4171524180a9c268d160 100644
--- a/style.css
+++ b/style.css
@@ -1,10 +1,550 @@
+.experimentation-page li {
+ list-style-type: none;
+}
+.experimentation-page ul {
+ padding: 0;
+}
+.experimentation-page a {
+ text-decoration: none;
+}
+.experimentation-page img {
+ max-width: 100%;
+}
+.experimentation-page p {
+ font-size: 1rem;
+ color: rgba(255, 255, 255, 0.9);
+ line-height: 1.5;
+}
+.experimentation-page .green {
+ color: #4dab9a;
+}
+.experimentation-page .orange {
+ color: #ffa344;
+}
+.experimentation-page .pink {
+ color: #e255a1;
+}
+.experimentation-page .blue {
+ color: #529cca;
+}
+.experimentation-page .red {
+ color: #ff7369;
+}
+.experimentation-page .yellow {
+ color: #f1c017;
+}
+.experimentation-page .purple {
+ color: #9a6dd7;
+}
+.experimentation-page .icon, .experimentation-page .icon-file-cabinet::before, .experimentation-page .icon-link::before, .experimentation-page .icon-microscope::before, .experimentation-page .icon-wrestling::before, .experimentation-page .icon-note::before, .experimentation-page .icon-tree::before, .experimentation-page .icon-alert::before, .experimentation-page .icon-wink::before, .experimentation-page .icon-speak::before, .experimentation-page .icon-target::before, .experimentation-page .icon-glass::before, .experimentation-page .icon-light-bulb::before, .experimentation-page .icon-star-struck::before, .experimentation-page .icon-folded-hands::before, .experimentation-page .icon-tools::before {
+ padding-left: 0.75rem;
+}
+.experimentation-page .icon::before, .experimentation-page .icon-file-cabinet::before, .experimentation-page .icon-link::before, .experimentation-page .icon-microscope::before, .experimentation-page .icon-wrestling::before, .experimentation-page .icon-note::before, .experimentation-page .icon-tree::before, .experimentation-page .icon-alert::before, .experimentation-page .icon-wink::before, .experimentation-page .icon-speak::before, .experimentation-page .icon-target::before, .experimentation-page .icon-glass::before, .experimentation-page .icon-light-bulb::before, .experimentation-page .icon-star-struck::before, .experimentation-page .icon-folded-hands::before, .experimentation-page .icon-tools::before {
+ content: "";
+ display: inline-block;
+ width: 17px;
+ height: 17px;
+}
+.experimentation-page .icon-tools::before {
+ background: url("assets/icon-tools.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-folded-hands::before {
+ background: url("assets/icon-folded-hands.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-star-struck::before {
+ background: url("assets/icon-star-struck.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-light-bulb::before {
+ background: url("assets/icon-lightbulb.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-glass::before {
+ background: url("assets/glass.svg") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-target::before {
+ background: url("assets/icon-target.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-speak::before {
+ background: url("assets/icon-speak.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-wink::before {
+ background: url("assets/icon-wink.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-alert::before {
+ background: url("assets/icon-alert.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-tree::before {
+ background: url("assets/icon-tree.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-note::before {
+ background: url("assets/icon-note.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-wrestling::before {
+ background: url("assets/icon-wrestling.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-microscope::before {
+ background: url("assets/icon-microscope.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-link::before {
+ background: url("assets/icon-link.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page .icon-file-cabinet::before {
+ background: url("assets/icon-file-cabinet.png") no-repeat;
+ background-size: contain;
+}
+.experimentation-page h2,
+.experimentation-page h3,
+.experimentation-page h4 {
+ color: #f1c017;
+ padding-bottom: 0.75rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+}
+.experimentation-page h2 {
+ font-size: 1.875em;
+ line-height: 1.3;
+ margin-bottom: 0.75rem;
+}
+.experimentation-page h3,
+.experimentation-page h4 {
+ font-size: 1rem;
+ line-height: 1.5;
+ margin-bottom: 1rem;
+}
+.experimentation-page header {
+ height: calc(15vh + 75px);
+ overflow: hidden;
+}
+@media (min-width: 768px) {
+ .experimentation-page header {
+ height: calc(20vh + 75px);
+ }
+}
+@media (min-width: 1200px) {
+ .experimentation-page header {
+ height: calc(30vh + 80px);
+ }
+}
+.experimentation-page .item {
+ border: 1px solid rgba(255, 255, 255, 0.07);
+ padding: 1rem;
+}
+.experimentation-page .banner-exp {
+ height: 100%;
+ width: 100%;
+}
+.experimentation-page .banner-exp img {
+ display: inline-block;
+ object-fit: cover;
+ width: 100%;
+ height: 380px;
+ object-position: 20% 25%;
+}
+.experimentation-page main,
+.experimentation-page footer {
+ background: #2f3437;
+}
+.experimentation-page .wrapper {
+ width: 100%;
+ padding: 0 1rem;
+}
+@media (min-width: 1200px) {
+ .experimentation-page .wrapper {
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 0 6rem;
+ }
+}
+.experimentation-page h1 {
+ font-size: 2rem;
+ padding-top: 5.2rem;
+ position: relative;
+ margin-bottom: 2.5rem;
+}
+@media (min-width: 768px) {
+ .experimentation-page h1 {
+ font-size: 2.5rem;
+ }
+}
+.experimentation-page h1::before {
+ content: url("assets/glass.svg");
+ display: inline-block;
+ width: 78px;
+ position: absolute;
+ top: -44px;
+ left: 0;
+}
+.experimentation-page #intro .title {
+ color: #f1c017;
+ font-size: 1.25rem;
+ margin-bottom: 2rem;
+ font-style: italic;
+ border: none;
+ padding: 0;
+}
+.experimentation-page #intro p:not(.title) {
+ margin-bottom: 0.5rem;
+}
+.experimentation-page #intro .list {
+ margin: 2rem 0;
+}
+.experimentation-page #intro .list li {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: space-between;
+ padding-bottom: 1.5rem;
+}
+@media (min-width: 768px) {
+ .experimentation-page #intro .list li {
+ flex-direction: row;
+ align-items: center;
+ }
+}
+.experimentation-page #intro .list .item {
+ flex-basis: 80%;
+ color: #f1c017;
+ position: relative;
+ padding: 1rem 1rem 1rem 3rem;
+}
+.experimentation-page #intro .list .item::before {
+ position: absolute;
+ left: 1rem;
+ top: 1rem;
+}
+.experimentation-page #intro .list .item-img {
+ flex-basis: 20%;
+ text-align: center;
+}
+.experimentation-page #intro .list .item-img img {
+ max-width: 72px;
+}
+.experimentation-page #method .method-container {
+ margin: 2rem 0;
+}
+.experimentation-page #method .method-number {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: space-between;
+ padding: 0.75rem 0;
+ margin-bottom: 0.5rem;
+}
+@media (min-width: 768px) {
+ .experimentation-page #method .method-number {
+ flex-direction: row;
+ }
+}
+.experimentation-page #method .method-number .content {
+ flex-basis: 70%;
+}
+.experimentation-page #method .method-number .number {
+ text-align: center;
+ flex-basis: 30%;
+ font-size: 1.5em;
+ line-height: 1.3;
+ color: #f1c017;
+ font-weight: bold;
+ margin-bottom: 0.5rem;
+}
+@media (min-width: 768px) {
+ .experimentation-page #method .method-number .number {
+ margin-bottom: 0;
+ }
+}
+.experimentation-page #method .tips-frame p {
+ color: #f1c017;
+ font-weight: bold;
+ padding-left: 2rem;
+ position: relative;
+}
+.experimentation-page #method .tips-frame p::before {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.experimentation-page #method .method-test {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin: 1rem 0;
+}
+@media (min-width: 768px) {
+ .experimentation-page #method .method-test {
+ flex-direction: row;
+ }
+}
+.experimentation-page #method .method-test .container-img,
+.experimentation-page #method .method-test p {
+ flex-basis: 48%;
+}
+.experimentation-page #method .method-test .container-img {
+ margin-bottom: 0.5rem;
+}
+@media (min-width: 768px) {
+ .experimentation-page #method .method-test .container-img {
+ margin-bottom: 0;
+ }
+}
+.experimentation-page .tips-frame {
+ padding: 1rem;
+ background: rgba(69, 75, 78, 0.3);
+}
+.experimentation-page #results h3 {
+ font-size: 1.25rem;
+ line-height: 1.3;
+ margin-top: 1.5rem;
+}
+.experimentation-page #results .usages {
+ margin: 2rem 0;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+ padding-bottom: 0.5rem;
+}
+.experimentation-page #results .usages h4 {
+ margin-bottom: 0.5rem;
+}
+.experimentation-page #results .usages p {
+ font-style: italic;
+ color: #f1c017;
+}
+.experimentation-page #results .list {
+ margin: 0.5rem 0;
+}
+.experimentation-page #results .item {
+ margin-bottom: 0.5rem;
+}
+.experimentation-page #results .item span,
+.experimentation-page #results .item p {
+ position: relative;
+ padding-left: 2rem;
+ display: block;
+}
+.experimentation-page #results .item span:before,
+.experimentation-page #results .item p:before {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.experimentation-page #results .consumption {
+ margin-bottom: 2.5rem;
+}
+.experimentation-page #results .container-habits {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin: 1rem 0 4rem;
+}
+@media (min-width: 768px) {
+ .experimentation-page #results .container-habits {
+ flex-direction: row;
+ }
+}
+.experimentation-page #results .container-habits img {
+ margin: 0.5rem 0;
+}
+.experimentation-page #results .col-2 {
+ flex-basis: 48%;
+}
+.experimentation-page #results .changes .icon-wink {
+ margin-left: 0.5rem;
+}
+.experimentation-page #results .easy {
+ margin: 2.5rem 0;
+}
+.experimentation-page #results .easy .sus {
+ margin-bottom: 2rem;
+}
+.experimentation-page #results .easy .sus-title {
+ color: #f1c017;
+ margin: 2rem 0;
+ font-weight: bold;
+}
+.experimentation-page #results .easy .btn-more {
+ color: #ffa344;
+ background: none;
+ border: none;
+ cursor: pointer;
+ padding-left: 0;
+ margin: 1rem 0;
+ font-size: 1rem;
+}
+.experimentation-page #results .easy .btn-more:focus {
+ outline: none;
+}
+.experimentation-page #results .easy .btn-more::before {
+ content: "";
+ display: inline-block;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 5.5px 0 5.5px 9.5px;
+ border-color: transparent transparent transparent #ffa344;
+ margin-right: 0.5rem;
+ transition: 0.3s all;
+}
+.experimentation-page #results .easy .btn-more.arrow-down::before {
+ transform: rotate(90deg);
+}
+.experimentation-page #results .easy .info-sus {
+ display: none;
+}
+.experimentation-page #results .easy .info-sus p {
+ color: #ffa344;
+ padding-left: 1rem;
+}
+.experimentation-page #results .easy .info-sus p:first-child {
+ margin-bottom: 2.5rem;
+}
+.experimentation-page #results .easy .info-sus.collapsed {
+ display: block;
+}
+.experimentation-page #results .reasons {
+ margin: 2rem 0 1rem;
+}
+.experimentation-page #results .container-alert h4,
+.experimentation-page #results .container-alert p {
+ color: #ff7369;
+}
+.experimentation-page #results .alert {
+ display: flex;
+ justify-content: space-between;
+}
+.experimentation-page #results .alert > div:first-child {
+ flex-basis: 75%;
+}
+.experimentation-page #results .alert > div:last-child {
+ flex-basis: 18%;
+ padding-top: 2rem;
+}
+.experimentation-page #results .alert .icon-alert:before {
+ top: 5px;
+}
+.experimentation-page #results .features ul {
+ margin: 3rem 0;
+}
+.experimentation-page #tasks .col-task {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+ padding-bottom: 1rem;
+ margin-bottom: 2rem;
+}
+.experimentation-page #tasks .col-task:nth-of-type(1) {
+ margin-top: 4rem;
+}
+.experimentation-page #tasks .col-task .container-img {
+ flex-basis: 30%;
+ margin-bottom: 1rem;
+}
+@media (min-width: 768px) {
+ .experimentation-page #tasks .col-task .container-img {
+ margin-bottom: 0;
+ }
+}
+.experimentation-page #tasks .col-task .container-img img {
+ max-width: 60%;
+}
+@media (min-width: 768px) {
+ .experimentation-page #tasks .col-task .container-img img {
+ max-width: 100%;
+ }
+}
+.experimentation-page #tasks .col-task .task-content {
+ flex-basis: 70%;
+}
+.experimentation-page #tasks .col-task .item {
+ margin-bottom: 2rem;
+}
+.experimentation-page #tasks .col-task:nth-child(even) {
+ flex-direction: column-reverse;
+}
+.experimentation-page #tasks .col-task:nth-child(even) .container-img {
+ padding: 0;
+ text-align: center;
+}
+@media (min-width: 768px) {
+ .experimentation-page #tasks .col-task:nth-child(even) .container-img {
+ padding-left: 1rem;
+ text-align: initial;
+ }
+}
+.experimentation-page #tasks .col-task:nth-child(even) .task-content {
+ padding: 0;
+}
+@media (min-width: 768px) {
+ .experimentation-page #tasks .col-task:nth-child(even) .task-content {
+ padding-right: 3rem;
+ }
+}
+.experimentation-page #tasks .col-task:nth-child(odd) {
+ flex-direction: column;
+}
+.experimentation-page #tasks .col-task:nth-child(odd) .container-img {
+ padding: 0;
+ text-align: center;
+}
+@media (min-width: 768px) {
+ .experimentation-page #tasks .col-task:nth-child(odd) .container-img {
+ padding-right: 1rem;
+ text-align: initial;
+ }
+}
+.experimentation-page #tasks .col-task:nth-child(odd) .task-content {
+ padding: 0;
+}
+@media (min-width: 768px) {
+ .experimentation-page #tasks .col-task:nth-child(odd) .task-content {
+ padding-left: 3rem;
+ }
+}
+@media (min-width: 768px) {
+ .experimentation-page #tasks .col-task:nth-child(odd), .experimentation-page #tasks .col-task:nth-child(even) {
+ flex-direction: row;
+ }
+}
+.experimentation-page .container-team {
+ margin: 3rem 0;
+}
+.experimentation-page .container-team .msg {
+ font-weight: bold;
+ margin-bottom: 1rem;
+}
+.experimentation-page .container-team .yellow {
+ margin-bottom: 2rem;
+ font-weight: bold;
+}
+.experimentation-page .container-team .text-bold {
+ font-weight: bold;
+ margin: 1.5rem 0 3rem;
+}
+.experimentation-page .container-team .team {
+ text-align: right;
+ font-size: 1.25em;
+ line-height: 1.3;
+ font-weight: bold;
+}
+.experimentation-page #contact-form {
+ width: 100%;
+ height: 221px;
+}
+
* {
margin: 0;
line-height: 1;
font-family: "Lato", sans-serif;
color: white;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
+ box-sizing: border-box;
}
svg {
@@ -74,59 +614,36 @@ nav {
top: 0;
z-index: 100;
background: radial-gradient(74.83% 76.97% at 50% 13.64%, #343641 0%, #1b1c22 100%);
- display: -ms-grid;
display: grid;
justify-items: end;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -ms-grid-columns: 1.2fr 3fr 0.3fr;
- grid-template-columns: 1.2fr 3fr 0.3fr;
- -webkit-transition: all 300ms ease;
+ align-items: center;
+ grid-template-columns: 1.2fr 3fr 0.3fr;
transition: all 300ms ease;
}
-
@media all and (max-width: 1200px) {
nav {
height: 75px;
}
}
-
nav .main-logo {
- -ms-grid-column: 1;
grid-column: 1;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ align-items: center;
}
-
nav .main-logo .beta-logo {
width: 60px;
margin-left: 0.7rem;
}
-
nav .links {
- -ms-grid-column: 2;
grid-column: 2;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
+ align-items: center;
+ justify-content: center;
align-items: center;
}
-
nav .links > a:not(:last-child) {
margin-right: 2.5rem;
}
-
nav .links .navlink {
display: inline-block;
margin-right: 1.5rem;
@@ -138,25 +655,18 @@ nav .links .navlink {
margin-top: 80px;
height: 35px;
background: #f1c017;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
overflow: hidden;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ align-items: center;
}
-
@media all and (max-width: 1200px) {
.banner {
margin-top: 75px;
}
}
-
.banner > p:not(:last-child) {
margin-right: 6rem;
}
-
.banner p {
margin-left: -3rem;
text-transform: uppercase;
@@ -165,7 +675,6 @@ nav .links .navlink {
white-space: nowrap;
font-style: italic;
}
-
@media all and (max-width: 700px) {
.banner p {
font-size: 0.95rem;
@@ -179,89 +688,61 @@ nav .links .navlink {
background-color: #121212;
margin-bottom: -7px;
}
-
.main-cta .container {
max-width: 1200px;
margin: auto;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ justify-content: center;
+ align-items: center;
min-height: 580px;
}
-
@media all and (min-width: 1200px) {
.main-cta .container > div:not(:last-child) {
margin-right: 2rem;
}
}
-
.main-cta .container .content-txt .button {
cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
text-decoration: none;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ align-items: center;
+ justify-content: space-between;
background: #f1c017;
color: #121212;
border-radius: 2px;
width: 100%;
height: 56px;
- max-width: -webkit-fit-content;
- max-width: -moz-fit-content;
max-width: fit-content;
padding: 1rem;
margin: 2rem 0;
border: 0;
- -webkit-transition: all 400ms ease;
transition: all 400ms ease;
font-size: 1.25rem;
text-align: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
+ justify-content: center;
font-weight: 700;
background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;
}
-
@media all and (min-width: 1200px) {
.main-cta .container .content-txt .button > div:not(:last-child) {
margin-right: 1rem;
}
}
-
.main-cta .container .content-txt .button img {
margin-right: 1rem;
}
-
.main-cta .container .content-txt .button:hover {
- -webkit-box-shadow: 0px 0px 20px 0px #f1c017;
- box-shadow: 0px 0px 20px 0px #f1c017;
+ box-shadow: 0px 0px 20px 0px #f1c017;
}
-
.main-cta .container .content-txt .button span {
font-weight: 900;
}
-
.main-cta .container .mobile-illu {
display: none;
}
-
.main-cta .container .content-img {
width: 100%;
}
-
.main-cta .container .content-img .illu {
width: 112%;
}
@@ -269,68 +750,46 @@ nav .links .navlink {
.explanation {
min-height: 680px;
background: radial-gradient(74.83% 76.97% at 50% 13.64%, #343641 0%, #1b1c22 100%);
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
text-align: center;
}
-
.explanation .content {
margin: auto;
}
-
.explanation .content .compteurs {
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
+ align-items: center;
+ justify-content: center;
margin-top: 5rem;
}
-
@media all and (min-width: 1200px) {
.explanation .content .compteurs > *:not(:last-child) {
margin-right: 0.8rem;
}
}
-
.explanation .content .compteurs span {
color: #a0a0a0;
text-transform: uppercase;
font-size: 1.1rem;
}
-
.explanation .content .compteurs .bloc {
width: 280px;
height: 280px;
padding: 0.5rem 0.5rem 1rem 0.5rem;
border: solid 1px;
text-align: center;
- background: -webkit-gradient(linear, left top, left bottom, from(#323339), to(#25262b));
background: linear-gradient(180deg, #323339 0%, #25262b 100%);
- -webkit-box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
- box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
+ flex-direction: column;
position: relative;
}
-
.explanation .content .compteurs .bloc h3 {
margin-top: 8rem;
font-weight: 900;
font-size: 2rem;
}
-
.explanation .content .compteurs .bloc .compteur-img {
max-height: 160px;
position: absolute;
@@ -339,64 +798,44 @@ nav .links .navlink {
right: 0;
margin: auto;
}
-
.explanation .content .compteurs .bloc p {
padding-top: 0.5rem;
}
-
.explanation .content .compteurs .bloc .provider-logo {
margin-top: auto;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
height: 35px;
}
-
.explanation .content .compteurs .bloc .provider-logo img {
margin: auto;
}
-
.explanation .content .compteurs .elec-color {
border-color: rgba(216, 123, 57, 0.4);
- -webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
-
.explanation .content .compteurs .elec-color:hover {
- -webkit-box-shadow: 0 0 10px 0 #d87b39;
- box-shadow: 0 0 10px 0 #d87b39;
+ box-shadow: 0 0 10px 0 #d87b39;
}
-
.explanation .content .compteurs .elec-color h3 {
color: #d87b39;
}
-
.explanation .content .compteurs .gaz-color {
border-color: rgba(69, 209, 184, 0.4);
- -webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
-
.explanation .content .compteurs .gaz-color:hover {
- -webkit-box-shadow: 0 0 10px 0 #45d1b8;
- box-shadow: 0 0 10px 0 #45d1b8;
+ box-shadow: 0 0 10px 0 #45d1b8;
}
-
.explanation .content .compteurs .gaz-color h3 {
color: #45d1b8;
}
-
.explanation .content .compteurs .water-color {
border-color: rgba(58, 152, 236, 0.4);
- -webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
-
.explanation .content .compteurs .water-color:hover {
- -webkit-box-shadow: 0 0 10px 0 #3a98ec;
- box-shadow: 0 0 10px 0 #3a98ec;
+ box-shadow: 0 0 10px 0 #3a98ec;
}
-
.explanation .content .compteurs .water-color h3 {
color: #3a98ec;
}
@@ -404,179 +843,119 @@ nav .links .navlink {
.security {
min-height: 650px;
background: #f1c017;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
}
-
.security .container {
max-width: 1200px;
margin: auto;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ justify-content: center;
+ align-items: center;
}
-
@media all and (min-width: 1200px) {
.security .container img {
margin-right: 4rem;
}
}
-
@media all and (max-width: 1200px) {
.security .container img {
margin-bottom: 1rem;
}
}
-
.security .container p {
max-width: 680px;
}
-
.security .container .button {
cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
text-decoration: none;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ align-items: center;
+ justify-content: space-between;
background: #121212;
color: #f1c017;
border-radius: 2px;
width: 100%;
height: 56px;
- max-width: -webkit-fit-content;
- max-width: -moz-fit-content;
max-width: fit-content;
padding: 1rem;
margin: 2rem 0;
border: 0;
- -webkit-transition: all 400ms ease;
transition: all 400ms ease;
margin: auto;
margin-top: 3rem;
height: 50px;
}
-
@media all and (min-width: 1200px) {
.security .container .button > div:not(:last-child) {
margin-right: 1rem;
}
}
-
.security .container .button img {
margin-right: 1rem;
}
-
.security .container .button:hover {
- -webkit-box-shadow: 0px 0px 20px 0px #f1c017;
- box-shadow: 0px 0px 20px 0px #f1c017;
+ box-shadow: 0px 0px 20px 0px #f1c017;
}
-
.security .container .button span {
font-weight: 900;
}
-
.security .container .button:hover {
- -webkit-box-shadow: 0px 0px 10px 3px #121212;
- box-shadow: 0px 0px 10px 3px #121212;
+ box-shadow: 0px 0px 10px 3px #121212;
}
.test-ecolyo {
min-height: 500px;
background: radial-gradient(74.83% 76.97% at 50% 13.64%, #343641 0%, #1b1c22 100%);
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
text-align: center;
}
-
.test-ecolyo .container {
max-width: 1200px;
margin: auto;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ justify-content: center;
+ align-items: center;
}
-
.test-ecolyo .container .button {
cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
text-decoration: none;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ align-items: center;
+ justify-content: space-between;
background: #f1c017;
color: #121212;
border-radius: 2px;
width: 100%;
height: 56px;
- max-width: -webkit-fit-content;
- max-width: -moz-fit-content;
max-width: fit-content;
padding: 1rem;
margin: 2rem 0;
border: 0;
- -webkit-transition: all 400ms ease;
transition: all 400ms ease;
font-size: 1.25rem;
text-align: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
+ justify-content: center;
font-weight: 700;
background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;
}
-
@media all and (min-width: 1200px) {
.test-ecolyo .container .button > div:not(:last-child) {
margin-right: 1rem;
}
}
-
.test-ecolyo .container .button img {
margin-right: 1rem;
}
-
.test-ecolyo .container .button:hover {
- -webkit-box-shadow: 0px 0px 20px 0px #f1c017;
- box-shadow: 0px 0px 20px 0px #f1c017;
+ box-shadow: 0px 0px 20px 0px #f1c017;
}
-
.test-ecolyo .container .button span {
font-weight: 900;
}
-
.test-ecolyo .center-button {
margin-top: 1rem;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
+ justify-content: center;
}
footer {
@@ -584,150 +963,102 @@ footer {
background-color: black;
width: 100%;
}
-
footer .content {
padding-top: 5rem;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ flex-direction: column;
+ align-items: center;
min-height: 230px;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ justify-content: space-between;
}
-
footer .content h2 {
text-align: center;
}
-
footer .content .button {
cursor: pointer;
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
text-decoration: none;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ align-items: center;
+ justify-content: space-between;
background: #f1c017;
color: #121212;
border-radius: 2px;
width: 100%;
height: 56px;
- max-width: -webkit-fit-content;
- max-width: -moz-fit-content;
max-width: fit-content;
padding: 1rem;
margin: 2rem 0;
border: 0;
- -webkit-transition: all 400ms ease;
transition: all 400ms ease;
font-size: 1.25rem;
text-align: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
+ justify-content: center;
font-weight: 700;
margin-top: -6rem;
background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(226, 137, 4, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #f1c017;
}
-
@media all and (min-width: 1200px) {
footer .content .button > div:not(:last-child) {
margin-right: 1rem;
}
}
-
footer .content .button img {
margin-right: 1rem;
}
-
footer .content .button:hover {
- -webkit-box-shadow: 0px 0px 20px 0px #f1c017;
- box-shadow: 0px 0px 20px 0px #f1c017;
+ box-shadow: 0px 0px 20px 0px #f1c017;
}
-
footer .content .button span {
font-weight: 900;
}
-
footer .content .bottom {
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ align-items: center;
width: 100%;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
+ justify-content: space-between;
padding: 1rem 2rem;
}
-
footer .content .bottom .logos-footer {
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
}
-
footer .content .bottom .logos-footer img:nth-of-type(1) {
width: 130px;
margin-right: 2rem;
}
-
footer .content .bottom .logos-footer img:nth-of-type(2) {
width: 85px;
}
-
footer .content .bottom .contact {
margin-left: -5.5rem;
}
-
footer .content .bottom .contact a {
color: #f1c017;
font-weight: 700;
}
-
footer .content .info {
- display: -webkit-box;
- display: -ms-flexbox;
display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ align-items: center;
margin-left: -5rem;
}
-
footer .content .info img {
margin-right: 0.3rem;
}
-
footer .content .info a {
text-decoration: none;
}
@media all and (max-width: 1200px) {
.text-36-white,
- .text-36-black {
+.text-36-black {
font-size: 1.85rem;
}
+
.navlink {
display: none;
}
+
nav {
- -ms-grid-columns: 1fr;
- grid-template-columns: 1fr;
+ grid-template-columns: 1fr;
}
nav .button-column .button {
height: 44px;
@@ -748,26 +1079,28 @@ footer .content .info a {
nav .links {
display: none;
}
+
.banner p {
margin-left: 0.6rem;
}
+
.main-cta .mobile-illu {
padding: 2rem 0 1rem 0;
display: block !important;
}
}
-
@media all and (max-width: 1200px) and (max-width: 600px) {
.main-cta .mobile-illu {
width: 125% !important;
margin: 1.5rem 0;
}
}
-
@media all and (max-width: 1200px) {
.main-cta .desktop-illu {
display: none;
}
+}
+@media all and (max-width: 1200px) {
.main-cta .container .content-img {
min-height: 0;
}
@@ -775,24 +1108,22 @@ footer .content .info a {
width: 100%;
margin-left: -0.5rem;
}
+}
+@media all and (max-width: 1200px) {
* > .container {
padding: 2rem;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
+ flex-direction: column;
}
* > .container > div {
margin-bottom: 2.5rem;
}
+}
+@media all and (max-width: 1200px) {
.explanation {
padding: 4rem 2rem;
}
.explanation .content .compteurs {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
+ flex-direction: column;
}
.explanation .content .compteurs > div {
margin-bottom: 4rem;
@@ -800,6 +1131,8 @@ footer .content .info a {
.explanation .content .compteurs span {
margin-bottom: 4rem;
}
+}
+@media all and (max-width: 1200px) {
.security {
padding: 2rem 0;
}
@@ -813,6 +1146,8 @@ footer .content .info a {
padding: 1rem;
text-align: center;
}
+}
+@media all and (max-width: 1200px) {
.test-ecolyo {
padding: 2rem 0;
}
@@ -822,40 +1157,33 @@ footer .content .info a {
padding: 1rem;
text-align: center;
}
+}
+@media all and (max-width: 1200px) {
footer .content .button {
margin-top: 1rem;
margin-bottom: 3rem;
}
footer .content .bottom {
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
+ flex-direction: column;
}
footer .content .bottom > div:not(:last-child) {
margin-bottom: 2rem;
}
footer .content .bottom .contact {
- -webkit-box-ordinal-group: 2;
- -ms-flex-order: 1;
- order: 1;
+ order: 1;
margin: auto;
text-align: center;
}
footer .content .bottom .logos-footer {
- -webkit-box-ordinal-group: 3;
- -ms-flex-order: 2;
- order: 2;
+ order: 2;
max-width: 250px;
margin-left: 1.5rem;
}
footer .content .bottom .info {
margin-left: 0;
- -webkit-box-ordinal-group: 4;
- -ms-flex-order: 3;
- order: 3;
- -webkit-transform: scale(0.8);
- transform: scale(0.8);
+ order: 3;
+ transform: scale(0.8);
}
}
-/*# sourceMappingURL=style.css.map */
\ No newline at end of file
+
+/*# sourceMappingURL=style.css.map */
diff --git a/style.css.map b/style.css.map
index d950a7fe6b8a3367e4fa02bec77628dab3e40a65..fba724e1869edc5af9d04a65af6c4ae812be1114 100644
--- a/style.css.map
+++ b/style.css.map
@@ -1,9 +1 @@
-{
- "version": 3,
- "mappings": "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",
- "sources": [
- "style.scss"
- ],
- "names": [],
- "file": "style.css"
-}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["experimentation-page.scss","_variables.scss","style.scss"],"names":[],"mappings":"AACE;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE,OCZI;;ADcN;EACE,OCdK;;ADgBP;EACE,OChBG;;ADkBL;EACE,OClBG;;ADoBL;EACE,OCpBE;;ADsBJ;EACE,OClCK;;ADoCP;EACE,OCzBK;;AD2BP;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAEF;EAEE;EACA;;AAGJ;AAAA;AAAA;EAGE,OC9HK;ED+HL;EACA;;AAEF;EACE;EACA;EACA;;AAEF;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;;AACA;EAHF;IAII;;;AAEF;EANF;IAOI;;;AAGJ;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAGJ;AAAA;EAEE;;AAEF;EACE;EACA;;AACA;EAHF;IAII;IACA;IACA;;;AAGJ;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE,OCtMG;EDuMH;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;IACA;;;AAGJ;EACE;EACA,OC9NC;ED+ND;EACA;;AACA;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AACA;EACE;;AAMN;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA,OCrQC;EDsQD;EACA;;AACA;EARF;IASI;;;AAKJ;EACE,OC/QC;EDgRD;EACA;EACA;;AACA;EACE;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;;;AAEF;AAAA;EAEE;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAKR;EACE;EACA;;AAGA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA,OCjUC;;ADoUL;EACE;;AAEF;EACE;;AACA;AAAA;EAEE;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;;AAIN;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;;;AAEF;EACE;;AAGJ;EACE;;AAGA;EACE;;AAGJ;EACE;;AACA;EACE;;AAEF;EACE,OClXC;EDmXD;EACA;;AAEF;EACE,OC/WC;EDgXD;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;;AACA;EACE,OC3YD;ED4YC;;AACA;EACE;;AAGJ;EACE;;AAIN;EACE;;AAGA;AAAA;EAEE,OCzZF;;AD4ZF;EACE;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAGA;EACE;;AAKJ;EACE;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AACA;EAHF;IAII;;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAIN;EACE;;AAEF;EACE;;AAEF;EACE;;AACA;EACE;EACA;;AACA;EAHF;IAII;IACA;;;AAGJ;EACE;;AACA;EAFF;IAGI;;;AAIN;EACE;;AACA;EACE;EACA;;AACA;EAHF;IAII;IACA;;;AAGJ;EACE;;AACA;EAFF;IAGI;;;AAIN;EACE;IAEE;;;AAKR;EACE;;AACA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;;;AE1hBJ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAKF;AAAA;EAEE;EACA,YDjBM;;;ACgER;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA,ODhFM;ECiFN;EACA;;;AAEF;EACE;EACA;EACA,ODvFM;ECwFN;EACA;;;AAEF;EACE;EACA,OD7FM;EC8FN;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA,ODxGM;;;AC2GR;EAtFE;EAwFA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;EACA;;AArGA;EAqFF;IApFI;;;AAqGF;EACE;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EAIA;;AAHA;EACE;;AAGF;EACE;EACA;EACA;EACA;;;AAIN;EA3HE;EA6HA;EACA,YD1JO;EC2JP;EACA;EACA;;AAhIA;EA0HF;IAzHI;;;AAgIF;EACE;;AAEF;EACE;EACA;EACA,ODnKI;ECoKJ;EACA;EACA;;AACA;EAPF;IAQI;IACA;IACA;;;;AAIN;EACE;EACA,kBDhLM;ECiLN;;AACA;EACE,WAvKY;EAwKZ;EACA;EACA;EACA;EACA;;AACA;EACE;IACE;;;AAIF;EA7JJ;EACA;EACA;EACA;EASA;EACA,YDhDO;ECiDP,ODhDM;ECiDN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAyIM;EACA;EACA;EACA;EACA;;AA/JN;EACE;IACE;;;AAGJ;EACE;;AAaF;EACE;;AAEF;EACE;;AAgJA;EACE;;AAEF;EACE;;AACA;EACE;;;AAKR;EACE;EACA;EAKA;EACA;;AACA;EACE;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;IACE;;;AAGJ;EACE,OD1OD;EC2OC;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAIN;EACE;EACA;;AACA;EACE;;AAEF;EACE,OD9RG;;ACiSP;EACE;EACA;;AACA;EACE;;AAEF;EACE,ODvSE;;AC0SN;EACE;EACA;;AACA;EACE;;AAEF;EACE,ODhTI;;;ACsTd;EACE;EACA,YD5TO;EC6TP;;AACA;EACE,WAlTY;EAmTZ;EACA;EACA;EACA;;AAEE;EADF;IAEI;;;AAEF;EAJF;IAKI;;;AAGJ;EACE;;AAEF;EA5SF;EACA;EACA;EACA;EASA;EACA,YD/CM;ECgDN,ODjDO;ECkDP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwRI;EACA;EACA;;AA5SJ;EACE;IACE;;;AAGJ;EACE;;AAaF;EACE;;AAEF;EACE;;AAsRE;EACE;;;AAKR;EACE;EACA;EAKA;EACA;;AACA;EACE,WAvVY;EAwVZ;EACA;EACA;EACA;;AACA;EAtUF;EACA;EACA;EACA;EASA;EACA,YDhDO;ECiDP,ODhDM;ECiDN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkTI;EACA;EACA;EACA;EACA;;AAxUJ;EACE;IACE;;;AAGJ;EACE;;AAaF;EACE;;AAEF;EACE;;AAyTF;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EAxWF;EACA;EACA;EACA;EASA;EACA,YDhDO;ECiDP,ODhDM;ECiDN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAoVI;EACA;EACA;EACA;EACA;EACA;;AA3WJ;EACE;IACE;;;AAGJ;EACE;;AAaF;EACE;;AAEF;EACE;;AA2VA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;EACA;;AAEF;EACE;;AAGJ;EACE;;AACA;EACE,OD5aD;EC6aC;;AAKN;EACE;EACA;EAIA;;AAHA;EACE;;AAGF;EACE;;;AAMR;EACE;AAAA;IAEE;;;EAEF;IACE;;;EAEF;IACE;;EAEE;IACE;IACA;IACA;IACA;IACA;;EAIJ;IACE;;EACA;IACE;;EACA;IACE;;EAIN;IACE;;;EAGJ;IACE;;;EAGA;IACE;IACA;;;AACA;EAHF;IAII;IACA;;;AA1CR;EA6CI;IACE;;;AA9CN;EAiDM;IACE;;EACA;IACE;IACA;;;AArDV;EA0DE;IACE;IACA;;EACA;IACE;;;AA9DN;EAiEE;IACE;;EAEE;IACE;;EACA;IACE;;EAGF;IACE;;;AA3EV;EAgFE;IACE;;EACA;IACE;IACA;;EAEF;IACE;IACA;IACA;IACA;;;AA1FN;EA6FE;IACE;;EACA;IACE;IACA;IACA;IACA;;;AAnGN;EAwGM;IACE;IACA;;EAEF;IACE;;EACA;IACE;;EAEF;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA","file":"style.css"}
\ No newline at end of file
diff --git a/style.scss b/style.scss
index bdd2611308761891c88dc6b4d6cd235ec918e7d5..05e90675198cbe4cd6f9f529288fc67ab550e5bd 100644
--- a/style.scss
+++ b/style.scss
@@ -1,3 +1,5 @@
+@import "./variables";
+@import "./experimentation-page.scss";
* {
margin: 0;
line-height: 1;
@@ -9,13 +11,6 @@ svg {
overflow: visible;
}
-$yellow: #f1c017;
-$black: #121212;
-$elec-color: #d87b39;
-$gaz-color: #45d1b8;
-$water-color: #3a98ec;
-$grey: #a0a0a0;
-
$content-width: 1200px;
$breakpoint: 1200px;
body,