Merge branch 'feat/US670-winter-expe-2022' into 'master'

Feat/us670 winter expe 2022

See merge request web-et-numerique/llle_project/ecolyo_landing_page!5

.vscode/settings.json

+{
+  "editor.formatOnSave": true,
+  "editor.bracketPairColorization.enabled": true,
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#ec7616",
+    "activityBar.foreground": "#000000"
+  }
+}

_variables.scss

@@ -15,6 +15,7 @@ $light-blue: #61f0f2;
 $red: #ff7369;
 $red-alert: #ff0101;
 $purple: #9a6dd7;
-
+$gl-red: #ff0101;
+$grey-dark: #1b1c22;
 $small-device: 768px;
 $large-device: 1200px;

expe-winter-assets/ecolyo-text-black.svg

+<svg width="128" height="39" viewBox="0 0 128 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.8075 36.6338C33.2027 30.1382 31.9284 20.9035 31.0789 7.12974C25.8121 6.89496 21.1399 5.25149 16.8075 2.51239C12.4751 5.25149 7.80285 6.89496 2.53599 7.12974C1.6865 20.9035 0.412264 30.1382 16.8075 36.6338Z" fill="#1B1C22"/>
+<path d="M16.8077 0L15.697 0.702234C11.6352 3.27024 7.30966 4.78233 2.44405 4.99923L0.557406 5.08333L0.439412 6.99651C0.404372 7.56465 0.36795 8.12988 0.331738 8.69187C-0.0579247 14.7391 -0.423396 20.411 1.21645 25.2986C3.10703 30.9335 7.49288 35.2327 16.0438 38.6204L16.8077 38.9231V36.6338C1.0553 30.3929 1.61397 21.6235 2.43543 8.72903C2.46895 8.20284 2.50291 7.66979 2.53622 7.12976C7.80307 6.89498 12.4753 5.25152 16.8077 2.51242V0Z" fill="#FFC600"/>
+<path d="M16.8075 0L17.9183 0.702234C21.98 3.27024 26.3056 4.78233 31.1712 4.99923L33.0578 5.08333L33.1758 6.99651C33.2109 7.56465 33.2473 8.12988 33.2835 8.69187C33.6732 14.7391 34.0386 20.411 32.3988 25.2986C30.5082 30.9335 26.1224 35.2327 17.5714 38.6204L16.8075 38.9231V36.6338C32.5599 30.3929 32.0013 21.6235 31.1798 8.72903C31.1463 8.20284 31.1123 7.66979 31.079 7.12976C25.8122 6.89498 21.14 5.25152 16.8075 2.51242V0Z" fill="#DB8300"/>
+<path d="M11.6271 13.4143H12.3724C12.6701 13.4143 12.9555 13.5329 13.166 13.7441C13.3765 13.9552 13.4947 14.2417 13.4947 14.5403V25.9709H10.5047V14.5403C10.5047 14.2417 10.623 13.9552 10.8334 13.7441C11.0439 13.5329 11.3294 13.4143 11.6271 13.4143ZM16.8057 18.9802H17.551C17.8487 18.9802 18.1342 19.0989 18.3446 19.31C18.5551 19.5212 18.6734 19.8076 18.6734 20.1063V25.9709H15.6833V20.1063C15.6833 19.8076 15.8016 19.5212 16.0121 19.31C16.2225 19.0989 16.508 18.9802 16.8057 18.9802ZM22.293 16.8271H23.0383C23.336 16.8271 23.6214 16.9458 23.8319 17.1569C24.0424 17.3681 24.1606 17.6545 24.1606 17.9532V25.9709H21.1706V17.9532C21.1706 17.6545 21.2889 17.3681 21.4993 17.1569C21.7098 16.9458 21.9953 16.8271 22.293 16.8271Z" fill="#FFC600"/>
+<path d="M59.8159 9.57269V11.8348H49.8302V18.6498H57.9146V20.826H49.8302V27.8271H59.8159V30.0892H47V9.57269H59.8159Z" fill="#121212"/>
+<path d="M73.4897 18.163C73.4123 18.268 73.3349 18.3491 73.2575 18.4064C73.1801 18.4637 73.0688 18.4923 72.9237 18.4923C72.7786 18.4923 72.6189 18.435 72.4447 18.3205C72.2802 18.1964 72.0674 18.0628 71.8061 17.9196C71.5449 17.7764 71.2256 17.6476 70.8482 17.533C70.4805 17.409 70.0257 17.3469 69.4839 17.3469C68.7678 17.3469 68.1341 17.4758 67.5825 17.7335C67.031 17.9816 66.5665 18.3443 66.1892 18.8216C65.8215 19.2988 65.5409 19.8763 65.3474 20.554C65.1635 21.2316 65.0716 21.9905 65.0716 22.8304C65.0716 23.7085 65.1732 24.4912 65.3764 25.1784C65.5796 25.8561 65.865 26.4288 66.2327 26.8965C66.6004 27.3546 67.0455 27.7078 67.568 27.9559C68.1002 28.1946 68.6953 28.3139 69.3532 28.3139C69.9822 28.3139 70.4998 28.2423 70.9062 28.0991C71.3126 27.9464 71.6513 27.7794 71.9222 27.598C72.1931 27.4167 72.4157 27.2544 72.5899 27.1112C72.764 26.9585 72.9382 26.8822 73.1124 26.8822C73.3349 26.8822 73.4994 26.9633 73.6059 27.1256L74.3316 28.0562C73.6929 28.8293 72.8947 29.3972 71.9367 29.7599C70.9788 30.1131 69.9677 30.2896 68.9033 30.2896C67.9841 30.2896 67.1277 30.1226 66.3343 29.7885C65.5505 29.4545 64.8684 28.9725 64.2878 28.3425C63.7073 27.703 63.2477 26.9203 62.909 25.9945C62.58 25.0686 62.4155 24.014 62.4155 22.8304C62.4155 21.7518 62.5655 20.7544 62.8654 19.8381C63.1751 18.9218 63.6202 18.1344 64.2007 17.4758C64.791 16.8076 65.5167 16.2874 66.3779 15.9152C67.239 15.543 68.226 15.3568 69.3387 15.3568C70.3644 15.3568 71.2739 15.5239 72.0674 15.8579C72.8608 16.1825 73.5623 16.6454 74.1719 17.2467L73.4897 18.163Z" fill="#121212"/>
+<path d="M82.9615 15.3568C84.0356 15.3568 85.0032 15.5334 85.8643 15.8866C86.7352 16.2397 87.4706 16.7408 88.0705 17.3899C88.6801 18.0389 89.1445 18.8264 89.4638 19.7522C89.7928 20.6685 89.9573 21.6946 89.9573 22.8304C89.9573 23.9758 89.7928 25.0066 89.4638 25.9229C89.1445 26.8392 88.6801 27.6219 88.0705 28.2709C87.4706 28.92 86.7352 29.4211 85.8643 29.7742C85.0032 30.1178 84.0356 30.2896 82.9615 30.2896C81.8875 30.2896 80.915 30.1178 80.0442 29.7742C79.183 29.4211 78.4476 28.92 77.8381 28.2709C77.2285 27.6219 76.7592 26.8392 76.4302 25.9229C76.1012 25.0066 75.9367 23.9758 75.9367 22.8304C75.9367 21.6946 76.1012 20.6685 76.4302 19.7522C76.7592 18.8264 77.2285 18.0389 77.8381 17.3899C78.4476 16.7408 79.183 16.2397 80.0442 15.8866C80.915 15.5334 81.8875 15.3568 82.9615 15.3568ZM82.9615 28.2996C84.4129 28.2996 85.4967 27.8223 86.2127 26.8678C86.9287 25.9038 87.2867 24.5628 87.2867 22.8447C87.2867 21.1171 86.9287 19.7713 86.2127 18.8073C85.4967 17.8432 84.4129 17.3612 82.9615 17.3612C82.2261 17.3612 81.5875 17.4853 81.0457 17.7335C80.5038 17.9816 80.049 18.3396 79.6814 18.8073C79.3233 19.275 79.0524 19.8524 78.8686 20.5396C78.6944 21.2173 78.6073 21.9857 78.6073 22.8447C78.6073 23.7037 78.6944 24.4721 78.8686 25.1498C79.0524 25.8275 79.3233 26.4001 79.6814 26.8678C80.049 27.326 80.5038 27.6791 81.0457 27.9273C81.5875 28.1755 82.2261 28.2996 82.9615 28.2996Z" fill="#121212"/>
+<path d="M96.0144 9V30.0892H93.4309V9H96.0144Z" fill="#121212"/>
+<path d="M104.878 34.37C104.791 34.5609 104.68 34.7137 104.545 34.8282C104.419 34.9427 104.22 35 103.95 35H102.034L104.719 29.2445L98.6519 15.5859H100.887C101.11 15.5859 101.284 15.6432 101.41 15.7577C101.535 15.8627 101.627 15.982 101.685 16.1156L105.619 25.25C105.706 25.46 105.778 25.67 105.836 25.88C105.904 26.0899 105.962 26.3047 106.011 26.5242C106.078 26.3047 106.146 26.0899 106.214 25.88C106.281 25.67 106.359 25.4552 106.446 25.2357L110.263 16.1156C110.321 15.9629 110.418 15.8388 110.553 15.7434C110.699 15.6384 110.853 15.5859 111.018 15.5859H113.079L104.878 34.37Z" fill="#121212"/>
+<path d="M121.004 15.3568C122.078 15.3568 123.046 15.5334 123.907 15.8866C124.778 16.2397 125.513 16.7408 126.113 17.3899C126.723 18.0389 127.187 18.8264 127.507 19.7522C127.836 20.6685 128 21.6946 128 22.8304C128 23.9758 127.836 25.0066 127.507 25.9229C127.187 26.8392 126.723 27.6219 126.113 28.2709C125.513 28.92 124.778 29.4211 123.907 29.7742C123.046 30.1178 122.078 30.2896 121.004 30.2896C119.93 30.2896 118.958 30.1178 118.087 29.7742C117.226 29.4211 116.49 28.92 115.881 28.2709C115.271 27.6219 114.802 26.8392 114.473 25.9229C114.144 25.0066 113.979 23.9758 113.979 22.8304C113.979 21.6946 114.144 20.6685 114.473 19.7522C114.802 18.8264 115.271 18.0389 115.881 17.3899C116.49 16.7408 117.226 16.2397 118.087 15.8866C118.958 15.5334 119.93 15.3568 121.004 15.3568ZM121.004 28.2996C122.456 28.2996 123.539 27.8223 124.255 26.8678C124.971 25.9038 125.329 24.5628 125.329 22.8447C125.329 21.1171 124.971 19.7713 124.255 18.8073C123.539 17.8432 122.456 17.3612 121.004 17.3612C120.269 17.3612 119.63 17.4853 119.088 17.7335C118.547 17.9816 118.092 18.3396 117.724 18.8073C117.366 19.275 117.095 19.8524 116.911 20.5396C116.737 21.2173 116.65 21.9857 116.65 22.8447C116.65 23.7037 116.737 24.4721 116.911 25.1498C117.095 25.8275 117.366 26.4001 117.724 26.8678C118.092 27.326 118.547 27.6791 119.088 27.9273C119.63 28.1755 120.269 28.2996 121.004 28.2996Z" fill="#121212"/>
+</svg>

expe-winter-assets/step1.svg

+<svg width="300" height="250" viewBox="0 0 300 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="81.5952" y="38.5" width="107.842" height="149.112" stroke="#E0E0E0" stroke-width="3"/>
+<path d="M162.571 173.656H144.53C144.218 173.656 143.92 173.532 143.699 173.311C143.479 173.091 143.355 172.792 143.354 172.48V166.149C143.355 165.837 143.479 165.538 143.699 165.317C143.92 165.097 144.218 164.973 144.53 164.972H162.571C162.883 164.973 163.182 165.097 163.402 165.317C163.623 165.538 163.747 165.837 163.747 166.149V172.48C163.747 172.792 163.623 173.091 163.402 173.311C163.182 173.532 162.883 173.656 162.571 173.656Z" fill="#45D1B8"/>
+<path d="M163.616 123.264H106.528V123.799H163.616V123.264Z" fill="#CCCCCC"/>
+<path d="M108.057 119.372C108.901 119.372 109.586 118.687 109.586 117.842C109.586 116.996 108.901 116.311 108.057 116.311C107.212 116.311 106.528 116.996 106.528 117.842C106.528 118.687 107.212 119.372 108.057 119.372Z" fill="#121212"/>
+<path d="M113.115 119.372C113.959 119.372 114.644 118.687 114.644 117.842C114.644 116.996 113.959 116.311 113.115 116.311C112.27 116.311 111.586 116.996 111.586 117.842C111.586 118.687 112.27 119.372 113.115 119.372Z" fill="#121212"/>
+<path d="M118.172 119.372C119.017 119.372 119.701 118.687 119.701 117.842C119.701 116.996 119.017 116.311 118.172 116.311C117.328 116.311 116.644 116.996 116.644 117.842C116.644 118.687 117.328 119.372 118.172 119.372Z" fill="#121212"/>
+<path d="M123.231 119.372C124.075 119.372 124.76 118.687 124.76 117.842C124.76 116.996 124.075 116.311 123.231 116.311C122.386 116.311 121.702 116.996 121.702 117.842C121.702 118.687 122.386 119.372 123.231 119.372Z" fill="#121212"/>
+<path d="M128.288 119.372C129.133 119.372 129.817 118.687 129.817 117.842C129.817 116.996 129.133 116.311 128.288 116.311C127.444 116.311 126.759 116.996 126.759 117.842C126.759 118.687 127.444 119.372 128.288 119.372Z" fill="#121212"/>
+<path d="M133.346 119.372C134.191 119.372 134.875 118.687 134.875 117.842C134.875 116.996 134.191 116.311 133.346 116.311C132.502 116.311 131.817 116.996 131.817 117.842C131.817 118.687 132.502 119.372 133.346 119.372Z" fill="#121212"/>
+<path d="M138.404 119.372C139.248 119.372 139.933 118.687 139.933 117.842C139.933 116.996 139.248 116.311 138.404 116.311C137.56 116.311 136.875 116.996 136.875 117.842C136.875 118.687 137.56 119.372 138.404 119.372Z" fill="#121212"/>
+<path d="M143.462 119.372C144.306 119.372 144.991 118.687 144.991 117.842C144.991 116.996 144.306 116.311 143.462 116.311C142.618 116.311 141.933 116.996 141.933 117.842C141.933 118.687 142.618 119.372 143.462 119.372Z" fill="#121212"/>
+<path d="M163.616 107.628H106.528V108.163H163.616V107.628Z" fill="#CCCCCC"/>
+<path d="M108.057 103.736C108.901 103.736 109.586 103.051 109.586 102.205C109.586 101.36 108.901 100.675 108.057 100.675C107.212 100.675 106.528 101.36 106.528 102.205C106.528 103.051 107.212 103.736 108.057 103.736Z" fill="#121212"/>
+<path d="M113.115 103.736C113.959 103.736 114.644 103.051 114.644 102.205C114.644 101.36 113.959 100.675 113.115 100.675C112.27 100.675 111.586 101.36 111.586 102.205C111.586 103.051 112.27 103.736 113.115 103.736Z" fill="#121212"/>
+<path d="M118.172 103.736C119.017 103.736 119.701 103.051 119.701 102.205C119.701 101.36 119.017 100.675 118.172 100.675C117.328 100.675 116.644 101.36 116.644 102.205C116.644 103.051 117.328 103.736 118.172 103.736Z" fill="#121212"/>
+<path d="M123.231 103.736C124.075 103.736 124.76 103.051 124.76 102.205C124.76 101.36 124.075 100.675 123.231 100.675C122.386 100.675 121.702 101.36 121.702 102.205C121.702 103.051 122.386 103.736 123.231 103.736Z" fill="#121212"/>
+<path d="M128.288 103.736C129.133 103.736 129.817 103.051 129.817 102.205C129.817 101.36 129.133 100.675 128.288 100.675C127.444 100.675 126.759 101.36 126.759 102.205C126.759 103.051 127.444 103.736 128.288 103.736Z" fill="#121212"/>
+<path d="M163.616 141.312H106.528V141.847H163.616V141.312Z" fill="#CCCCCC"/>
+<path d="M108.057 137.421C108.901 137.421 109.586 136.736 109.586 135.89C109.586 135.045 108.901 134.36 108.057 134.36C107.212 134.36 106.528 135.045 106.528 135.89C106.528 136.736 107.212 137.421 108.057 137.421Z" fill="#121212"/>
+<path d="M113.115 137.421C113.959 137.421 114.644 136.736 114.644 135.89C114.644 135.045 113.959 134.36 113.115 134.36C112.27 134.36 111.586 135.045 111.586 135.89C111.586 136.736 112.27 137.421 113.115 137.421Z" fill="#121212"/>
+<path d="M118.172 137.421C119.017 137.421 119.701 136.736 119.701 135.89C119.701 135.045 119.017 134.36 118.172 134.36C117.328 134.36 116.644 135.045 116.644 135.89C116.644 136.736 117.328 137.421 118.172 137.421Z" fill="#121212"/>
+<path d="M123.231 137.421C124.075 137.421 124.76 136.736 124.76 135.89C124.76 135.045 124.075 134.36 123.231 134.36C122.386 134.36 121.702 135.045 121.702 135.89C121.702 136.736 122.386 137.421 123.231 137.421Z" fill="#121212"/>
+<path d="M128.288 137.421C129.133 137.421 129.817 136.736 129.817 135.89C129.817 135.045 129.133 134.36 128.288 134.36C127.444 134.36 126.759 135.045 126.759 135.89C126.759 136.736 127.444 137.421 128.288 137.421Z" fill="#121212"/>
+<path d="M133.346 137.421C134.191 137.421 134.875 136.736 134.875 135.89C134.875 135.045 134.191 134.36 133.346 134.36C132.502 134.36 131.817 135.045 131.817 135.89C131.817 136.736 132.502 137.421 133.346 137.421Z" fill="#121212"/>
+<path d="M243.273 213.503H55.7267C55.3252 213.503 55 213.36 55 213.184C55 213.008 55.3252 212.865 55.7267 212.865H243.273C243.675 212.865 244 213.008 244 213.184C244 213.36 243.675 213.503 243.273 213.503Z" fill="#3F3D56"/>
+<path d="M196.937 146.133C197.065 146.192 197.188 146.261 197.305 146.339L209.021 141.333L209.439 138.243L214.121 138.215L213.844 145.301L198.38 149.395C198.348 149.503 198.309 149.608 198.264 149.711C198.04 150.189 197.68 150.59 197.23 150.863C196.78 151.137 196.259 151.272 195.732 151.25C195.206 151.228 194.698 151.051 194.271 150.741C193.845 150.431 193.52 150.002 193.337 149.507C193.153 149.013 193.12 148.475 193.241 147.962C193.362 147.448 193.631 146.982 194.016 146.622C194.401 146.261 194.883 146.022 195.403 145.936C195.922 145.849 196.456 145.918 196.937 146.133Z" fill="#FFB8B8"/>
+<path d="M215.823 210.35H212.621L211.098 197.984L215.824 197.984L215.823 210.35Z" fill="#FFB8B8"/>
+<path d="M210.333 209.434H216.51V213.327H206.445C206.445 212.295 206.855 211.304 207.584 210.574C208.313 209.844 209.302 209.434 210.333 209.434Z" fill="#2F2E41"/>
+<path d="M228.278 209.443L225.091 209.757L222.364 197.6L227.067 197.136L228.278 209.443Z" fill="#FFB8B8"/>
+<path d="M222.725 209.07L228.871 208.464L229.252 212.339L219.236 213.326C219.186 212.817 219.237 212.304 219.385 211.815C219.533 211.325 219.776 210.87 220.1 210.475C220.424 210.08 220.823 209.752 221.273 209.511C221.723 209.27 222.217 209.12 222.725 209.07Z" fill="#2F2E41"/>
+<path d="M216.715 125.127C220.258 125.127 223.131 122.252 223.131 118.704C223.131 115.157 220.258 112.281 216.715 112.281C213.172 112.281 210.299 115.157 210.299 118.704C210.299 122.252 213.172 125.127 216.715 125.127Z" fill="#FFB8B8"/>
+<path d="M211.906 207.849C211.63 207.85 211.364 207.753 211.153 207.576C210.942 207.399 210.8 207.153 210.752 206.882C209.095 197.67 203.677 167.55 203.547 166.715C203.544 166.696 203.543 166.677 203.543 166.657V164.411C203.543 164.33 203.568 164.25 203.616 164.183L204.332 163.18C204.366 163.131 204.41 163.092 204.462 163.063C204.514 163.035 204.571 163.019 204.63 163.016C208.711 162.825 222.075 162.263 222.721 163.071C223.369 163.883 223.14 166.342 223.088 166.826L223.09 166.877L229.094 205.318C229.141 205.624 229.066 205.937 228.884 206.188C228.703 206.44 228.43 206.609 228.124 206.66L224.374 207.279C224.095 207.324 223.808 207.267 223.568 207.119C223.327 206.97 223.147 206.74 223.061 206.47C221.901 202.76 218.012 190.278 216.664 185.448C216.656 185.418 216.637 185.391 216.61 185.374C216.584 185.356 216.552 185.349 216.52 185.354C216.489 185.358 216.46 185.374 216.44 185.398C216.419 185.422 216.408 185.453 216.408 185.484C216.476 190.088 216.638 201.835 216.694 205.892L216.701 206.329C216.703 206.625 216.595 206.911 216.397 207.13C216.199 207.35 215.926 207.487 215.631 207.515L212.015 207.844C211.979 207.847 211.942 207.849 211.906 207.849Z" fill="#2F2E41"/>
+<path d="M212.643 127.652C211.524 128.319 210.854 129.543 210.469 130.789C209.757 133.096 209.329 135.481 209.193 137.892L208.787 145.109L203.757 164.244C208.117 167.937 210.631 167.097 216.499 164.077C222.367 161.056 223.038 165.084 223.038 165.084L224.211 148.803L225.888 131.012C225.512 130.558 225.086 130.148 224.618 129.789C223.069 128.583 221.266 127.744 219.345 127.337C217.425 126.929 215.437 126.964 213.532 127.437L212.643 127.652Z" fill="#45D1B8"/>
+<path d="M211.01 149.998C211.145 150.049 211.276 150.11 211.402 150.182L222.986 144.377L223.178 141.232L227.957 140.902L228.213 148.071L212.732 153.196C212.606 153.739 212.317 154.231 211.905 154.605C211.493 154.98 210.976 155.22 210.425 155.294C209.873 155.367 209.312 155.271 208.816 155.018C208.32 154.765 207.913 154.366 207.649 153.875C207.384 153.385 207.276 152.825 207.337 152.271C207.398 151.717 207.626 151.195 207.991 150.774C208.356 150.353 208.84 150.053 209.38 149.915C209.919 149.776 210.487 149.805 211.01 149.998Z" fill="#FFB8B8"/>
+<path d="M225.804 131.093C228.655 132.1 229.157 143.011 229.157 143.011C225.804 141.165 221.78 144.186 221.78 144.186C221.78 144.186 220.941 141.332 219.935 137.64C219.632 136.601 219.595 135.502 219.83 134.446C220.064 133.389 220.562 132.409 221.277 131.597C221.277 131.597 222.954 130.085 225.804 131.093Z" fill="#45D1B8"/>
+<path d="M222.468 120.402C221.668 119.762 220.578 120.926 220.578 120.926L219.938 115.164C219.938 115.164 215.941 115.643 213.383 115.004C210.825 114.365 210.426 117.325 210.426 117.325C210.294 116.129 210.267 114.924 210.346 113.724C210.506 112.283 212.584 110.843 216.261 109.882C219.938 108.922 221.856 113.083 221.856 113.083C224.415 114.364 223.267 121.043 222.468 120.402Z" fill="#2F2E41"/>
+<path d="M122.884 57.046C122.675 57.0462 122.474 57.1302 122.327 57.2794C122.179 57.4286 122.095 57.6309 122.095 57.842V78.0474C122.095 78.2584 122.179 78.4608 122.327 78.61C122.474 78.7592 122.675 78.8431 122.884 78.8433H150.37C150.579 78.8431 150.779 78.7592 150.927 78.61C151.075 78.4608 151.158 78.2584 151.159 78.0474V57.842C151.158 57.6309 151.075 57.4286 150.927 57.2794C150.779 57.1302 150.579 57.0462 150.37 57.046L122.884 57.046Z" fill="#45D1B8"/>
+<path d="M137.031 69.9627C139.483 69.9627 141.471 67.9747 141.471 65.5225C141.471 63.0702 139.483 61.0823 137.031 61.0823C134.578 61.0823 132.59 63.0702 132.59 65.5225C132.59 67.9747 134.578 69.9627 137.031 69.9627Z" fill="white"/>
+<path d="M143.893 76.8254C143.894 77.5272 143.728 78.2191 143.408 78.8437H129.846C129.501 78.1668 129.335 77.4124 129.364 76.6529C129.394 75.8934 129.618 75.1542 130.015 74.506C130.411 73.8579 130.968 73.3225 131.631 72.9512C132.294 72.5798 133.042 72.385 133.802 72.3853H139.453C140.63 72.3846 141.758 72.8515 142.591 73.6832C143.424 74.515 143.892 75.6435 143.893 76.8204V76.8254Z" fill="white"/>
+</svg>

expe-winter-assets/step3.svg

+<svg width="324" height="250" viewBox="0 0 324 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_11182_70532)">
+<path d="M112.578 57.1267L112.44 55.8116L111.213 56.3023L31.4754 88.1938L30.773 88.4747L30.8518 89.2276L34.6689 125.726L34.1384 125.938L34.7773 126.762L34.8851 127.794L35.413 127.583L57.4735 156.053L61.4137 197.783L61.5393 199.113L62.779 198.617L142.517 166.726L143.212 166.448L143.142 165.702L139.174 123.683L139.147 123.393L138.969 123.164L116.444 94.0943L112.578 57.1267Z" stroke="#CBA991" stroke-width="2"/>
+<path d="M58.441 155.668L138.179 123.777L142.147 165.796L62.4085 197.688L58.441 155.668Z" fill="white"/>
+<path d="M58.4414 155.669L138.179 123.777L115.48 94.4829L35.7417 126.374L58.4414 155.669Z" fill="#F5E3D8"/>
+<path d="M31.8457 89.1227L111.584 57.2312L115.48 94.4824L35.7415 126.374L31.8457 89.1227Z" fill="white"/>
+<mask id="mask0_11182_70532" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="65" y="129" width="67" height="57">
+<path d="M65.7671 154.919L128.963 129.644L131.57 148.246L106.382 158.319L107.504 170.495L69.0815 185.862L65.7671 154.919Z" fill="#D87B39"/>
+</mask>
+<g mask="url(#mask0_11182_70532)">
+<rect width="79.5334" height="3.23904" transform="matrix(0.928492 -0.371353 0.371117 0.928586 61.4136 160.149)" fill="#D87B39"/>
+<path d="M62.0073 170.451L132.667 142.191L133.307 145.423L63.2094 173.459L62.0073 170.451Z" fill="#D87B39"/>
+<rect width="79.5334" height="3.23899" transform="matrix(0.928492 -0.371353 0.371117 0.928586 63.9033 180.52)" fill="#D87B39"/>
+</g>
+<mask id="mask1_11182_70532" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="44" y="99" width="85" height="52">
+<path d="M109.957 99.7438L44.2904 126.007L63.2141 150.707L128.881 124.444L109.957 99.7438Z" fill="#D87B39"/>
+</mask>
+<g mask="url(#mask1_11182_70532)">
+<rect width="79.5334" height="3.23903" transform="matrix(0.928492 -0.371353 0.371117 0.928586 49.0981 138.038)" fill="#D87B39"/>
+<path d="M42.0825 130.041L73.344 117.537L76.5784 120.416L43.5203 133.638L42.0825 130.041Z" fill="#D87B39"/>
+<rect width="79.5334" height="3.23901" transform="matrix(0.928492 -0.371353 0.371117 0.928586 54.9536 146.162)" fill="#D87B39"/>
+</g>
+<path d="M74.5831 101.866C80.29 99.5835 83.3733 93.4367 81.2141 88.0342C79.055 82.6317 72.5855 80.3057 66.8785 82.5882C61.1716 84.8707 58.0883 91.0174 60.2475 96.4199C62.4066 101.822 68.8761 104.148 74.5831 101.866Z" fill="#D87B39" stroke="#D87B39" stroke-width="2"/>
+<path d="M60.8282 96.5661L63.9132 97.3528L64.6057 93.5399L68.9091 97.3752L68.8165 88.825L73.9902 94.8379L74.2902 88.6563L78.4527 92.4856L79.2452 88.5763L81.285 89.5209" stroke="white"/>
+</g>
+<g clip-path="url(#clip1_11182_70532)">
+<path d="M214.397 60.1455L214.852 58.9044L213.535 58.8049L127.9 52.3386L127.145 52.2816L126.885 52.9929L114.252 87.4749L113.682 87.4319L113.893 88.4539L113.537 89.4273L114.103 89.4701L121.385 124.775L106.561 164.013L106.088 165.262L107.419 165.363L193.054 171.829L193.801 171.886L194.066 171.184L208.993 131.675L209.096 131.403L209.037 131.119L201.602 95.0711L214.397 60.1455Z" stroke="#7D96AC" stroke-width="2"/>
+<path d="M122.423 124.855L208.058 131.322L193.131 170.832L107.496 164.365L122.423 124.855Z" fill="white"/>
+<path d="M122.423 124.856L208.058 131.322L200.565 94.9958L114.93 88.5295L122.423 124.856Z" fill="#D7E6F4"/>
+<path d="M127.823 53.3358L213.459 59.8021L200.565 94.9954L114.93 88.5291L127.823 53.3358Z" fill="white"/>
+<mask id="mask2_11182_70532" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="118" y="127" width="80" height="33">
+<path d="M129.331 127.409L197.201 132.534L191.356 150.399L164.306 148.357L159.956 159.793L118.691 156.677L129.331 127.409Z" fill="#D87B39"/>
+</mask>
+<g mask="url(#mask2_11182_70532)">
+<rect x="123.121" y="130.191" width="79.5334" height="3.24175" transform="rotate(4.31821 123.121 130.191)" fill="#3A98EC"/>
+<path d="M119.121 139.712L195.006 145.442L194.158 148.629L118.877 142.944L119.121 139.712Z" fill="#3A98EC"/>
+<rect x="116.392" y="149.595" width="79.5334" height="3.2417" transform="rotate(4.31821 116.392 149.595)" fill="#3A98EC"/>
+</g>
+<mask id="mask3_11182_70532" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="122" y="91" width="78" height="37">
+<path d="M193.291 97.2909L122.768 91.9657L128.892 122.499L199.416 127.825L193.291 97.2909Z" fill="#D87B39"/>
+</mask>
+<g mask="url(#mask3_11182_70532)">
+<rect x="121.792" y="104.895" width="79.5334" height="3.24173" transform="rotate(4.31821 121.792 104.895)" fill="#3A98EC"/>
+<path d="M119.011 94.6176L152.584 97.1527L154.222 101.165L118.719 98.484L119.011 94.6176Z" fill="#3A98EC"/>
+<rect x="123.475" y="114.776" width="79.5334" height="3.24172" transform="rotate(4.31821 123.475 114.776)" fill="#3A98EC"/>
+</g>
+<g clip-path="url(#clip2_11182_70532)">
+<path d="M171.155 73.932C170.657 79.3024 165.9 83.2526 160.53 82.755C155.16 82.2573 151.21 77.5004 151.707 72.13C152.205 66.7596 156.962 62.8094 162.332 63.307C167.702 63.8046 171.653 68.5616 171.155 73.932Z" fill="white" stroke="#3A98EC" stroke-width="3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.308 74.8292C151.422 72.9937 153.762 70.4498 156.868 70.7376C159.112 70.9455 160.107 72.4208 161.102 73.8961C162.097 75.3714 163.092 76.8467 165.336 77.0547C167.633 77.2675 169.183 75.765 170.548 74.4418C171.288 73.7244 171.974 73.0597 172.695 72.7496C172.705 73.1852 172.69 73.6259 172.649 74.0703C172.075 80.2656 166.587 84.8225 160.392 84.2485C155.165 83.7642 151.105 79.7825 150.308 74.8292Z" fill="#3A98EC"/>
+</g>
+</g>
+<g clip-path="url(#clip3_11182_70532)">
+<path d="M303.305 109.391L304.241 108.458L303.089 107.812L228.187 65.8021L227.527 65.4319L226.99 65.9667L200.983 91.8936L200.484 91.6143L200.244 92.6296L199.51 93.3616L200.005 93.6394L191.704 128.719L161.702 158.032L160.747 158.965L161.911 159.618L236.813 201.628L237.466 201.994L238.002 201.471L268.212 171.954L268.42 171.751L268.487 171.469L276.963 135.652L303.305 109.391Z" stroke="#789C96" stroke-width="2"/>
+<path d="M192.611 129.23L267.513 171.24L237.303 200.756L162.401 158.746L192.611 129.23Z" fill="white"/>
+<path d="M192.611 129.23L267.513 171.24L276.055 135.146L201.152 93.1357L192.611 129.23Z" fill="#C9F5EE"/>
+<path d="M227.696 66.6738L302.599 108.684L276.055 135.145L201.152 93.1355L227.696 66.6738Z" fill="white"/>
+<mask id="mask4_11182_70532" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="175" y="134" width="83" height="48">
+<path d="M197.795 134.461L257.159 167.755L244.319 181.484L220.659 168.214L211.888 176.745L175.795 156.502L197.795 134.461Z" fill="#D87B39"/>
+</mask>
+<g mask="url(#mask4_11182_70532)">
+<rect x="190.991" y="134.361" width="79.5334" height="3.24175" transform="rotate(29.2864 190.991 134.361)" fill="#45D1B8"/>
+<path d="M183.345 141.303L249.72 178.53L247.606 181.062L181.759 144.131L183.345 141.303Z" fill="#45D1B8"/>
+<rect x="176.7" y="149.112" width="79.5334" height="3.2417" transform="rotate(29.2864 176.7 149.112)" fill="#45D1B8"/>
+</g>
+<mask id="mask5_11182_70532" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="199" y="99" width="70" height="66">
+<path d="M268.491 134.156L206.807 99.5594L199.47 129.825L261.154 164.421L268.491 134.156Z" fill="#D87B39"/>
+</mask>
+<g mask="url(#mask5_11182_70532)">
+<rect x="200.464" y="110.868" width="79.5334" height="3.24174" transform="rotate(29.2864 200.464 110.868)" fill="#45D1B8"/>
+<path d="M202.282 100.377L231.647 116.847L231.438 121.176L200.385 103.759L202.282 100.377Z" fill="#45D1B8"/>
+<rect x="197.819" y="120.536" width="79.5334" height="3.24172" transform="rotate(29.2864 197.819 120.536)" fill="#45D1B8"/>
+</g>
+<g clip-path="url(#clip4_11182_70532)">
+<path d="M245.672 109.713C251.747 112.02 258.542 108.966 260.849 102.892C263.156 96.817 260.102 90.0223 254.027 87.7152C247.952 85.4082 241.158 88.4624 238.851 94.537C236.544 100.612 239.598 107.406 245.672 109.713Z" fill="#45D1B8" stroke="#45D1B8"/>
+<path d="M244.786 100.941C246.208 101.481 247.798 100.767 248.338 99.3451C248.877 97.9236 248.163 96.3337 246.741 95.7938C245.32 95.254 243.73 95.9687 243.19 97.3901C242.65 98.8116 243.365 100.402 244.786 100.941Z" fill="white" stroke="#45D1B8"/>
+<path d="M248.852 106.101C249.692 106.42 250.631 105.997 250.95 105.158C251.269 104.318 250.847 103.378 250.007 103.06C249.167 102.741 248.228 103.163 247.909 104.003C247.59 104.842 248.012 105.782 248.852 106.101Z" fill="white" stroke="#45D1B8"/>
+<path d="M250.325 100.635C252.619 101.506 255.185 100.353 256.056 98.0588C256.928 95.7649 255.774 93.1991 253.48 92.3279C251.186 91.4567 248.621 92.61 247.749 94.9039C246.878 97.1979 248.032 99.7637 250.325 100.635Z" fill="white" stroke="#45D1B8"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_11182_70532">
+<rect width="130.806" height="134.824" fill="white" transform="matrix(0.928492 -0.371353 0.371117 0.928586 0.537598 90.7432)"/>
+</clipPath>
+<clipPath id="clip1_11182_70532">
+<rect width="130.806" height="134.937" fill="white" transform="translate(98.9971 41) rotate(4.31821)"/>
+</clipPath>
+<clipPath id="clip2_11182_70532">
+<rect width="24.7843" height="24.7843" fill="white" transform="translate(150.235 59.5482) rotate(5.29376)"/>
+</clipPath>
+<clipPath id="clip3_11182_70532">
+<rect width="130.806" height="134.937" fill="white" transform="translate(206.771 43.3228) rotate(29.2864)"/>
+</clipPath>
+<clipPath id="clip4_11182_70532">
+<rect width="24.7843" height="24.7843" fill="white" transform="translate(242.665 82.7297) rotate(20.796)"/>
+</clipPath>
+</defs>
+</svg>

expehiver2022.css

+.experimentation-winter-2022 nav {
+  background: white;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-grid-columns: 0fr 3fr 0fr;
+      grid-template-columns: 0fr 3fr 0fr;
+}
+
+.experimentation-winter-2022 .text-36-white {
+  font-size: 2rem;
+  line-height: 2.6rem;
+  color: white;
+  font-weight: bold;
+}
+
+.experimentation-winter-2022 a.button-gl-nav,
+.experimentation-winter-2022 .button-gl {
+  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;
+  text-decoration: none;
+  display: block;
+  color: white;
+  background: #ff0101;
+  border-radius: 2px;
+  text-align: center;
+  padding: 0.4rem 1rem;
+  max-width: 160px;
+}
+
+.experimentation-winter-2022 a.button-gl {
+  padding: 0.6rem;
+  margin: 3rem 0 1rem 0;
+  font-size: 1.2rem;
+  max-width: 200px;
+}
+
+.experimentation-winter-2022 .content-txt {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+@media all and (max-width: 1200px) {
+  .experimentation-winter-2022 .content-txt .text-36-white {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+
+@media all and (max-width: 1200px) {
+  .experimentation-winter-2022 .content-txt .button-gl {
+    display: none;
+  }
+}
+
+.experimentation-winter-2022 .content-txt .content-img {
+  -webkit-box-ordinal-group: 3;
+      -ms-flex-order: 2;
+          order: 2;
+}
+
+.experimentation-winter-2022 .explanation {
+  background: #1b1c22;
+  max-height: 500px;
+}
+
+@media all and (max-width: 1200px) {
+  .experimentation-winter-2022 .explanation {
+    max-height: 550px;
+    min-height: 300px;
+  }
+}
+
+.experimentation-winter-2022 .explanation .content {
+  padding-top: 0;
+}
+
+.experimentation-winter-2022 .explanation .content .text-18-white-padding {
+  font-weight: 900;
+  font-size: 1.3rem;
+  text-align: center;
+}
+
+@media all and (max-width: 1200px) {
+  .experimentation-winter-2022 .explanation .content .text-18-white-padding br {
+    display: none;
+  }
+}
+
+.experimentation-winter-2022 .explanation .content .compteurs .prefix {
+  display: contents;
+}
+
+@media all and (max-width: 1200px) {
+  .experimentation-winter-2022 .explanation .content .compteurs {
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-align: baseline;
+        -ms-flex-align: baseline;
+            align-items: baseline;
+  }
+  .experimentation-winter-2022 .explanation .content .compteurs .prefix,
+  .experimentation-winter-2022 .explanation .content .compteurs span {
+    display: none;
+  }
+  .experimentation-winter-2022 .explanation .content .compteurs .bloc {
+    height: 160px;
+  }
+  .experimentation-winter-2022 .explanation .content .compteurs .bloc h3 {
+    margin-top: 3rem;
+    font-size: 1.3rem;
+  }
+  .experimentation-winter-2022 .explanation .content .compteurs .bloc.elec-color, .experimentation-winter-2022 .explanation .content .compteurs .bloc.water-color {
+    margin-right: 0.5rem;
+  }
+  .experimentation-winter-2022 .explanation .content .compteurs .bloc span {
+    display: none;
+  }
+  .experimentation-winter-2022 .explanation .content .compteurs .bloc .provider-logo {
+    margin-top: 0.5rem;
+  }
+  .experimentation-winter-2022 .explanation .content .compteurs .bloc .gazpar,
+  .experimentation-winter-2022 .explanation .content .compteurs .bloc .linky {
+    width: 60%;
+  }
+  .experimentation-winter-2022 .explanation .content .compteurs .bloc .teleo {
+    width: 90%;
+    margin-top: 1rem;
+  }
+  .experimentation-winter-2022 .explanation .content .compteurs .bloc .gazpar {
+    margin-top: 1rem;
+  }
+}
+
+.experimentation-winter-2022 .inscription {
+  background: white;
+}
+
+.experimentation-winter-2022 .inscription .banner {
+  background: #ff0101;
+  padding: 1rem;
+  text-align: center;
+  height: 108px;
+  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;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.experimentation-winter-2022 .inscription .banner h2 {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+@media all and (max-width: 1200px) {
+  .experimentation-winter-2022 .inscription .banner h2 {
+    font-size: 1.4rem;
+  }
+}
+
+.experimentation-winter-2022 .inscription .banner .hint {
+  font-style: italic;
+}
+
+.experimentation-winter-2022 .inscription .container {
+  padding: 5rem 1rem;
+  max-width: 1000px;
+  margin: auto;
+}
+
+.experimentation-winter-2022 .inscription .container .step {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: start;
+  margin: auto;
+  margin: 2.5rem 0;
+}
+
+@media all and (max-width: 1200px) {
+  .experimentation-winter-2022 .inscription .container .step {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+
+.experimentation-winter-2022 .inscription .container .step .flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.experimentation-winter-2022 .inscription .container .number {
+  font-size: 5rem;
+  margin-top: -0.5rem;
+  margin-right: 1.5rem;
+}
+
+@media all and (max-width: 1200px) {
+  .experimentation-winter-2022 .inscription .container .number {
+    margin-top: 0;
+    font-size: 3rem;
+  }
+}
+
+.experimentation-winter-2022 .inscription .container .text > p {
+  color: black;
+}
+
+@media all and (max-width: 1200px) {
+  .experimentation-winter-2022 .inscription .container .content {
+    font-size: 1rem;
+  }
+}
+
+.experimentation-winter-2022 .inscription .container .header {
+  font-weight: 900;
+  font-size: 1.6rem;
+  margin-bottom: 0.5rem;
+}
+
+@media all and (max-width: 1200px) {
+  .experimentation-winter-2022 .inscription .container .header {
+    font-size: 1.2rem;
+  }
+}
+
+.experimentation-winter-2022 .inscription .container .content {
+  font-size: 1.2rem;
+}
+
+.experimentation-winter-2022 .inscription .container .gaz-color {
+  color: #45d1b8;
+}
+
+.experimentation-winter-2022 .inscription .container .water-color {
+  color: #3a98ec;
+}
+
+.experimentation-winter-2022 .inscription .container .elec-color {
+  color: #d87b39;
+}
+
+.experimentation-winter-2022 .inscription .container .gl-color {
+  color: #ff0101;
+}
+
+.experimentation-winter-2022 .inscription .container .question {
+  font-size: 1.8rem;
+  color: black;
+  text-align: center;
+  margin-top: 8rem;
+  margin-bottom: 2rem;
+}
+
+.experimentation-winter-2022 .inscription .container .go {
+  display: block;
+  margin: auto;
+  height: 60px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 1.5rem;
+  font-weight: bold;
+  max-width: 223px;
+}
+/*# sourceMappingURL=expehiver2022.css.map */
\ No newline at end of file

expehiver2022.css.map

+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "expehiver2022.scss",
+        "_variables.scss"
+    ],
+    "names": [],
+    "file": "expehiver2022.css"
+}
\ No newline at end of file

expehiver2022.html

+<!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 - Expérimentation Hiver 2022" />
+    <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="./expehiver2022.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 - Expérimentation Hiver 2022</title>
+  </head>
+  <body class="experimentation-winter-2022">
+    <header>
+      <nav class="expe-winter-nav">
+        <div class="main-logo">
+          <img
+            src="expe-winter-assets/ecolyo-text-black.svg"
+            alt="ecolyo-logo-with-text"
+          />
+        </div>
+        <a
+          href="https://demarches.toodego.com/experimentation-ecolyo-hiver-2022-questionnaire-de-profil/"
+          target="_blank"
+          class="button-gl-nav"
+          >S’inscrire à l’experimentation</a
+        >
+      </nav>
+    </header>
+    <section class="main-cta">
+      <div class="container">
+        <div class="content-txt">
+          <div class="content-img mobile-illu">
+            <img
+              src="assets/illu-landing-graph.svg"
+              alt="illustration-graph"
+              class="illu illu-sun"
+            />
+          </div>
+          <p class="text-36-white">
+            Venez experimenter le nouveau service pour suivre vos consommations
+            d'électricité, de gaz et d'eau et faire des économies.
+          </p>
+          <a
+            href="https://demarches.toodego.com/experimentation-ecolyo-hiver-2022-questionnaire-de-profil/"
+            target="_blank"
+            class="button-gl robots-nocontent"
+          >
+            S'inscrire à l'expérimentation
+          </a>
+        </div>
+
+        <div class="content-img desktop-illu">
+          <object
+            type="image/svg+xml"
+            data="assets/illu-landing-graph.svg"
+            class="illu illu-graph"
+            id="illu-sun"
+          ></object>
+        </div>
+      </div>
+    </section>
+    <section class="explanation">
+      <div class="content">
+        <p class="text-18-white-padding">
+          Pour en profiter, il vous suffit d'être équipé <br /> de l’un de ces compteurs communicants :
+        </p>
+        <div class="compteurs">
+          <div class="bloc elec-color">
+            <img
+              class="compteur-img linky"
+              src="./assets/linky.svg"
+              alt="compteur-linky"
+            />
+            <h3>Linky</h3>
+            <p class="text-18-white">
+              <p class="prefix">pour l'</p>éléctricité
+            </p>
+            <div class="provider-logo">
+              <img alt="enedis-logo" src="./assets/enedis-logo.png" />
+            </div>
+          </div>
+          <span>ou</span>
+          <div class="bloc water-color">
+            <img
+              class="compteur-img teleo"
+              src="./assets/teleo.svg"
+              alt="compteur-teleo"
+            />
+            <h3>Téléo</h3>
+            <p class="text-18-white"><p class="prefix">pour l'</p>eau</p>
+            <div class="provider-logo">
+              <img alt="edl-logo" src="assets/edl-logo.png" />
+            </div>
+          </div>
+          <span>ou</span>
+          <div class="bloc gaz-color">
+            <img
+              class="compteur-img gazpar"
+              src="./assets/gazpar.png"
+              alt="compteur-gazpar"
+            />
+            <h3>Gazpar</h3>
+            <p class="text-18-white"><p class="prefix">pour le </p>gaz</p>
+            <div class="provider-logo">
+              <img alt="grdf-logo" src="assets/grdf-logo.png" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="inscription">
+      <div class="banner">
+        <h2>L'inscription en 4 étapes</h2>
+        <p class="hint">
+          (attention : prévoir 20 minutes en étant muni d’une facture du
+          compteur concerné)
+        </p>
+      </div>
+      <div class="container">
+        <div class="step">
+          <div class="flex">
+            <div class="number gaz-color">1</div>
+            <div class="text">
+              <p class="header">
+                Remplir le formulaire <br />d’expérimentation
+              </p>
+              <p class="content">
+                Chacun agit selon ses possibilités, quelques informations sur
+                votre profil de consommateur nous aideront à rendre Ecolyo plus
+                efficace.
+              </p>
+            </div>
+          </div>
+          <img src="expe-winter-assets/step1.svg" class="steppicture" />
+        </div>
+        <div class="step">
+          <div class="flex">
+            <div class="number water-color">2</div>
+            <div class="text">
+              <p class="header">Créer votre Cloud Personnel</p>
+              <p class="content">
+                Afin de préserver la confidentialité et la sécurité de vos données de consommation, vous devez créer un espace personnel dans lequel vous seul pouvez accéder à vos données.
+              </p>
+            </div>
+          </div>
+          <img src="expe-winter-assets/step2.svg" class="steppicture" />
+        </div>
+        <div class="step">
+          <div class="flex">
+            <div class="number elec-color">3</div>
+            <div class="text">
+              <p class="header">
+                Créer un compte chez le gestionnaire<br />
+                de votre compteur communicant
+              </p>
+              <p class="content">
+                Ecolyo va chercher la donnée auprès d’Enedis pour l’électricité, GRDF pour le gaz ou Eau du Grand Lyon pour l’eau. Une facture d’énergie ou d’eau, selon le compteur à connecter, vous permettra de créer un compte chez ce gestionnaire. 
+              </p>
+            </div>
+          </div>
+          <img src="expe-winter-assets/step3.svg" class="steppicture" />
+        </div>
+        <div class="step">
+          <div class="flex">
+            <div class="number gl-color">4</div>
+            <div class="text">
+              <p class="header">
+                Connecter Ecolyo et <br />le compteur communicant
+              </p>
+              <p class="content">
+                Votre accord est nécessaire pour la visualisation de vos données
+                par Ecolyo. Cet accord a une durée limitée dans le temps et est
+                révocable à tout moment.
+              </p>
+            </div>
+          </div>
+          <img src="expe-winter-assets/step4.svg" class="steppicture" />
+        </div>
+        <div class="question">Vous souhaitez rejoindre l’expérimentation ?</div>
+        <a
+          href="https://demarches.toodego.com/experimentation-ecolyo-hiver-2022-questionnaire-de-profil/"
+          target="_blank"
+          class="button-gl go"
+          >C'est parti !</a
+        >
+      </div>
+    </section>
+    <footer>
+      <div class="content">
+        <div class="bottom">
+          <div class="logos-footer">
+            <div class="container-img">
+              <img
+                class="gl"
+                src="assets/logo-grandlyon.svg"
+                alt="logo grandlyon"
+              />
+            </div>
+            <div class="container-img">
+              <img
+                class="gouv"
+                src="assets/logo-gouv.svg"
+                alt="logo gouvernement"
+              />
+              <img
+                class="territory"
+                src="assets/logo-territoire.svg"
+                alt="logo banque des territoire"
+              />
+              <img
+                class="tiga"
+                src="assets/logo-tiga-white.svg"
+                alt="logo tiga"
+              />
+            </div>
+          </div>
+          <div class="contact">
+            <p>
+              Il vous reste des questions ?
+              <a href="mailto:ecolyo@grandlyon.com"> Contactez-nous</a>
+            </p>
+          </div>
+          <div class="info">
+            <img src="assets/info.svg" alt="" />
+            <a href="https://www.grandlyon.com/" target="_blank"
+              ><p>Un site de la Métropole de Lyon</p></a
+            >
+          </div>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>

expehiver2022.scss

+@import "./variables";
+
+.experimentation-winter-2022 {
+  nav {
+    background: white;
+    align-items: center;
+    grid-template-columns: 0fr 3fr 0fr;
+  }
+  .text-36-white {
+    font-size: 2rem;
+    line-height: 2.6rem;
+    color: white;
+    font-weight: bold;
+  }
+  a.button-gl-nav,
+  .button-gl {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    display: block;
+    color: white;
+    background: $gl-red;
+    border-radius: 2px;
+    text-align: center;
+    padding: 0.4rem 1rem;
+    max-width: 160px;
+  }
+  a.button-gl {
+    padding: 0.6rem;
+    margin: 3rem 0 1rem 0;
+    font-size: 1.2rem;
+    max-width: 200px;
+  }
+  .content-txt {
+    display: flex;
+    flex-direction: column;
+    .text-36-white {
+      @media all and(max-width:$large-device) {
+        font-size: 1.5rem;
+        line-height: 2rem;
+      }
+    }
+    .button-gl {
+      @media all and(max-width:$large-device) {
+        display: none;
+      }
+    }
+    .content-img {
+      order: 2;
+    }
+  }
+  .explanation {
+    background: $grey-dark;
+    max-height: 500px;
+    @media all and(max-width:$large-device) {
+      max-height: 550px;
+      min-height: 300px;
+    }
+    .content {
+      padding-top: 0;
+      .text-18-white-padding {
+        font-weight: 900;
+        font-size: 1.3rem;
+        text-align: center;
+        @media all and(max-width:$large-device) {
+          br {
+            display: none;
+          }
+        }
+      }
+
+      .compteurs {
+        .prefix {
+          display: contents;
+        }
+        @media all and(max-width:$large-device) {
+          flex-direction: row;
+          align-items: baseline;
+          .prefix,
+          span {
+            display: none;
+          }
+          .bloc {
+            height: 160px;
+            h3 {
+              margin-top: 3rem;
+              font-size: 1.3rem;
+            }
+            &.elec-color,
+            &.water-color {
+              margin-right: 0.5rem;
+            }
+            span {
+              display: none;
+            }
+            .provider-logo {
+              margin-top: 0.5rem;
+            }
+            .gazpar,
+            .linky {
+              width: 60%;
+            }
+            .teleo {
+              width: 90%;
+              margin-top: 1rem;
+            }
+            .gazpar {
+              margin-top: 1rem;
+            }
+          }
+        }
+      }
+    }
+  }
+  .inscription {
+    background: white;
+    .banner {
+      background: $gl-red;
+      padding: 1rem;
+      text-align: center;
+      height: 108px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      h2 {
+        font-size: 2rem;
+        margin-bottom: 0.5rem;
+        @media all and(max-width:$large-device) {
+          font-size: 1.4rem;
+        }
+      }
+      .hint {
+        font-style: italic;
+      }
+    }
+    .container {
+      padding: 5rem 1rem;
+      max-width: 1000px;
+      margin: auto;
+      .step {
+        display: flex;
+        justify-content: center;
+        align-items: start;
+        margin: auto;
+        margin: 2.5rem 0;
+        @media all and(max-width:$large-device) {
+          flex-direction: column;
+        }
+        .flex {
+          display: flex;
+        }
+      }
+      .number {
+        font-size: 5rem;
+        margin-top: -0.5rem;
+        margin-right: 1.5rem;
+        @media all and(max-width:$large-device) {
+          margin-top: 0;
+          font-size: 3rem;
+        }
+      }
+      .text > p {
+        color: black;
+      }
+      .content {
+        @media all and(max-width:$large-device) {
+          font-size: 1rem;
+        }
+      }
+      .header {
+        font-weight: 900;
+        font-size: 1.6rem;
+        margin-bottom: 0.5rem;
+        @media all and(max-width:$large-device) {
+          font-size: 1.2rem;
+        }
+      }
+      .content {
+        font-size: 1.2rem;
+      }
+      .gaz-color {
+        color: $gaz-color;
+      }
+      .water-color {
+        color: $water-color;
+      }
+      .elec-color {
+        color: $elec-color;
+      }
+      .gl-color {
+        color: $gl-red;
+      }
+      .question {
+        font-size: 1.8rem;
+        color: black;
+        text-align: center;
+        margin-top: 8rem;
+        margin-bottom: 2rem;
+      }
+      .go {
+        display: block;
+        margin: auto;
+        height: 60px;
+        display: flex;
+        font-size: 1.5rem;
+        font-weight: bold;
+        max-width: 223px;
+      }
+    }
+  }
+}

style.scss

@@ -158,7 +158,6 @@ nav {
 .main-cta {
   min-height: 580px;
   background-color: $black;
-  margin-bottom: -7px;
   .container {
     max-width: $content-width;
     margin: auto;
@@ -193,7 +192,7 @@ nav {
       }
       @media (min-width: $breakpoint) {
         p {
-          padding-right: 5rem;
+          padding-right: 3rem;
         }
       }
     }