fix: small design issues

a58abec1 · Bastien DUMONT · f118536b · f118536b · a58abec1 · a58abec1
Commit a58abec1 authored 2 years ago by Bastien DUMONT
--- a/assets/ecolyo-shadow.png
+++ b/assets/ecolyo-shadow.png
--- a/assets/ecolyo-shadow.svg
+++ b/assets/ecolyo-shadow.svg
+<svg width="49" height="53" viewBox="0 0 49 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_948_4292)">
+<path d="M23.9282 40.3919C24.2846 40.536 24.7019 40.536 25.0584 40.3919C39.727 34.4596 39.1306 26.1503 38.3437 13.9877C38.2931 13.2056 37.6611 12.5897 36.8808 12.5169C32.6807 12.1252 28.8732 10.8003 25.3104 8.72084C24.8059 8.42639 24.1807 8.42639 23.6762 8.72084C20.1134 10.8003 16.3058 12.1252 12.1057 12.5169C11.3254 12.5897 10.6934 13.2056 10.6428 13.9877C9.85587 26.1503 9.25949 34.4596 23.9282 40.3919Z" fill="url(#paint0_radial_948_4292)"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4499 14.4004C36.8415 20.4678 37.0934 25.0478 35.6969 28.8682C34.3663 32.5084 31.4029 35.7291 24.4933 38.5528C17.5836 35.7291 14.6202 32.5084 13.2896 28.8682C11.8931 25.0478 12.145 20.4678 12.5366 14.4004C16.8829 13.9572 20.8272 12.5778 24.4933 10.4624C28.1593 12.5778 32.1036 13.9572 36.4499 14.4004ZM25.0584 40.3919C24.7019 40.536 24.2846 40.536 23.9282 40.3919C9.31636 34.4826 9.85148 26.2147 10.6337 14.129L10.6428 13.9877C10.6934 13.2056 11.3254 12.5897 12.1057 12.5169C16.3058 12.1252 20.1134 10.8003 23.6762 8.72084C24.1807 8.42639 24.8059 8.42639 25.3104 8.72084C28.8732 10.8003 32.6807 12.1252 36.8808 12.5169C37.6611 12.5897 38.2931 13.2056 38.3437 13.9877L38.3528 14.129C39.135 26.2146 39.6702 34.4826 25.0584 40.3919Z" fill="#FFC600"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.4499 14.4004C36.8415 20.4678 37.0934 25.0478 35.6969 28.8682C34.3663 32.5084 31.4029 35.7291 24.4933 38.5528C17.5836 35.7291 14.6202 32.5084 13.2896 28.8682C11.8931 25.0478 12.145 20.4678 12.5366 14.4004C16.8829 13.9572 20.8272 12.5778 24.4933 10.4624C28.1593 12.5778 32.1036 13.9572 36.4499 14.4004ZM25.0584 40.3919C24.7019 40.536 24.2846 40.536 23.9282 40.3919C9.31636 34.4826 9.85148 26.2147 10.6337 14.129L10.6428 13.9877C10.6934 13.2056 11.3254 12.5897 12.1057 12.5169C16.3058 12.1252 20.1134 10.8003 23.6762 8.72084C24.1807 8.42639 24.8059 8.42639 25.3104 8.72084C28.8732 10.8003 32.6807 12.1252 36.8808 12.5169C37.6611 12.5897 38.2931 13.2056 38.3437 13.9877L38.3528 14.129C39.135 26.2146 39.6702 34.4826 25.0584 40.3919Z" fill="url(#paint1_linear_948_4292)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.4937 40.5C24.687 40.4999 24.8803 40.4639 25.0584 40.3919C39.6702 34.4826 39.135 26.2147 38.3528 14.129L38.3437 13.9877C38.2931 13.2056 37.6611 12.5897 36.8808 12.5169C32.6807 12.1252 28.8732 10.8003 25.3104 8.72084C25.0582 8.57368 24.776 8.50007 24.4937 8.5V10.4627C28.1596 12.5779 32.1038 13.9572 36.4499 14.4004C36.8415 20.4678 37.0934 25.0478 35.6969 28.8682C34.3663 32.5083 31.403 35.7289 24.4937 38.5527V40.5Z" fill="#DB8300"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.4937 40.5C24.687 40.4999 24.8803 40.4639 25.0584 40.3919C39.6702 34.4826 39.135 26.2147 38.3528 14.129L38.3437 13.9877C38.2931 13.2056 37.6611 12.5897 36.8808 12.5169C32.6807 12.1252 28.8732 10.8003 25.3104 8.72084C25.0582 8.57368 24.776 8.50007 24.4937 8.5V10.4627C28.1596 12.5779 32.1038 13.9572 36.4499 14.4004C36.8415 20.4678 37.0934 25.0478 35.6969 28.8682C34.3663 32.5083 31.403 35.7289 24.4937 38.5527V40.5Z" fill="url(#paint2_linear_948_4292)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3603 18.7683C18.3603 18.0274 18.9609 17.4268 19.7018 17.4268C20.4427 17.4268 21.0433 18.0274 21.0433 18.7683V27.3923C21.0433 28.0274 20.5285 28.5422 19.8935 28.5422H19.5102C18.8751 28.5422 18.3603 28.0274 18.3603 27.3923V18.7683ZM23.1513 23.5603C23.1513 22.8194 23.7519 22.2188 24.4928 22.2188C25.2337 22.2188 25.8344 22.8194 25.8344 23.5603V27.8888C25.8344 28.2501 25.5414 28.5431 25.1801 28.5431H23.8056C23.4442 28.5431 23.1513 28.2501 23.1513 27.8888V23.5603ZM29.2848 20.3018C28.5439 20.3018 27.9433 20.9024 27.9433 21.6433V27.69C27.9433 28.1609 28.325 28.5425 28.7958 28.5425H29.7739C30.2447 28.5425 30.6263 28.1609 30.6263 27.69V21.6433C30.6263 20.9024 30.0257 20.3018 29.2848 20.3018Z" fill="#FFC600"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3603 18.7683C18.3603 18.0274 18.9609 17.4268 19.7018 17.4268C20.4427 17.4268 21.0433 18.0274 21.0433 18.7683V27.3923C21.0433 28.0274 20.5285 28.5422 19.8935 28.5422H19.5102C18.8751 28.5422 18.3603 28.0274 18.3603 27.3923V18.7683ZM23.1513 23.5603C23.1513 22.8194 23.7519 22.2188 24.4928 22.2188C25.2337 22.2188 25.8344 22.8194 25.8344 23.5603V27.8888C25.8344 28.2501 25.5414 28.5431 25.1801 28.5431H23.8056C23.4442 28.5431 23.1513 28.2501 23.1513 27.8888V23.5603ZM29.2848 20.3018C28.5439 20.3018 27.9433 20.9024 27.9433 21.6433V27.69C27.9433 28.1609 28.325 28.5425 28.7958 28.5425H29.7739C30.2447 28.5425 30.6263 28.1609 30.6263 27.69V21.6433C30.6263 20.9024 30.0257 20.3018 29.2848 20.3018Z" fill="url(#paint3_linear_948_4292)"/>
+<defs>
+<filter id="filter0_d_948_4292" x="0.31147" y="0.5" width="48.3636" height="52" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_948_4292"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_948_4292" result="shape"/>
+</filter>
+<radialGradient id="paint0_radial_948_4292" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.3065 12.3485) rotate(72.5777) scale(24.0028 25.1088)">
+<stop stop-color="#2B2D37"/>
+<stop offset="1" stop-color="#15161B"/>
+</radialGradient>
+<linearGradient id="paint1_linear_948_4292" x1="23.9183" y1="39.4664" x2="13.6653" y2="12.2527" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CB6E00"/>
+<stop offset="1" stop-color="#FFC600" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_948_4292" x1="33.3091" y1="39.5623" x2="24.4932" y2="10.2406" gradientUnits="userSpaceOnUse">
+<stop stop-color="#793A00"/>
+<stop offset="1" stop-color="#DB8300" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_948_4292" x1="30.6263" y1="28.1597" x2="18.9351" y2="17.427" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DB8300"/>
+<stop offset="1" stop-color="#FFC600"/>
+</linearGradient>
+</defs>
+</svg>
--- a/index.css
+++ b/index.css
@@ -132,39 +132,40 @@ nav .links .navlink {
  }
 }

-.main-cta .container {
-  max-width: 1200px;
+.main-cta {
  margin: auto;
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: flex-start;
-  padding-top: 5rem;
+  flex-wrap: wrap;
+  padding: 5rem 2rem;
 }
 @media (max-width: 1200px) {
-  .main-cta .container {
+  .main-cta {
    padding-top: 7rem;
+    padding-bottom: 2rem;
  }
 }
-.main-cta .container .content-txt {
+.main-cta .content-txt {
  margin-top: 5rem;
 }
 @media (max-width: 1200px) {
-  .main-cta .container .content-txt {
+  .main-cta .content-txt {
    margin-top: 0rem;
  }
 }
-.main-cta .container .content-txt h2 {
+.main-cta .content-txt h2 {
  margin-top: 1.5rem;
  font-weight: 700;
 }
-.main-cta .container .content-txt ul {
+.main-cta .content-txt ul {
  padding-top: 1rem;
 }
-.main-cta .container .content-txt ul li {
+.main-cta .content-txt ul li {
  margin-bottom: 0.5rem;
 }
-.main-cta .container .content-txt .button {
+.main-cta .content-txt .button {
  margin: 2rem 0;
  cursor: pointer;
  display: flex;
@@ -191,42 +192,39 @@ nav .links .navlink {
  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) {
+  .main-cta .content-txt .button > div:not(:last-child) {
    margin-right: 1rem;
  }
 }
-.main-cta .container .content-txt .button:hover {
+.main-cta .content-txt .button:hover {
  box-shadow: 0px 0px 20px 0px #f1c017;
 }
-.main-cta .container .content-txt .button span {
+.main-cta .content-txt .button span {
  font-weight: 900;
 }
 @media (max-width: 1200px) {
-  .main-cta .container .content-txt .button {
+  .main-cta .content-txt .button {
    margin: 1.5rem auto;
  }
 }
-@media (max-width: 1200px) {
-  .main-cta .container .desktop-illu {
-    display: none;
-  }
-}
-.main-cta .container .mobile-illu {
-  display: none;
+.main-cta .content-txt .button img {
+  transform: translate(0, 2px);
 }
 @media (max-width: 1200px) {
-  .main-cta .container .mobile-illu {
-    display: block;
-  }
-  .main-cta .container .mobile-illu .illu {
+  .main-cta .illu {
    width: 100%;
  }
 }
 .main-cta .mglLogo {
-  margin: auto;
+  margin-top: 5rem;
  display: flex;
  padding: 1rem;
 }
+@media (max-width: 1200px) {
+  .main-cta .mglLogo {
+    margin-top: 0;
+  }
+}

 .explanation {
  background: #1b1c22;
@@ -253,6 +251,7 @@ nav .links .navlink {
  }
  .explanation .compteurs > div:not(.gaz-color) {
    margin-bottom: 2rem;
+    margin-right: 0;
  }
  .explanation .compteurs span {
    margin-bottom: 5rem;

--- a/index.css.map
+++ b/index.css.map
-{"version":3,"sourceRoot":"","sources":["_globals.scss","_variables.scss","index.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAKF;AAAA;EAEE;EACA,YChBM;;;AD6DR;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA,OC7EM;ED8EN;EACA;;;AAEF;EACE;EACA;EACA,OCpFM;EDqFN;EACA;;;AAEF;EACE;EACA,OC1FM;ED2FN;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA,OC5GM;;;AD+GR;EACE,OClHO;;;ADqHT;EACE;AAAA;IAEE;;;AErHJ;EFmBE;EEjBA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;;AFOA;EEpBF;IFqBI;;;AEPF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE;IACE;;EAEF;IACE;;;;AAKN;EACE;;AACA;EAFF;IAGI;;;;AAKF;EACE,WFvCY;EEwCZ;EACA;EACA;EACA;EACA;EACA;;AACA;EARF;IASI;;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAEF;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;EF3CN;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EEyBM;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFhDN;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;AEiCI;EAhBF;IAiBI;;;AAKJ;EADF;IAEI;;;AAGJ;EACE;;AACA;EAFF;IAGI;;EACA;IACE;;;AAKR;EACE;EACA;EACA;;;AAIJ;EACE,YDtHS;ECuHT;EACA;;AACA;EAJF;IAKI;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAVF;IAWI;;EACA;IACE;;EAEF;IACE;;;AAIJ;EACE,OD7IC;EC8ID;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAIN;EACE,OD5LO;EC6LP;;AAEF;EACE,OD/LM;ECgMN;;AAEF;EACE,ODlMQ;ECmMR;;AAGJ;EACE;;AAEE;EADF;IAEI;;;;AAMR;EACE;EAMA;EACA;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDzOU;EC0OV;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;AAGJ;EACE,ODlQI;ECmQJ;EACA;EACA;;AACA;EACE;;AAGJ;EACE,OD3QI;;AC6QN;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAGJ;EACE;EACA;;AACA;EAHF;IAII;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;IACA;IACA;;;AAEF;EACE;;;AAIN;EACE,YD5SS;;AC6ST;EACE;EACA;EACA;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;IACA;;EACA;IACE;IACA;IACA;;EACA;IAEE;IACA;IACA;IACA;IACA,YD/UD;ICgVC;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAGJ;IACE;IACA;IACA;;EAEF;IACE;;;AAIF;EAEE;;AACA;EAHF;IAII;;;AAIF;EADF;IAEI;;;AAGJ;EACE;EACA;EACA;;AAGA;EACE,ODrXG;;ACyXL;EACE,ODhXG;;ACoXL;EACE,ODhYI;;ACqYZ;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;;;AAEF;EACE;EACA;;;AAIN;EACE,kBDtZM;ECuZN;EACA;EACA;;AAEA;EANF;IAOI;;EACA;IACE;;EAEA;AAAA;IAEE;;EAGJ;IACE;IACA;IACA;IACA;;;AAIJ;EACE;;AAEF;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE,WFpbY;EEqbZ;EACA;EACA;EACA;;AACA;EFnaF;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EEiZI;EACA;EACA;EACA;EACA;;AFraJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;;AEyZJ;EACE,YDndS;;ACodT;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;IACA;;;AAEF;EACE;EACA;;AAGA;EADF;IAEI;IACA;;;AAIN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAGJ;EACE;EACA;;AAGA;EADF;IAEI;;;AAGJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAGJ;EACE;EACA;;AAEF;EACE,ODzgBM;;AC2gBR;EACE,OD3gBQ;;AC6gBV;EACE,ODhhBO;;ACkhBT;EACE,ODrgBG;;ACwgBL;EFxfF;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EEseI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF7fJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;;AEifJ;EACE;EACA,YD7iBM;EC8iBN;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA,YDljBQ;ECmjBR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAKN;EACE,kBDnlBM;EColBN;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE,ODnmBK;EComBL;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EAjCF;IAkCI;IACA;;EAEA;IACE;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE","file":"index.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["_globals.scss","_variables.scss","index.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAKF;AAAA;EAEE;EACA,YChBM;;;AD6DR;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA,OC7EM;ED8EN;EACA;;;AAEF;EACE;EACA;EACA,OCpFM;EDqFN;EACA;;;AAEF;EACE;EACA,OC1FM;ED2FN;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA,OC5GM;;;AD+GR;EACE,OClHO;;;ADqHT;EACE;AAAA;IAEE;;;AErHJ;EFmBE;EEjBA;EACA;EACA;EACA;EAKA;EACA;EACA;EACA;;AFOA;EEpBF;IFqBI;;;AEPF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGJ;EACE;IACE;;EAEF;IACE;;;;AAKN;EACE;;AACA;EAFF;IAGI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EARF;IASI;IACA;;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAEF;EACE;EACA;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;EF3CJ;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EEyBI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFhDJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;AEiCE;EAhBF;IAiBI;;;AAEF;EACE;;AAKJ;EADF;IAEI;;;AAIJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAKN;EACE,YDnHS;ECoHT;EACA;;AACA;EAJF;IAKI;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAVF;IAWI;;EACA;IACE;IACA;;EAEF;IACE;;;AAIJ;EACE,OD3IC;EC4ID;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAIN;EACE,OD1LO;EC2LP;;AAEF;EACE,OD7LM;EC8LN;;AAEF;EACE,ODhMQ;ECiMR;;AAGJ;EACE;;AAEE;EADF;IAEI;;;;AAMR;EACE;EAMA;EACA;EACA;;AACA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDvOU;ECwOV;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;;;AAGJ;EACE,ODhQI;ECiQJ;EACA;EACA;;AACA;EACE;;AAGJ;EACE,ODzQI;;AC2QN;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAGJ;EACE;EACA;;AACA;EAHF;IAII;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;IACA;IACA;;;AAEF;EACE;;;AAIN;EACE,YD1SS;;AC2ST;EACE;EACA;EACA;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;IACA;;EACA;IACE;IACA;IACA;;EACA;IAEE;IACA;IACA;IACA;IACA,YD7UD;IC8UC;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAGJ;IACE;IACA;IACA;;EAEF;IACE;;;AAIF;EAEE;;AACA;EAHF;IAII;;;AAIF;EADF;IAEI;;;AAGJ;EACE;EACA;EACA;;AAGA;EACE,ODnXG;;ACuXL;EACE,OD9WG;;ACkXL;EACE,OD9XI;;ACmYZ;EACE;EACA;EACA;EACA;;AACA;EALF;IAMI;;;AAEF;EACE;EACA;;;AAIN;EACE,kBDpZM;ECqZN;EACA;EACA;;AAEA;EANF;IAOI;;EACA;IACE;;EAEA;AAAA;IAEE;;EAGJ;IACE;IACA;IACA;IACA;;;AAIJ;EACE;;AAEF;AAAA;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE,WFlbY;EEmbZ;EACA;EACA;EACA;;AACA;EFjaF;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EE+YI;EACA;EACA;EACA;EACA;;AFnaJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;;AEuZJ;EACE,YDjdS;;ACkdT;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EANF;IAOI;IACA;;;AAEF;EACE;EACA;;AAGA;EADF;IAEI;IACA;;;AAIN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAGJ;EACE;EACA;;AAGA;EADF;IAEI;;;AAGJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;AAGJ;EACE;EACA;;AAEF;EACE,ODvgBM;;ACygBR;EACE,ODzgBQ;;AC2gBV;EACE,OD9gBO;;ACghBT;EACE,ODngBG;;ACsgBL;EFtfF;EACA;EACA;EACA;EAOA;EACA,YC9CO;ED+CP,OC7CM;ED8CN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EEoeI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF3fJ;EACE;IACE;;;AAeJ;EACE;;AAEF;EACE;;;AE+eJ;EACE;EACA,YD3iBM;EC4iBN;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA,YDhjBQ;ECijBR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAKN;EACE,kBDjlBM;ECklBN;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE,ODjmBK;ECkmBL;;AAEF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EAjCF;IAkCI;IACA;;EAEA;IACE;IACA;IACA;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE","file":"index.css"}
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -29,57 +29,45 @@
      </div>
    </nav>
    <section class="main-cta">
-      <div class="container">
-        <div class="content-txt">
-          <h1 class="text-36-white">
-            Ecolyo vous aide à suivre et agir sur vos consommations d'énergie et
+      <div class="content-txt">
+        <h1 class="text-36-white">
+          Ecolyo vous aide à suivre et agir sur vos consommations d'énergie et
+          d'eau
+        </h1>
+        <h2 class="text-18-white yellow">
+          Ecolyo est un service gratuit disponible sur smartphone et ordinateur
+        </h2>
+        <ul class="text-18-white-padding">
+          <li>
+            Retrouvez au même endroit vos consommations d'électricité, de gaz et
            d'eau
-          </h1>
-          <div class="content-img mobile-illu">
-            <img
-              src="assets/illu-landing.svg"
-              alt="illustration-graph"
-              class="illu illu-sun"
-            />
-          </div>
-          <h2 class="text-18-white yellow">
-            Ecolyo est un service gratuit disponible sur smartphone et
-            ordinateur
-          </h2>
-          <ul class="text-18-white-padding">
-            <li>
-              Retrouvez au même endroit vos consommations d'électricité, de gaz
-              et d'eau
-            </li>
-            <li>Comparez vos consommations dans le temps</li>
-            <li>
-              Avec les défis personnalisés, Ecolyo vous accompagne dans la
-              réduction de vos consommations d'énergie et d'eau
-            </li>
-          </ul>
-          <a
-            href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
-            target="_blank"
-            class="button robots-nocontent"
-          >
-            <img src="assets/ecolyo-shadow.png" alt="ecolyo-icon" />
-            Se créer un compte
-          </a>
-        </div>
-        <div class="content-img desktop-illu">
-          <img
-            id="illu-sun"
-            alt="Illustration Ecolyo"
-            src="assets/illu-landing.svg"
-          />
-        </div>
+          </li>
+          <li>Comparez vos consommations dans le temps</li>
+          <li>
+            Avec les défis personnalisés, Ecolyo vous accompagne dans la
+            réduction de vos consommations d'énergie et d'eau
+          </li>
+        </ul>
+        <a
+          href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
+          target="_blank"
+          class="button robots-nocontent"
+        >
+          <img src="assets/ecolyo-shadow.svg" alt="ecolyo-icon" />
+          Se créer un compte
+        </a>
      </div>
-
      <img
-        class="mglLogo"
+        id="illu"
+        class="illu"
+        alt="Illustration Ecolyo"
+        src="assets/illu-landing.svg"
+      />
+      <img
        id="mgl-logo"
-        src="assets/legal/mglLogo.svg"
+        class="mglLogo"
        alt="Logo Métropole Grand Lyon"
+        src="assets/legal/mglLogo.svg"
      />
    </section>

@@ -145,6 +133,7 @@
            Pour utiliser Ecolyo il vous faut créer <br />un
            <a
              href="https://www.grandlyon.com/services/self-data-cloud-personnel"
+              target="_blank"
              alt="Cloud personnel Grand Lyon"
            >
              Cloud personnel Grand Lyon
@@ -259,7 +248,7 @@
          />
        </div>
        <a
-          href="https://demarches.toodego.com/experimentation-ecolyo-hiver-2022-questionnaire-de-profil/"
+          href="https://manager.cozygrandlyon.cloud/grdlyon/onboarding_ecolyo"
          target="_blank"
          class="button"
        >

--- a/index.scss
+++ b/index.scss
@@ -49,72 +49,69 @@ nav {
 }

 .main-cta {
-  .container {
-    max-width: $content-width;
-    margin: auto;
-    display: flex;
-    gap: 2rem;
-    justify-content: center;
-    align-items: flex-start;
-    padding-top: 5rem;
+  margin: auto;
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  padding: 5rem 2rem;
+  @media (max-width: $breakpoint) {
+    padding-top: 7rem;
+    padding-bottom: 2rem;
+  }
+  .content-txt {
+    margin-top: 5rem;
    @media (max-width: $breakpoint) {
-      padding-top: 7rem;
+      margin-top: 0rem;
    }
-    .content-txt {
-      margin-top: 5rem;
-      @media (max-width: $breakpoint) {
-        margin-top: 0rem;
-      }
-      h2 {
-        margin-top: 1.5rem;
-        font-weight: 700;
-      }
-      ul {
-        padding-top: 1rem;
-        li {
-          margin-bottom: 0.5rem;
-        }
-      }
-      .button {
-        margin: 2rem 0;
-        @include button($black, $yellow);
-        font-size: 1.25rem;
-        text-align: center;
-        justify-content: center;
-        gap: 0.5rem;
-        font-weight: 700;
-        line-height: 115%;
-        padding: 0.5rem 1rem 0.5rem 0.5rem;
-        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%
-          ),
-          $yellow;
-        @media (max-width: $breakpoint) {
-          margin: 1.5rem auto;
-        }
-      }
+    h2 {
+      margin-top: 1.5rem;
+      font-weight: 700;
    }
-    .desktop-illu {
-      @media (max-width: $breakpoint) {
-        display: none;
+    ul {
+      padding-top: 1rem;
+      li {
+        margin-bottom: 0.5rem;
      }
    }
-    .mobile-illu {
-      display: none;
+    .button {
+      margin: 2rem 0;
+      @include button($black, $yellow);
+      font-size: 1.25rem;
+      text-align: center;
+      justify-content: center;
+      gap: 0.5rem;
+      font-weight: 700;
+      line-height: 115%;
+      padding: 0.5rem 1rem 0.5rem 0.5rem;
+      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%
+        ),
+        $yellow;
      @media (max-width: $breakpoint) {
-        display: block;
-        .illu {
-          width: 100%;
-        }
+        margin: 1.5rem auto;
+      }
+      img {
+        transform: translate(0, 2px);
      }
    }
  }
+  .illu {
+    @media (max-width: $breakpoint) {
+      width: 100%;
+    }
+  }
+
  .mglLogo {
-    margin: auto;
+    margin-top: 5rem;
    display: flex;
    padding: 1rem;
+    @media (max-width: $breakpoint) {
+      margin-top: 0;
+    }
  }
 }

@@ -140,6 +137,7 @@ nav {
      flex-direction: column;
      & > div:not(.gaz-color) {
        margin-bottom: 2rem;
+        margin-right: 0;
      }
      span {
        margin-bottom: 5rem;