diff --git a/config.json b/config.json
index 2984308a115be5b06c643a6b4cb842772fc4cfcd..be2d5bd472ac148867bdcbd45401e3b688cea88e 100644
--- a/config.json
+++ b/config.json
@@ -9,8 +9,7 @@
         "name": "Enedis",
         "type": "ELECTRICITY",
         "oauth": true,
-        "slug": "enedisgrandlyon",
-        "cron": "0 30 6 * * *"
+        "slug": "enedisgrandlyon"
       },
       "siteLink": "https://mon-compte-client.enedis.fr/"
     },
@@ -23,8 +22,7 @@
         "name": "Eau du Grand Lyon",
         "type": "WATER",
         "oauth": false,
-        "slug": "eglgrandlyon",
-        "cron": "0 30 6 * * *"
+        "slug": "eglgrandlyon"
       },
       "siteLink": "https://agence.eaudugrandlyon.com/inscription.aspx"
     },
@@ -37,8 +35,7 @@
         "name": "GRDF",
         "type": "GAS",
         "oauth": false,
-        "slug": "grdfgrandlyon",
-        "cron": "0 30 6 * * *"
+        "slug": "grdfgrandlyon"
       },
       "siteLink": "https://monespace.grdf.fr/monespace/connexion"
     }
diff --git a/src/assets/icons/ico/warning-white.svg b/src/assets/icons/ico/warning-white.svg
new file mode 100644
index 0000000000000000000000000000000000000000..21e2fc158675ab964e3a95c81deec69b22525b4f
--- /dev/null
+++ b/src/assets/icons/ico/warning-white.svg
@@ -0,0 +1,3 @@
+<svg width="63" height="55" viewBox="0 0 63 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33.3426 1.11412C32.4849 -0.37137 30.3408 -0.371375 29.4832 1.11412L0.301852 51.6576C-0.555796 53.1431 0.516259 55 2.23156 55H60.5942C62.3095 55 63.3816 53.1431 62.5239 51.6576L33.3426 1.11412ZM29.1746 32.5018V20.8405H33.5604V32.5018C33.5604 33.4617 33.505 34.4163 33.3941 35.3657C33.2832 36.3047 33.137 37.2646 32.9555 38.2453H29.7795C29.598 37.2646 29.4518 36.3047 29.3409 35.3657C29.23 34.4163 29.1746 33.4617 29.1746 32.5018ZM33.878 42.8463C34.0091 43.1698 34.0747 43.5193 34.0747 43.8949C34.0747 44.2705 34.0091 44.6252 33.878 44.9591C33.7369 45.2825 33.5504 45.5642 33.3185 45.8042C33.0765 46.0441 32.7942 46.2319 32.4715 46.3675C32.1489 46.5032 31.796 46.571 31.4129 46.571C31.0398 46.571 30.692 46.5032 30.3693 46.3675C30.0467 46.2319 29.7644 46.0441 29.5224 45.8042C29.2804 45.5642 29.0939 45.2825 28.9628 44.9591C28.8217 44.6252 28.7511 44.2705 28.7511 43.8949C28.7511 43.5193 28.8217 43.1698 28.9628 42.8463C29.0939 42.5229 29.2804 42.2412 29.5224 42.0013C29.7644 41.7613 30.0467 41.5735 30.3693 41.4379C30.692 41.2918 31.0398 41.2188 31.4129 41.2188C31.796 41.2188 32.1489 41.2918 32.4715 41.4379C32.7942 41.5735 33.0765 41.7613 33.3185 42.0013C33.5504 42.2412 33.7369 42.5229 33.878 42.8463Z" fill="#FFFFFF"/>
+</svg>
diff --git a/src/components/CommonKit/Button/StyledAuthButton.tsx b/src/components/CommonKit/Button/StyledAuthButton.tsx
index c97f9f3578a04e5c25fb70b2d3ab1fc794555660..a7a8f5f2ff527a23fb2f146cd8ece51197207baf 100644
--- a/src/components/CommonKit/Button/StyledAuthButton.tsx
+++ b/src/components/CommonKit/Button/StyledAuthButton.tsx
@@ -56,7 +56,7 @@ const PrimaryButton = withStyles({
 
 const SecondaryButton = withStyles({
   root: {
-    border: '1px solid #121212',
+    border: '1px solid var(--darkLight2)',
   },
   label: {
     color: '#E0E0E0',
diff --git a/src/components/CommonKit/Button/StyledButton.tsx b/src/components/CommonKit/Button/StyledButton.tsx
index 568e5f6fd3463685374111660ea8f40f38ec9f73..bb6405d517f1926b24a082c50a0aaee95f5ffa1c 100644
--- a/src/components/CommonKit/Button/StyledButton.tsx
+++ b/src/components/CommonKit/Button/StyledButton.tsx
@@ -56,7 +56,7 @@ const PrimaryButton = withStyles({
 
 const SecondaryButton = withStyles({
   root: {
-    border: '1px solid #121212',
+    border: '1px solid var(--darkLight2)',
   },
   label: {
     fontWeight: 'normal',
diff --git a/src/components/CommonKit/Button/StyledButtonValid.tsx b/src/components/CommonKit/Button/StyledButtonValid.tsx
index 0711059826ffa51a0da39a74e0fd4f47e5402386..95b58345f21474195e926ae678b78447618bedde 100644
--- a/src/components/CommonKit/Button/StyledButtonValid.tsx
+++ b/src/components/CommonKit/Button/StyledButtonValid.tsx
@@ -65,7 +65,7 @@ const PrimaryButton = withStyles({
 
 const SecondaryButton = withStyles({
   label: {
-    color: 'var(--textBright)',
+    color: 'var(--greyBright)',
     fontWeight: 'normal',
   },
 })(BaseButton)
diff --git a/src/components/CommonKit/Button/StyledWhiteButton.tsx b/src/components/CommonKit/Button/StyledWhiteButton.tsx
index 4821da2ea7bc66843a48b24c33a5b43d1c6fd7a8..e0587cadfa7c3bcff4dd112492f413c91bebc4ba 100644
--- a/src/components/CommonKit/Button/StyledWhiteButton.tsx
+++ b/src/components/CommonKit/Button/StyledWhiteButton.tsx
@@ -46,7 +46,7 @@ const PrimaryButton = withStyles({
 
 const SecondaryButton = withStyles({
   root: {
-    border: '1px solid #121212',
+    border: '1px solid var(--darkLight2)',
   },
   label: {
     color: '#E0E0E0',
diff --git a/src/components/CommonKit/Card/StyledBorderCard.tsx b/src/components/CommonKit/Card/StyledBorderCard.tsx
index 9d123793449dffd2a89a7190ec26751403dd3776..a3f76a0ceed0d1f76cb95adcf6df7c01383b3426 100644
--- a/src/components/CommonKit/Card/StyledBorderCard.tsx
+++ b/src/components/CommonKit/Card/StyledBorderCard.tsx
@@ -7,7 +7,7 @@ import { withStyles } from '@material-ui/core/styles'
 
 const CardBase = withStyles({
   root: {
-    border: '1px solid var(--textDark)',
+    border: '1px solid var(--softGrey)',
     boxSizing: 'border-box',
     borderRadius: '4px',
     width: '100hv',
diff --git a/src/components/CommonKit/Card/StyledCard.tsx b/src/components/CommonKit/Card/StyledCard.tsx
index 845934e866f31189f663ba6bbdfe080c7654bff4..1d6049f4bf11b04a025fdb66dc36303bf5536d92 100644
--- a/src/components/CommonKit/Card/StyledCard.tsx
+++ b/src/components/CommonKit/Card/StyledCard.tsx
@@ -8,7 +8,7 @@ import { FluidType } from 'enum/fluid.enum'
 
 const CardBase = withStyles({
   root: {
-    background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
+    background: 'var(--greyLinearGradientBackground)',
     boxSizing: 'border-box',
     boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.75)',
     borderRadius: '4px',
diff --git a/src/components/CommonKit/Card/StyledChallengeCard.tsx b/src/components/CommonKit/Card/StyledChallengeCard.tsx
index eb0fdaac9f6044be74be13aeb8ea8ff1454daefd..ea21879915d1369243c68f73245659965bcfb8ec 100644
--- a/src/components/CommonKit/Card/StyledChallengeCard.tsx
+++ b/src/components/CommonKit/Card/StyledChallengeCard.tsx
@@ -7,7 +7,7 @@ import { withStyles } from '@material-ui/core/styles'
 
 const CardBase = withStyles({
   root: {
-    background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
+    background: 'var(--greyLinearGradientBackground)',
     border: '1px solid',
     boxSizing: 'border-box',
     boxShadow: '0px 4px 16px black',
diff --git a/src/components/CommonKit/Card/StyledEcogestureCard.tsx b/src/components/CommonKit/Card/StyledEcogestureCard.tsx
index 1f893366dcaca70cc8c467fabf0ad3e756f6a33f..8ab7cf1c72d81616a768e07e45851768aa3dd045 100644
--- a/src/components/CommonKit/Card/StyledEcogestureCard.tsx
+++ b/src/components/CommonKit/Card/StyledEcogestureCard.tsx
@@ -7,7 +7,7 @@ import { withStyles } from '@material-ui/core/styles'
 
 const CardBase = withStyles({
   root: {
-    background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
+    background: 'var(--greyLinearGradientBackground)',
     border: '1px solid',
     boxSizing: 'border-box',
     boxShadow: '0px 4px 16px black',
diff --git a/src/components/CommonKit/Card/StyledIconCard.tsx b/src/components/CommonKit/Card/StyledIconCard.tsx
index 9deb63a3160be0686216c22606e6a92b7e4c0991..0f7f089efbdb5373b0648ae297efbc102a1daea7 100644
--- a/src/components/CommonKit/Card/StyledIconCard.tsx
+++ b/src/components/CommonKit/Card/StyledIconCard.tsx
@@ -11,7 +11,7 @@ import StyledIcon from '../Icon/StyledIcon'
 
 const CardBase = withStyles({
   root: {
-    background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
+    background: 'var(--greyLinearGradientBackground)',
     border: '1px solid',
     boxSizing: 'border-box',
     boxShadow: '0px 4px 16px',
diff --git a/src/components/CommonKit/ExpansionPanel/StyledSampleExpansionPanel.tsx b/src/components/CommonKit/ExpansionPanel/StyledSampleExpansionPanel.tsx
index 00ec1f7cac116d3d8bfd5b3e4d00b54e8ad432c0..d70a7704b8e82b70b709fb33a4d8a1362e05d782 100644
--- a/src/components/CommonKit/ExpansionPanel/StyledSampleExpansionPanel.tsx
+++ b/src/components/CommonKit/ExpansionPanel/StyledSampleExpansionPanel.tsx
@@ -23,7 +23,7 @@ const BaseExpansionPanel = withStyles({
 
 const StyledExpansionPanel = withStyles({
   root: {
-    background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
+    background: 'var(--greyLinearGradientBackground)',
   },
   expanded: {
     background: 'var(--greyBright)',
diff --git a/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx b/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx
index b912d5cbf00c948494f5879725deb6c4a96f0343..eb9e5475c382904a1e30df7680c9c07f0545b744 100644
--- a/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx
+++ b/src/components/CommonKit/IconButton/StyledIconBorderedButton.tsx
@@ -19,7 +19,7 @@ const IconButtonBase = withStyles({
 const SelectedIconButtonBase = withStyles({
   root: {
     border: '1px solid var(--multiColor)',
-    background: 'linear-gradient(180deg, #323339 0%, #25262B 100%)',
+    background: 'var(--greyLinearGradientBackground)',
     boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.55)',
   },
 })(IconButtonBase)
diff --git a/src/components/CommonKit/Switch/StyledSwitch.tsx b/src/components/CommonKit/Switch/StyledSwitch.tsx
index 8ea84b26899c9f0c5fbdc68c7d42da0c645e8bd4..1c420c65dd8fa28c9f66e730050cf520537881a3 100644
--- a/src/components/CommonKit/Switch/StyledSwitch.tsx
+++ b/src/components/CommonKit/Switch/StyledSwitch.tsx
@@ -5,9 +5,9 @@ import { withStyles } from '@material-ui/core/styles'
 
 const SwitchBase = withStyles({
   switchBase: {
-    color: 'var(--textBright)',
+    color: 'var(--greyBright)',
     '&$checked': {
-      color: 'var(--textBright)',
+      color: 'var(--greyBright)',
       '& + $bar': {
         opacity: 1,
         backgroundColor: 'var(--multiColor)',
diff --git a/src/components/CommonKit/Tabs/StyledWhiteTab.tsx b/src/components/CommonKit/Tabs/StyledWhiteTab.tsx
index e4ee58c6e5f4f112fd2bedab5eb80e3c1b02fe19..80260c7c2082d046deb2331362576335359f04c2 100644
--- a/src/components/CommonKit/Tabs/StyledWhiteTab.tsx
+++ b/src/components/CommonKit/Tabs/StyledWhiteTab.tsx
@@ -8,7 +8,7 @@ const TabBase = withStyles({
     minHeight: '36px',
   },
   selected: {
-    color: 'var(--textBright)',
+    color: 'var(--greyBright)',
   },
 })(Tab)
 
diff --git a/src/components/CommonKit/Tabs/StyledWhiteTabs.tsx b/src/components/CommonKit/Tabs/StyledWhiteTabs.tsx
index eab0b3fe84357e04ee972be7aa46340a18917686..70569eae5069c494dbd11c98c93d3fb056568079 100644
--- a/src/components/CommonKit/Tabs/StyledWhiteTabs.tsx
+++ b/src/components/CommonKit/Tabs/StyledWhiteTabs.tsx
@@ -7,7 +7,7 @@ const TabsBase = withStyles({
     minHeight: '36px',
   },
   indicator: {
-    backgroundColor: 'var(--textBright)',
+    backgroundColor: 'var(--greyBright)',
   },
 })(Tabs)
 
diff --git a/src/components/ContainerComponents/CardsContainer/CardsContainer.tsx b/src/components/ContainerComponents/CardsContainer/CardsContainer.tsx
deleted file mode 100644
index e1dcc3877cde9d44719740c4dcab2989334ab157..0000000000000000000000000000000000000000
--- a/src/components/ContainerComponents/CardsContainer/CardsContainer.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { withClient, Client } from 'cozy-client'
-import { translate } from 'cozy-ui/transpiled/react/I18n'
-
-import Card from 'components/ContentComponents/Card/Card'
-import FluidService, { ProcessedData } from 'services/fluidService'
-import { FluidType } from 'enum/fluid.enum'
-import Spinner from 'cozy-ui/react/Spinner'
-
-interface CardsContainerProps {
-  client: Client
-  t: Function
-}
-
-const CardsContainer = ({ client, t }) => {
-  const [isLoading, setIsLoading] = useState(true)
-  const [elecCardProps, setElecCardProps] = useState<ProcessedData | null>(null)
-  const [gasCardProps, setGasCardProps] = useState<ProcessedData | null>(null)
-  const [waterCardProps, setWaterCardProps] = useState<ProcessedData | null>(
-    null
-  )
-
-  useEffect(() => {
-    const fluidService = new FluidService(client)
-    // flag use to prevent error linked to re-rendering
-    let subscribed = true
-    async function getData() {
-      const [elecData, gasData, waterData] = await Promise.all([
-        fluidService.getLastTwoWeeks(FluidType.ELECTRICITY),
-        fluidService.getLastTwoWeeks(FluidType.GAS),
-        fluidService.getLastTwoWeeks(FluidType.WATER),
-      ])
-      if (subscribed) {
-        setElecCardProps(fluidService.processElectricityData(elecData.data))
-        setGasCardProps(fluidService.processGasData(gasData.data))
-        setWaterCardProps(fluidService.processWaterData(waterData.data))
-        setIsLoading(false)
-      }
-    }
-    getData()
-
-    return () => {
-      subscribed = false
-    }
-  }, [])
-  return (
-    <React.Fragment>
-      {isLoading ? (
-        <Spinner size="xxlarge" middle />
-      ) : (
-        <div>
-          <p className="home-title">{t('COMMON.CONSO_DETAILS')}</p>
-          {elecCardProps && (
-            <Card type={FluidType.ELECTRICITY} {...elecCardProps} />
-          )}
-          {waterCardProps && (
-            <Card type={FluidType.WATER} {...waterCardProps} />
-          )}
-          {gasCardProps && <Card type={FluidType.GAS} {...gasCardProps} />}
-        </div>
-      )}
-    </React.Fragment>
-  )
-}
-
-export default translate()(withClient(CardsContainer))
diff --git a/src/components/ContentComponents/Card/Card.tsx b/src/components/ContentComponents/Card/Card.tsx
deleted file mode 100644
index b1ef73e496d04a4aa596fdbb201546b1809374d7..0000000000000000000000000000000000000000
--- a/src/components/ContentComponents/Card/Card.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react'
-import Icon from 'cozy-ui/react/Icon'
-import { translate } from 'cozy-ui/react/I18n'
-import { FluidType } from 'enum/fluid.enum'
-import { getPicto, getCardColor } from 'utils/utils'
-import { ProcessedData } from 'services/fluidService'
-export interface CardProps extends ProcessedData {
-  type: FluidType
-  t: Function // translation service
-}
-
-const Card: React.FC<CardProps> = ({
-  type,
-  consumptionValue,
-  weeklyCompareValue,
-  euclideanComparator,
-  t,
-}: CardProps) => {
-  const iconType = getPicto(type)
-  let sign: string
-  if (weeklyCompareValue > 0) {
-    sign = '+'
-  } else {
-    sign = '-'
-    weeklyCompareValue = Math.abs(weeklyCompareValue)
-  }
-
-  return (
-    <React.Fragment>
-      {weeklyCompareValue ? (
-        <div className={getCardColor(type)}>
-          <h1>{t('FLUID.' + FluidType[type] + '.LABEL')}</h1>
-          <div className="card-header">
-            <Icon icon={iconType} size={64} />
-            <div>
-              <h2>
-                <span>{consumptionValue}</span>{' '}
-                {t('FLUID.' + FluidType[type] + '.UNIT')}
-              </h2>
-              <h3>
-                <span className={sign === '+' ? 'green' : 'red'}>
-                  {sign + ' ' + weeklyCompareValue + ' %'}
-                </span>{' '}
-                / 7 derniers jours
-              </h3>
-            </div>
-          </div>
-          <p>{euclideanComparator}</p>
-        </div>
-      ) : (
-        <div className={getCardColor(type)}>
-          <h1>{t('FLUID.' + FluidType[type] + '.LABEL')}</h1>
-          <div className="card-header">
-            <Icon icon={iconType} size={64} />
-            <div>
-              <h2>
-                <span>-</span> {t('FLUID.' + FluidType[type] + '.UNIT')}
-              </h2>
-              <h3>
-                <span className={'blue'}> - %</span> / 7 derniers jours
-              </h3>
-            </div>
-          </div>
-          <p>Données insuffisantes pour le calcul des indicateurs</p>
-        </div>
-      )}
-    </React.Fragment>
-  )
-}
-
-export default translate()(Card)
diff --git a/src/components/ContentComponents/Charts/BarChart.tsx b/src/components/ContentComponents/Charts/BarChart.tsx
index 6237d14786fe4513c52564b0676a44a4550bb4f1..15921e1bddf5d9e3858557b37f8f17f460c6d609 100644
--- a/src/components/ContentComponents/Charts/BarChart.tsx
+++ b/src/components/ContentComponents/Charts/BarChart.tsx
@@ -77,10 +77,10 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
   }
 
   const getMaxLoad = () => {
-    if (
-      (timeStep === TimeStep.DAY && !showCompare) ||
-      timeStep === TimeStep.HALF_AN_HOUR
-    ) {
+    const maxCompare = chartData.comparisonData
+      ? Math.max(...chartData.comparisonData.map(d => d.value))
+      : 0
+    if (timeStep === TimeStep.DAY || timeStep === TimeStep.HALF_AN_HOUR) {
       const actualMonth = selectedDate.startOf('week').month
       const actualYear = selectedDate.startOf('week').year
       const key = `${actualMonth}/${actualYear}-${isHome}-${fluidTypes
@@ -89,15 +89,14 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => {
       if (DateTime.local() < selectedDate && !maxLoads[key]) {
         maxLoads[key] = 15
       }
-
+      if (showCompare) {
+        return Math.max(maxLoads[key], maxCompare)
+      }
       return maxLoads[key] > 0 ? maxLoads[key] : 15
     } else {
       let max = chartData.actualData
         ? Math.max(...chartData.actualData.map(d => d.value))
         : 0
-      const maxCompare = chartData.comparisonData
-        ? Math.max(...chartData.comparisonData.map(d => d.value))
-        : 0
       max = max <= 0 ? 15 : max
       return showCompare ? Math.max(max, maxCompare) : max
     }
diff --git a/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx b/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx
index 20c9e25598d9beb21363c53ba6f6adc418e34747..a186f247e0de6fca0644f13912fc68602b4b4d4b 100644
--- a/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx
+++ b/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx
@@ -82,6 +82,9 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({
         const actualMonth = lastSlideDate.startOf('week').month
         const actualYear = lastSlideDate.startOf('week').year
 
+        // From the first monday of the month to the first monday of the next month for for TimeStep.DAY
+        // Full month + last day of the previous month for TimeStep.HALF_AN_HOUR
+
         const maxTimePeriod = {
           startDate:
             timeStep === TimeStep.HALF_AN_HOUR
diff --git a/src/components/ContentComponents/Footer/Footer.jsx b/src/components/ContentComponents/Footer/Footer.jsx
deleted file mode 100644
index 7d86f009a9d4129e9faabf26d3ea029aa662c660..0000000000000000000000000000000000000000
--- a/src/components/ContentComponents/Footer/Footer.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-const Footer = () => {
-  return (
-    <div>
-      <span>The Footer Component goes in here</span>
-    </div>
-  )
-}
-
-export default Footer
diff --git a/src/components/ContentComponents/Konnector/KonnectorResult.tsx b/src/components/ContentComponents/Konnector/KonnectorResult.tsx
index fdb201e67fbf157bfc16751c951777dc3f4059d1..018c28ff98f2ed3296aeaa7ae1e5cf6a9654f09a 100644
--- a/src/components/ContentComponents/Konnector/KonnectorResult.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorResult.tsx
@@ -10,6 +10,7 @@ import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
 import { Account, Trigger } from 'doctypes'
 import { TriggerService } from 'services/triggersService'
 import { AccountService } from 'services/accountService'
+import warningWhite from 'assets/icons/ico/warning-white.svg'
 
 import { isKonnectorRunning } from 'cozy-harvest-lib/dist/helpers/triggers'
 import {
@@ -18,6 +19,7 @@ import {
   LOGIN_SUCCESS_EVENT,
   SUCCESS_EVENT,
 } from 'cozy-harvest-lib/dist/models/KonnectorJob'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 
 interface KonnectorResultProps {
   account: Account
@@ -116,17 +118,26 @@ const KonnectorResult: React.FC<KonnectorResultProps> = ({
 
   return (
     <div className="accordion-update-result">
-      <div className="accordion-update">
-        <div
-          className={
-            status === 'errored'
-              ? 'accordion-caption-red text-16-normal'
-              : 'accordion-caption text-16-normal'
-          }
-        >
-          {t('KONNECTORCONFIG.LABEL_UPDATEDAT')}
+      <div
+        className={
+          status === 'errored' ? 'accordion-update-errored' : 'accordion-update'
+        }
+      >
+        {status === 'errored' && (
+          <div className="warning-white">
+            <StyledIcon
+              icon={warningWhite}
+              size={36}
+              className="warning-icon"
+            />
+          </div>
+        )}
+        <div>
+          <div className="accordion-caption text-16-normal">
+            {t('KONNECTORCONFIG.LABEL_UPDATEDAT')}
+          </div>
+          <div className="text-16-bold">{lastExecutionDate}</div>
         </div>
-        <div>{lastExecutionDate}</div>
       </div>
       <div className="inline-buttons">
         <StyledButton
diff --git a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx b/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx
index 03f2aac567c14987407914fceef4f21a5195d0a3..9ebc9631987904663c1a4b27bb7c5669f9f06b8b 100644
--- a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx
+++ b/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx
@@ -6,7 +6,7 @@ import { FluidType } from 'enum/fluid.enum'
 import { withClient, Client } from 'cozy-client'
 import { translate } from 'cozy-ui/react/I18n'
 
-import { getPicto, getAddPicto, getFuildType, getParamPicto } from 'utils/utils'
+import { getPicto, getAddPicto, getFluidType, getParamPicto } from 'utils/utils'
 import chevronDown from 'assets/icons/ico/chevron-down.svg'
 import chevronUp from 'assets/icons/ico/chevron-up.svg'
 
@@ -54,7 +54,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
 
   const content: React.MutableRefObject<null> = useRef<null>(null)
   const type: string = fluidConfig.konnectorConfig.type
-  const fluid: FluidType = getFuildType(type)
+  const fluid: FluidType = getFluidType(type)
   const iconType = getPicto(fluid)
 
   const iconAddType = isParam ? getParamPicto(fluid) : getAddPicto(fluid)
diff --git a/src/components/ContentComponents/Navbar/Navbar.tsx b/src/components/ContentComponents/Navbar/Navbar.tsx
index 0eec335ebba3e08826eee5366e08838907c197a9..6214e1f1c2fb73c0fcb748ba0976b05b1e38cec1 100644
--- a/src/components/ContentComponents/Navbar/Navbar.tsx
+++ b/src/components/ContentComponents/Navbar/Navbar.tsx
@@ -68,8 +68,8 @@ export const Navbar = ({ t }: NavbarProps) => {
               className="c-nav-link"
               activeClassName="is-active"
             >
-              <Icon className="c-nav-icon off" icon={ProfileIconOff} />
-              <Icon className="c-nav-icon on" icon={ProfileIconOn} />
+              <StyledIcon className="c-nav-icon off" icon={ProfileIconOff} />
+              <StyledIcon className="c-nav-icon on" icon={ProfileIconOn} />
               {t('Nav.profile')}
             </NavLink>
           </li> */}
diff --git a/src/components/ContentComponents/PeriodFilter/PeriodFilter.jsx b/src/components/ContentComponents/PeriodFilter/PeriodFilter.jsx
deleted file mode 100644
index 22fd7a55f979e5bcbf49760bbb3eff24ba3e5cd0..0000000000000000000000000000000000000000
--- a/src/components/ContentComponents/PeriodFilter/PeriodFilter.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react'
-import Graph from '../Graph/Graph'
-
-const PeriodFilter = () => {
-  return (
-    <React.Fragment>
-      <span>Title</span>
-      <Graph></Graph>
-    </React.Fragment>
-  )
-}
-
-export default PeriodFilter
diff --git a/src/services/errorService.js b/src/services/createError.js
similarity index 100%
rename from src/services/errorService.js
rename to src/services/createError.js
diff --git a/src/services/fluidConfigService.ts b/src/services/fluidConfigService.ts
index 8f132a17eda43e43d8f4eeb1390841464c3ef29e..96d72f5ef0b92a3eb43b8a497615c3eab1ae5ea3 100644
--- a/src/services/fluidConfigService.ts
+++ b/src/services/fluidConfigService.ts
@@ -12,12 +12,14 @@ export default class FluidConfig {
     return this._fluidConfig
   }
 
-  public getCronArgs(slug: string): string {
-    const filtered = this._fluidConfig.filter(
-      fluidConfig => fluidConfig.konnectorConfig.slug === slug
-    )
-    return filtered.length > 0 && filtered[0].konnectorConfig.cron
-      ? filtered[0].konnectorConfig.cron
-      : '0 30 8 * * *'
+  /**
+   *
+   * @param min Minimum hour for cron
+   * @param max Maximum hour for cron
+   */
+  public getCronArgs(min = 8, max = 9): string {
+    const randomHour = Math.floor(Math.random() * (max - min + 1) + min)
+    const randomMinutes = Math.floor(Math.random() * 59)
+    return `0 ${randomMinutes} ${randomHour} * * *`
   }
 }
diff --git a/src/services/fluidService.ts b/src/services/fluidService.ts
deleted file mode 100644
index 1b7565c6ec5b83227ace4267bab34641f3adba9b..0000000000000000000000000000000000000000
--- a/src/services/fluidService.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import { Client } from 'cozy-client'
-import _ from 'lodash'
-import { DateTime } from 'luxon'
-import { FluidType } from 'enum/fluid.enum'
-import { getPercentage, sum } from 'utils/math'
-import { getDoctype } from 'utils/utils'
-
-export type ProcessedData = {
-  consumptionValue: number
-  weeklyCompareValue: number
-  euclideanComparator: string
-}
-
-export default class FluidService {
-  public client: Client
-  constructor(client: Client) {
-    this.client = client
-  }
-
-  private getTimeQueryPredicate(
-    startingdateTime: DateTime,
-    endingdateTime: DateTime
-  ) {
-    return {
-      year: {
-        $lte: Math.max(startingdateTime.year, endingdateTime.year),
-        $gte: Math.min(startingdateTime.year, endingdateTime.year),
-      },
-      month: {
-        $lte: Math.max(startingdateTime.month, endingdateTime.month),
-        $gte: Math.min(startingdateTime.month, endingdateTime.month),
-      },
-      day: {
-        $lte: Math.max(startingdateTime.day, endingdateTime.day),
-        $gte: Math.min(startingdateTime.day, endingdateTime.day),
-      },
-    }
-  }
-
-  /**
-   * Query last 2 week data for grdf energy data
-   */
-  public getLastTwoWeeks(fluid: FluidType) {
-    //const now = DateTime.local(2018, 4, 1)
-    const now = DateTime.local()
-    const twoWeekBefore = now.minus({
-      week: 2,
-    })
-    return this.client.query(
-      this.getClientQuery(
-        getDoctype(fluid),
-        now,
-        twoWeekBefore,
-        ['year', 'month', 'day'],
-        14
-      )
-    )
-  }
-
-  /**
-   * Build client query
-   * @param doctype doctype name
-   * @param startingTime start date for query
-   * @param endingTime end date for query
-   * @param indexFields fields needed to be indexed
-   * @param recordsNumber number or return values
-   */
-  private getClientQuery(
-    doctype: string,
-    startingTime: DateTime,
-    endingTime: DateTime,
-    indexFields: string[],
-    recordsNumber: number
-  ) {
-    return this.client
-      .find(doctype)
-      .where(this.getTimeQueryPredicate(startingTime, endingTime))
-      .indexFields(indexFields)
-      .limitBy(recordsNumber)
-  }
-
-  /**
-   * Wrap up data needed for electrical indicators
-   * @param {array} toBeProcessedData
-   * @return {object} {consumptionValue: number, weeklyCompareValue: number, euclideanComparator: string}
-   */
-  public processElectricityData(toBeProcessedData: []) {
-    const consumptionValue = sum(
-      _.slice(_.map(toBeProcessedData, 'load'), 7, 14)
-    )
-    const weeklyCompareValue = getPercentage(
-      _.slice(_.map(toBeProcessedData, 'load'), 7, 14),
-      _.slice(_.map(toBeProcessedData, 'load'), 0, 7)
-    )
-
-    const euclideanComparator = this.getRelevantMetric(
-      FluidType.ELECTRICITY,
-      consumptionValue
-    )
-    return {
-      consumptionValue: consumptionValue,
-      weeklyCompareValue: weeklyCompareValue,
-      euclideanComparator: euclideanComparator,
-    }
-  }
-
-  /**
-   * Wrap up data needed for gas indicators
-   * @param {array} toBeProcessedData
-   * @return {object} {consumptionValue: number, weeklyCompareValue: number, euclideanComparator: string}
-   */
-  public processGasData(toBeProcessedData: []) {
-    // Remove last element in order to have pair number of value.
-    toBeProcessedData.pop()
-    const consumptionValue = sum(
-      _.slice(_.map(toBeProcessedData, 'load'), 0, 7)
-    )
-    const weeklyCompareValue = getPercentage(
-      _.slice(_.map(toBeProcessedData, 'load'), 0, 7),
-      _.slice(_.map(toBeProcessedData, 'load'), 7, 14)
-    )
-    const euclideanComparator = this.getRelevantMetric(
-      FluidType.GAS,
-      consumptionValue
-    )
-    return {
-      consumptionValue: consumptionValue,
-      weeklyCompareValue: weeklyCompareValue,
-      euclideanComparator: euclideanComparator,
-    }
-  }
-  /**
-   * Wrap up data needed for water indicators
-   * @param {array} toBeProcessedData
-   * @return {object} {consumptionValue: number, weeklyCompareValue: number, euclideanComparator: string}
-   */
-  public processWaterData(toBeProcessedData: []) {
-    const consumptionValue = sum(
-      _.slice(_.map(toBeProcessedData, 'load'), 0, 7)
-    )
-    const weeklyCompareValue = getPercentage(
-      _.slice(_.map(toBeProcessedData, 'load'), 0, 7),
-      _.slice(_.map(toBeProcessedData, 'load'), 7, 14)
-    )
-    const euclideanComparator = this.getRelevantMetric(
-      FluidType.WATER,
-      consumptionValue
-    )
-    return {
-      consumptionValue: consumptionValue,
-      weeklyCompareValue: weeklyCompareValue,
-      euclideanComparator: euclideanComparator,
-    }
-  }
-
-  /**
-   * Return a relevant metric string according to a fluid type and a value
-   * @param {FluidType} fluid
-   * @param {number} value
-   * @return {string} relevantValue
-   */
-  public getRelevantMetric(fluid: FluidType, value: number) {
-    //TODO: When data is ready get it from db or locales
-    switch (fluid) {
-      case FluidType.ELECTRICITY:
-        if (value > 100) {
-          return "Vous avez consommé un max d'ampoules !"
-        } else {
-          return 'Une console de jeu fonctionnant 2 h par jour consomme 1,75 kWh en 1 semaine'
-        }
-      case FluidType.GAS:
-        return 'Ca fait pas un peu trop de gas'
-      case FluidType.WATER:
-        return '3 piscines du rhône'
-      default:
-        return 'Pas de comparaison trouvée'
-    }
-  }
-}
diff --git a/src/services/triggersService.ts b/src/services/triggersService.ts
index 6115785efeeea8fdaddfd4ff9d0d4778dbf75656..13a496e19a129a81ae4cdbb389bdb94bbe7cd0ed 100644
--- a/src/services/triggersService.ts
+++ b/src/services/triggersService.ts
@@ -48,7 +48,7 @@ export class TriggerService {
       )
     }
     const fluidConfigService = new FluidConfig()
-    const cronArgs = fluidConfigService.getCronArgs(this._konnector.slug)
+    const cronArgs = fluidConfigService.getCronArgs()
     const triggerAttributes: TriggerAttributes = {
       type: '@cron',
       arguments: cronArgs,
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index fc0a0c3ebe9edad67afe2a272ff2b174276c1937..7883ff39fcd1b59f47a23e5550561fcaabf2a109 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -1,9 +1,3 @@
-// Primary colors
-$blue-heavy: #303558;
-$blue-light: #81abd0;
-$cozy-blue: #297ef2;
-$cozy-grey: #95999d;
-
 /** BLACK **/
 $dark: #242633;
 $dark-2: #1b1c22;
@@ -14,22 +8,9 @@ $dark-background: radial-gradient(
   #2a2b30 0%,
   #1b1c22 100%
 );
-$dark-linear-card: linear-gradient(180deg, #323339 0%, #25262b 100%);
-
-/** TEXT COLOR **/
-$text-black: black;
-$text-bright: #e0e0e0;
-$text-dark: #a0a0a0;
-$text-white: #ffffff;
-$text-blue: #58FFFF;
-$google-text-1: $text-bright;
-$google-text-2: $text-dark;
 
 /** RED **/
-$red-primary: #D25959;
-$red-error: #ce3535;
-$red-no-data: #d24444;
- 
+$red-primary: #d25959;
 
 /** YELLOW **/
 $gold: #b2901b;
@@ -37,38 +18,41 @@ $gold-40: rgba(227, 184, 42, 0.4);
 $gold-light: #deaf0e;
 $gold-shadow: #e3b82a;
 
-/** ORANGE **/
-$orange: #d87b39;
-$orange-shadowed: rgba(216, 123, 57, 0.4);
-
 /** BLUE **/
-$blue: #58FFFF;
-$blue-40: #58FFFF40;
+$blue: #58ffff;
+$blue-40: #58ffff40;
 $blue-shadowed: rgba(58, 152, 236, 0.4);
-$blue-gradient: linear-gradient(180deg, #61F0F2 0%, #48C2C4 100%);
-$blue-radial-gradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), $blue;
-$blue-radial-gradient-transparent: radial-gradient(circle, $blue 0%, rgba(255,255,255,0) 100%);
+$blue-gradient: linear-gradient(180deg, #61f0f2 0%, #48c2c4 100%);
+$blue-radial-gradient: radial-gradient(
+    105.25% 64.58% at 49.68% 70.83%,
+    rgba(1, 153, 163, 0.5) 0%,
+    rgba(255, 255, 255, 0) 100%
+  ),
+  $blue;
+$blue-radial-gradient-transparent: radial-gradient(
+  circle,
+  $blue 0%,
+  rgba(255, 255, 255, 0) 100%
+);
 
 /** GREEN **/
-$green: #45d1b8;
-$green-2: #7fd771;
-$green-shadowed: rgba(69, 209, 184, 0.4);
+$green: #7fd771;
 
 /** WHITE **/
-$white: rgb(255, 255, 255);
+$white: #ffffff;
 
 /** GREY **/
 $grey-bright: #e0e0e0;
+$soft-grey: #a0a0a0;
 $grey-dark: #7b7b7b;
-$grey-background: linear-gradient(180deg, #323339 0%, #25262B 100%);
+$grey-linear-gradient-background: linear-gradient(
+  180deg,
+  #323339 0%,
+  #25262b 100%
+);
 
 /** App colors **/
-$primary-color: $dark-light;
-$card-background: $dark-light;
-$accordion-background: $dark-light;
-$app-background: $dark-2;
 $accordion-active-background: #34353a;
-$text-color: white;
 
 $elec-color: #d87b39;
 $elec-color-40: rgba(216, 123, 57, 0.4);
@@ -93,13 +77,27 @@ $multi-off-color: #705d1d;
 $multi-compare-color: #ffd597;
 $multi-compare-off-color: #7d6a4e;
 
-$axis-graph: $grey-dark;
-
 /** TABS GRADIENT **/
-$multi-color-radial-gradient-transparent: radial-gradient(circle, #e3b82a 0%, rgba(255,255,255,0) 100%);
-$elec-color-radial-gradient-transparent: radial-gradient(circle, #d87b39 0%, rgba(255,255,255,0) 100%);
-$water-color-radial-gradient-transparent: radial-gradient(circle, #3a98ec 0%, rgba(255,255,255,0) 100%);
-$gas-color-radial-gradient-transparent: radial-gradient(circle, #45d1b8 0%, rgba(255,255,255,0) 100%);
+$multi-color-radial-gradient-transparent: radial-gradient(
+  circle,
+  #e3b82a 0%,
+  rgba(255, 255, 255, 0) 100%
+);
+$elec-color-radial-gradient-transparent: radial-gradient(
+  circle,
+  #d87b39 0%,
+  rgba(255, 255, 255, 0) 100%
+);
+$water-color-radial-gradient-transparent: radial-gradient(
+  circle,
+  #3a98ec 0%,
+  rgba(255, 255, 255, 0) 100%
+);
+$gas-color-radial-gradient-transparent: radial-gradient(
+  circle,
+  #45d1b8 0%,
+  rgba(255, 255, 255, 0) 100%
+);
 
 $multi-color-radial-gradient: radial-gradient(
     105.25% 64.58% at 49.68% 70.83%,
@@ -125,3 +123,8 @@ $water-color-radial-gradient: radial-gradient(
     rgba(255, 255, 255, 0) 100%
   ),
   #3a98ec;
+
+/** SCROLLBAR **/
+
+$scrollbar-track: #3e4045;
+$scrollbar-thumb: #6f7074;
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 0f07d9e7feecf90af76fa1f77642fd0467a7d0b1..7384ef5e99e4fd89fae246b31146fb741765cda6 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -2,11 +2,11 @@
 @import '../base/breakpoint';
 
 html {
-  background: $app-background;
+  background: $dark-2;
 }
 
 body {
-  background: $app-background;
+  background: $dark-2;
   overflow: unset !important;
 }
 
@@ -28,7 +28,7 @@ body {
 }
 
 [role='banner'] .coz-bar-container {
-  background-color: white;
+  background-color: $white;
   @media #{$large-phone} {
     padding: 0 0 0 0;
     background-color: unset;
@@ -67,7 +67,7 @@ body {
     width: 100%;
     .header-text {
       padding: 0 1rem 1rem 1rem;
-      color: $text-bright;
+      color: $grey-bright;
     }
   }
   .header-content {
@@ -75,15 +75,15 @@ body {
     display: flex;
     flex-direction: column;
     @media #{$tablet} {
-        margin: 0;
+      margin: 0;
     }
     @media #{$large-phone} {
-        margin: 60px 0 0 0;
+      margin: 60px 0 0 0;
     }
     .header-content-top {
       display: flex;
       flex-direction: row;
-      &.header-content-top-right{
+      &.header-content-top-right {
         justify-content: flex-end;
       }
       .header-text {
@@ -94,7 +94,7 @@ body {
         display: flex;
         flex: 1;
         padding: 2rem 1.25rem;
-        color: $text-bright;
+        color: $grey-bright;
       }
       .header-back-button {
         padding: 0 0.75rem;
@@ -102,7 +102,7 @@ body {
       @media #{$large-phone} {
         .header-text {
           padding: 0 1rem 1rem 1rem;
-          color: $text-bright;
+          color: $grey-bright;
         }
         .header-text-desktop {
           display: none;
@@ -129,7 +129,7 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: $text-bright;
+  color: $grey-bright;
   .content-view-loading-text {
     padding-top: 1rem;
     margin: 0 2rem;
@@ -148,10 +148,10 @@ body {
   }
   /* Track */
   &::-webkit-scrollbar-track {
-    background: #3e4045;
+    background: $scrollbar-track;
   }
   /* Handle */
   &::-webkit-scrollbar-thumb {
-    background: #6f7074;
+    background: $scrollbar-thumb;
   }
 }
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 928255227e47947eb563fb147a5a8e4d857a64ee..458661823904470cf7cb43f89a9f6588a754099a 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -14,7 +14,7 @@ h4,
 h5,
 h6,
 p {
-  color: $google-text-2;
+  color: $soft-grey;
   font-family: $text-font;
 }
 
@@ -36,20 +36,10 @@ p {
 
   text-align: center;
   letter-spacing: 0.15px;
-  color: $google-text-1;
+  color: $grey-bright;
   text-shadow: 0px -1px 0px #060609, 0px 1px 0px rgba(255, 255, 255, 0.07);
 }
 
-.red {
-  color: $red-primary;
-}
-.blue {
-  color: $blue-light;
-}
-.green {
-  color: $green-2;
-}
-
 .text-10-normal {
   font-family: $text-font;
   font-style: normal;
@@ -179,7 +169,7 @@ p {
     font-weight: bold;
     font-size: 1rem;
     line-height: 120%;
-    color: $text-bright;
+    color: $grey-bright;
   }
 }
 .button-secondary-text {
@@ -188,7 +178,7 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: $text-bright;
+  color: $grey-bright;
 }
 
 /* Card */
@@ -198,7 +188,7 @@ p {
   font-weight: normal;
   font-size: 1.125rem;
   line-height: 120%;
-  color: $text-bright;
+  color: $grey-bright;
 }
 .card-title-off {
   font-family: $text-font;
@@ -206,7 +196,7 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: $text-bright;
+  color: $grey-bright;
 }
 .card-text-bold {
   font-family: $text-font;
@@ -214,7 +204,7 @@ p {
   font-weight: bold;
   font-size: 1rem;
   line-height: 120%;
-  color: $text-bright;
+  color: $grey-bright;
 }
 .card-result {
   font-family: $text-font;
@@ -222,7 +212,7 @@ p {
   font-weight: 900;
   font-size: 1.75rem;
   line-height: 120%;
-  color: $text-bright;
+  color: $grey-bright;
 }
 .card-indicator {
   font-family: $text-font;
@@ -230,7 +220,7 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: $text-bright;
+  color: $grey-bright;
 }
 .card-text {
   font-family: $text-font;
@@ -238,7 +228,7 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: $text-bright;
+  color: $grey-bright;
 }
 
 /* Chart */
@@ -248,7 +238,7 @@ p {
   font-weight: bold;
   font-size: 1rem;
   line-height: 123%;
-  color: $text-bright;
+  color: $grey-bright;
 }
 .chart-result {
   font-family: $text-font;
@@ -256,7 +246,7 @@ p {
   font-weight: bold;
   font-size: 2.25rem;
   line-height: 120%;
-  color: $text-bright;
+  color: $grey-bright;
 }
 .chart-fluid {
   font-family: $text-font;
@@ -264,7 +254,7 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: $text-bright;
+  color: $grey-bright;
 }
 .chart-switch-text {
   font-family: $text-font;
@@ -272,7 +262,7 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: $text-bright;
+  color: $grey-bright;
 }
 .chart-ticks-x-text {
   font-family: $text-font;
@@ -302,7 +292,7 @@ p {
   font-weight: bold;
   font-size: 1.3125rem;
   line-height: 120%;
-  color: $text-bright;
+  color: $grey-bright;
 }
 
 /* List */
@@ -313,7 +303,7 @@ p {
   font-size: 0.875rem;
   line-height: 120%;
   text-transform: uppercase;
-  color: $text-bright;
+  color: $grey-bright;
 }
 
 /* Tab */
@@ -330,5 +320,5 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: $text-bright;
+  color: $grey-bright;
 }
diff --git a/src/styles/components/_barchart.scss b/src/styles/components/_barchart.scss
index 117eb75d79a972f04dcb6764f831ae8a9a062d8c..a2fb106967970b70629c65ab89c51466c3d7df20 100644
--- a/src/styles/components/_barchart.scss
+++ b/src/styles/components/_barchart.scss
@@ -2,11 +2,11 @@
 @import '../base/breakpoint';
 
 .axis {
-  color: $axis-graph;
+  color: $grey-dark;
   .tick-text {
-    fill: $axis-graph;
+    fill: $grey-dark;
     &.tick-text-selected {
-      fill: $text-bright;
+      fill: $grey-bright;
     }
   }
 }
diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
deleted file mode 100644
index fdfb481fdcdc4e48b4c6cd41e60f0980f6b335a0..0000000000000000000000000000000000000000
--- a/src/styles/components/_button.scss
+++ /dev/null
@@ -1,143 +0,0 @@
-@import "../base/color";
-@import "../base/breakpoint";
-
-
-
-.btn-primary
-{
-  height: 3rem;
-  padding: 0.5vh 2vw 0.5vh 2vw;
-  background-color: $gold;
-  border: 1px solid rgba(227, 184, 42, 0.2);
-  box-shadow: 0px 2px 6px #1E1C1C;
-  border-radius: 2px;
-  margin: 1rem 0 1rem 0;
-  color: $text-black;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  text-transform: capitalize;
-  
-
-  &:hover {
-    cursor: pointer;
-    background-color: $gold-light;
-    color: $dark;
-  }
-  &:active {
-    position:relative;
-    top:1px;
-    background-color: #c59f1c;
-  }
-
-  &:focus {
-    cursor: pointer;
-    outline:none;
-    
-  }
-}
-
-.btn-secondary
-{
-  background-color: $gold-light;
-  color: $text-black;
-  height: 3rem;
-  padding: 0.5vh 2vw 0.5vh 2vw;
-  margin: 1rem 0 1rem 0;
-  text-transform: capitalize;
-
-  border: 1px solid rgba(227, 184, 42, 0.2);
-  box-shadow: -2px -2px 6px rgba(227, 184, 42, 0.2), 2px 2px 6px #1E1C1C;
-  border-radius: 6px;
-
-  font-style: normal;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 120%;
-}
-
-.btn-secondary-negative
-{
-  border: 1px solid $gold-light;
-  height: 3rem;
-  padding: 0.5vh 2vw 0.5vh 2vw;
-  margin: 1rem 0 1rem 0;
-  text-transform: capitalize;
-
-  box-shadow: -2px -2px 6px rgba(227, 184, 42, 0.2), 2px 2px 6px #1E1C1C;
-  border-radius: 6px;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 120%;
-
-  color: #E0E0E0;
-}
-
-.btn-chevron
-{
-  margin: 1rem 1rem 1rem 0;
-  color: rgb(255,255,255);
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  
-
-  &:hover {
-    cursor: pointer;
-    color: white;
-  }
-}
-
-.btn-long-string {
-  height: 3rem;
-  padding: 0.5vh 2vw 0.5vh 2vw;
-  border: 1px solid #121212;
-  box-sizing: border-box;
-  border-radius: 2px;
-  color: $text-color;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  margin: 1rem 0 1rem 0;
-}
-
-
-/*
-.btn {
-  height: 3rem;
-  padding: 0.5vh 2vw 0.5vh 2vw;
-  background-color: $gold;
-  border: none;
-  margin: 1rem 0 1rem 0;
-  color: $text-black;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  text-transform: capitalize;
-  &.active{
-    opacity: 0.3;
-  }
-  &:hover {
-    cursor: pointer;
-    background-color: $gold-light;
-    color: $dark;
-  }
-  &:active {
-    position:relative;
-    top:1px;
-    background-color: #c59f1c;
-  }
-  .btn-content{
-    display: inline-flex;
-    align-items: center;
-    .btn-icon{
-      margin-right: 1.5vw;
-    }
-  }
-}
-*/
diff --git a/src/styles/components/_card.scss b/src/styles/components/_card.scss
index 7512ec0f6d1c3706938cfa91764c26a0686f02a5..1db79c8548d1c6e1deb36b6bb3cbbd817cea6651 100644
--- a/src/styles/components/_card.scss
+++ b/src/styles/components/_card.scss
@@ -1,87 +1,10 @@
-@import "../base/color";
-@import "../base/breakpoint";
+@import '../base/color';
+@import '../base/breakpoint';
 
 // RedirectionMiniCard
-.redirect-card-link{
+.redirect-card-link {
   color: transparent;
 }
-.redirect-card-content{
+.redirect-card-content {
   margin: 0.25rem 0;
 }
-
-
-
-.card {
-  /* linear card */
-  background: $dark-linear-card;
-  background-color: $card-background;
-  display: flex;
-  flex-direction: column;
-  color: $text-color;
-  padding: 1rem 1.5rem;
-  margin: 2vh 2vw 2vh 0vw;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
-  @media #{$large-phone} {
-    margin: 2vh 0;
-  }
-  &.orange {
-    border: 1px solid $orange-shadowed;
-  }
-  &.blue {
-    border: 1px solid $blue-shadowed;
-  }
-  &.green {
-    border: 1px solid $green-shadowed;
-  }
-  .title {
-    font-size: 1.5rem;
-    font-style: normal;
-    font-weight: normal;
-    color: $google-text-1;
-    line-height: 120%;
-  }
-  h1 {
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 120%;
-    color: white;
-  }
-  p {
-    font-style: normal;
-    font-weight: normal;
-    font-size: 1rem;
-    line-height: 120%;
-  }
-  .card-header{
-    flex-direction: row;
-    display: flex;
-    justify-content: left;
-    padding: 0.75rem 0rem;
-    div:first-of-type {
-      margin-left: 3.5vw;
-    }
-    h2 {
-      margin: 0;
-      color: $google-text-1;
-      font-style: normal;
-      font-weight: normal;
-      font-size: 2rem;
-      line-height: 120%;
-      span {
-        color: $google-text-1;
-        font-weight: 600;
-        font-size: 2.3rem;
-      }
-    }
-    h3 {
-      margin: 0;
-      font-style: normal;
-      font-weight: bold;
-      font-size: 1rem;
-      line-height: 120%;
-    }
-  }
-}
-
-
diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss
index 0d270b0263529ce98cfcaa0d321978ee15ead4d1..20042ddec71004318456afeb59e5598ed202b2da 100644
--- a/src/styles/components/_challenges.scss
+++ b/src/styles/components/_challenges.scss
@@ -17,7 +17,7 @@
     .ccc-header {
       margin-top: 0.375rem;
       margin-bottom: 1.25rem;
-      color: $text-bright;
+      color: $grey-bright;
     }
   }
 }
@@ -32,7 +32,7 @@
       display: block;
     }
     .timeline-line {
-      background-color: $text-bright;
+      background-color: $grey-bright;
       width: 1px;
       height: calc(100vh);
       grid-column: 1;
@@ -101,21 +101,21 @@
         height: 62px;
       }
       .cli-content-title {
-        color: $text-white;
+        color: $white;
         margin: 0 1rem;
         align-self: center;
       }
       .subtitle-finished {
-        color: $text-dark;
+        color: $soft-grey;
       }
       .title-finished {
-        color: $text-bright;
+        color: $grey-bright;
       }
       .subtitle-ongoing {
-        color: $text-blue;
+        color: $blue;
       }
       .title-ongoing {
-        color: $text-white;
+        color: $white;
       }
       .subtitle-available {
         color: $dark-light-2;
@@ -124,7 +124,7 @@
         color: $dark-light-2;
       }
       .title-locked {
-        color: $text-dark;
+        color: $soft-grey;
         opacity: 0.35;
       }
     }
@@ -159,7 +159,7 @@
     justify-content: center;
     width: inherit;
     .cc-content-title {
-      color: $text-white;
+      color: $white;
       &.cc-content-title-padding {
         padding-top: 1rem;
       }
@@ -188,7 +188,7 @@
       width: 1.8125rem;
       border-radius: 50%;
       background: $blue-radial-gradient;
-      color: $text-black;
+      color: $dark-light;
       margin-right: 1rem;
     }
   }
@@ -215,6 +215,7 @@
       #d1880d 75%,
       #a05b11 100%
     );
+    background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
@@ -227,6 +228,7 @@
       #9e4e24 51.56%,
       #a4573a 66.67%
     );
+    background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
@@ -266,16 +268,16 @@
     }
   }
   .cm-result {
-    color: $text-bright;
+    color: $grey-bright;
     text-align: center;
     margin-top: 1.5rem;
     margin-bottom: 0.5rem;
     margin-bottom: 165px;
     .cm-result-positif {
-      color: $green-2;
+      color: $green;
     }
     .cm-result-negatif {
-      color: $red-no-data;
+      color: $red-primary;
     }
   }
   .cm-badge {
@@ -343,12 +345,12 @@
     .day-letter {
       margin-top: 0.8rem;
       text-align: center;
-      color: $text-dark;
+      color: $soft-grey;
     }
     .day-date {
       margin-top: 0.2rem;
       text-align: center;
-      color: $text-dark;
+      color: $soft-grey;
     }
   }
 }
@@ -397,7 +399,7 @@
     margin-left: 1rem;
   }
   .no-values-section {
-    color: $text-white;
+    color: $white;
     margin-left: 1rem;
   }
 }
@@ -412,7 +414,7 @@
     display: flex;
     align-items: center;
     flex-direction: column;
-    color: $text-bright;
+    color: $grey-bright;
     min-height: 84vh;
     justify-content: space-between;
 
@@ -457,25 +459,25 @@
         }
       }
       .cp-date {
-        color: $text-dark;
+        color: $soft-grey;
         text-align: center;
         margin-top: 1rem;
       }
       .cp-title {
-        color: $text-bright;
+        color: $grey-bright;
         text-align: center;
         margin-top: 0.5rem;
       }
       .cp-result {
-        color: $text-bright;
+        color: $grey-bright;
         text-align: center;
         margin-top: 1.5rem;
         margin-bottom: 0.5rem;
         .cp-result-positif {
-          color: $green-2;
+          color: $green;
         }
         .cp-result-negatif {
-          color: $red-no-data;
+          color: $red-primary;
         }
       }
       .cp-description {
diff --git a/src/styles/components/_consumptionvisualizer.scss b/src/styles/components/_consumptionvisualizer.scss
index d8f436b7298e0257c380f119331d844ea03a4ef7..d23b4f8f1808f9fd9d86f3aebb1d1fb3ae863caa 100644
--- a/src/styles/components/_consumptionvisualizer.scss
+++ b/src/styles/components/_consumptionvisualizer.scss
@@ -7,14 +7,13 @@
   align-items: center;
   width: 27.5rem;
   @media #{$large-phone} {
-      width: 100%;
+    width: 100%;
   }
   .cv-content-date {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     width: 100%;
-    // margin-top: 1em;
     .cv-date-group {
       display: flex;
       flex-direction: column;
@@ -22,7 +21,7 @@
       align-items: center;
       align-self: center;
       .cv-date {
-        color: $google-text-1;
+        color: $grey-bright;
         &::first-letter {
           text-transform: uppercase;
         }
@@ -101,33 +100,30 @@
     color: $gas-compare-color;
   }
   .multifluid {
-    color: $text-white;
+    color: $white;
   }
   .multifluid-compare {
     color: $multi-compare-color;
   }
   .error {
-    color: $red-no-data;
+    color: $red-primary;
   }
   .error-line {
-    color: $red-no-data;
+    color: $red-primary;
     cursor: pointer;
     display: flex;
     align-items: center;
   }
   .underlined-error {
-    border-bottom: solid 1px $red-no-data;
+    border-bottom: solid 1px $red-primary;
   }
   .warning-icon {
     margin-right: 4px;
   }
-  .multifluid-compare {
-    color: $multi-compare-color;
-  }
   .cv-button {
     border: none;
     background: none;
-    color: $google-text-2;
+    color: $soft-grey;
     text-decoration: underline;
   }
 }
diff --git a/src/styles/components/_ecogesture.scss b/src/styles/components/_ecogesture.scss
index 2ad62004c9347d69bdf66da2662eb8b1a82d6700..d94171fac8524d03c5880d0c8e638c7cb9ae7276 100644
--- a/src/styles/components/_ecogesture.scss
+++ b/src/styles/components/_ecogesture.scss
@@ -42,9 +42,6 @@
 }
 
 // EcogestureCard
-.ec-link {
-  color: black;
-}
 .ec {
   display: flex;
   justify-content: center;
@@ -72,7 +69,7 @@
     }
     .ec-content-nwh {
       margin-top: 0.25rem;
-      color: $text-dark;
+      color: $soft-grey;
     }
   }
 }
@@ -91,7 +88,7 @@
 
 // EcogestureModal
 .em-header {
-  color: $text-bright;
+  color: $grey-bright;
   border-bottom: 1px solid rgba(163, 163, 163, 0.4);
   padding-bottom: 1em;
   width: 100%;
@@ -110,11 +107,11 @@
   }
   /* Track */
   &::-webkit-scrollbar-track {
-    background: #3e4045;
+    background: $scrollbar-track;
   }
   /* Handle */
   &::-webkit-scrollbar-thumb {
-    background: #6f7074;
+    background: $scrollbar-thumb;
   }
   .em-content {
     padding: 1.5rem 2.5rem 0;
@@ -141,7 +138,7 @@
         flex: 1;
         align-self: flex-start;
         margin-top: 0.65rem;
-        color: var(--textDark);
+        color: $soft-grey;
         .em-detail-nwh-unit {
           margin-left: 0.2rem;
         }
diff --git a/src/styles/components/_faq.scss b/src/styles/components/_faq.scss
index 6a2872239e6c0a128c2f23f7df3a6f0daa554c52..f825f0989a426a16e91302b3423cab3eaed732a4 100644
--- a/src/styles/components/_faq.scss
+++ b/src/styles/components/_faq.scss
@@ -20,13 +20,13 @@
     .faq-header {
       margin-top: 2.5rem;
       margin-bottom: 1.25rem;
-      color: $text-bright;
+      color: $grey-bright;
     }
   }
 }
 
 .faq-card-link {
-  color: black;
+  color: $white;
 }
 .faq-card {
   display: flex;
diff --git a/src/styles/components/_feedback.scss b/src/styles/components/_feedback.scss
index a4e85c5a93cd72cff2c6510da25b7c14c3a0fa5b..baab42b3b7d250a662fecc89de4adc2eecfabff1 100644
--- a/src/styles/components/_feedback.scss
+++ b/src/styles/components/_feedback.scss
@@ -1,8 +1,7 @@
 @import '../base/color';
 @import '../base/breakpoint';
 
-
-.fb-root{
+.fb-root {
   overflow-y: auto;
   .fb-header {
     color: $gold-shadow;
@@ -15,16 +14,15 @@
     padding: 1rem 1.5rem 1.5rem 1.5rem;
     display: flex;
     flex-direction: column;
-    .fb-content-success{
-      color: $text-bright;
-      color: $text-bright;
+    .fb-content-success {
+      color: $grey-bright;
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
     }
-    .fb-content-error{
-      color: $text-bright;
+    .fb-content-error {
+      color: $grey-bright;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -35,50 +33,50 @@
       justify-content: center;
       margin: 0 0 1.5rem 0;
     }
-    .fb-label{
+    .fb-label {
       margin: 0.5rem 0 0 0;
     }
-    .fb-selector{
+    .fb-selector {
       margin: 0.5rem 0;
       display: flex;
       flex-direction: row;
       align-content: space-around;
       justify-content: space-around;
-      .fb-selector-item{
+      .fb-selector-item {
         height: 3.125rem;
         width: 3.125rem;
         .fb-selector-item-label {
-          color: $text-bright;
+          color: $grey-bright;
         }
         .fb-selector-item-selectedlabel {
           color: $white;
         }
       }
     }
-    .fb-form{
+    .fb-form {
       margin: 0.5rem 0;
       border: 1px solid $grey-dark;
       border-radius: 4px;
-      color: $text-bright;
+      color: $grey-bright;
       background: rgba(0, 0, 0, 0.3);
       padding: 0 1rem;
       outline: none;
     }
-    .fb-form:focus{
+    .fb-form:focus {
       border: 1px solid $gold-shadow;
     }
-    .fb-textarea{
+    .fb-textarea {
       height: 8.725rem;
       padding: 0.5rem 1rem;
       resize: none;
     }
-    .fb-input{
+    .fb-input {
       height: 2rem;
     }
-    .fb-button{
+    .fb-button {
       max-width: 9.375rem;
       align-self: center;
       margin-top: 1rem;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/components/_fluid.scss b/src/styles/components/_fluid.scss
index 469fdd027d28c279b9ca9174dca7fd00072e4e47..04e1689f496d397a7449501d75ee73f10c3de487 100644
--- a/src/styles/components/_fluid.scss
+++ b/src/styles/components/_fluid.scss
@@ -7,10 +7,10 @@
   flex-direction: column;
   .sf-header {
     .sf-header-title {
-      color: $text-bright;
+      color: $grey-bright;
     }
     .sf-header-text {
-      color: $text-dark;
+      color: $soft-grey;
     }
   }
   .sf-content {
@@ -84,9 +84,9 @@
         flex: 1;
         display: flex;
         justify-content: flex-start;
-        color: $text-dark;
+        color: $soft-grey;
         &.selected {
-          color: $text-white;
+          color: $white;
         }
       }
     }
@@ -99,14 +99,14 @@
       align-items: center;
       .fv-link {
         text-decoration: none;
-        color: $text-dark;
+        color: $soft-grey;
       }
       & .fv-footer-label-padding {
         flex: 1;
         display: flex;
         justify-content: flex-start;
         padding-left: 0.75rem;
-        color: $text-dark;
+        color: $soft-grey;
       }
     }
   }
@@ -177,7 +177,7 @@
     font-weight: bold;
     letter-spacing: 0.2px;
     margin-bottom: 1.5em;
-    color: $text-bright;
+    color: $grey-bright;
     width: 50%;
     @media #{$large-phone} {
       width: 80%;
diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss
index 7a32dca36a751e7a0e245d14ff30290a5ecfb4ac..cdacb2d40ca969f22e6e6585f525e13e0c99285e 100644
--- a/src/styles/components/_form.scss
+++ b/src/styles/components/_form.scss
@@ -10,21 +10,21 @@
     font-style: normal;
     font-weight: normal;
     font-size: 1rem;
-    color: $google-text-1;
+    color: $grey-bright;
     margin-top: 0rem;
   }
   .form-input {
     background: rgba(0, 0, 0, 0.3);
     border: 1px solid #7b7b7b;
     border-radius: 4px;
-    color: $google-text-1;
+    color: $grey-bright;
     padding: 0 5%;
     outline-offset: -1px;
     &.--error {
       border: 1px solid $red-primary;
     }
   }
-  .form-input:focus{
+  .form-input:focus {
     outline: none;
     border: 1px solid $gold-shadow;
   }
@@ -46,7 +46,7 @@
     }
   }
   .form-message {
-    color: $red-error;
+    color: $red-primary;
     min-height: 1.25rem;
     margin-top: 0.75rem;
   }
@@ -54,6 +54,6 @@
     margin-top: 0.75rem;
   }
   ::placeholder {
-    color: $google-text-1;
+    color: $grey-bright;
   }
 }
diff --git a/src/styles/components/_indicators.scss b/src/styles/components/_indicators.scss
index 8fd6af231ec01098f4663bc7da5b9289ff027183..7b884748731859f26fdbc5478e74184bcc8e5ef6 100644
--- a/src/styles/components/_indicators.scss
+++ b/src/styles/components/_indicators.scss
@@ -21,7 +21,7 @@
     .fi-header {
       margin-top: 2.5rem;
       margin-bottom: 1.25rem;
-      color: $text-bright;
+      color: $grey-bright;
     }
   }
   //SingleFluidIndicator
@@ -34,16 +34,16 @@
     .sfi-header {
       margin-top: 2.5rem;
       margin-bottom: 1.25rem;
-      color: $text-bright;
+      color: $grey-bright;
     }
-    .sfi-redirect{
+    .sfi-redirect {
       margin-bottom: 1.25rem;
       display: flex;
       flex-wrap: wrap;
-      .redirect-card-link:nth-child(2){
+      .redirect-card-link:nth-child(2) {
         margin-left: 0.625rem;
       }
-      .redirect-card-link{
+      .redirect-card-link {
         flex: 1;
       }
     }
@@ -77,23 +77,20 @@
         margin: 0 1rem;
         align-self: center;
         .fpi-content-perf-result {
-          color: $text-bright;
+          color: $grey-bright;
           & span {
             display: inline-block;
             padding-right: 0.25rem;
           }
         }
         .fpi-content-perf-indicator {
-          color: $text-dark;
+          color: $soft-grey;
           .fpi-content-perf-indicator-kpi {
             &.positive {
-              color: #ffffff;
-            }
-            &.positive {
-              color: #cf6666;
+              color: $red-primary;
             }
             &.negative {
-              color: #7fd771;
+              color: $green;
             }
           }
         }
@@ -101,7 +98,7 @@
     }
     .fpi-footer {
       margin-top: 0.5rem;
-      color: $text-dark;
+      color: $soft-grey;
     }
   }
   .fpi-right {
diff --git a/src/styles/components/_konnector.scss b/src/styles/components/_konnector.scss
index a8f955b3497ad48986d56d7bdcc1af0b4a4bdc93..b423f68ab9d0c739a8348368ac5b697a1d40dd6d 100644
--- a/src/styles/components/_konnector.scss
+++ b/src/styles/components/_konnector.scss
@@ -3,11 +3,11 @@
 .accordion {
   display: flex;
   flex-direction: column;
-  color: $text-color;
+  color: $white;
   padding: 1rem 0;
   margin-bottom: 2vh;
   border-radius: 4px;
-  background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+  background: $grey-linear-gradient-background;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
   transition: background-color 0.6s ease;
   &.active {
@@ -31,7 +31,7 @@
     }
     .accordion-info {
       flex: 3;
-      color: $google-text-1;
+      color: $grey-bright;
       @media #{$large-phone} {
         display: block;
       }
@@ -48,7 +48,7 @@
     }
   }
   .accordion-update-result {
-    margin: 0.5rem 1.5rem;
+    margin: 1rem 0;
     @media #{$large-phone} {
       margin: 0.5rem 0;
     }
@@ -57,6 +57,12 @@
     flex: 2;
     padding: 0.5rem 1rem;
   }
+  .accordion-update-errored {
+    flex: 2;
+    padding: 0.5rem 1rem;
+    background-color: $red-primary;
+    display: flex;
+  }
   .accordion-state {
     flex: 2;
     margin-right: 1rem;
@@ -66,18 +72,14 @@
     padding: 0 1rem;
   }
   .accordion-caption {
-    color: $google-text-2;
+    color: $grey-bright;
     text-transform: lowercase;
     &::first-letter {
       text-transform: uppercase;
     }
   }
-  .accordion-caption-red {
-    color: $red-error;
-    text-transform: lowercase;
-    &::first-letter {
-      text-transform: uppercase;
-    }
+  .warning-white {
+    margin-right: 1rem;
   }
   .accordion-content {
     overflow: hidden;
@@ -86,7 +88,10 @@
   .inline-buttons {
     display: flex;
     flex-flow: row nowrap;
-    padding: 0 1rem;
+    padding: 0 2rem;
+    @media #{$large-phone} {
+      padding: 0 1rem;
+    }
   }
   .konnector-delete {
     margin-right: 0.25rem;
@@ -118,7 +123,7 @@
     .kv-header {
       margin-top: 2.5rem;
       margin-bottom: 1.25rem;
-      color: $google-text-1;
+      color: $grey-bright;
     }
   }
 }
@@ -130,7 +135,7 @@
     margin: 0;
   }
   .knotfound-text {
-    color: $text-bright;
+    color: $grey-bright;
     padding-top: 1rem;
   }
   .knotfound-button {
@@ -143,14 +148,14 @@
   margin: 0 1.5rem;
   padding: 0 1rem;
   .create-account {
-    color: $text-bright;
+    color: $grey-bright;
   }
   @media #{$large-phone} {
     margin: 0;
     padding: 0 1rem;
   }
   .koauthform-text {
-    color: $text-bright;
+    color: $grey-bright;
     padding-top: 1rem;
   }
   .koauthform-button {
@@ -161,10 +166,10 @@
 // KonnectorLoginForm
 .kloginauthform {
   .create-account {
-    color: $text-bright;
+    color: $grey-bright;
   }
   .kloginauthform-text {
-    color: $text-bright;
+    color: $grey-bright;
     padding-top: 1rem;
   }
   .kloginauthform-button {
@@ -179,11 +184,11 @@
     margin: 0.5rem 0;
   }
   .klaunch-content-text {
-    color: $text-bright;
+    color: $grey-bright;
     margin: 1rem;
     text-align: center;
     .kc-wait {
-      color: $text-dark;
+      color: $soft-grey;
       margin-bottom: 2rem;
     }
   }
diff --git a/src/styles/components/_legalnotice.scss b/src/styles/components/_legalnotice.scss
index 3e96c2b80ef6045c203dc2ccfaea7a8c552289da..7a121180ac5af6280e2a3b610e765b5ab6aa3842 100644
--- a/src/styles/components/_legalnotice.scss
+++ b/src/styles/components/_legalnotice.scss
@@ -7,24 +7,24 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: $text-white;
+  color: $white;
   padding: 1.5rem 1.5rem 0;
   .legal-notice-content {
     p {
-      color: $text-white;
+      color: $white;
     }
     a {
-      color: $text-white;
+      color: $white;
       text-decoration: none;
     }
     li {
       margin: 1rem 0;
     }
     h2 {
-      color: $text-white;
+      color: $white;
     }
     h3 {
-      color: $text-white;
+      color: $white;
       margin: 2.5rem 0 1rem;
     }
     .ln-contact {
diff --git a/src/styles/components/_modal.scss b/src/styles/components/_modal.scss
index 51ae463a9a03fb7aaf3b3ffd62e9def5b301a5fc..f8035c490632c64fcc1ec7b4701583cf1f704317 100644
--- a/src/styles/components/_modal.scss
+++ b/src/styles/components/_modal.scss
@@ -17,7 +17,7 @@
     display: flex;
   }
   .modal-box {
-    background: $grey-background;
+    background: $grey-linear-gradient-background;
     position: fixed;
     width: 36rem;
     max-width: 100%;
@@ -51,7 +51,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      color: $text-white;
+      color: $white;
     }
     .wm-header {
       background: $multi-color-radial-gradient;
diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss
index e6e5b155e9f499257bef5ca914335f73a25c48d8..3804811754c71a16b78eebe7b56e1e4d8183f981 100644
--- a/src/styles/components/_nav.scss
+++ b/src/styles/components/_nav.scss
@@ -2,15 +2,12 @@
 @import '../base/breakpoint';
 
 .o-sidebar {
-  background-color: $primary-color;
+  background-color: $dark-light;
   box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px 3px 14px rgba(0, 0, 0, 0.12),
     0px 8px 10px rgba(0, 0, 0, 0.14);
   border-top: unset;
   border-right: unset;
   z-index: 19;
-  @media #{$tablet} {
-    background-color: $primary-color;
-  }
   .logo-grand-lyon {
     position: absolute;
     bottom: 20px;
@@ -31,13 +28,6 @@
   }
 }
 
-// .c-nav {
-//   display: flex;
-//   list-style: none;
-//   justify-content: space-around;
-//   height: 56px;
-//   align-items: center;
-// }
 @media #{$tablet} {
   .c-nav-item {
     height: 54px;
@@ -52,10 +42,6 @@
   fill: none;
 }
 
-.c-nav-link.is-active {
-  box-shadow: inset 0.25rem 0 0 0 $gold;
-}
-
 .c-nav-link.is-active .c-nav-icon {
   fill: $gold !important;
 }
diff --git a/src/styles/components/_report.scss b/src/styles/components/_report.scss
index f8dc392d92937a0d0aafec045744f073b29a5f68..92c73a523c0921edcacabc5dd6146ced58f5aad1 100644
--- a/src/styles/components/_report.scss
+++ b/src/styles/components/_report.scss
@@ -12,7 +12,7 @@
   }
   .head {
     margin-top: 2rem;
-    color: $google-text-1;
+    color: $grey-bright;
   }
   .radios {
     margin-top: 0.5rem;
@@ -27,7 +27,7 @@
         top: 0.3rem;
         width: 1.3rem;
         height: 1.3rem;
-        border: 2px solid $text-dark;
+        border: 2px solid $soft-grey;
         background: transparent;
         &:after {
           transition: all 300ms ease;
@@ -36,7 +36,7 @@
         }
         &:checked {
           & ~ label {
-            color: $google-text-1;
+            color: $grey-bright;
           }
           &:after {
             content: '';
@@ -54,7 +54,7 @@
       }
     }
     label {
-      color: $text-dark;
+      color: $soft-grey;
       margin-left: 1rem;
     }
   }
diff --git a/src/styles/components/_splash.scss b/src/styles/components/_splash.scss
index 3d39ec91a5ad1a8c8e66946c5a2755670dd40be7..aaa2ac7cd9011d2ef07cba7b46e627633311f34c 100644
--- a/src/styles/components/_splash.scss
+++ b/src/styles/components/_splash.scss
@@ -1,7 +1,7 @@
 @import '../base/color';
 @import '../base/breakpoint';
 
-.splash-root{
+.splash-root {
   position: fixed;
   z-index: 1000;
   left: 0;
@@ -12,12 +12,12 @@
   background-color: rgba(27, 28, 34, 1);
   display: flex;
   flex-direction: column;
-  .splash-header{
+  .splash-header {
     height: 6rem;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--textBright);
+    color: var(--greyBright);
   }
   .splash-content {
     display: flex;
@@ -27,20 +27,20 @@
     flex: 1;
     margin-top: 6rem;
   }
-  .splash-footer{
+  .splash-footer {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     height: 10rem;
     margin: 0 2rem;
-    .splash-footer-error-text{
+    .splash-footer-error-text {
       text-align: center;
       color: red;
       margin: 0.5rem 0;
     }
-    .splash-footer-button{
+    .splash-footer-button {
       max-width: 50vw;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/components/_version.scss b/src/styles/components/_version.scss
index 96fdef327a142a6889cf828d11cba9e04474a857..fd16553d2034796ba22b7b3425b9d39c21da7b09 100644
--- a/src/styles/components/_version.scss
+++ b/src/styles/components/_version.scss
@@ -2,7 +2,7 @@
 @import '../base/breakpoint';
 
 .version-root {
-  color: $text-bright;
+  color: $grey-bright;
   text-align: end;
   margin: 1rem 1.5rem 2rem;
 }
diff --git a/src/styles/index.css b/src/styles/index.css
index bf119c41ef2628c7395e658d8f7addf47b9ba5d0..eba6352f2d53985f9133299b2bd6c0763d21f714 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -16,43 +16,52 @@
 /** TABS GRADIENT **/
 /* line 4, src/styles/base/_layout.scss */
 html {
-  background: #1b1c22; }
+  background: #1b1c22;
+}
 
 /* line 8, src/styles/base/_layout.scss */
 body {
   background: #1b1c22;
-  overflow: unset !important; }
+  overflow: unset !important;
+}
 
 /* line 13, src/styles/base/_layout.scss */
 .column {
   display: flex;
-  flex-direction: column; }
+  flex-direction: column;
+}
 
 /* line 18, src/styles/base/_layout.scss */
 .row {
   display: flex;
-  flex-direction: row; }
+  flex-direction: row;
+}
 
 /* line 23, src/styles/base/_layout.scss */
 .cozy-bar {
   width: 100%;
   display: flex;
   align-items: center;
-  justify-content: center; }
+  justify-content: center;
+}
 
 /* line 30, src/styles/base/_layout.scss */
 [role='banner'] .coz-bar-container {
-  background-color: white; }
-  @media only screen and (max-width: 768px) {
-    /* line 30, src/styles/base/_layout.scss */
-    [role='banner'] .coz-bar-container {
-      padding: 0 0 0 0;
-      background-color: unset; } }
+  background-color: white;
+}
+@media only screen and (max-width: 768px) {
+  /* line 30, src/styles/base/_layout.scss */
+  [role='banner'] .coz-bar-container {
+    padding: 0 0 0 0;
+    background-color: unset;
+  }
+}
 
 /* line 38, src/styles/base/_layout.scss */
 .coz-bar-wrapper {
   box-shadow: unset !important;
-  background: unset !important; }
+  background: unset !important;
+}
 
 /* line 43, src/styles/base/_layout.scss */
 .header {
@@ -64,76 +73,103 @@ body {
   z-index: 18;
   position: fixed;
   top: 48px;
-  left: 0; }
-  @media only screen and (max-width: 768px) {
-    /* line 43, src/styles/base/_layout.scss */
-    .header {
-      top: 0; } }
-  /* line 56, src/styles/base/_layout.scss */
-  .header .header-bar {
-    background: linear-gradient(180deg, #000000 0%, rgba(27, 28, 34, 0) 70%);
-    height: 8px;
-    width: 100%; }
-  /* line 61, src/styles/base/_layout.scss */
-  .header .header-top {
-    background: radial-gradient(74.83% 76.97% at 50% 13.64%, #343641 0%, #1b1c22 100%);
-    width: 100%; }
-    /* line 68, src/styles/base/_layout.scss */
-    .header .header-top .header-text {
-      padding: 0 1rem 1rem 1rem;
-      color: #e0e0e0; }
+  left: 0;
+}
+@media only screen and (max-width: 768px) {
+  /* line 43, src/styles/base/_layout.scss */
+  .header {
+    top: 0;
+  }
+}
+/* line 56, src/styles/base/_layout.scss */
+.header .header-bar {
+  background: linear-gradient(180deg, #000000 0%, rgba(27, 28, 34, 0) 70%);
+  height: 8px;
+  width: 100%;
+}
+/* line 61, src/styles/base/_layout.scss */
+.header .header-top {
+  background: radial-gradient(
+    74.83% 76.97% at 50% 13.64%,
+    #343641 0%,
+    #1b1c22 100%
+  );
+  width: 100%;
+}
+/* line 68, src/styles/base/_layout.scss */
+.header .header-top .header-text {
+  padding: 0 1rem 1rem 1rem;
+  color: #e0e0e0;
+}
+/* line 73, src/styles/base/_layout.scss */
+.header .header-content {
+  margin: 0 0 0 220px;
+  display: flex;
+  flex-direction: column;
+}
+@media only screen and (max-width: 1023px) {
+  /* line 73, src/styles/base/_layout.scss */
+  .header .header-content {
+    margin: 0;
+  }
+}
+@media only screen and (max-width: 768px) {
   /* line 73, src/styles/base/_layout.scss */
   .header .header-content {
-    margin: 0 0 0 220px;
-    display: flex;
-    flex-direction: column; }
-    @media only screen and (max-width: 1023px) {
-      /* line 73, src/styles/base/_layout.scss */
-      .header .header-content {
-        margin: 0; } }
-    @media only screen and (max-width: 768px) {
-      /* line 73, src/styles/base/_layout.scss */
-      .header .header-content {
-        margin: 60px 0 0 0; } }
-    /* line 83, src/styles/base/_layout.scss */
-    .header .header-content .header-content-top {
-      display: flex;
-      flex-direction: row; }
-      /* line 86, src/styles/base/_layout.scss */
-      .header .header-content .header-content-top.header-content-top-right {
-        justify-content: flex-end; }
-      /* line 89, src/styles/base/_layout.scss */
-      .header .header-content .header-content-top .header-text {
-        padding: 2rem 1rem;
-        flex: 1; }
-      /* line 93, src/styles/base/_layout.scss */
-      .header .header-content .header-content-top .header-text-desktop {
-        display: flex;
-        flex: 1;
-        padding: 2rem 1.25rem;
-        color: #e0e0e0; }
-      /* line 99, src/styles/base/_layout.scss */
-      .header .header-content .header-content-top .header-back-button {
-        padding: 0 0.75rem; }
-      @media only screen and (max-width: 768px) {
-        /* line 103, src/styles/base/_layout.scss */
-        .header .header-content .header-content-top .header-text {
-          padding: 0 1rem 1rem 1rem;
-          color: #e0e0e0; }
-        /* line 107, src/styles/base/_layout.scss */
-        .header .header-content .header-content-top .header-text-desktop {
-          display: none; }
-        /* line 110, src/styles/base/_layout.scss */
-        .header .header-content .header-content-top .header-feedbacks-button {
-          display: none; } }
+    margin: 60px 0 0 0;
+  }
+}
+/* line 83, src/styles/base/_layout.scss */
+.header .header-content .header-content-top {
+  display: flex;
+  flex-direction: row;
+}
+/* line 86, src/styles/base/_layout.scss */
+.header .header-content .header-content-top.header-content-top-right {
+  justify-content: flex-end;
+}
+/* line 89, src/styles/base/_layout.scss */
+.header .header-content .header-content-top .header-text {
+  padding: 2rem 1rem;
+  flex: 1;
+}
+/* line 93, src/styles/base/_layout.scss */
+.header .header-content .header-content-top .header-text-desktop {
+  display: flex;
+  flex: 1;
+  padding: 2rem 1.25rem;
+  color: #e0e0e0;
+}
+/* line 99, src/styles/base/_layout.scss */
+.header .header-content .header-content-top .header-back-button {
+  padding: 0 0.75rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 103, src/styles/base/_layout.scss */
+  .header .header-content .header-content-top .header-text {
+    padding: 0 1rem 1rem 1rem;
+    color: #e0e0e0;
+  }
+  /* line 107, src/styles/base/_layout.scss */
+  .header .header-content .header-content-top .header-text-desktop {
+    display: none;
+  }
+  /* line 110, src/styles/base/_layout.scss */
+  .header .header-content .header-content-top .header-feedbacks-button {
+    display: none;
+  }
+}
 
 /* line 118, src/styles/base/_layout.scss */
 .content-view {
-  margin-top: 116px; }
-  @media only screen and (max-width: 768px) {
-    /* line 118, src/styles/base/_layout.scss */
-    .content-view {
-      margin-top: 0; } }
+  margin-top: 116px;
+}
+@media only screen and (max-width: 768px) {
+  /* line 118, src/styles/base/_layout.scss */
+  .content-view {
+    margin-top: 0;
+  }
+}
 
 /* line 125, src/styles/base/_layout.scss */
 .content-view-loading {
@@ -143,31 +179,38 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  color: #e0e0e0; }
-  /* line 133, src/styles/base/_layout.scss */
-  .content-view-loading .content-view-loading-text {
-    padding-top: 1rem;
-    margin: 0 2rem;
-    text-align: center; }
-  /* line 138, src/styles/base/_layout.scss */
-  .content-view-loading .content-view-loading-button {
-    max-width: 50vw;
-    margin-top: 1rem; }
+  color: #e0e0e0;
+}
+/* line 133, src/styles/base/_layout.scss */
+.content-view-loading .content-view-loading-text {
+  padding-top: 1rem;
+  margin: 0 2rem;
+  text-align: center;
+}
+/* line 138, src/styles/base/_layout.scss */
+.content-view-loading .content-view-loading-button {
+  max-width: 50vw;
+  margin-top: 1rem;
+}
 
 /* line 144, src/styles/base/_layout.scss */
 [role='main'] {
   /* width */
   /* Track */
-  /* Handle */ }
-  /* line 146, src/styles/base/_layout.scss */
-  [role='main']::-webkit-scrollbar {
-    width: 10px; }
-  /* line 150, src/styles/base/_layout.scss */
-  [role='main']::-webkit-scrollbar-track {
-    background: #3e4045; }
-  /* line 154, src/styles/base/_layout.scss */
-  [role='main']::-webkit-scrollbar-thumb {
-    background: #6f7074; }
+  /* Handle */
+}
+/* line 146, src/styles/base/_layout.scss */
+[role='main']::-webkit-scrollbar {
+  width: 10px;
+}
+/* line 150, src/styles/base/_layout.scss */
+[role='main']::-webkit-scrollbar-track {
+  background: #3e4045;
+}
+/* line 154, src/styles/base/_layout.scss */
+[role='main']::-webkit-scrollbar-thumb {
+  background: #6f7074;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -193,7 +236,8 @@ body {
 /** TABS GRADIENT **/
 /* line 6, src/styles/base/_typography.scss */
 * {
-  font-family: Lato, sans-serif; }
+  font-family: Lato, sans-serif;
+}
 
 /* line 10, src/styles/base/_typography.scss */
 h1,
@@ -204,7 +248,8 @@ h5,
 h6,
 p {
   color: #a0a0a0;
-  font-family: Lato, sans-serif; }
+  font-family: Lato, sans-serif;
+}
 
 /* line 21, src/styles/base/_typography.scss */
 .home-title {
@@ -213,7 +258,8 @@ p {
   font-style: normal;
   font-weight: normal;
   line-height: 120%;
-  text-transform: uppercase; }
+  text-transform: uppercase;
+}
 
 /* line 30, src/styles/base/_typography.scss */
 .app-title {
@@ -225,19 +271,23 @@ p {
   text-align: center;
   letter-spacing: 0.15px;
   color: #e0e0e0;
-  text-shadow: 0px -1px 0px #060609, 0px 1px 0px rgba(255, 255, 255, 0.07); }
+  text-shadow: 0px -1px 0px #060609, 0px 1px 0px rgba(255, 255, 255, 0.07);
+}
 
 /* line 43, src/styles/base/_typography.scss */
 .red {
-  color: #D25959; }
+  color: #d25959;
+}
 
 /* line 46, src/styles/base/_typography.scss */
 .blue {
-  color: #81abd0; }
+  color: #81abd0;
+}
 
 /* line 49, src/styles/base/_typography.scss */
 .green {
-  color: #7fd771; }
+  color: #7fd771;
+}
 
 /* line 53, src/styles/base/_typography.scss */
 .text-10-normal {
@@ -245,7 +295,8 @@ p {
   font-style: normal;
   font-weight: normal;
   font-size: 0.625rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 60, src/styles/base/_typography.scss */
 .text-10-bold {
@@ -253,7 +304,8 @@ p {
   font-style: normal;
   font-weight: bold;
   font-size: 0.625rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 67, src/styles/base/_typography.scss */
 .text-14-normal {
@@ -261,7 +313,8 @@ p {
   font-style: normal;
   font-weight: normal;
   font-size: 0.875rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 74, src/styles/base/_typography.scss */
 .text-14-normal-uppercase {
@@ -270,7 +323,8 @@ p {
   font-weight: normal;
   font-size: 0.875rem;
   line-height: 120%;
-  text-transform: uppercase; }
+  text-transform: uppercase;
+}
 
 /* line 82, src/styles/base/_typography.scss */
 .text-15-normal {
@@ -278,7 +332,8 @@ p {
   font-style: normal;
   font-weight: normal;
   font-size: 0.938rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 89, src/styles/base/_typography.scss */
 .text-16-normal {
@@ -286,7 +341,8 @@ p {
   font-style: normal;
   font-weight: normal;
   font-size: 1rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 96, src/styles/base/_typography.scss */
 .text-16-normal-150 {
@@ -294,7 +350,8 @@ p {
   font-style: normal;
   font-weight: normal;
   font-size: 1rem;
-  line-height: 150%; }
+  line-height: 150%;
+}
 
 /* line 103, src/styles/base/_typography.scss */
 .text-16-bold {
@@ -302,7 +359,8 @@ p {
   font-style: normal;
   font-weight: bold;
   font-size: 1rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 110, src/styles/base/_typography.scss */
 .text-18-normal {
@@ -310,7 +368,8 @@ p {
   font-style: normal;
   font-weight: 500;
   font-size: 1.125rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 117, src/styles/base/_typography.scss */
 .text-18-bold {
@@ -318,7 +377,8 @@ p {
   font-style: normal;
   font-weight: bold;
   font-size: 1.125rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 124, src/styles/base/_typography.scss */
 .text-19-bold {
@@ -326,7 +386,8 @@ p {
   font-style: normal;
   font-weight: bold;
   font-size: 1.188rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 131, src/styles/base/_typography.scss */
 .text-20-bold {
@@ -334,7 +395,8 @@ p {
   font-style: normal;
   font-weight: bold;
   font-size: 1.25rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 138, src/styles/base/_typography.scss */
 .text-21-bold {
@@ -342,7 +404,8 @@ p {
   font-style: normal;
   font-weight: bold;
   font-size: 1.313rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 145, src/styles/base/_typography.scss */
 .text-22-normal {
@@ -350,7 +413,8 @@ p {
   font-style: normal;
   font-weight: normal;
   font-size: 1.375rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 152, src/styles/base/_typography.scss */
 .text-22-bold {
@@ -358,7 +422,8 @@ p {
   font-style: normal;
   font-weight: bold;
   font-size: 1.375rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 159, src/styles/base/_typography.scss */
 .text-24-normal {
@@ -366,7 +431,8 @@ p {
   font-style: normal;
   font-weight: normal;
   font-size: 1.5rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 166, src/styles/base/_typography.scss */
 .text-24-bold {
@@ -374,7 +440,8 @@ p {
   font-style: normal;
   font-weight: bold;
   font-size: 1.5rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* Button */
 /* line 176, src/styles/base/_typography.scss */
@@ -384,7 +451,8 @@ p {
   font-weight: bold;
   font-size: 1rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* line 185, src/styles/base/_typography.scss */
 .button-secondary-text {
@@ -393,7 +461,8 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* Card */
 /* line 195, src/styles/base/_typography.scss */
@@ -403,7 +472,8 @@ p {
   font-weight: normal;
   font-size: 1.125rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* line 203, src/styles/base/_typography.scss */
 .card-title-off {
@@ -412,7 +482,8 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* line 211, src/styles/base/_typography.scss */
 .card-text-bold {
@@ -421,7 +492,8 @@ p {
   font-weight: bold;
   font-size: 1rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* line 219, src/styles/base/_typography.scss */
 .card-result {
@@ -430,7 +502,8 @@ p {
   font-weight: 900;
   font-size: 1.75rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* line 227, src/styles/base/_typography.scss */
 .card-indicator {
@@ -439,7 +512,8 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* line 235, src/styles/base/_typography.scss */
 .card-text {
@@ -448,7 +522,8 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* Chart */
 /* line 245, src/styles/base/_typography.scss */
@@ -458,7 +533,8 @@ p {
   font-weight: bold;
   font-size: 1rem;
   line-height: 123%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* line 253, src/styles/base/_typography.scss */
 .chart-result {
@@ -467,7 +543,8 @@ p {
   font-weight: bold;
   font-size: 2.25rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* line 261, src/styles/base/_typography.scss */
 .chart-fluid {
@@ -476,7 +553,8 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* line 269, src/styles/base/_typography.scss */
 .chart-switch-text {
@@ -485,7 +563,8 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* line 277, src/styles/base/_typography.scss */
 .chart-ticks-x-text {
@@ -493,11 +572,14 @@ p {
   font-style: normal;
   font-weight: normal;
   font-size: 1rem;
-  line-height: 120%; }
-  @media only screen and (max-width: 768px) {
-    /* line 277, src/styles/base/_typography.scss */
-    .chart-ticks-x-text {
-      font-size: 0.875rem; } }
+  line-height: 120%;
+}
+@media only screen and (max-width: 768px) {
+  /* line 277, src/styles/base/_typography.scss */
+  .chart-ticks-x-text {
+    font-size: 0.875rem;
+  }
+}
 
 /* line 287, src/styles/base/_typography.scss */
 .chart-ticks-y-text {
@@ -505,11 +587,14 @@ p {
   font-style: normal;
   font-weight: normal;
   font-size: 0.9rem;
-  line-height: 120%; }
-  @media only screen and (max-width: 768px) {
-    /* line 287, src/styles/base/_typography.scss */
-    .chart-ticks-y-text {
-      font-size: 0.75rem; } }
+  line-height: 120%;
+}
+@media only screen and (max-width: 768px) {
+  /* line 287, src/styles/base/_typography.scss */
+  .chart-ticks-y-text {
+    font-size: 0.75rem;
+  }
+}
 
 /* Cozy bar */
 /* line 299, src/styles/base/_typography.scss */
@@ -519,7 +604,8 @@ p {
   font-weight: bold;
   font-size: 1.3125rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* List */
 /* line 309, src/styles/base/_typography.scss */
@@ -530,7 +616,8 @@ p {
   font-size: 0.875rem;
   line-height: 120%;
   text-transform: uppercase;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* Tab */
 /* line 320, src/styles/base/_typography.scss */
@@ -539,7 +626,8 @@ p {
   font-style: normal;
   font-weight: bold;
   font-size: 1rem;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 327, src/styles/base/_typography.scss */
 .tab-text-off {
@@ -548,7 +636,8 @@ p {
   font-weight: normal;
   font-size: 1rem;
   line-height: 120%;
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -563,11 +652,13 @@ p {
 /** TABS GRADIENT **/
 /* line 5, src/styles/components/_card.scss */
 .redirect-card-link {
-  color: transparent; }
+  color: transparent;
+}
 
 /* line 8, src/styles/components/_card.scss */
 .redirect-card-content {
-  margin: 0.25rem 0; }
+  margin: 0.25rem 0;
+}
 
 /* line 14, src/styles/components/_card.scss */
 .card {
@@ -579,69 +670,83 @@ p {
   color: white;
   padding: 1rem 1.5rem;
   margin: 2vh 2vw 2vh 0vw;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75); }
-  @media only screen and (max-width: 768px) {
-    /* line 14, src/styles/components/_card.scss */
-    .card {
-      margin: 2vh 0; } }
-  /* line 27, src/styles/components/_card.scss */
-  .card.orange {
-    border: 1px solid rgba(216, 123, 57, 0.4); }
-  /* line 30, src/styles/components/_card.scss */
-  .card.blue {
-    border: 1px solid rgba(58, 152, 236, 0.4); }
-  /* line 33, src/styles/components/_card.scss */
-  .card.green {
-    border: 1px solid rgba(69, 209, 184, 0.4); }
-  /* line 36, src/styles/components/_card.scss */
-  .card .title {
-    font-size: 1.5rem;
-    font-style: normal;
-    font-weight: normal;
-    color: #e0e0e0;
-    line-height: 120%; }
-  /* line 43, src/styles/components/_card.scss */
-  .card h1 {
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 120%;
-    color: white; }
-  /* line 50, src/styles/components/_card.scss */
-  .card p {
-    font-style: normal;
-    font-weight: normal;
-    font-size: 1rem;
-    line-height: 120%; }
-  /* line 56, src/styles/components/_card.scss */
-  .card .card-header {
-    flex-direction: row;
-    display: flex;
-    justify-content: left;
-    padding: 0.75rem 0rem; }
-    /* line 61, src/styles/components/_card.scss */
-    .card .card-header div:first-of-type {
-      margin-left: 3.5vw; }
-    /* line 64, src/styles/components/_card.scss */
-    .card .card-header h2 {
-      margin: 0;
-      color: #e0e0e0;
-      font-style: normal;
-      font-weight: normal;
-      font-size: 2rem;
-      line-height: 120%; }
-      /* line 71, src/styles/components/_card.scss */
-      .card .card-header h2 span {
-        color: #e0e0e0;
-        font-weight: 600;
-        font-size: 2.3rem; }
-    /* line 77, src/styles/components/_card.scss */
-    .card .card-header h3 {
-      margin: 0;
-      font-style: normal;
-      font-weight: bold;
-      font-size: 1rem;
-      line-height: 120%; }
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
+}
+@media only screen and (max-width: 768px) {
+  /* line 14, src/styles/components/_card.scss */
+  .card {
+    margin: 2vh 0;
+  }
+}
+/* line 27, src/styles/components/_card.scss */
+.card.orange {
+  border: 1px solid rgba(216, 123, 57, 0.4);
+}
+/* line 30, src/styles/components/_card.scss */
+.card.blue {
+  border: 1px solid rgba(58, 152, 236, 0.4);
+}
+/* line 33, src/styles/components/_card.scss */
+.card.green {
+  border: 1px solid rgba(69, 209, 184, 0.4);
+}
+/* line 36, src/styles/components/_card.scss */
+.card .title {
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: normal;
+  color: #e0e0e0;
+  line-height: 120%;
+}
+/* line 43, src/styles/components/_card.scss */
+.card h1 {
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 120%;
+  color: white;
+}
+/* line 50, src/styles/components/_card.scss */
+.card p {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1rem;
+  line-height: 120%;
+}
+/* line 56, src/styles/components/_card.scss */
+.card .card-header {
+  flex-direction: row;
+  display: flex;
+  justify-content: left;
+  padding: 0.75rem 0rem;
+}
+/* line 61, src/styles/components/_card.scss */
+.card .card-header div:first-of-type {
+  margin-left: 3.5vw;
+}
+/* line 64, src/styles/components/_card.scss */
+.card .card-header h2 {
+  margin: 0;
+  color: #e0e0e0;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 2rem;
+  line-height: 120%;
+}
+/* line 71, src/styles/components/_card.scss */
+.card .card-header h2 span {
+  color: #e0e0e0;
+  font-weight: 600;
+  font-size: 2.3rem;
+}
+/* line 77, src/styles/components/_card.scss */
+.card .card-header h3 {
+  margin: 0;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 1rem;
+  line-height: 120%;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -656,62 +761,77 @@ p {
 /** TABS GRADIENT **/
 /* line 4, src/styles/components/_form.scss */
 .form {
-  padding: 1rem; }
-  @media only screen and (max-width: 768px) {
-    /* line 4, src/styles/components/_form.scss */
-    .form {
-      padding: 1rem; } }
-  /* line 9, src/styles/components/_form.scss */
-  .form label {
-    font-style: normal;
-    font-weight: normal;
-    font-size: 1rem;
-    color: #e0e0e0;
-    margin-top: 0rem; }
-  /* line 16, src/styles/components/_form.scss */
-  .form .form-input {
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid #7b7b7b;
-    border-radius: 4px;
-    color: #e0e0e0;
-    padding: 0 5%;
-    outline-offset: -1px; }
-    /* line 23, src/styles/components/_form.scss */
-    .form .form-input.--error {
-      border: 1px solid #D25959; }
-  /* line 27, src/styles/components/_form.scss */
-  .form .form-input:focus {
-    outline: none;
-    border: 1px solid #e3b82a; }
-  /* line 31, src/styles/components/_form.scss */
-  .form .form-group {
-    display: flex;
-    flex-direction: column;
-    margin: 1.5rem 0 0 0; }
-    /* line 35, src/styles/components/_form.scss */
-    .form .form-group .form-trailing-icon {
-      float: right;
-      position: relative;
-      margin-top: -48px;
-      margin-right: 15px; }
+  padding: 1rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 4, src/styles/components/_form.scss */
+  .form {
+    padding: 1rem;
+  }
+}
+/* line 9, src/styles/components/_form.scss */
+.form label {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1rem;
+  color: #e0e0e0;
+  margin-top: 0rem;
+}
+/* line 16, src/styles/components/_form.scss */
+.form .form-input {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid #7b7b7b;
+  border-radius: 4px;
+  color: #e0e0e0;
+  padding: 0 5%;
+  outline-offset: -1px;
+}
+/* line 23, src/styles/components/_form.scss */
+.form .form-input.--error {
+  border: 1px solid #d25959;
+}
+/* line 27, src/styles/components/_form.scss */
+.form .form-input:focus {
+  outline: none;
+  border: 1px solid #e3b82a;
+}
+/* line 31, src/styles/components/_form.scss */
+.form .form-group {
+  display: flex;
+  flex-direction: column;
+  margin: 1.5rem 0 0 0;
+}
+/* line 35, src/styles/components/_form.scss */
+.form .form-group .form-trailing-icon {
+  float: right;
+  position: relative;
+  margin-top: -48px;
+  margin-right: 15px;
+}
+/* line 42, src/styles/components/_form.scss */
+.form .form-control {
+  height: 3rem;
+}
+@media only screen and (max-width: 768px) {
   /* line 42, src/styles/components/_form.scss */
   .form .form-control {
-    height: 3rem; }
-    @media only screen and (max-width: 768px) {
-      /* line 42, src/styles/components/_form.scss */
-      .form .form-control {
-        max-width: 100vw; } }
-  /* line 48, src/styles/components/_form.scss */
-  .form .form-message {
-    color: #ce3535;
-    min-height: 1.25rem;
-    margin-top: 0.75rem; }
-  /* line 53, src/styles/components/_form.scss */
-  .form .form-button {
-    margin-top: 0.75rem; }
-  /* line 56, src/styles/components/_form.scss */
-  .form ::placeholder {
-    color: #e0e0e0; }
+    max-width: 100vw;
+  }
+}
+/* line 48, src/styles/components/_form.scss */
+.form .form-message {
+  color: #ce3535;
+  min-height: 1.25rem;
+  margin-top: 0.75rem;
+}
+/* line 53, src/styles/components/_form.scss */
+.form .form-button {
+  margin-top: 0.75rem;
+}
+/* line 56, src/styles/components/_form.scss */
+.form ::placeholder {
+  color: #e0e0e0;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -730,7 +850,7 @@ p {
   padding: 0.5vh 2vw 0.5vh 2vw;
   background-color: #b2901b;
   border: 1px solid rgba(227, 184, 42, 0.2);
-  box-shadow: 0px 2px 6px #1E1C1C;
+  box-shadow: 0px 2px 6px #1e1c1c;
   border-radius: 2px;
   margin: 1rem 0 1rem 0;
   color: black;
@@ -738,21 +858,25 @@ p {
   font-style: normal;
   font-weight: 600;
   line-height: 120%;
-  text-transform: capitalize; }
-  /* line 23, src/styles/components/_button.scss */
-  .btn-primary:hover {
-    cursor: pointer;
-    background-color: #deaf0e;
-    color: #242633; }
-  /* line 28, src/styles/components/_button.scss */
-  .btn-primary:active {
-    position: relative;
-    top: 1px;
-    background-color: #c59f1c; }
-  /* line 34, src/styles/components/_button.scss */
-  .btn-primary:focus {
-    cursor: pointer;
-    outline: none; }
+  text-transform: capitalize;
+}
+/* line 23, src/styles/components/_button.scss */
+.btn-primary:hover {
+  cursor: pointer;
+  background-color: #deaf0e;
+  color: #242633;
+}
+/* line 28, src/styles/components/_button.scss */
+.btn-primary:active {
+  position: relative;
+  top: 1px;
+  background-color: #c59f1c;
+}
+/* line 34, src/styles/components/_button.scss */
+.btn-primary:focus {
+  cursor: pointer;
+  outline: none;
+}
 
 /* line 41, src/styles/components/_button.scss */
 .btn-secondary {
@@ -763,12 +887,13 @@ p {
   margin: 1rem 0 1rem 0;
   text-transform: capitalize;
   border: 1px solid rgba(227, 184, 42, 0.2);
-  box-shadow: -2px -2px 6px rgba(227, 184, 42, 0.2), 2px 2px 6px #1E1C1C;
+  box-shadow: -2px -2px 6px rgba(227, 184, 42, 0.2), 2px 2px 6px #1e1c1c;
   border-radius: 6px;
   font-style: normal;
   font-weight: 600;
   font-size: 16px;
-  line-height: 120%; }
+  line-height: 120%;
+}
 
 /* line 60, src/styles/components/_button.scss */
 .btn-secondary-negative {
@@ -777,13 +902,14 @@ p {
   padding: 0.5vh 2vw 0.5vh 2vw;
   margin: 1rem 0 1rem 0;
   text-transform: capitalize;
-  box-shadow: -2px -2px 6px rgba(227, 184, 42, 0.2), 2px 2px 6px #1E1C1C;
+  box-shadow: -2px -2px 6px rgba(227, 184, 42, 0.2), 2px 2px 6px #1e1c1c;
   border-radius: 6px;
   font-style: normal;
   font-weight: normal;
   font-size: 16px;
   line-height: 120%;
-  color: #E0E0E0; }
+  color: #e0e0e0;
+}
 
 /* line 78, src/styles/components/_button.scss */
 .btn-chevron {
@@ -792,11 +918,13 @@ p {
   font-size: 1rem;
   font-style: normal;
   font-weight: 600;
-  line-height: 120%; }
-  /* line 88, src/styles/components/_button.scss */
-  .btn-chevron:hover {
-    cursor: pointer;
-    color: white; }
+  line-height: 120%;
+}
+/* line 88, src/styles/components/_button.scss */
+.btn-chevron:hover {
+  cursor: pointer;
+  color: white;
+}
 
 /* line 94, src/styles/components/_button.scss */
 .btn-long-string {
@@ -810,7 +938,8 @@ p {
   font-style: normal;
   font-weight: 600;
   line-height: 120%;
-  margin: 1rem 0 1rem 0; }
+  margin: 1rem 0 1rem 0;
+}
 
 /*
 .btn {
@@ -868,205 +997,262 @@ p {
   border-radius: 4px;
   background: linear-gradient(180deg, #323339 0%, #25262b 100%);
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
-  transition: background-color 0.6s ease; }
-  /* line 13, src/styles/components/_konnector.scss */
-  .accordion.active {
-    background-color: #34353a; }
-  /* line 17, src/styles/components/_konnector.scss */
-  .accordion .accordion-header {
-    display: flex;
-    align-items: center;
-    border: none;
-    outline: none;
-    padding: 0 1rem; }
-    /* line 23, src/styles/components/_konnector.scss */
-    .accordion .accordion-header:hover {
-      cursor: pointer; }
-    /* line 26, src/styles/components/_konnector.scss */
-    .accordion .accordion-header .accordion-icon {
-      margin-right: 1rem; }
-      @media only screen and (max-width: 768px) {
-        /* line 26, src/styles/components/_konnector.scss */
-        .accordion .accordion-header .accordion-icon {
-          max-width: 16vw; } }
-    /* line 32, src/styles/components/_konnector.scss */
-    .accordion .accordion-header .accordion-info {
-      flex: 3;
-      color: #e0e0e0; }
-      @media only screen and (max-width: 768px) {
-        /* line 32, src/styles/components/_konnector.scss */
-        .accordion .accordion-header .accordion-info {
-          display: block; } }
-      /* line 38, src/styles/components/_konnector.scss */
-      .accordion .accordion-header .accordion-info .accordion-title {
-        flex: 1; }
-    /* line 45, src/styles/components/_konnector.scss */
-    .accordion .accordion-header .state-picto {
-      position: absolute;
-      display: flex; }
-  /* line 50, src/styles/components/_konnector.scss */
-  .accordion .accordion-update-result {
-    margin: 0.5rem 1.5rem; }
-    @media only screen and (max-width: 768px) {
-      /* line 50, src/styles/components/_konnector.scss */
-      .accordion .accordion-update-result {
-        margin: 0.5rem 0; } }
-  /* line 56, src/styles/components/_konnector.scss */
-  .accordion .accordion-update {
-    flex: 2;
-    padding: 0.5rem 1rem; }
-  /* line 60, src/styles/components/_konnector.scss */
-  .accordion .accordion-state {
-    flex: 2;
-    margin-right: 1rem; }
-  /* line 64, src/styles/components/_konnector.scss */
-  .accordion .accordion-frequency {
-    flex: 1;
-    padding: 0 1rem; }
-  /* line 68, src/styles/components/_konnector.scss */
-  .accordion .accordion-caption {
-    color: #a0a0a0;
-    text-transform: lowercase; }
-    /* line 71, src/styles/components/_konnector.scss */
-    .accordion .accordion-caption::first-letter {
-      text-transform: uppercase; }
-  /* line 75, src/styles/components/_konnector.scss */
-  .accordion .accordion-caption-red {
-    color: #ce3535;
-    text-transform: lowercase; }
-    /* line 78, src/styles/components/_konnector.scss */
-    .accordion .accordion-caption-red::first-letter {
-      text-transform: uppercase; }
-  /* line 82, src/styles/components/_konnector.scss */
-  .accordion .accordion-content {
-    overflow: hidden;
-    transition: max-height 0.6s ease; }
-  /* line 86, src/styles/components/_konnector.scss */
-  .accordion .inline-buttons {
-    display: flex;
-    flex-flow: row nowrap;
-    padding: 0 1rem; }
-  /* line 91, src/styles/components/_konnector.scss */
-  .accordion .konnector-delete {
-    margin-right: 0.25rem;
-    color: #D25959 !important; }
-  /* line 95, src/styles/components/_konnector.scss */
-  .accordion .konnector-update {
-    margin-left: 0.25rem; }
-  /* line 98, src/styles/components/_konnector.scss */
-  .accordion .btn-position {
-    width: 100%;
-    margin: 0.5rem 1rem; }
-
-/* line 103, src/styles/components/_konnector.scss */
-.--errored {
-  border: solid 1px #D25959; }
-
-/* line 107, src/styles/components/_konnector.scss */
-.kv-root {
+  transition: background-color 0.6s ease;
+}
+/* line 13, src/styles/components/_konnector.scss */
+.accordion.active {
+  background-color: #34353a;
+}
+/* line 17, src/styles/components/_konnector.scss */
+.accordion .accordion-header {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 0 1.5rem; }
-  /* line 113, src/styles/components/_konnector.scss */
-  .kv-root .kv-content {
-    width: 45.75rem; }
-    @media only screen and (max-width: 768px) {
-      /* line 113, src/styles/components/_konnector.scss */
-      .kv-root .kv-content {
-        width: 100%; } }
-    /* line 118, src/styles/components/_konnector.scss */
-    .kv-root .kv-content .kv-header {
-      margin-top: 2.5rem;
-      margin-bottom: 1.25rem;
-      color: #e0e0e0; }
-
-/* line 127, src/styles/components/_konnector.scss */
+  border: none;
+  outline: none;
+  padding: 0 1rem;
+}
+/* line 23, src/styles/components/_konnector.scss */
+.accordion .accordion-header:hover {
+  cursor: pointer;
+}
+/* line 26, src/styles/components/_konnector.scss */
+.accordion .accordion-header .accordion-icon {
+  margin-right: 1rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 26, src/styles/components/_konnector.scss */
+  .accordion .accordion-header .accordion-icon {
+    max-width: 16vw;
+  }
+}
+/* line 32, src/styles/components/_konnector.scss */
+.accordion .accordion-header .accordion-info {
+  flex: 3;
+  color: #e0e0e0;
+}
+@media only screen and (max-width: 768px) {
+  /* line 32, src/styles/components/_konnector.scss */
+  .accordion .accordion-header .accordion-info {
+    display: block;
+  }
+}
+/* line 38, src/styles/components/_konnector.scss */
+.accordion .accordion-header .accordion-info .accordion-title {
+  flex: 1;
+}
+/* line 45, src/styles/components/_konnector.scss */
+.accordion .accordion-header .state-picto {
+  position: absolute;
+  display: flex;
+}
+/* line 50, src/styles/components/_konnector.scss */
+.accordion .accordion-update-result {
+  margin: 0.5rem 1.5rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 50, src/styles/components/_konnector.scss */
+  .accordion .accordion-update-result {
+    margin: 0.5rem 0;
+  }
+}
+/* line 56, src/styles/components/_konnector.scss */
+.accordion .accordion-update {
+  flex: 2;
+  padding: 0.5rem 1rem;
+}
+/* line 60, src/styles/components/_konnector.scss */
+.accordion .accordion-state {
+  flex: 2;
+  margin-right: 1rem;
+}
+/* line 64, src/styles/components/_konnector.scss */
+.accordion .accordion-frequency {
+  flex: 1;
+  padding: 0 1rem;
+}
+/* line 68, src/styles/components/_konnector.scss */
+.accordion .accordion-caption {
+  color: #a0a0a0;
+  text-transform: lowercase;
+}
+/* line 71, src/styles/components/_konnector.scss */
+.accordion .accordion-caption::first-letter {
+  text-transform: uppercase;
+}
+/* line 75, src/styles/components/_konnector.scss */
+.accordion .accordion-caption-red {
+  color: #ce3535;
+  text-transform: lowercase;
+}
+/* line 78, src/styles/components/_konnector.scss */
+.accordion .accordion-caption-red::first-letter {
+  text-transform: uppercase;
+}
+/* line 82, src/styles/components/_konnector.scss */
+.accordion .accordion-content {
+  overflow: hidden;
+  transition: max-height 0.6s ease;
+}
+/* line 86, src/styles/components/_konnector.scss */
+.accordion .inline-buttons {
+  display: flex;
+  flex-flow: row nowrap;
+  padding: 0 1rem;
+}
+/* line 91, src/styles/components/_konnector.scss */
+.accordion .konnector-delete {
+  margin-right: 0.25rem;
+  color: #d25959 !important;
+}
+/* line 95, src/styles/components/_konnector.scss */
+.accordion .konnector-update {
+  margin-left: 0.25rem;
+}
+/* line 98, src/styles/components/_konnector.scss */
+.accordion .btn-position {
+  width: 100%;
+  margin: 0.5rem 1rem;
+}
+
+/* line 103, src/styles/components/_konnector.scss */
+.--errored {
+  border: solid 1px #d25959;
+}
+
+/* line 107, src/styles/components/_konnector.scss */
+.kv-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1.5rem;
+}
+/* line 113, src/styles/components/_konnector.scss */
+.kv-root .kv-content {
+  width: 45.75rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 113, src/styles/components/_konnector.scss */
+  .kv-root .kv-content {
+    width: 100%;
+  }
+}
+/* line 118, src/styles/components/_konnector.scss */
+.kv-root .kv-content .kv-header {
+  margin-top: 2.5rem;
+  margin-bottom: 1.25rem;
+  color: #e0e0e0;
+}
+
+/* line 127, src/styles/components/_konnector.scss */
 .knotfound {
-  margin: 0 1.5rem; }
-  @media only screen and (max-width: 768px) {
-    /* line 127, src/styles/components/_konnector.scss */
-    .knotfound {
-      margin: 0; } }
-  /* line 132, src/styles/components/_konnector.scss */
-  .knotfound .knotfound-text {
-    color: #e0e0e0;
-    padding-top: 1rem; }
-  /* line 136, src/styles/components/_konnector.scss */
-  .knotfound .knotfound-button {
-    margin-bottom: 1rem; }
+  margin: 0 1.5rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 127, src/styles/components/_konnector.scss */
+  .knotfound {
+    margin: 0;
+  }
+}
+/* line 132, src/styles/components/_konnector.scss */
+.knotfound .knotfound-text {
+  color: #e0e0e0;
+  padding-top: 1rem;
+}
+/* line 136, src/styles/components/_konnector.scss */
+.knotfound .knotfound-button {
+  margin-bottom: 1rem;
+}
 
 /* line 142, src/styles/components/_konnector.scss */
 .koauthform {
   margin: 0 1.5rem;
-  padding: 0 1rem; }
-  /* line 145, src/styles/components/_konnector.scss */
-  .koauthform .create-account {
-    color: #e0e0e0; }
-  @media only screen and (max-width: 768px) {
-    /* line 142, src/styles/components/_konnector.scss */
-    .koauthform {
-      margin: 0;
-      padding: 0 1rem; } }
-  /* line 152, src/styles/components/_konnector.scss */
-  .koauthform .koauthform-text {
-    color: #e0e0e0;
-    padding-top: 1rem; }
-  /* line 156, src/styles/components/_konnector.scss */
-  .koauthform .koauthform-button {
-    margin-bottom: 1rem; }
+  padding: 0 1rem;
+}
+/* line 145, src/styles/components/_konnector.scss */
+.koauthform .create-account {
+  color: #e0e0e0;
+}
+@media only screen and (max-width: 768px) {
+  /* line 142, src/styles/components/_konnector.scss */
+  .koauthform {
+    margin: 0;
+    padding: 0 1rem;
+  }
+}
+/* line 152, src/styles/components/_konnector.scss */
+.koauthform .koauthform-text {
+  color: #e0e0e0;
+  padding-top: 1rem;
+}
+/* line 156, src/styles/components/_konnector.scss */
+.koauthform .koauthform-button {
+  margin-bottom: 1rem;
+}
 
 /* line 163, src/styles/components/_konnector.scss */
 .kloginauthform .create-account {
-  color: #e0e0e0; }
+  color: #e0e0e0;
+}
 
 /* line 166, src/styles/components/_konnector.scss */
 .kloginauthform .kloginauthform-text {
   color: #e0e0e0;
-  padding-top: 1rem; }
+  padding-top: 1rem;
+}
 
 /* line 170, src/styles/components/_konnector.scss */
 .kloginauthform .kloginauthform-button {
-  margin-bottom: 1rem; }
+  margin-bottom: 1rem;
+}
 
 /* line 176, src/styles/components/_konnector.scss */
 .klaunch-content {
-  margin: 0.5rem 1.5rem; }
-  @media only screen and (max-width: 768px) {
-    /* line 176, src/styles/components/_konnector.scss */
-    .klaunch-content {
-      margin: 0.5rem 0; } }
-  /* line 181, src/styles/components/_konnector.scss */
-  .klaunch-content .klaunch-content-text {
-    color: #e0e0e0;
-    margin: 1rem;
-    text-align: center; }
-    /* line 185, src/styles/components/_konnector.scss */
-    .klaunch-content .klaunch-content-text .kc-wait {
-      color: #a0a0a0;
-      margin-bottom: 2rem; }
-  /* line 190, src/styles/components/_konnector.scss */
-  .klaunch-content .klaunch-content-text-center {
-    text-align: center; }
-  /* line 193, src/styles/components/_konnector.scss */
-  .klaunch-content .klaunch-info {
-    margin: 1.5rem; }
-    /* line 195, src/styles/components/_konnector.scss */
-    .klaunch-content .klaunch-info .konnector-config {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      text-align: center; }
-      /* line 201, src/styles/components/_konnector.scss */
-      .klaunch-content .klaunch-info .konnector-config .kce-picto-txt {
-        color: #D25959;
-        margin: 1.25rem; }
-      /* line 205, src/styles/components/_konnector.scss */
-      .klaunch-content .klaunch-info .konnector-config .kcs-picto-txt {
-        color: #e3b82a;
-        margin: 1.25rem; }
+  margin: 0.5rem 1.5rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 176, src/styles/components/_konnector.scss */
+  .klaunch-content {
+    margin: 0.5rem 0;
+  }
+}
+/* line 181, src/styles/components/_konnector.scss */
+.klaunch-content .klaunch-content-text {
+  color: #e0e0e0;
+  margin: 1rem;
+  text-align: center;
+}
+/* line 185, src/styles/components/_konnector.scss */
+.klaunch-content .klaunch-content-text .kc-wait {
+  color: #a0a0a0;
+  margin-bottom: 2rem;
+}
+/* line 190, src/styles/components/_konnector.scss */
+.klaunch-content .klaunch-content-text-center {
+  text-align: center;
+}
+/* line 193, src/styles/components/_konnector.scss */
+.klaunch-content .klaunch-info {
+  margin: 1.5rem;
+}
+/* line 195, src/styles/components/_konnector.scss */
+.klaunch-content .klaunch-info .konnector-config {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+/* line 201, src/styles/components/_konnector.scss */
+.klaunch-content .klaunch-info .konnector-config .kce-picto-txt {
+  color: #d25959;
+  margin: 1.25rem;
+}
+/* line 205, src/styles/components/_konnector.scss */
+.klaunch-content .klaunch-info .konnector-config .kcs-picto-txt {
+  color: #e3b82a;
+  margin: 1.25rem;
+}
 
 /* line 213, src/styles/components/_konnector.scss */
 .state-icon {
@@ -1074,7 +1260,8 @@ p {
   width: 22px;
   position: absolute;
   bottom: 8px;
-  left: 30px; }
+  left: 30px;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -1090,152 +1277,189 @@ p {
 /* line 5, src/styles/components/_fluid.scss */
 .sf {
   display: flex;
-  flex-direction: column; }
-  /* line 9, src/styles/components/_fluid.scss */
-  .sf .sf-header .sf-header-title {
-    color: #e0e0e0; }
-  /* line 12, src/styles/components/_fluid.scss */
-  .sf .sf-header .sf-header-text {
-    color: #a0a0a0; }
-  /* line 16, src/styles/components/_fluid.scss */
-  .sf .sf-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 3rem; }
-    /* line 21, src/styles/components/_fluid.scss */
-    .sf .sf-content .sf-link {
-      margin: 1rem; }
+  flex-direction: column;
+}
+/* line 9, src/styles/components/_fluid.scss */
+.sf .sf-header .sf-header-title {
+  color: #e0e0e0;
+}
+/* line 12, src/styles/components/_fluid.scss */
+.sf .sf-header .sf-header-text {
+  color: #a0a0a0;
+}
+/* line 16, src/styles/components/_fluid.scss */
+.sf .sf-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 3rem;
+}
+/* line 21, src/styles/components/_fluid.scss */
+.sf .sf-content .sf-link {
+  margin: 1rem;
+}
 
 /* line 28, src/styles/components/_fluid.scss */
 .fc-root {
   background-color: #121212;
   padding: 2rem 2rem 1rem 2rem;
-  margin-bottom: 1rem; }
-  @media only screen and (max-width: 768px) {
-    /* line 28, src/styles/components/_fluid.scss */
-    .fc-root {
-      padding: 1.5rem 1rem 1rem 1rem;
-      margin-bottom: 0.5rem; } }
+  margin-bottom: 1rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 28, src/styles/components/_fluid.scss */
+  .fc-root {
+    padding: 1.5rem 1rem 1rem 1rem;
+    margin-bottom: 0.5rem;
+  }
+}
+/* line 36, src/styles/components/_fluid.scss */
+.fc-root .fc-content {
+  min-height: 31.875rem;
+}
+@media only screen and (max-width: 768px) {
   /* line 36, src/styles/components/_fluid.scss */
   .fc-root .fc-content {
-    min-height: 31.875rem; }
-    @media only screen and (max-width: 768px) {
-      /* line 36, src/styles/components/_fluid.scss */
-      .fc-root .fc-content {
-        min-height: 23.875rem; } }
-    /* line 41, src/styles/components/_fluid.scss */
-    .fc-root .fc-content .fc-loader {
-      min-height: 31.875rem;
-      display: flex;
-      justify-content: center;
-      align-items: center; }
-      @media only screen and (max-width: 768px) {
-        /* line 41, src/styles/components/_fluid.scss */
-        .fc-root .fc-content .fc-loader {
-          min-height: 23.875rem; } }
+    min-height: 23.875rem;
+  }
+}
+/* line 41, src/styles/components/_fluid.scss */
+.fc-root .fc-content .fc-loader {
+  min-height: 31.875rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+@media only screen and (max-width: 768px) {
+  /* line 41, src/styles/components/_fluid.scss */
+  .fc-root .fc-content .fc-loader {
+    min-height: 23.875rem;
+  }
+}
 
 /* line 54, src/styles/components/_fluid.scss */
 .fv-root {
-  direction: 'rtl'; }
-  /* line 56, src/styles/components/_fluid.scss */
-  .fv-root .fv-nav-period {
-    display: flex;
-    flex-direction: row; }
-    /* line 59, src/styles/components/_fluid.scss */
-    .fv-root .fv-nav-period .nav-button {
-      flex: 1;
-      font-size: large; }
-  /* line 64, src/styles/components/_fluid.scss */
-  .fv-root .fv-header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    min-height: 8.375rem;
-    margin-bottom: 0.25rem; }
-  /* line 71, src/styles/components/_fluid.scss */
-  .fv-root .fv-footer {
-    display: flex;
-    justify-content: center; }
-    /* line 74, src/styles/components/_fluid.scss */
-    .fv-root .fv-footer .fv-footer-compare {
-      width: 100%;
-      max-width: 58.75rem;
-      display: flex;
-      flex-direction: row;
-      align-items: center; }
-      /* line 80, src/styles/components/_fluid.scss */
-      .fv-root .fv-footer .fv-footer-compare :hover {
-        cursor: pointer; }
-      /* line 83, src/styles/components/_fluid.scss */
-      .fv-root .fv-footer .fv-footer-compare .fv-footer-label {
-        flex: 1;
-        display: flex;
-        justify-content: flex-start;
-        color: #a0a0a0; }
-        /* line 88, src/styles/components/_fluid.scss */
-        .fv-root .fv-footer .fv-footer-compare .fv-footer-label.selected {
-          color: #ffffff; }
-    /* line 94, src/styles/components/_fluid.scss */
-    .fv-root .fv-footer .fv-footer-challenge {
-      width: 100%;
-      max-width: 58.75rem;
-      display: flex;
-      flex-direction: row;
-      align-items: center; }
-      /* line 100, src/styles/components/_fluid.scss */
-      .fv-root .fv-footer .fv-footer-challenge .fv-link {
-        text-decoration: none;
-        color: #a0a0a0; }
-      /* line 104, src/styles/components/_fluid.scss */
-      .fv-root .fv-footer .fv-footer-challenge .fv-footer-label-padding {
-        flex: 1;
-        display: flex;
-        justify-content: flex-start;
-        padding-left: 0.75rem;
-        color: #a0a0a0; }
+  direction: 'rtl';
+}
+/* line 56, src/styles/components/_fluid.scss */
+.fv-root .fv-nav-period {
+  display: flex;
+  flex-direction: row;
+}
+/* line 59, src/styles/components/_fluid.scss */
+.fv-root .fv-nav-period .nav-button {
+  flex: 1;
+  font-size: large;
+}
+/* line 64, src/styles/components/_fluid.scss */
+.fv-root .fv-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 8.375rem;
+  margin-bottom: 0.25rem;
+}
+/* line 71, src/styles/components/_fluid.scss */
+.fv-root .fv-footer {
+  display: flex;
+  justify-content: center;
+}
+/* line 74, src/styles/components/_fluid.scss */
+.fv-root .fv-footer .fv-footer-compare {
+  width: 100%;
+  max-width: 58.75rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+/* line 80, src/styles/components/_fluid.scss */
+.fv-root .fv-footer .fv-footer-compare :hover {
+  cursor: pointer;
+}
+/* line 83, src/styles/components/_fluid.scss */
+.fv-root .fv-footer .fv-footer-compare .fv-footer-label {
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  color: #a0a0a0;
+}
+/* line 88, src/styles/components/_fluid.scss */
+.fv-root .fv-footer .fv-footer-compare .fv-footer-label.selected {
+  color: #ffffff;
+}
+/* line 94, src/styles/components/_fluid.scss */
+.fv-root .fv-footer .fv-footer-challenge {
+  width: 100%;
+  max-width: 58.75rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+/* line 100, src/styles/components/_fluid.scss */
+.fv-root .fv-footer .fv-footer-challenge .fv-link {
+  text-decoration: none;
+  color: #a0a0a0;
+}
+/* line 104, src/styles/components/_fluid.scss */
+.fv-root .fv-footer .fv-footer-challenge .fv-footer-label-padding {
+  flex: 1;
+  display: flex;
+  justify-content: flex-start;
+  padding-left: 0.75rem;
+  color: #a0a0a0;
+}
 
 /* line 114, src/styles/components/_fluid.scss */
 .chart-indicator-none {
   visibility: hidden;
-  height: 0; }
+  height: 0;
+}
 
 /* line 118, src/styles/components/_fluid.scss */
 .chart-indicator-block {
   visibility: visible;
-  height: auto; }
+  height: auto;
+}
 
 /* line 124, src/styles/components/_fluid.scss */
 .fs-root {
   flex: 1;
-  height: 22rem; }
-  @media only screen and (max-width: 768px) {
-    /* line 124, src/styles/components/_fluid.scss */
-    .fs-root {
-      height: 14rem; } }
-  /* line 130, src/styles/components/_fluid.scss */
-  .fs-root .chart-loading {
-    width: 100%;
-    justify-content: center;
-    display: flex; }
+  height: 22rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 124, src/styles/components/_fluid.scss */
+  .fs-root {
+    height: 14rem;
+  }
+}
+/* line 130, src/styles/components/_fluid.scss */
+.fs-root .chart-loading {
+  width: 100%;
+  justify-content: center;
+  display: flex;
+}
+/* line 135, src/styles/components/_fluid.scss */
+.fs-root .fs-slide {
+  min-height: 22rem;
+  overflow-x: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+@media only screen and (max-width: 768px) {
   /* line 135, src/styles/components/_fluid.scss */
   .fs-root .fs-slide {
-    min-height: 22rem;
-    overflow-x: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center; }
-    @media only screen and (max-width: 768px) {
-      /* line 135, src/styles/components/_fluid.scss */
-      .fs-root .fs-slide {
-        min-height: 14rem; } }
-    /* line 144, src/styles/components/_fluid.scss */
-    .fs-root .fs-slide .chart-none {
-      visibility: hidden;
-      width: 0; }
-    /* line 148, src/styles/components/_fluid.scss */
-    .fs-root .fs-slide .chart-block {
-      visibility: visible; }
+    min-height: 14rem;
+  }
+}
+/* line 144, src/styles/components/_fluid.scss */
+.fs-root .fs-slide .chart-none {
+  visibility: hidden;
+  width: 0;
+}
+/* line 148, src/styles/components/_fluid.scss */
+.fs-root .fs-slide .chart-block {
+  visibility: visible;
+}
 
 /* line 155, src/styles/components/_fluid.scss */
 .cta-box {
@@ -1249,37 +1473,48 @@ p {
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  height: 37.5rem; }
-  @media only screen and (max-width: 768px) {
-    /* line 155, src/styles/components/_fluid.scss */
-    .cta-box {
-      height: 29rem;
-      width: 100vw; } }
-  @media only screen and (max-width: 1023px) {
-    /* line 155, src/styles/components/_fluid.scss */
-    .cta-box {
-      width: 100vw; } }
+  height: 37.5rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 155, src/styles/components/_fluid.scss */
+  .cta-box {
+    height: 29rem;
+    width: 100vw;
+  }
+}
+@media only screen and (max-width: 1023px) {
+  /* line 155, src/styles/components/_fluid.scss */
+  .cta-box {
+    width: 100vw;
+  }
+}
+/* line 175, src/styles/components/_fluid.scss */
+.cta-box .cta-box-header {
+  text-align: center;
+  font-weight: bold;
+  letter-spacing: 0.2px;
+  margin-bottom: 1.5em;
+  color: #e0e0e0;
+  width: 50%;
+}
+@media only screen and (max-width: 768px) {
   /* line 175, src/styles/components/_fluid.scss */
   .cta-box .cta-box-header {
-    text-align: center;
-    font-weight: bold;
-    letter-spacing: 0.2px;
-    margin-bottom: 1.5em;
-    color: #e0e0e0;
-    width: 50%; }
-    @media only screen and (max-width: 768px) {
-      /* line 175, src/styles/components/_fluid.scss */
-      .cta-box .cta-box-header {
-        width: 80%; } }
+    width: 80%;
+  }
+}
+/* line 186, src/styles/components/_fluid.scss */
+.cta-box .cta-box-button {
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
+@media only screen and (max-width: 768px) {
   /* line 186, src/styles/components/_fluid.scss */
   .cta-box .cta-box-button {
-    margin-left: auto;
-    margin-right: auto;
-    width: 50%; }
-    @media only screen and (max-width: 768px) {
-      /* line 186, src/styles/components/_fluid.scss */
-      .cta-box .cta-box-button {
-        width: 80%; } }
+    width: 80%;
+  }
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -1295,18 +1530,23 @@ p {
 /* line 4, src/styles/components/_navigator.scss */
 .cn {
   display: flex;
-  justify-content: center; }
+  justify-content: center;
+}
+/* line 7, src/styles/components/_navigator.scss */
+.cn .cn-tabs {
+  width: 50.625rem;
+}
+@media only screen and (max-width: 768px) {
   /* line 7, src/styles/components/_navigator.scss */
   .cn .cn-tabs {
-    width: 50.625rem; }
-    @media only screen and (max-width: 768px) {
-      /* line 7, src/styles/components/_navigator.scss */
-      .cn .cn-tabs {
-        width: 100%;
-        margin: 0 1.25rem; } }
-    /* line 13, src/styles/components/_navigator.scss */
-    .cn .cn-tabs .cn-tab {
-      outline: none !important; }
+    width: 100%;
+    margin: 0 1.25rem;
+  }
+}
+/* line 13, src/styles/components/_navigator.scss */
+.cn .cn-tabs .cn-tab {
+  outline: none !important;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -1324,224 +1564,279 @@ p {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 27.5rem; }
-  @media only screen and (max-width: 768px) {
-    /* line 4, src/styles/components/_consumptionvisualizer.scss */
-    .cv {
-      width: 100%; } }
-  /* line 12, src/styles/components/_consumptionvisualizer.scss */
-  .cv .cv-content-date {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    width: 100%; }
-    /* line 18, src/styles/components/_consumptionvisualizer.scss */
-    .cv .cv-content-date .cv-date-group {
-      display: flex;
-      flex-direction: column;
-      width: 38vw;
-      align-items: center;
-      align-self: center; }
-      /* line 24, src/styles/components/_consumptionvisualizer.scss */
-      .cv .cv-content-date .cv-date-group .cv-date {
-        color: #e0e0e0; }
-        /* line 26, src/styles/components/_consumptionvisualizer.scss */
-        .cv .cv-content-date .cv-date-group .cv-date::first-letter {
-          text-transform: uppercase; }
-  /* line 32, src/styles/components/_consumptionvisualizer.scss */
-  .cv .cv-load {
-    min-height: 5.25rem;
-    display: flex;
-    align-items: center; }
-    /* line 36, src/styles/components/_consumptionvisualizer.scss */
-    .cv .cv-load .cv-load-content {
-      display: flex;
-      flex-direction: row;
-      align-items: center; }
-      /* line 40, src/styles/components/_consumptionvisualizer.scss */
-      .cv .cv-load .cv-load-content .cv-load-section {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: 0.5rem 0.5rem; }
-        /* line 45, src/styles/components/_consumptionvisualizer.scss */
-        .cv .cv-load .cv-load-content .cv-load-section.cv-load-section-left {
-          align-items: flex-end; }
-        /* line 48, src/styles/components/_consumptionvisualizer.scss */
-        .cv .cv-load .cv-load-content .cv-load-section.cv-load-section-right {
-          align-items: flex-start; }
-        /* line 51, src/styles/components/_consumptionvisualizer.scss */
-        .cv .cv-load .cv-load-content .cv-load-section .cv-load-value {
-          flex-direction: row; }
-          /* line 53, src/styles/components/_consumptionvisualizer.scss */
-          .cv .cv-load .cv-load-content .cv-load-section .cv-load-value span {
-            align-self: flex-end;
-            margin-left: 0.5em; }
-  /* line 61, src/styles/components/_consumptionvisualizer.scss */
-  .cv .cv-euro {
-    display: flex;
-    flex-direction: row; }
-    /* line 64, src/styles/components/_consumptionvisualizer.scss */
-    .cv .cv-euro .cv-euro-link {
-      text-decoration: none;
-      color: transparent; }
-    /* line 68, src/styles/components/_consumptionvisualizer.scss */
-    .cv .cv-euro .cv-euro-fluid {
-      padding: 0 0.5rem;
-      display: flex;
-      align-items: center; }
-      /* line 72, src/styles/components/_consumptionvisualizer.scss */
-      .cv .cv-euro .cv-euro-fluid .cv-euro-fluid-icon {
-        margin-right: 0.5rem; }
-      /* line 75, src/styles/components/_consumptionvisualizer.scss */
-      .cv .cv-euro .cv-euro-fluid div {
-        padding-top: 0.2rem; }
-  /* line 80, src/styles/components/_consumptionvisualizer.scss */
-  .cv .cv-info {
-    min-height: 1.5rem;
-    display: flex;
-    align-items: center; }
-  /* line 85, src/styles/components/_consumptionvisualizer.scss */
-  .cv .electricity {
-    color: #d87b39; }
-  /* line 88, src/styles/components/_consumptionvisualizer.scss */
-  .cv .electricity-compare {
-    color: #e2bca1; }
-  /* line 91, src/styles/components/_consumptionvisualizer.scss */
-  .cv .water {
-    color: #3a98ec; }
-  /* line 94, src/styles/components/_consumptionvisualizer.scss */
-  .cv .water-compare {
-    color: #abd4fa; }
-  /* line 97, src/styles/components/_consumptionvisualizer.scss */
-  .cv .gas {
-    color: #45d1b8; }
-  /* line 100, src/styles/components/_consumptionvisualizer.scss */
-  .cv .gas-compare {
-    color: #a8f7e9; }
-  /* line 103, src/styles/components/_consumptionvisualizer.scss */
-  .cv .multifluid {
-    color: #ffffff; }
-  /* line 106, src/styles/components/_consumptionvisualizer.scss */
-  .cv .multifluid-compare {
-    color: #ffd597; }
-  /* line 109, src/styles/components/_consumptionvisualizer.scss */
-  .cv .error {
-    color: #d24444; }
-  /* line 112, src/styles/components/_consumptionvisualizer.scss */
-  .cv .error-line {
-    color: #d24444;
-    cursor: pointer;
-    display: flex;
-    align-items: center; }
-  /* line 118, src/styles/components/_consumptionvisualizer.scss */
-  .cv .underlined-error {
-    border-bottom: solid 1px #d24444; }
-  /* line 121, src/styles/components/_consumptionvisualizer.scss */
-  .cv .warning-icon {
-    margin-right: 4px; }
-  /* line 124, src/styles/components/_consumptionvisualizer.scss */
-  .cv .multifluid-compare {
-    color: #ffd597; }
-  /* line 127, src/styles/components/_consumptionvisualizer.scss */
-  .cv .cv-button {
-    border: none;
-    background: none;
-    color: #a0a0a0;
-    text-decoration: underline; }
-
-/** BLACK **/
-/** TEXT COLOR **/
-/** RED **/
-/** YELLOW **/
-/** ORANGE **/
-/** BLUE **/
-/** GREEN **/
-/** WHITE **/
-/** GREY **/
-/** App colors **/
-/** TABS GRADIENT **/
-/* line 4, src/styles/components/_barchart.scss */
-.axis {
-  color: #7b7b7b; }
-  /* line 6, src/styles/components/_barchart.scss */
-  .axis .tick-text {
-    fill: #7b7b7b; }
-    /* line 8, src/styles/components/_barchart.scss */
-    .axis .tick-text.tick-text-selected {
-      fill: #e0e0e0; }
-
-/* line 13, src/styles/components/_barchart.scss */
-.background-true {
-  opacity: 0.1; }
-
-/* line 16, src/styles/components/_barchart.scss */
-.background-false {
-  opacity: 0; }
-
-/* line 19, src/styles/components/_barchart.scss */
-.bar-ELECTRICITY {
-  fill: #5d3d2a; }
-  /* line 21, src/styles/components/_barchart.scss */
-  .bar-ELECTRICITY.selected {
-    fill: #d87b39;
-    filter: drop-shadow(0 -0.1rem 0.2rem #d87b39); }
-
-/* line 27, src/styles/components/_barchart.scss */
-.bar-compare-ELECTRICITY {
-  fill: #795c47; }
-  /* line 29, src/styles/components/_barchart.scss */
-  .bar-compare-ELECTRICITY.selected {
-    fill: #e2bca1;
-    filter: drop-shadow(0 -0.1rem 0.2rem #e2bca1); }
-
-/* line 35, src/styles/components/_barchart.scss */
-.bar-WATER {
-  fill: #20415e; }
-  /* line 37, src/styles/components/_barchart.scss */
-  .bar-WATER.selected {
-    fill: #3a98ec;
-    filter: drop-shadow(0 -0.1rem 0.2rem #3a98ec); }
-
-/* line 43, src/styles/components/_barchart.scss */
-.bar-compare-WATER {
-  fill: #4d5c6e; }
-  /* line 45, src/styles/components/_barchart.scss */
-  .bar-compare-WATER.selected {
-    fill: #abd4fa;
-    filter: drop-shadow(0 -0.1rem 0.2rem #abd4fa); }
-
-/* line 51, src/styles/components/_barchart.scss */
-.bar-GAS {
-  fill: #184940; }
-  /* line 53, src/styles/components/_barchart.scss */
-  .bar-GAS.selected {
-    fill: #45d1b8;
-    filter: drop-shadow(0 -0.1rem 0.2rem #45d1b8); }
-
-/* line 59, src/styles/components/_barchart.scss */
-.bar-compare-GAS {
-  fill: #597773; }
-  /* line 61, src/styles/components/_barchart.scss */
-  .bar-compare-GAS.selected {
-    fill: #a8f7e9;
-    filter: drop-shadow(0 -0.1rem 0.2rem #a8f7e9); }
-
-/* line 67, src/styles/components/_barchart.scss */
+  width: 27.5rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 4, src/styles/components/_consumptionvisualizer.scss */
+  .cv {
+    width: 100%;
+  }
+}
+/* line 12, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-content-date {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  width: 100%;
+}
+/* line 18, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-content-date .cv-date-group {
+  display: flex;
+  flex-direction: column;
+  width: 38vw;
+  align-items: center;
+  align-self: center;
+}
+/* line 24, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-content-date .cv-date-group .cv-date {
+  color: #e0e0e0;
+}
+/* line 26, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-content-date .cv-date-group .cv-date::first-letter {
+  text-transform: uppercase;
+}
+/* line 32, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-load {
+  min-height: 5.25rem;
+  display: flex;
+  align-items: center;
+}
+/* line 36, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-load .cv-load-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+/* line 40, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-load .cv-load-content .cv-load-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem 0.5rem;
+}
+/* line 45, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-load .cv-load-content .cv-load-section.cv-load-section-left {
+  align-items: flex-end;
+}
+/* line 48, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-load .cv-load-content .cv-load-section.cv-load-section-right {
+  align-items: flex-start;
+}
+/* line 51, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-load .cv-load-content .cv-load-section .cv-load-value {
+  flex-direction: row;
+}
+/* line 53, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-load .cv-load-content .cv-load-section .cv-load-value span {
+  align-self: flex-end;
+  margin-left: 0.5em;
+}
+/* line 61, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-euro {
+  display: flex;
+  flex-direction: row;
+}
+/* line 64, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-euro .cv-euro-link {
+  text-decoration: none;
+  color: transparent;
+}
+/* line 68, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-euro .cv-euro-fluid {
+  padding: 0 0.5rem;
+  display: flex;
+  align-items: center;
+}
+/* line 72, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-euro .cv-euro-fluid .cv-euro-fluid-icon {
+  margin-right: 0.5rem;
+}
+/* line 75, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-euro .cv-euro-fluid div {
+  padding-top: 0.2rem;
+}
+/* line 80, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-info {
+  min-height: 1.5rem;
+  display: flex;
+  align-items: center;
+}
+/* line 85, src/styles/components/_consumptionvisualizer.scss */
+.cv .electricity {
+  color: #d87b39;
+}
+/* line 88, src/styles/components/_consumptionvisualizer.scss */
+.cv .electricity-compare {
+  color: #e2bca1;
+}
+/* line 91, src/styles/components/_consumptionvisualizer.scss */
+.cv .water {
+  color: #3a98ec;
+}
+/* line 94, src/styles/components/_consumptionvisualizer.scss */
+.cv .water-compare {
+  color: #abd4fa;
+}
+/* line 97, src/styles/components/_consumptionvisualizer.scss */
+.cv .gas {
+  color: #45d1b8;
+}
+/* line 100, src/styles/components/_consumptionvisualizer.scss */
+.cv .gas-compare {
+  color: #a8f7e9;
+}
+/* line 103, src/styles/components/_consumptionvisualizer.scss */
+.cv .multifluid {
+  color: #ffffff;
+}
+/* line 106, src/styles/components/_consumptionvisualizer.scss */
+.cv .multifluid-compare {
+  color: #ffd597;
+}
+/* line 109, src/styles/components/_consumptionvisualizer.scss */
+.cv .error {
+  color: #d24444;
+}
+/* line 112, src/styles/components/_consumptionvisualizer.scss */
+.cv .error-line {
+  color: #d24444;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+/* line 118, src/styles/components/_consumptionvisualizer.scss */
+.cv .underlined-error {
+  border-bottom: solid 1px #d24444;
+}
+/* line 121, src/styles/components/_consumptionvisualizer.scss */
+.cv .warning-icon {
+  margin-right: 4px;
+}
+/* line 124, src/styles/components/_consumptionvisualizer.scss */
+.cv .multifluid-compare {
+  color: #ffd597;
+}
+/* line 127, src/styles/components/_consumptionvisualizer.scss */
+.cv .cv-button {
+  border: none;
+  background: none;
+  color: #a0a0a0;
+  text-decoration: underline;
+}
+
+/** BLACK **/
+/** TEXT COLOR **/
+/** RED **/
+/** YELLOW **/
+/** ORANGE **/
+/** BLUE **/
+/** GREEN **/
+/** WHITE **/
+/** GREY **/
+/** App colors **/
+/** TABS GRADIENT **/
+/* line 4, src/styles/components/_barchart.scss */
+.axis {
+  color: #7b7b7b;
+}
+/* line 6, src/styles/components/_barchart.scss */
+.axis .tick-text {
+  fill: #7b7b7b;
+}
+/* line 8, src/styles/components/_barchart.scss */
+.axis .tick-text.tick-text-selected {
+  fill: #e0e0e0;
+}
+
+/* line 13, src/styles/components/_barchart.scss */
+.background-true {
+  opacity: 0.1;
+}
+
+/* line 16, src/styles/components/_barchart.scss */
+.background-false {
+  opacity: 0;
+}
+
+/* line 19, src/styles/components/_barchart.scss */
+.bar-ELECTRICITY {
+  fill: #5d3d2a;
+}
+/* line 21, src/styles/components/_barchart.scss */
+.bar-ELECTRICITY.selected {
+  fill: #d87b39;
+  filter: drop-shadow(0 -0.1rem 0.2rem #d87b39);
+}
+
+/* line 27, src/styles/components/_barchart.scss */
+.bar-compare-ELECTRICITY {
+  fill: #795c47;
+}
+/* line 29, src/styles/components/_barchart.scss */
+.bar-compare-ELECTRICITY.selected {
+  fill: #e2bca1;
+  filter: drop-shadow(0 -0.1rem 0.2rem #e2bca1);
+}
+
+/* line 35, src/styles/components/_barchart.scss */
+.bar-WATER {
+  fill: #20415e;
+}
+/* line 37, src/styles/components/_barchart.scss */
+.bar-WATER.selected {
+  fill: #3a98ec;
+  filter: drop-shadow(0 -0.1rem 0.2rem #3a98ec);
+}
+
+/* line 43, src/styles/components/_barchart.scss */
+.bar-compare-WATER {
+  fill: #4d5c6e;
+}
+/* line 45, src/styles/components/_barchart.scss */
+.bar-compare-WATER.selected {
+  fill: #abd4fa;
+  filter: drop-shadow(0 -0.1rem 0.2rem #abd4fa);
+}
+
+/* line 51, src/styles/components/_barchart.scss */
+.bar-GAS {
+  fill: #184940;
+}
+/* line 53, src/styles/components/_barchart.scss */
+.bar-GAS.selected {
+  fill: #45d1b8;
+  filter: drop-shadow(0 -0.1rem 0.2rem #45d1b8);
+}
+
+/* line 59, src/styles/components/_barchart.scss */
+.bar-compare-GAS {
+  fill: #597773;
+}
+/* line 61, src/styles/components/_barchart.scss */
+.bar-compare-GAS.selected {
+  fill: #a8f7e9;
+  filter: drop-shadow(0 -0.1rem 0.2rem #a8f7e9);
+}
+
+/* line 67, src/styles/components/_barchart.scss */
 .bar-MULTIFLUID {
-  fill: #705d1d; }
-  /* line 69, src/styles/components/_barchart.scss */
-  .bar-MULTIFLUID.selected {
-    fill: #e3b82a;
-    filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a); }
+  fill: #705d1d;
+}
+/* line 69, src/styles/components/_barchart.scss */
+.bar-MULTIFLUID.selected {
+  fill: #e3b82a;
+  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);
+}
 
 /* line 75, src/styles/components/_barchart.scss */
 .bar-compare-MULTIFLUID {
-  fill: #7d6a4e; }
-  /* line 77, src/styles/components/_barchart.scss */
-  .bar-compare-MULTIFLUID.selected {
-    fill: #ffd597;
-    filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a); }
+  fill: #7d6a4e;
+}
+/* line 77, src/styles/components/_barchart.scss */
+.bar-compare-MULTIFLUID.selected {
+  fill: #ffd597;
+  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);
+}
 
 /** Animation **/
 /* line 84, src/styles/components/_barchart.scss */
@@ -1550,21 +1845,29 @@ p {
   animation-timing-function: cubic-bezier(1, 1, 0.42, 1);
   animation-iteration-count: 1;
   transform-origin: bottom center;
-  transform-box: fill-box; }
+  transform-box: fill-box;
+}
 
 @keyframes bounce-1 {
   0% {
-    transform: scale(0.1, 0.1); }
+    transform: scale(0.1, 0.1);
+  }
   28% {
-    transform: scale(0.1, 1.1); }
+    transform: scale(0.1, 1.1);
+  }
   45% {
-    transform: scale(0.8, 0.95); }
+    transform: scale(0.8, 0.95);
+  }
   55% {
-    transform: scale(1, 1); }
+    transform: scale(1, 1);
+  }
   65% {
-    transform: scale(1, 0.98); }
+    transform: scale(1, 0.98);
+  }
   75% {
-    transform: scale(1, 1); } }
+    transform: scale(1, 1);
+  }
+}
 
 /* line 112, src/styles/components/_barchart.scss */
 .bounce-2 {
@@ -1572,96 +1875,123 @@ p {
   animation-timing-function: cubic-bezier(1, 1, 0.42, 1);
   animation-iteration-count: 1;
   transform-origin: bottom center;
-  transform-box: fill-box; }
+  transform-box: fill-box;
+}
 
 @keyframes bounce-2 {
   0% {
-    transform: scale(1, 1); }
+    transform: scale(1, 1);
+  }
   28% {
-    transform: scale(1, 1.1); }
+    transform: scale(1, 1.1);
+  }
   45% {
-    transform: scale(0.8, 0.95); }
+    transform: scale(0.8, 0.95);
+  }
   55% {
-    transform: scale(1, 1); }
+    transform: scale(1, 1);
+  }
   65% {
-    transform: scale(1, 0.98); }
+    transform: scale(1, 0.98);
+  }
   75% {
-    transform: scale(1, 1); } }
+    transform: scale(1, 1);
+  }
+}
 
 /* line 140, src/styles/components/_barchart.scss */
 .bounce-3 {
   animation-name: bounce-3;
   animation-timing-function: cubic-bezier(1, 1, 0.42, 1);
   animation-iteration-count: 1;
-  transform-origin: bottom center; }
+  transform-origin: bottom center;
+}
 
 @keyframes bounce-3 {
   0% {
     opacity: 0.6;
-    transform: scaleY(1); }
+    transform: scaleY(1);
+  }
   50% {
     transform: scaleY(1.1);
-    opacity: 0.8; }
+    opacity: 0.8;
+  }
   100% {
     transform: scaleY(1);
-    opacity: 1; } }
+    opacity: 1;
+  }
+}
 
 /** Animatio ndelay **/
 /* line 162, src/styles/components/_barchart.scss */
 .delay {
-  animation-duration: 0.4s; }
+  animation-duration: 0.4s;
+}
 
 /* line 165, src/styles/components/_barchart.scss */
 .delay--0 {
-  animation-duration: 0.6s; }
+  animation-duration: 0.6s;
+}
 
 /* line 168, src/styles/components/_barchart.scss */
 .delay--1 {
-  animation-duration: 0.7s; }
+  animation-duration: 0.7s;
+}
 
 /* line 171, src/styles/components/_barchart.scss */
 .delay--2 {
-  animation-duration: 0.8s; }
+  animation-duration: 0.8s;
+}
 
 /* line 174, src/styles/components/_barchart.scss */
 .delay--3 {
-  animation-duration: 0.9s; }
+  animation-duration: 0.9s;
+}
 
 /* line 177, src/styles/components/_barchart.scss */
 .delay--4 {
-  animation-duration: 1s; }
+  animation-duration: 1s;
+}
 
 /* line 180, src/styles/components/_barchart.scss */
 .delay--5 {
-  animation-duration: 1.1s; }
+  animation-duration: 1.1s;
+}
 
 /* line 183, src/styles/components/_barchart.scss */
 .delay--6 {
-  animation-duration: 1.2s; }
+  animation-duration: 1.2s;
+}
 
 /* line 186, src/styles/components/_barchart.scss */
 .delay--7 {
-  animation-duration: 1.3s; }
+  animation-duration: 1.3s;
+}
 
 /* line 189, src/styles/components/_barchart.scss */
 .delay--8 {
-  animation-duration: 1.4s; }
+  animation-duration: 1.4s;
+}
 
 /* line 192, src/styles/components/_barchart.scss */
 .delay--9 {
-  animation-duration: 1.5s; }
+  animation-duration: 1.5s;
+}
 
 /* line 195, src/styles/components/_barchart.scss */
 .delay--10 {
-  animation-duration: 1.6s; }
+  animation-duration: 1.6s;
+}
 
 /* line 198, src/styles/components/_barchart.scss */
 .delay--11 {
-  animation-duration: 1.8s; }
+  animation-duration: 1.8s;
+}
 
 /* line 201, src/styles/components/_barchart.scss */
 .delay--12 {
-  animation-duration: 1.9s; }
+  animation-duration: 1.9s;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -1677,74 +2007,95 @@ p {
 /* line 4, src/styles/components/_nav.scss */
 .o-sidebar {
   background-color: #25262b;
-  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px 3px 14px rgba(0, 0, 0, 0.12), 0px 8px 10px rgba(0, 0, 0, 0.14);
+  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px 3px 14px rgba(0, 0, 0, 0.12),
+    0px 8px 10px rgba(0, 0, 0, 0.14);
   border-top: unset;
   border-right: unset;
-  z-index: 19; }
-  @media only screen and (max-width: 1023px) {
-    /* line 4, src/styles/components/_nav.scss */
-    .o-sidebar {
-      background-color: #25262b; } }
+  z-index: 19;
+}
+@media only screen and (max-width: 1023px) {
+  /* line 4, src/styles/components/_nav.scss */
+  .o-sidebar {
+    background-color: #25262b;
+  }
+}
+/* line 20, src/styles/components/_nav.scss */
+.o-sidebar .logo-grand-lyon {
+  position: absolute;
+  bottom: 20px;
+  left: 100px;
+}
+@media only screen and (max-width: 1023px) {
   /* line 20, src/styles/components/_nav.scss */
   .o-sidebar .logo-grand-lyon {
-    position: absolute;
-    bottom: 20px;
-    left: 100px; }
-    @media only screen and (max-width: 1023px) {
-      /* line 20, src/styles/components/_nav.scss */
-      .o-sidebar .logo-grand-lyon {
-        display: none; } }
+    display: none;
+  }
+}
 
 /* line 29, src/styles/components/_nav.scss */
 .c-nav-link {
-  padding: 0 1rem; }
-  /* line 31, src/styles/components/_nav.scss */
-  .c-nav-link .on {
-    display: none; }
-  /* line 34, src/styles/components/_nav.scss */
-  .c-nav-link .off {
-    display: block; }
+  padding: 0 1rem;
+}
+/* line 31, src/styles/components/_nav.scss */
+.c-nav-link .on {
+  display: none;
+}
+/* line 34, src/styles/components/_nav.scss */
+.c-nav-link .off {
+  display: block;
+}
 
 /* line 44, src/styles/components/_nav.scss */
 .c-nav-link .c-nav-icon {
   padding-right: 0.5rem;
   width: 50px;
   height: 36px;
-  fill: none; }
+  fill: none;
+}
 
 /* line 51, src/styles/components/_nav.scss */
 .c-nav-link.is-active {
-  box-shadow: inset 0.25rem 0 0 0 #b2901b; }
+  box-shadow: inset 0.25rem 0 0 0 #b2901b;
+}
 
 /* line 55, src/styles/components/_nav.scss */
 .c-nav-link.is-active .c-nav-icon {
-  fill: #b2901b !important; }
+  fill: #b2901b !important;
+}
 
 /* line 59, src/styles/components/_nav.scss */
 .c-nav-link.is-active {
   color: white;
-  text-decoration: none; }
-  /* line 62, src/styles/components/_nav.scss */
-  .c-nav-link.is-active .on {
-    display: block; }
-  /* line 65, src/styles/components/_nav.scss */
-  .c-nav-link.is-active .off {
-    display: none; }
+  text-decoration: none;
+}
+/* line 62, src/styles/components/_nav.scss */
+.c-nav-link.is-active .on {
+  display: block;
+}
+/* line 65, src/styles/components/_nav.scss */
+.c-nav-link.is-active .off {
+  display: none;
+}
 
 @media only screen and (max-width: 1023px) {
   /* line 71, src/styles/components/_nav.scss */
   .o-sidebar {
-    height: 56px; }
+    height: 56px;
+  }
   /* line 74, src/styles/components/_nav.scss */
   .c-nav-link {
-    padding: 0; }
+    padding: 0;
+  }
   /* line 78, src/styles/components/_nav.scss */
   .c-nav-link .c-nav-icon {
     padding: 0;
-    margin: auto; }
+    margin: auto;
+  }
   /* line 83, src/styles/components/_nav.scss */
   .c-nav-link.is-active {
-    box-shadow: unset; } }
+    box-shadow: unset;
+  }
+}
 
 /* line 88, src/styles/components/_nav.scss */
 .nb-challenge-notif {
@@ -1760,13 +2111,21 @@ p {
   border-radius: 50%;
   border: 1px solid #25262b;
   z-index: 1;
-  background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58FFFF;
-  font-size: 12px; }
-  @media only screen and (max-width: 1023px) {
-    /* line 88, src/styles/components/_nav.scss */
-    .nb-challenge-notif {
-      left: 25px;
-      bottom: unset; } }
+  background: radial-gradient(
+      105.25% 64.58% at 49.68% 70.83%,
+      rgba(1, 153, 163, 0.5) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    #58ffff;
+  font-size: 12px;
+}
+@media only screen and (max-width: 1023px) {
+  /* line 88, src/styles/components/_nav.scss */
+  .nb-challenge-notif {
+    left: 25px;
+    bottom: unset;
+  }
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -1785,105 +2144,149 @@ p {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem 1.5rem; }
-  @media only screen and (max-width: 768px) {
-    /* line 5, src/styles/components/_indicators.scss */
-    .fi-root {
-      margin-bottom: 0; } }
+  padding: 0.5rem 1.5rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 5, src/styles/components/_indicators.scss */
+  .fi-root {
+    margin-bottom: 0;
+  }
+}
+/* line 15, src/styles/components/_indicators.scss */
+.fi-root .fi-content {
+  min-height: 23.875rem;
+  width: 45.75rem;
+}
+@media only screen and (max-width: 768px) {
   /* line 15, src/styles/components/_indicators.scss */
   .fi-root .fi-content {
-    min-height: 23.875rem;
-    width: 45.75rem; }
-    @media only screen and (max-width: 768px) {
-      /* line 15, src/styles/components/_indicators.scss */
-      .fi-root .fi-content {
-        width: 100%; } }
-    /* line 21, src/styles/components/_indicators.scss */
-    .fi-root .fi-content .fi-header {
-      margin-top: 2.5rem;
-      margin-bottom: 1.25rem;
-      color: #e0e0e0; }
+    width: 100%;
+  }
+}
+/* line 21, src/styles/components/_indicators.scss */
+.fi-root .fi-content .fi-header {
+  margin-top: 2.5rem;
+  margin-bottom: 1.25rem;
+  color: #e0e0e0;
+}
+/* line 28, src/styles/components/_indicators.scss */
+.fi-root .sfi-content {
+  min-height: 16rem;
+  width: 45.75rem;
+}
+@media only screen and (max-width: 768px) {
   /* line 28, src/styles/components/_indicators.scss */
   .fi-root .sfi-content {
-    min-height: 16rem;
-    width: 45.75rem; }
-    @media only screen and (max-width: 768px) {
-      /* line 28, src/styles/components/_indicators.scss */
-      .fi-root .sfi-content {
-        width: 100%; } }
-    /* line 34, src/styles/components/_indicators.scss */
-    .fi-root .sfi-content .sfi-header {
-      margin-top: 2.5rem;
-      margin-bottom: 1.25rem;
-      color: #e0e0e0; }
-    /* line 39, src/styles/components/_indicators.scss */
-    .fi-root .sfi-content .sfi-redirect {
-      margin-bottom: 1.25rem;
-      display: flex;
-      flex-wrap: wrap; }
-      /* line 43, src/styles/components/_indicators.scss */
-      .fi-root .sfi-content .sfi-redirect .redirect-card-link:nth-child(2) {
-        margin-left: 0.625rem; }
-      /* line 46, src/styles/components/_indicators.scss */
-      .fi-root .sfi-content .sfi-redirect .redirect-card-link {
-        flex: 1; }
+    width: 100%;
+  }
+}
+/* line 34, src/styles/components/_indicators.scss */
+.fi-root .sfi-content .sfi-header {
+  margin-top: 2.5rem;
+  margin-bottom: 1.25rem;
+  color: #e0e0e0;
+}
+/* line 39, src/styles/components/_indicators.scss */
+.fi-root .sfi-content .sfi-redirect {
+  margin-bottom: 1.25rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+/* line 43, src/styles/components/_indicators.scss */
+.fi-root .sfi-content .sfi-redirect .redirect-card-link:nth-child(2) {
+  margin-left: 0.625rem;
+}
+/* line 46, src/styles/components/_indicators.scss */
+.fi-root .sfi-content .sfi-redirect .redirect-card-link {
+  flex: 1;
+}
 
 /* line 54, src/styles/components/_indicators.scss */
 .fpi-link {
-  color: transparent; }
+  color: transparent;
+}
 
 /* line 57, src/styles/components/_indicators.scss */
 .fpi {
   display: flex;
   flex-direction: row;
   margin: 0.25rem 0.25rem;
-  width: 100%; }
-  /* line 62, src/styles/components/_indicators.scss */
-  .fpi .fpi-left {
-    flex: 1;
-    display: flex;
-    flex-direction: column; }
-    /* line 66, src/styles/components/_indicators.scss */
-    .fpi .fpi-left .fpi-title {
-      align-content: flex-start;
-      margin-bottom: 0.5rem; }
-    /* line 70, src/styles/components/_indicators.scss */
-    .fpi .fpi-left .fpi-content {
-      display: flex;
-      flex-direction: row; }
-      /* line 73, src/styles/components/_indicators.scss */
-      .fpi .fpi-left .fpi-content .fpi-content-icon {
-        margin: 0.5rem 0; }
-      /* line 76, src/styles/components/_indicators.scss */
-      .fpi .fpi-left .fpi-content .fpi-content-perf {
-        margin: 0 1rem;
-        align-self: center; }
-        /* line 79, src/styles/components/_indicators.scss */
-        .fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-result {
-          color: #e0e0e0; }
-          /* line 81, src/styles/components/_indicators.scss */
-          .fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-result span {
-            display: inline-block;
-            padding-right: 0.25rem; }
-        /* line 86, src/styles/components/_indicators.scss */
-        .fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-indicator {
-          color: #a0a0a0; }
-          /* line 89, src/styles/components/_indicators.scss */
-          .fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-indicator .fpi-content-perf-indicator-kpi.positive {
-            color: #ffffff; }
-          /* line 92, src/styles/components/_indicators.scss */
-          .fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-indicator .fpi-content-perf-indicator-kpi.positive {
-            color: #cf6666; }
-          /* line 95, src/styles/components/_indicators.scss */
-          .fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-indicator .fpi-content-perf-indicator-kpi.negative {
-            color: #7fd771; }
-    /* line 102, src/styles/components/_indicators.scss */
-    .fpi .fpi-left .fpi-footer {
-      margin-top: 0.5rem;
-      color: #a0a0a0; }
-  /* line 107, src/styles/components/_indicators.scss */
-  .fpi .fpi-right {
-    align-self: center; }
+  width: 100%;
+}
+/* line 62, src/styles/components/_indicators.scss */
+.fpi .fpi-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+/* line 66, src/styles/components/_indicators.scss */
+.fpi .fpi-left .fpi-title {
+  align-content: flex-start;
+  margin-bottom: 0.5rem;
+}
+/* line 70, src/styles/components/_indicators.scss */
+.fpi .fpi-left .fpi-content {
+  display: flex;
+  flex-direction: row;
+}
+/* line 73, src/styles/components/_indicators.scss */
+.fpi .fpi-left .fpi-content .fpi-content-icon {
+  margin: 0.5rem 0;
+}
+/* line 76, src/styles/components/_indicators.scss */
+.fpi .fpi-left .fpi-content .fpi-content-perf {
+  margin: 0 1rem;
+  align-self: center;
+}
+/* line 79, src/styles/components/_indicators.scss */
+.fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-result {
+  color: #e0e0e0;
+}
+/* line 81, src/styles/components/_indicators.scss */
+.fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-result span {
+  display: inline-block;
+  padding-right: 0.25rem;
+}
+/* line 86, src/styles/components/_indicators.scss */
+.fpi .fpi-left .fpi-content .fpi-content-perf .fpi-content-perf-indicator {
+  color: #a0a0a0;
+}
+/* line 89, src/styles/components/_indicators.scss */
+.fpi
+  .fpi-left
+  .fpi-content
+  .fpi-content-perf
+  .fpi-content-perf-indicator
+  .fpi-content-perf-indicator-kpi.positive {
+  color: #ffffff;
+}
+/* line 92, src/styles/components/_indicators.scss */
+.fpi
+  .fpi-left
+  .fpi-content
+  .fpi-content-perf
+  .fpi-content-perf-indicator
+  .fpi-content-perf-indicator-kpi.positive {
+  color: #cf6666;
+}
+/* line 95, src/styles/components/_indicators.scss */
+.fpi
+  .fpi-left
+  .fpi-content
+  .fpi-content-perf
+  .fpi-content-perf-indicator
+  .fpi-content-perf-indicator-kpi.negative {
+  color: #7fd771;
+}
+/* line 102, src/styles/components/_indicators.scss */
+.fpi .fpi-left .fpi-footer {
+  margin-top: 0.5rem;
+  color: #a0a0a0;
+}
+/* line 107, src/styles/components/_indicators.scss */
+.fpi .fpi-right {
+  align-self: center;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -1902,68 +2305,86 @@ p {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 1rem 1.5rem; }
+  padding: 1rem 1.5rem;
+}
+/* line 11, src/styles/components/_challenges.scss */
+.ccc-root .ccc-content {
+  min-height: 9rem;
+  width: 45.75rem;
+}
+@media only screen and (max-width: 768px) {
   /* line 11, src/styles/components/_challenges.scss */
   .ccc-root .ccc-content {
-    min-height: 9rem;
-    width: 45.75rem; }
-    @media only screen and (max-width: 768px) {
-      /* line 11, src/styles/components/_challenges.scss */
-      .ccc-root .ccc-content {
-        width: 100%; } }
-    /* line 17, src/styles/components/_challenges.scss */
-    .ccc-root .ccc-content .ccc-header {
-      margin-top: 0.375rem;
-      margin-bottom: 1.25rem;
-      color: #e0e0e0; }
+    width: 100%;
+  }
+}
+/* line 17, src/styles/components/_challenges.scss */
+.ccc-root .ccc-content .ccc-header {
+  margin-top: 0.375rem;
+  margin-bottom: 1.25rem;
+  color: #e0e0e0;
+}
 
 /* line 24, src/styles/components/_challenges.scss */
 .loc-root {
   display: flex;
-  justify-content: center; }
+  justify-content: center;
+}
+/* line 27, src/styles/components/_challenges.scss */
+.loc-root .loc-content {
+  width: 100%;
+  max-width: 53rem;
+  display: grid;
+}
+@media only screen and (max-width: 768px) {
   /* line 27, src/styles/components/_challenges.scss */
   .loc-root .loc-content {
-    width: 100%;
-    max-width: 53rem;
-    display: grid; }
-    @media only screen and (max-width: 768px) {
-      /* line 27, src/styles/components/_challenges.scss */
-      .loc-root .loc-content {
-        display: block; } }
-    /* line 34, src/styles/components/_challenges.scss */
-    .loc-root .loc-content .timeline-line {
-      background-color: #e0e0e0;
-      width: 1px;
-      height: calc(100vh);
-      grid-column: 1;
-      grid-row: 1;
-      position: unset;
-      margin-left: 3.8rem; }
-      @media only screen and (max-width: 1023px) {
-        /* line 34, src/styles/components/_challenges.scss */
-        .loc-root .loc-content .timeline-line {
-          height: calc(100vh - 229px); } }
-      @media only screen and (max-width: 768px) {
-        /* line 34, src/styles/components/_challenges.scss */
-        .loc-root .loc-content .timeline-line {
-          height: 100vh;
-          display: block;
-          position: fixed; } }
-    /* line 51, src/styles/components/_challenges.scss */
-    .loc-root .loc-content .list-of-challenge-cards {
-      padding-top: 1rem;
-      width: 100%;
-      grid-column: 1;
-      grid-row: 1; }
-      @media only screen and (max-width: 768px) {
-        /* line 51, src/styles/components/_challenges.scss */
-        .loc-root .loc-content .list-of-challenge-cards {
-          display: block; } }
+    display: block;
+  }
+}
+/* line 34, src/styles/components/_challenges.scss */
+.loc-root .loc-content .timeline-line {
+  background-color: #e0e0e0;
+  width: 1px;
+  height: calc(100vh);
+  grid-column: 1;
+  grid-row: 1;
+  position: unset;
+  margin-left: 3.8rem;
+}
+@media only screen and (max-width: 1023px) {
+  /* line 34, src/styles/components/_challenges.scss */
+  .loc-root .loc-content .timeline-line {
+    height: calc(100vh - 229px);
+  }
+}
+@media only screen and (max-width: 768px) {
+  /* line 34, src/styles/components/_challenges.scss */
+  .loc-root .loc-content .timeline-line {
+    height: 100vh;
+    display: block;
+    position: fixed;
+  }
+}
+/* line 51, src/styles/components/_challenges.scss */
+.loc-root .loc-content .list-of-challenge-cards {
+  padding-top: 1rem;
+  width: 100%;
+  grid-column: 1;
+  grid-row: 1;
+}
+@media only screen and (max-width: 768px) {
+  /* line 51, src/styles/components/_challenges.scss */
+  .loc-root .loc-content .list-of-challenge-cards {
+    display: block;
+  }
+}
 
 /* line 65, src/styles/components/_challenges.scss */
 .cli-link {
   color: black;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 /* line 69, src/styles/components/_challenges.scss */
 .cli {
@@ -1971,80 +2392,100 @@ p {
   display: flex;
   flex-direction: row;
   margin: 2rem 0.5rem;
-  border-radius: 2px; }
-  @media only screen and (max-width: 768px) {
-    /* line 69, src/styles/components/_challenges.scss */
-    .cli {
-      margin: 1rem 0.5rem; } }
-  /* line 78, src/styles/components/_challenges.scss */
-  .cli.cli-available {
-    background: linear-gradient(180deg, #61F0F2 0%, #48C2C4 100%);
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0); }
-  /* line 83, src/styles/components/_challenges.scss */
-  .cli.cli-ongoing {
-    border: 1px solid #58FFFF;
-    background: #121212;
-    -webkit-transform: translateZ(0);
-    transform: translateZ(0); }
-  /* line 89, src/styles/components/_challenges.scss */
-  .cli .cli-left {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding-left: 1.415rem; }
-    /* line 94, src/styles/components/_challenges.scss */
-    .cli .cli-left .cli-content {
-      display: flex;
-      flex-direction: row; }
-      /* line 97, src/styles/components/_challenges.scss */
-      .cli .cli-left .cli-content .cli-content-icon {
-        margin: 0.5rem 0;
-        z-index: 5;
-        width: 62px;
-        height: 62px; }
-      /* line 103, src/styles/components/_challenges.scss */
-      .cli .cli-left .cli-content .cli-content-title {
-        color: #ffffff;
-        margin: 0 1rem;
-        align-self: center; }
-      /* line 108, src/styles/components/_challenges.scss */
-      .cli .cli-left .cli-content .subtitle-finished {
-        color: #a0a0a0; }
-      /* line 111, src/styles/components/_challenges.scss */
-      .cli .cli-left .cli-content .title-finished {
-        color: #e0e0e0; }
-      /* line 114, src/styles/components/_challenges.scss */
-      .cli .cli-left .cli-content .subtitle-ongoing {
-        color: #58FFFF; }
-      /* line 117, src/styles/components/_challenges.scss */
-      .cli .cli-left .cli-content .title-ongoing {
-        color: #ffffff; }
-      /* line 120, src/styles/components/_challenges.scss */
-      .cli .cli-left .cli-content .subtitle-available {
-        color: #121212; }
-      /* line 123, src/styles/components/_challenges.scss */
-      .cli .cli-left .cli-content .title-available {
-        color: #121212; }
-      /* line 126, src/styles/components/_challenges.scss */
-      .cli .cli-left .cli-content .title-locked {
-        color: #a0a0a0;
-        opacity: 0.35; }
-  /* line 132, src/styles/components/_challenges.scss */
-  .cli .cli-right {
-    align-self: center;
-    padding-right: 1.2rem; }
-    /* line 135, src/styles/components/_challenges.scss */
-    .cli .cli-right.cli-right-ongoing {
-      padding-right: calc(1.2rem + 2px); }
-    /* line 138, src/styles/components/_challenges.scss */
-    .cli .cli-right.cli-right-available {
-      padding-right: calc(1.2rem + 2px); }
+  border-radius: 2px;
+}
+@media only screen and (max-width: 768px) {
+  /* line 69, src/styles/components/_challenges.scss */
+  .cli {
+    margin: 1rem 0.5rem;
+  }
+}
+/* line 78, src/styles/components/_challenges.scss */
+.cli.cli-available {
+  background: linear-gradient(180deg, #61f0f2 0%, #48c2c4 100%);
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+}
+/* line 83, src/styles/components/_challenges.scss */
+.cli.cli-ongoing {
+  border: 1px solid #58ffff;
+  background: #121212;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+}
+/* line 89, src/styles/components/_challenges.scss */
+.cli .cli-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-left: 1.415rem;
+}
+/* line 94, src/styles/components/_challenges.scss */
+.cli .cli-left .cli-content {
+  display: flex;
+  flex-direction: row;
+}
+/* line 97, src/styles/components/_challenges.scss */
+.cli .cli-left .cli-content .cli-content-icon {
+  margin: 0.5rem 0;
+  z-index: 5;
+  width: 62px;
+  height: 62px;
+}
+/* line 103, src/styles/components/_challenges.scss */
+.cli .cli-left .cli-content .cli-content-title {
+  color: #ffffff;
+  margin: 0 1rem;
+  align-self: center;
+}
+/* line 108, src/styles/components/_challenges.scss */
+.cli .cli-left .cli-content .subtitle-finished {
+  color: #a0a0a0;
+}
+/* line 111, src/styles/components/_challenges.scss */
+.cli .cli-left .cli-content .title-finished {
+  color: #e0e0e0;
+}
+/* line 114, src/styles/components/_challenges.scss */
+.cli .cli-left .cli-content .subtitle-ongoing {
+  color: #58ffff;
+}
+/* line 117, src/styles/components/_challenges.scss */
+.cli .cli-left .cli-content .title-ongoing {
+  color: #ffffff;
+}
+/* line 120, src/styles/components/_challenges.scss */
+.cli .cli-left .cli-content .subtitle-available {
+  color: #121212;
+}
+/* line 123, src/styles/components/_challenges.scss */
+.cli .cli-left .cli-content .title-available {
+  color: #121212;
+}
+/* line 126, src/styles/components/_challenges.scss */
+.cli .cli-left .cli-content .title-locked {
+  color: #a0a0a0;
+  opacity: 0.35;
+}
+/* line 132, src/styles/components/_challenges.scss */
+.cli .cli-right {
+  align-self: center;
+  padding-right: 1.2rem;
+}
+/* line 135, src/styles/components/_challenges.scss */
+.cli .cli-right.cli-right-ongoing {
+  padding-right: calc(1.2rem + 2px);
+}
+/* line 138, src/styles/components/_challenges.scss */
+.cli .cli-right.cli-right-available {
+  padding-right: calc(1.2rem + 2px);
+}
 
 /* line 145, src/styles/components/_challenges.scss */
 .cc-link {
   color: black;
-  text-decoration: none; }
+  text-decoration: none;
+}
 
 /* line 149, src/styles/components/_challenges.scss */
 .cc {
@@ -2052,47 +2493,61 @@ p {
   display: flex;
   flex-direction: row;
   margin: 0.25rem 0.25rem;
-  width: 100%; }
-  /* line 155, src/styles/components/_challenges.scss */
-  .cc .cc-content-left {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: inherit; }
-    /* line 161, src/styles/components/_challenges.scss */
-    .cc .cc-content-left .cc-content-title {
-      color: #ffffff; }
-      /* line 163, src/styles/components/_challenges.scss */
-      .cc .cc-content-left .cc-content-title.cc-content-title-padding {
-        padding-top: 1rem; }
-    /* line 167, src/styles/components/_challenges.scss */
-    .cc .cc-content-left .cc-content-progress {
-      margin-top: 1rem; }
-    /* line 170, src/styles/components/_challenges.scss */
-    .cc .cc-content-left .cc-content-timeline {
-      padding: 0 0.5rem; }
-    /* line 173, src/styles/components/_challenges.scss */
-    .cc .cc-content-left .cc-content-visu {
-      padding: 1rem 0; }
-  /* line 177, src/styles/components/_challenges.scss */
-  .cc .cc-content-right {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    align-self: center; }
-    /* line 183, src/styles/components/_challenges.scss */
-    .cc .cc-content-right .cc-notification {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 1.8125rem;
-      width: 1.8125rem;
-      border-radius: 50%;
-      background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58FFFF;
-      color: black;
-      margin-right: 1rem; }
+  width: 100%;
+}
+/* line 155, src/styles/components/_challenges.scss */
+.cc .cc-content-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: inherit;
+}
+/* line 161, src/styles/components/_challenges.scss */
+.cc .cc-content-left .cc-content-title {
+  color: #ffffff;
+}
+/* line 163, src/styles/components/_challenges.scss */
+.cc .cc-content-left .cc-content-title.cc-content-title-padding {
+  padding-top: 1rem;
+}
+/* line 167, src/styles/components/_challenges.scss */
+.cc .cc-content-left .cc-content-progress {
+  margin-top: 1rem;
+}
+/* line 170, src/styles/components/_challenges.scss */
+.cc .cc-content-left .cc-content-timeline {
+  padding: 0 0.5rem;
+}
+/* line 173, src/styles/components/_challenges.scss */
+.cc .cc-content-left .cc-content-visu {
+  padding: 1rem 0;
+}
+/* line 177, src/styles/components/_challenges.scss */
+.cc .cc-content-right {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+}
+/* line 183, src/styles/components/_challenges.scss */
+.cc .cc-content-right .cc-notification {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.8125rem;
+  width: 1.8125rem;
+  border-radius: 50%;
+  background: radial-gradient(
+      105.25% 64.58% at 49.68% 70.83%,
+      rgba(1, 153, 163, 0.5) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    #58ffff;
+  color: black;
+  margin-right: 1rem;
+}
 
 /* line 198, src/styles/components/_challenges.scss */
 .cm-content {
@@ -2101,90 +2556,127 @@ p {
   justify-content: space-around;
   align-items: center;
   padding: 1.5rem 1rem 1.5rem;
-  width: 22.125rem; }
-  @media only screen and (max-width: 768px) {
-    /* line 198, src/styles/components/_challenges.scss */
-    .cm-content {
-      width: 90%; } }
-  /* line 208, src/styles/components/_challenges.scss */
-  .cm-content .win {
-    background: #eed582;
-    background: Linear-gradient(90deg, #bf723b 0%, #dd9a2b 26.04%, #f6d74c 45.31%, #d1880d 75%, #a05b11 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent; }
-  /* line 221, src/styles/components/_challenges.scss */
-  .cm-content .defeat {
-    background: #eed582;
-    background: Linear-gradient(90deg, #a66340 0%, #ae5f38 33.33%, #9e4e24 51.56%, #a4573a 66.67%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent; }
-  /* line 233, src/styles/components/_challenges.scss */
-  .cm-content .cm-title {
-    text-align: center; }
+  width: 22.125rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 198, src/styles/components/_challenges.scss */
+  .cm-content {
+    width: 90%;
+  }
+}
+/* line 208, src/styles/components/_challenges.scss */
+.cm-content .win {
+  background: #eed582;
+  background: Linear-gradient(
+    90deg,
+    #bf723b 0%,
+    #dd9a2b 26.04%,
+    #f6d74c 45.31%,
+    #d1880d 75%,
+    #a05b11 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+/* line 221, src/styles/components/_challenges.scss */
+.cm-content .defeat {
+  background: #eed582;
+  background: Linear-gradient(
+    90deg,
+    #a66340 0%,
+    #ae5f38 33.33%,
+    #9e4e24 51.56%,
+    #a4573a 66.67%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+/* line 233, src/styles/components/_challenges.scss */
+.cm-content .cm-title {
+  text-align: center;
+}
+/* line 236, src/styles/components/_challenges.scss */
+.cm-content .cm-win-badge-star {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  position: absolute;
+  top: 52px;
+}
+@media only screen and (max-width: 768px) {
   /* line 236, src/styles/components/_challenges.scss */
   .cm-content .cm-win-badge-star {
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    position: absolute;
-    top: 52px; }
-    @media only screen and (max-width: 768px) {
-      /* line 236, src/styles/components/_challenges.scss */
-      .cm-content .cm-win-badge-star {
-        top: 65px; } }
-    /* line 245, src/styles/components/_challenges.scss */
-    .cm-content .cm-win-badge-star.--ecolyo-royal {
-      top: 0px; }
-      @media only screen and (max-width: 768px) {
-        /* line 245, src/styles/components/_challenges.scss */
-        .cm-content .cm-win-badge-star.--ecolyo-royal {
-          top: 5px; } }
-    /* line 252, src/styles/components/_challenges.scss */
-    .cm-content .cm-win-badge-star .cm-win-badge {
-      -webkit-animation: scale-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
-      animation: scale-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
-      grid-column: 1;
-      grid-row: 1;
-      z-index: 1; }
-    /* line 261, src/styles/components/_challenges.scss */
-    .cm-content .cm-win-badge-star .cm-win-star {
-      grid-column: 1;
-      grid-row: 1;
-      -webkit-animation: rotating 60s linear infinite;
-      animation: rotating 60s linear infinite; }
-  /* line 268, src/styles/components/_challenges.scss */
-  .cm-content .cm-result {
-    color: #e0e0e0;
-    text-align: center;
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-    margin-bottom: 165px; }
-    /* line 274, src/styles/components/_challenges.scss */
-    .cm-content .cm-result .cm-result-positif {
-      color: #7fd771; }
-    /* line 277, src/styles/components/_challenges.scss */
-    .cm-content .cm-result .cm-result-negatif {
-      color: #d24444; }
+    top: 65px;
+  }
+}
+/* line 245, src/styles/components/_challenges.scss */
+.cm-content .cm-win-badge-star.--ecolyo-royal {
+  top: 0px;
+}
+@media only screen and (max-width: 768px) {
+  /* line 245, src/styles/components/_challenges.scss */
+  .cm-content .cm-win-badge-star.--ecolyo-royal {
+    top: 5px;
+  }
+}
+/* line 252, src/styles/components/_challenges.scss */
+.cm-content .cm-win-badge-star .cm-win-badge {
+  -webkit-animation: scale-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+    0.1s both;
+  animation: scale-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
+  grid-column: 1;
+  grid-row: 1;
+  z-index: 1;
+}
+/* line 261, src/styles/components/_challenges.scss */
+.cm-content .cm-win-badge-star .cm-win-star {
+  grid-column: 1;
+  grid-row: 1;
+  -webkit-animation: rotating 60s linear infinite;
+  animation: rotating 60s linear infinite;
+}
+/* line 268, src/styles/components/_challenges.scss */
+.cm-content .cm-result {
+  color: #e0e0e0;
+  text-align: center;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+  margin-bottom: 165px;
+}
+/* line 274, src/styles/components/_challenges.scss */
+.cm-content .cm-result .cm-result-positif {
+  color: #7fd771;
+}
+/* line 277, src/styles/components/_challenges.scss */
+.cm-content .cm-result .cm-result-negatif {
+  color: #d24444;
+}
+/* line 281, src/styles/components/_challenges.scss */
+.cm-content .cm-badge {
+  position: absolute;
+  top: 135px;
+}
+@media only screen and (max-width: 768px) {
   /* line 281, src/styles/components/_challenges.scss */
   .cm-content .cm-badge {
-    position: absolute;
-    top: 135px; }
-    @media only screen and (max-width: 768px) {
-      /* line 281, src/styles/components/_challenges.scss */
-      .cm-content .cm-badge {
-        top: 142px; } }
-  /* line 288, src/styles/components/_challenges.scss */
-  .cm-content .cm-button-valid {
-    margin-top: 1rem;
-    width: 100%; }
-  /* line 292, src/styles/components/_challenges.scss */
-  .cm-content .cm-txt {
-    text-align: center;
-    margin-bottom: 1rem;
-    width: 100%; }
-  /* line 297, src/styles/components/_challenges.scss */
-  .cm-content .cm-text-new-available {
-    margin-top: 1.25rem; }
+    top: 142px;
+  }
+}
+/* line 288, src/styles/components/_challenges.scss */
+.cm-content .cm-button-valid {
+  margin-top: 1rem;
+  width: 100%;
+}
+/* line 292, src/styles/components/_challenges.scss */
+.cm-content .cm-txt {
+  text-align: center;
+  margin-bottom: 1rem;
+  width: 100%;
+}
+/* line 297, src/styles/components/_challenges.scss */
+.cm-content .cm-text-new-available {
+  margin-top: 1.25rem;
+}
 
 /* line 303, src/styles/components/_challenges.scss */
 .list-of-days-duration {
@@ -2192,282 +2684,539 @@ p {
   flex-direction: row;
   justify-content: center;
   margin-top: 3rem;
-  width: 100%; }
-  @media only screen and (max-width: 768px) {
-    /* line 303, src/styles/components/_challenges.scss */
-    .list-of-days-duration {
-      margin-top: 1rem; } }
-  /* line 312, src/styles/components/_challenges.scss */
-  .list-of-days-duration .day-solo {
-    display: flex;
-    flex-direction: column;
-    width: 100%; }
-    /* line 316, src/styles/components/_challenges.scss */
-    .list-of-days-duration .day-solo .day-line-label {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      width: 100%; }
-      /* line 322, src/styles/components/_challenges.scss */
-      .list-of-days-duration .day-solo .day-line-label .date-dash {
-        width: 50%;
-        height: 2px;
-        background-color: #7b7b7b; }
-      /* line 327, src/styles/components/_challenges.scss */
-      .list-of-days-duration .day-solo .day-line-label .past {
-        background-color: #58FFFF; }
-      /* line 330, src/styles/components/_challenges.scss */
-      .list-of-days-duration .day-solo .day-line-label .futur {
-        background-color: #7b7b7b; }
-      /* line 333, src/styles/components/_challenges.scss */
-      .list-of-days-duration .day-solo .day-line-label .none {
-        opacity: 0; }
-      /* line 336, src/styles/components/_challenges.scss */
-      .list-of-days-duration .day-solo .day-line-label .date-label {
-        width: 0.625rem;
-        height: 0.625rem;
-        border-radius: 50%;
-        position: absolute; }
-    /* line 343, src/styles/components/_challenges.scss */
-    .list-of-days-duration .day-solo .day-letter {
-      margin-top: 0.8rem;
-      text-align: center;
-      color: #a0a0a0; }
-    /* line 348, src/styles/components/_challenges.scss */
-    .list-of-days-duration .day-solo .day-date {
-      margin-top: 0.2rem;
-      text-align: center;
-      color: #a0a0a0; }
+  width: 100%;
+}
+@media only screen and (max-width: 768px) {
+  /* line 303, src/styles/components/_challenges.scss */
+  .list-of-days-duration {
+    margin-top: 1rem;
+  }
+}
+/* line 312, src/styles/components/_challenges.scss */
+.list-of-days-duration .day-solo {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+/* line 316, src/styles/components/_challenges.scss */
+.list-of-days-duration .day-solo .day-line-label {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+/* line 322, src/styles/components/_challenges.scss */
+.list-of-days-duration .day-solo .day-line-label .date-dash {
+  width: 50%;
+  height: 2px;
+  background-color: #7b7b7b;
+}
+/* line 327, src/styles/components/_challenges.scss */
+.list-of-days-duration .day-solo .day-line-label .past {
+  background-color: #58ffff;
+}
+/* line 330, src/styles/components/_challenges.scss */
+.list-of-days-duration .day-solo .day-line-label .futur {
+  background-color: #7b7b7b;
+}
+/* line 333, src/styles/components/_challenges.scss */
+.list-of-days-duration .day-solo .day-line-label .none {
+  opacity: 0;
+}
+/* line 336, src/styles/components/_challenges.scss */
+.list-of-days-duration .day-solo .day-line-label .date-label {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  position: absolute;
+}
+/* line 343, src/styles/components/_challenges.scss */
+.list-of-days-duration .day-solo .day-letter {
+  margin-top: 0.8rem;
+  text-align: center;
+  color: #a0a0a0;
+}
+/* line 348, src/styles/components/_challenges.scss */
+.list-of-days-duration .day-solo .day-date {
+  margin-top: 0.2rem;
+  text-align: center;
+  color: #a0a0a0;
+}
 
 /* line 357, src/styles/components/_challenges.scss */
 .view-start-date {
   padding: 0.25rem 0;
-  color: #58FFFF; }
+  color: #58ffff;
+}
 
 /* line 363, src/styles/components/_challenges.scss */
-.pile-energy-follow, .pile-energy-follow.--home {
+.pile-energy-follow,
+.pile-energy-follow.--home {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  width: 100%; }
-  /* line 369, src/styles/components/_challenges.scss */
-  .--home.pile-energy-follow {
-    justify-content: start; }
-  /* line 373, src/styles/components/_challenges.scss */
-  .pile-energy-follow .pile-section {
-    display: grid; }
-    /* line 375, src/styles/components/_challenges.scss */
-    .pile-energy-follow .pile-section .filter-pile {
-      grid-column: 1;
-      grid-row: 1;
-      justify-self: flex-end;
-      align-self: center;
-      width: 0%;
-      position: relative;
-      right: 0;
-      opacity: 0.8;
-      background-color: #121212;
-      z-index: 1; }
-    /* line 387, src/styles/components/_challenges.scss */
-    .pile-energy-follow .pile-section .pile-icon {
-      grid-column: 1;
-      grid-row: 1;
-      margin: -25px 0; }
-  /* line 393, src/styles/components/_challenges.scss */
-  .pile-energy-follow .max-energy {
-    color: #7b7b7b; }
-  /* line 396, src/styles/components/_challenges.scss */
-  .pile-energy-follow .values-section {
-    margin-left: 1rem; }
-  /* line 399, src/styles/components/_challenges.scss */
-  .pile-energy-follow .no-values-section {
-    color: #ffffff;
-    margin-left: 1rem; }
+  width: 100%;
+}
+/* line 369, src/styles/components/_challenges.scss */
+.--home.pile-energy-follow {
+  justify-content: start;
+}
+/* line 373, src/styles/components/_challenges.scss */
+.pile-energy-follow .pile-section {
+  display: grid;
+}
+/* line 375, src/styles/components/_challenges.scss */
+.pile-energy-follow .pile-section .filter-pile {
+  grid-column: 1;
+  grid-row: 1;
+  justify-self: flex-end;
+  align-self: center;
+  width: 0%;
+  position: relative;
+  right: 0;
+  opacity: 0.8;
+  background-color: #121212;
+  z-index: 1;
+}
+/* line 387, src/styles/components/_challenges.scss */
+.pile-energy-follow .pile-section .pile-icon {
+  grid-column: 1;
+  grid-row: 1;
+  margin: -25px 0;
+}
+/* line 393, src/styles/components/_challenges.scss */
+.pile-energy-follow .max-energy {
+  color: #7b7b7b;
+}
+/* line 396, src/styles/components/_challenges.scss */
+.pile-energy-follow .values-section {
+  margin-left: 1rem;
+}
+/* line 399, src/styles/components/_challenges.scss */
+.pile-energy-follow .no-values-section {
+  color: #ffffff;
+  margin-left: 1rem;
+}
 
 /* line 406, src/styles/components/_challenges.scss */
 .ongoing-challenge {
-  min-height: 620px; }
+  min-height: 620px;
+}
 
 /* line 409, src/styles/components/_challenges.scss */
 .cp-root {
-  width: 100%; }
-  /* line 411, src/styles/components/_challenges.scss */
-  .cp-root .cp-content, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal, .cp-root .cp-content.--locked {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    color: #e0e0e0;
-    min-height: 84vh;
-    justify-content: space-between; }
-    /* line 419, src/styles/components/_challenges.scss */
-    .cp-root .cm-content .--locked.cm-win-badge-star.--ecolyo-royal, .cm-content .cp-root .--locked.cm-win-badge-star.--ecolyo-royal, .cp-root .--locked.cp-content {
-      justify-content: center; }
-    /* line 424, src/styles/components/_challenges.scss */
-    .cp-root .cp-content .cp-info, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info, .cp-root .cp-content .cp-info.--available {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      background-color: #121212;
-      width: 100%;
-      min-height: 55vh;
-      padding-top: 1rem;
-      padding-bottom: 0.5rem; }
-      /* line 434, src/styles/components/_challenges.scss */
-      .cp-root .cp-content .--available.cp-info, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .--available.cp-info, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .--available.cp-info {
-        height: 74vh; }
-      /* line 438, src/styles/components/_challenges.scss */
-      .cp-root .cp-content .cp-info .cp-icon, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-icon, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-icon {
-        margin: 1rem; }
-      /* line 441, src/styles/components/_challenges.scss */
-      .cp-root .cp-content .cp-info .cp-icon-available, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-icon-available, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-icon-available {
-        margin: 2rem; }
-      /* line 444, src/styles/components/_challenges.scss */
-      .cp-root .cp-content .cp-info .cp-win-badge-star, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-win-badge-star, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-win-badge-star {
-        display: grid;
-        align-items: center;
-        justify-items: center;
-        margin: -100px; }
-        /* line 449, src/styles/components/_challenges.scss */
-        .cp-root .cp-content .cp-info .cp-win-badge-star .cp-win-badge, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-win-badge-star .cp-win-badge, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-win-badge-star .cp-win-badge {
-          grid-column: 1;
-          grid-row: 1;
-          z-index: 1; }
-        /* line 454, src/styles/components/_challenges.scss */
-        .cp-root .cp-content .cp-info .cp-win-badge-star .cp-win-star, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-win-badge-star .cp-win-star, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-win-badge-star .cp-win-star {
-          grid-column: 1;
-          grid-row: 1; }
-      /* line 459, src/styles/components/_challenges.scss */
-      .cp-root .cp-content .cp-info .cp-date, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-date, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-date {
-        color: #a0a0a0;
-        text-align: center;
-        margin-top: 1rem; }
-      /* line 464, src/styles/components/_challenges.scss */
-      .cp-root .cp-content .cp-info .cp-title, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-title, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-title {
-        color: #e0e0e0;
-        text-align: center;
-        margin-top: 0.5rem; }
-      /* line 469, src/styles/components/_challenges.scss */
-      .cp-root .cp-content .cp-info .cp-result, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-result, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-result {
-        color: #e0e0e0;
-        text-align: center;
-        margin-top: 1.5rem;
-        margin-bottom: 0.5rem; }
-        /* line 474, src/styles/components/_challenges.scss */
-        .cp-root .cp-content .cp-info .cp-result .cp-result-positif, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-result .cp-result-positif, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-result .cp-result-positif {
-          color: #7fd771; }
-        /* line 477, src/styles/components/_challenges.scss */
-        .cp-root .cp-content .cp-info .cp-result .cp-result-negatif, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-result .cp-result-negatif, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-result .cp-result-negatif {
-          color: #d24444; }
-      /* line 481, src/styles/components/_challenges.scss */
-      .cp-root .cp-content .cp-info .cp-description, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-description, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-description {
-        text-align: center;
-        margin-top: 1rem;
-        margin-bottom: 0.5rem;
-        margin-left: 1.25rem;
-        margin-right: 1.25rem;
-        max-width: 53rem; }
-      /* line 489, src/styles/components/_challenges.scss */
-      .cp-root .cp-content .cp-info .cp-valid, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-valid, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-valid, .cp-root .cp-content .cp-info .cp-valid.--ongoing {
-        justify-content: center;
-        display: flex;
-        flex-direction: row;
-        width: 90%;
-        margin-top: 0.75rem;
-        max-width: 53rem; }
-        /* line 496, src/styles/components/_challenges.scss */
-        .cp-root .cp-content .cp-info .--ongoing.cp-valid, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .--ongoing.cp-valid, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .--ongoing.cp-valid {
-          width: 25%; }
-          @media only screen and (max-width: 768px) {
-            /* line 496, src/styles/components/_challenges.scss */
-            .cp-root .cp-content .cp-info .--ongoing.cp-valid, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .--ongoing.cp-valid, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .--ongoing.cp-valid {
-              width: 60%; } }
-        /* line 503, src/styles/components/_challenges.scss */
-        .cp-root .cp-content .cp-info .cp-valid .cp-left-button, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-valid .cp-left-button, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-valid .cp-left-button {
-          margin-right: 0.25rem;
-          margin-left: 0;
-          width: 100%; }
-        /* line 508, src/styles/components/_challenges.scss */
-        .cp-root .cp-content .cp-info .cp-valid .cp-right-button, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-valid .cp-right-button, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-valid .cp-right-button {
-          margin-left: 0.25rem;
-          margin-right: 0;
-          width: 100%; }
-      /* line 514, src/styles/components/_challenges.scss */
-      .cp-root .cp-content .cp-info .lack-of-data-challenge, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .lack-of-data-challenge, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .lack-of-data-challenge {
-        text-align: center;
-        width: 90%; }
-    /* line 519, src/styles/components/_challenges.scss */
-    .cp-root .cp-content .cp-follow, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-follow, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-follow {
-      width: 90%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 1rem;
-      max-width: 53rem; }
-    /* line 527, src/styles/components/_challenges.scss */
-    .cp-root .cp-content .cp-valid-locked, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-valid-locked, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-valid-locked {
-      margin-top: 2rem;
-      width: 80%;
-      max-width: 53rem; }
-    /* line 532, src/styles/components/_challenges.scss */
-    .cp-root .cp-content .cp-bottom, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-bottom, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-bottom {
-      padding: 1.25rem 1.25rem;
-      width: 90%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      max-width: 53rem;
-      margin-bottom: 2rem; }
-      @media only screen and (max-width: 768px) {
-        /* line 532, src/styles/components/_challenges.scss */
-        .cp-root .cp-content .cp-bottom, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-bottom, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-bottom {
-          margin-bottom: 0; } }
-      /* line 543, src/styles/components/_challenges.scss */
-      .cp-root .cp-content .cp-bottom .cp-eg-content, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-bottom .cp-eg-content, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-bottom .cp-eg-content {
-        width: 100%; }
-        /* line 545, src/styles/components/_challenges.scss */
-        .cp-root .cp-content .cp-bottom .cp-eg-content .linked-ecogestures, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-bottom .cp-eg-content .linked-ecogestures, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-bottom .cp-eg-content .linked-ecogestures {
-          text-transform: uppercase; }
-        /* line 548, src/styles/components/_challenges.scss */
-        .cp-root .cp-content .cp-bottom .cp-eg-content .cp-ecogestures, .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-bottom .cp-eg-content .cp-ecogestures, .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-bottom .cp-eg-content .cp-ecogestures {
-          width: 100%;
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between; }
+  width: 100%;
+}
+/* line 411, src/styles/components/_challenges.scss */
+.cp-root .cp-content,
+.cp-root .cm-content .cm-win-badge-star.--ecolyo-royal,
+.cm-content .cp-root .cm-win-badge-star.--ecolyo-royal,
+.cp-root .cp-content.--locked {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  color: #e0e0e0;
+  min-height: 84vh;
+  justify-content: space-between;
+}
+/* line 419, src/styles/components/_challenges.scss */
+.cp-root .cm-content .--locked.cm-win-badge-star.--ecolyo-royal,
+.cm-content .cp-root .--locked.cm-win-badge-star.--ecolyo-royal,
+.cp-root .--locked.cp-content {
+  justify-content: center;
+}
+/* line 424, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info,
+.cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info,
+.cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info,
+.cp-root .cp-content .cp-info.--available {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #121212;
+  width: 100%;
+  min-height: 55vh;
+  padding-top: 1rem;
+  padding-bottom: 0.5rem;
+}
+/* line 434, src/styles/components/_challenges.scss */
+.cp-root .cp-content .--available.cp-info,
+.cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .--available.cp-info,
+.cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .--available.cp-info {
+  height: 74vh;
+}
+/* line 438, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-icon,
+.cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-icon,
+.cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-icon {
+  margin: 1rem;
+}
+/* line 441, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-icon-available,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-icon-available,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-icon-available {
+  margin: 2rem;
+}
+/* line 444, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-win-badge-star,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-win-badge-star,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-win-badge-star {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  margin: -100px;
+}
+/* line 449, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-win-badge-star .cp-win-badge,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-win-badge-star
+  .cp-win-badge,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-win-badge-star
+  .cp-win-badge {
+  grid-column: 1;
+  grid-row: 1;
+  z-index: 1;
+}
+/* line 454, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-win-badge-star .cp-win-star,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-win-badge-star
+  .cp-win-star,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-win-badge-star
+  .cp-win-star {
+  grid-column: 1;
+  grid-row: 1;
+}
+/* line 459, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-date,
+.cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-date,
+.cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-date {
+  color: #a0a0a0;
+  text-align: center;
+  margin-top: 1rem;
+}
+/* line 464, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-title,
+.cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-title,
+.cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-title {
+  color: #e0e0e0;
+  text-align: center;
+  margin-top: 0.5rem;
+}
+/* line 469, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-result,
+.cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-result,
+.cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-result {
+  color: #e0e0e0;
+  text-align: center;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+/* line 474, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-result .cp-result-positif,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-result
+  .cp-result-positif,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-result
+  .cp-result-positif {
+  color: #7fd771;
+}
+/* line 477, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-result .cp-result-negatif,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-result
+  .cp-result-negatif,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-result
+  .cp-result-negatif {
+  color: #d24444;
+}
+/* line 481, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-description,
+.cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-description,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-description {
+  text-align: center;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+  max-width: 53rem;
+}
+/* line 489, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-valid,
+.cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-info .cp-valid,
+.cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-info .cp-valid,
+.cp-root .cp-content .cp-info .cp-valid.--ongoing {
+  justify-content: center;
+  display: flex;
+  flex-direction: row;
+  width: 90%;
+  margin-top: 0.75rem;
+  max-width: 53rem;
+}
+/* line 496, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .--ongoing.cp-valid,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .--ongoing.cp-valid,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .--ongoing.cp-valid {
+  width: 25%;
+}
+@media only screen and (max-width: 768px) {
+  /* line 496, src/styles/components/_challenges.scss */
+  .cp-root .cp-content .cp-info .--ongoing.cp-valid,
+  .cp-root
+    .cm-content
+    .cm-win-badge-star.--ecolyo-royal
+    .cp-info
+    .--ongoing.cp-valid,
+  .cm-content
+    .cp-root
+    .cm-win-badge-star.--ecolyo-royal
+    .cp-info
+    .--ongoing.cp-valid {
+    width: 60%;
+  }
+}
+/* line 503, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-valid .cp-left-button,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-valid
+  .cp-left-button,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-valid
+  .cp-left-button {
+  margin-right: 0.25rem;
+  margin-left: 0;
+  width: 100%;
+}
+/* line 508, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .cp-valid .cp-right-button,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-valid
+  .cp-right-button,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .cp-valid
+  .cp-right-button {
+  margin-left: 0.25rem;
+  margin-right: 0;
+  width: 100%;
+}
+/* line 514, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-info .lack-of-data-challenge,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .lack-of-data-challenge,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-info
+  .lack-of-data-challenge {
+  text-align: center;
+  width: 90%;
+}
+/* line 519, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-follow,
+.cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-follow,
+.cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-follow {
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 1rem;
+  max-width: 53rem;
+}
+/* line 527, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-valid-locked,
+.cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-valid-locked,
+.cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-valid-locked {
+  margin-top: 2rem;
+  width: 80%;
+  max-width: 53rem;
+}
+/* line 532, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-bottom,
+.cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-bottom,
+.cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-bottom {
+  padding: 1.25rem 1.25rem;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  max-width: 53rem;
+  margin-bottom: 2rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 532, src/styles/components/_challenges.scss */
+  .cp-root .cp-content .cp-bottom,
+  .cp-root .cm-content .cm-win-badge-star.--ecolyo-royal .cp-bottom,
+  .cm-content .cp-root .cm-win-badge-star.--ecolyo-royal .cp-bottom {
+    margin-bottom: 0;
+  }
+}
+/* line 543, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-bottom .cp-eg-content,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-bottom
+  .cp-eg-content,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-bottom
+  .cp-eg-content {
+  width: 100%;
+}
+/* line 545, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-bottom .cp-eg-content .linked-ecogestures,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-bottom
+  .cp-eg-content
+  .linked-ecogestures,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-bottom
+  .cp-eg-content
+  .linked-ecogestures {
+  text-transform: uppercase;
+}
+/* line 548, src/styles/components/_challenges.scss */
+.cp-root .cp-content .cp-bottom .cp-eg-content .cp-ecogestures,
+.cp-root
+  .cm-content
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-bottom
+  .cp-eg-content
+  .cp-ecogestures,
+.cm-content
+  .cp-root
+  .cm-win-badge-star.--ecolyo-royal
+  .cp-bottom
+  .cp-eg-content
+  .cp-ecogestures {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
 
 @-webkit-keyframes scale-in-center {
   0% {
     -webkit-transform: scale(0);
     transform: scale(0);
-    opacity: 1; }
+    opacity: 1;
+  }
   100% {
     -webkit-transform: scale(1);
     transform: scale(1);
-    opacity: 1; } }
+    opacity: 1;
+  }
+}
 
 @keyframes scale-in-center {
   0% {
     -webkit-transform: scale(0);
     transform: scale(0);
-    opacity: 1; }
+    opacity: 1;
+  }
   100% {
     -webkit-transform: scale(1);
     transform: scale(1);
-    opacity: 1; } }
+    opacity: 1;
+  }
+}
 
 @-webkit-keyframes rotating {
   from {
-    -webkit-transform: rotate(0deg); }
+    -webkit-transform: rotate(0deg);
+  }
   to {
-    -webkit-transform: rotate(360deg); } }
+    -webkit-transform: rotate(360deg);
+  }
+}
 
 @keyframes rotating {
   from {
-    -webkit-transform: rotate(0deg); }
+    -webkit-transform: rotate(0deg);
+  }
   to {
-    -webkit-transform: rotate(360deg); } }
+    -webkit-transform: rotate(360deg);
+  }
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -2486,92 +3235,115 @@ p {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 1rem 1.5rem 2.5rem 1.5rem; }
+  padding: 1rem 1.5rem 2.5rem 1.5rem;
+}
+/* line 11, src/styles/components/_ecogesture.scss */
+.ecogesture-root .negawatt-button-content {
+  max-width: 52rem;
+  width: 97%;
+}
+@media only screen and (max-width: 1023px) {
+  /* line 11, src/styles/components/_ecogesture.scss */
+  .ecogesture-root .negawatt-button-content {
+    width: 97%;
+  }
+}
+@media only screen and (max-width: 768px) {
   /* line 11, src/styles/components/_ecogesture.scss */
   .ecogesture-root .negawatt-button-content {
-    max-width: 52rem;
-    width: 97%; }
-    @media only screen and (max-width: 1023px) {
-      /* line 11, src/styles/components/_ecogesture.scss */
-      .ecogesture-root .negawatt-button-content {
-        width: 97%; } }
-    @media only screen and (max-width: 768px) {
-      /* line 11, src/styles/components/_ecogesture.scss */
-      .ecogesture-root .negawatt-button-content {
-        width: 97%; } }
+    width: 97%;
+  }
+}
+/* line 21, src/styles/components/_ecogesture.scss */
+.ecogesture-root .ecogesture-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  max-width: 53rem;
+}
+@media only screen and (max-width: 1023px) {
+  /* line 21, src/styles/components/_ecogesture.scss */
+  .ecogesture-root .ecogesture-content {
+    width: 100%;
+  }
+}
+@media only screen and (max-width: 768px) {
   /* line 21, src/styles/components/_ecogesture.scss */
   .ecogesture-root .ecogesture-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    max-width: 53rem; }
-    @media only screen and (max-width: 1023px) {
-      /* line 21, src/styles/components/_ecogesture.scss */
-      .ecogesture-root .ecogesture-content {
-        width: 100%; } }
-    @media only screen and (max-width: 768px) {
-      /* line 21, src/styles/components/_ecogesture.scss */
-      .ecogesture-root .ecogesture-content {
-        width: 100%; } }
-    /* line 32, src/styles/components/_ecogesture.scss */
-    .ecogesture-root .ecogesture-content .ecogesture-list-item {
-      width: 48%;
-      height: 8rem;
-      margin: 1% 1%; }
-    /* line 37, src/styles/components/_ecogesture.scss */
-    .ecogesture-root .ecogesture-content .ecogesture-list-item > button {
-      height: 100%;
-      overflow: hidden; }
+    width: 100%;
+  }
+}
+/* line 32, src/styles/components/_ecogesture.scss */
+.ecogesture-root .ecogesture-content .ecogesture-list-item {
+  width: 48%;
+  height: 8rem;
+  margin: 1% 1%;
+}
+/* line 37, src/styles/components/_ecogesture.scss */
+.ecogesture-root .ecogesture-content .ecogesture-list-item > button {
+  height: 100%;
+  overflow: hidden;
+}
 
 /* line 45, src/styles/components/_ecogesture.scss */
 .ec-link {
-  color: black; }
+  color: black;
+}
 
 /* line 48, src/styles/components/_ecogesture.scss */
 .ec {
   display: flex;
   justify-content: center;
   width: 100%;
-  height: 100%; }
-  /* line 53, src/styles/components/_ecogesture.scss */
-  .ec .ec-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around; }
-    /* line 58, src/styles/components/_ecogesture.scss */
-    .ec .ec-content.ec-content-unlocked {
-      padding: 0.4rem 0; }
-    /* line 61, src/styles/components/_ecogesture.scss */
-    .ec .ec-content.ec-content-challenge {
-      padding: 0.5rem 0; }
-    /* line 64, src/styles/components/_ecogesture.scss */
-    .ec .ec-content .ec-content-icon {
-      min-height: 50px; }
-    /* line 67, src/styles/components/_ecogesture.scss */
-    .ec .ec-content .ec-content-short-name {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      text-align: center; }
-    /* line 73, src/styles/components/_ecogesture.scss */
-    .ec .ec-content .ec-content-nwh {
-      margin-top: 0.25rem;
-      color: #a0a0a0; }
+  height: 100%;
+}
+/* line 53, src/styles/components/_ecogesture.scss */
+.ec .ec-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+/* line 58, src/styles/components/_ecogesture.scss */
+.ec .ec-content.ec-content-unlocked {
+  padding: 0.4rem 0;
+}
+/* line 61, src/styles/components/_ecogesture.scss */
+.ec .ec-content.ec-content-challenge {
+  padding: 0.5rem 0;
+}
+/* line 64, src/styles/components/_ecogesture.scss */
+.ec .ec-content .ec-content-icon {
+  min-height: 50px;
+}
+/* line 67, src/styles/components/_ecogesture.scss */
+.ec .ec-content .ec-content-short-name {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  text-align: center;
+}
+/* line 73, src/styles/components/_ecogesture.scss */
+.ec .ec-content .ec-content-nwh {
+  margin-top: 0.25rem;
+  color: #a0a0a0;
+}
 
 /* line 79, src/styles/components/_ecogesture.scss */
 .cp-eg-1 {
   height: 8rem;
   width: 100%;
   margin-right: 0.25rem;
-  text-align: center; }
+  text-align: center;
+}
 
 /* line 85, src/styles/components/_ecogesture.scss */
 .cp-eg-2 {
   height: 8rem;
   width: 100%;
   margin-left: 0.25rem;
-  text-align: center; }
+  text-align: center;
+}
 
 /* line 93, src/styles/components/_ecogesture.scss */
 .em-header {
@@ -2580,7 +3352,8 @@ p {
   padding-bottom: 1em;
   width: 100%;
   display: flex;
-  justify-content: center; }
+  justify-content: center;
+}
 
 /* line 102, src/styles/components/_ecogesture.scss */
 .em-root {
@@ -2590,89 +3363,113 @@ p {
   justify-content: center;
   /* width */
   /* Track */
-  /* Handle */ }
-  /* line 108, src/styles/components/_ecogesture.scss */
-  .em-root::-webkit-scrollbar {
-    width: 10px; }
-  /* line 112, src/styles/components/_ecogesture.scss */
-  .em-root::-webkit-scrollbar-track {
-    background: #3e4045; }
-  /* line 116, src/styles/components/_ecogesture.scss */
-  .em-root::-webkit-scrollbar-thumb {
-    background: #6f7074; }
+  /* Handle */
+}
+/* line 108, src/styles/components/_ecogesture.scss */
+.em-root::-webkit-scrollbar {
+  width: 10px;
+}
+/* line 112, src/styles/components/_ecogesture.scss */
+.em-root::-webkit-scrollbar-track {
+  background: #3e4045;
+}
+/* line 116, src/styles/components/_ecogesture.scss */
+.em-root::-webkit-scrollbar-thumb {
+  background: #6f7074;
+}
+/* line 119, src/styles/components/_ecogesture.scss */
+.em-root .em-content {
+  padding: 1.5rem 2.5rem 0;
+}
+@media only screen and (max-width: 768px) {
   /* line 119, src/styles/components/_ecogesture.scss */
   .em-root .em-content {
-    padding: 1.5rem 2.5rem 0; }
-    @media only screen and (max-width: 768px) {
-      /* line 119, src/styles/components/_ecogesture.scss */
-      .em-root .em-content {
-        width: 100%;
-        padding: 1.5rem 1.5rem 0; } }
-    /* line 126, src/styles/components/_ecogesture.scss */
-    .em-root .em-content .em-content-box-img {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center; }
-      /* line 131, src/styles/components/_ecogesture.scss */
-      .em-root .em-content .em-content-box-img .icon {
-        margin-bottom: 1rem; }
-    /* line 135, src/styles/components/_ecogesture.scss */
-    .em-root .em-content .em-detail {
-      display: flex;
-      flex-direction: row;
-      margin: 0.5em 0; }
-      /* line 139, src/styles/components/_ecogesture.scss */
-      .em-root .em-content .em-detail .em-detail-nwh {
-        display: flex;
-        flex: 1;
-        align-self: flex-start;
-        margin-top: 0.65rem;
-        color: var(--textDark); }
-        /* line 145, src/styles/components/_ecogesture.scss */
-        .em-root .em-content .em-detail .em-detail-nwh .em-detail-nwh-unit {
-          margin-left: 0.2rem; }
-      /* line 149, src/styles/components/_ecogesture.scss */
-      .em-root .em-content .em-detail .em-picto-flow {
-        display: flex;
-        align-self: flex-end; }
-        /* line 152, src/styles/components/_ecogesture.scss */
-        .em-root .em-content .em-detail .em-picto-flow .em-pic-content {
-          margin: 0.3em; }
-    /* line 157, src/styles/components/_ecogesture.scss */
-    .em-root .em-content .em-title {
-      margin-bottom: 0;
-      text-align: center; }
-    /* line 162, src/styles/components/_ecogesture.scss */
-    .em-root .em-content .long-name {
-      font-weight: bold;
-      line-height: 150%;
-      margin: 0.5rem 0 1rem; }
-    /* line 167, src/styles/components/_ecogesture.scss */
-    .em-root .em-content .em-description {
-      padding-bottom: 2rem; }
+    width: 100%;
+    padding: 1.5rem 1.5rem 0;
+  }
+}
+/* line 126, src/styles/components/_ecogesture.scss */
+.em-root .em-content .em-content-box-img {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+/* line 131, src/styles/components/_ecogesture.scss */
+.em-root .em-content .em-content-box-img .icon {
+  margin-bottom: 1rem;
+}
+/* line 135, src/styles/components/_ecogesture.scss */
+.em-root .em-content .em-detail {
+  display: flex;
+  flex-direction: row;
+  margin: 0.5em 0;
+}
+/* line 139, src/styles/components/_ecogesture.scss */
+.em-root .em-content .em-detail .em-detail-nwh {
+  display: flex;
+  flex: 1;
+  align-self: flex-start;
+  margin-top: 0.65rem;
+  color: var(--textDark);
+}
+/* line 145, src/styles/components/_ecogesture.scss */
+.em-root .em-content .em-detail .em-detail-nwh .em-detail-nwh-unit {
+  margin-left: 0.2rem;
+}
+/* line 149, src/styles/components/_ecogesture.scss */
+.em-root .em-content .em-detail .em-picto-flow {
+  display: flex;
+  align-self: flex-end;
+}
+/* line 152, src/styles/components/_ecogesture.scss */
+.em-root .em-content .em-detail .em-picto-flow .em-pic-content {
+  margin: 0.3em;
+}
+/* line 157, src/styles/components/_ecogesture.scss */
+.em-root .em-content .em-title {
+  margin-bottom: 0;
+  text-align: center;
+}
+/* line 162, src/styles/components/_ecogesture.scss */
+.em-root .em-content .long-name {
+  font-weight: bold;
+  line-height: 150%;
+  margin: 0.5rem 0 1rem;
+}
+/* line 167, src/styles/components/_ecogesture.scss */
+.em-root .em-content .em-description {
+  padding-bottom: 2rem;
+}
 
 /* line 172, src/styles/components/_ecogesture.scss */
 .em-content-box-text {
   display: flex;
   flex-direction: column;
-  padding: 1.5rem 2.5rem; }
-  @media only screen and (max-width: 768px) {
-    /* line 172, src/styles/components/_ecogesture.scss */
-    .em-content-box-text {
-      padding: 1.5rem 1.5rem; } }
-  /* line 179, src/styles/components/_ecogesture.scss */
-  .em-content-box-text .em-description {
-    padding-bottom: 2rem; }
-  /* line 182, src/styles/components/_ecogesture.scss */
-  .em-content-box-text .em-description-2 {
-    padding-top: 2rem; }
-  /* line 185, src/styles/components/_ecogesture.scss */
-  .em-content-box-text .em-description-3 {
-    padding-bottom: 0.5rem; }
-  /* line 188, src/styles/components/_ecogesture.scss */
-  .em-content-box-text .em-title {
-    margin-bottom: 0; }
+  padding: 1.5rem 2.5rem;
+}
+@media only screen and (max-width: 768px) {
+  /* line 172, src/styles/components/_ecogesture.scss */
+  .em-content-box-text {
+    padding: 1.5rem 1.5rem;
+  }
+}
+/* line 179, src/styles/components/_ecogesture.scss */
+.em-content-box-text .em-description {
+  padding-bottom: 2rem;
+}
+/* line 182, src/styles/components/_ecogesture.scss */
+.em-content-box-text .em-description-2 {
+  padding-top: 2rem;
+}
+/* line 185, src/styles/components/_ecogesture.scss */
+.em-content-box-text .em-description-3 {
+  padding-bottom: 0.5rem;
+}
+/* line 188, src/styles/components/_ecogesture.scss */
+.em-content-box-text .em-title {
+  margin-bottom: 0;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -2697,78 +3494,104 @@ p {
   overflow: hidden;
   justify-content: center;
   align-items: center;
-  background-color: rgba(27, 28, 34, 0.85); }
-  /* line 16, src/styles/components/_modal.scss */
-  .modal-overlay.modal-opened {
-    display: flex; }
+  background-color: rgba(27, 28, 34, 0.85);
+}
+/* line 16, src/styles/components/_modal.scss */
+.modal-overlay.modal-opened {
+  display: flex;
+}
+/* line 19, src/styles/components/_modal.scss */
+.modal-overlay .modal-box {
+  background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+  position: fixed;
+  width: 36rem;
+  max-width: 100%;
+  max-height: 90vh;
+  padding: 1rem 0 0 0;
+  box-sizing: border-box;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
+  border-radius: 4px;
+}
+@media only screen and (max-width: 1023px) {
   /* line 19, src/styles/components/_modal.scss */
   .modal-overlay .modal-box {
-    background: linear-gradient(180deg, #323339 0%, #25262B 100%);
-    position: fixed;
-    width: 36rem;
-    max-width: 100%;
-    max-height: 90vh;
-    padding: 1rem 0 0 0;
-    box-sizing: border-box;
-    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
-    border-radius: 4px; }
-    @media only screen and (max-width: 1023px) {
-      /* line 19, src/styles/components/_modal.scss */
-      .modal-overlay .modal-box {
-        width: 35rem; } }
-    @media only screen and (max-width: 768px) {
-      /* line 19, src/styles/components/_modal.scss */
-      .modal-overlay .modal-box {
-        width: 85%;
-        max-width: 35rem; } }
-    /* line 36, src/styles/components/_modal.scss */
-    .modal-overlay .modal-box.modal-box-bordered {
-      border: 1px solid #58FFFF40; }
-    /* line 39, src/styles/components/_modal.scss */
-    .modal-overlay .modal-box.yellow-border {
-      border: 1px solid rgba(227, 184, 42, 0.4); }
-    /* line 42, src/styles/components/_modal.scss */
-    .modal-overlay .modal-box .modal-close-button {
-      position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
-      padding: 5px 5px;
-      z-index: 10; }
-    /* line 49, src/styles/components/_modal.scss */
-    .modal-overlay .modal-box .modal-content {
-      max-height: 85vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      color: #ffffff; }
-    /* line 56, src/styles/components/_modal.scss */
-    .modal-overlay .modal-box .wm-header {
-      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;
-      background-clip: 'text';
-      -webkit-background-clip: text;
-      color: transparent;
-      margin-top: 2rem; }
-    /* line 63, src/styles/components/_modal.scss */
-    .modal-overlay .modal-box .wm-name {
-      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;
-      background-clip: 'text';
-      -webkit-background-clip: text;
-      color: transparent;
-      margin-bottom: 1.25rem; }
-    /* line 70, src/styles/components/_modal.scss */
-    .modal-overlay .modal-box .button-ok {
-      width: 90%;
-      margin-bottom: 2rem; }
-    /* line 74, src/styles/components/_modal.scss */
-    .modal-overlay .modal-box .wm-perso {
-      text-align: center;
-      width: 60%;
-      margin: 1rem; }
-    /* line 79, src/styles/components/_modal.scss */
-    .modal-overlay .modal-box .wm-connect {
-      text-align: center;
-      width: 88%;
-      margin: 1rem; }
+    width: 35rem;
+  }
+}
+@media only screen and (max-width: 768px) {
+  /* line 19, src/styles/components/_modal.scss */
+  .modal-overlay .modal-box {
+    width: 85%;
+    max-width: 35rem;
+  }
+}
+/* line 36, src/styles/components/_modal.scss */
+.modal-overlay .modal-box.modal-box-bordered {
+  border: 1px solid #58ffff40;
+}
+/* line 39, src/styles/components/_modal.scss */
+.modal-overlay .modal-box.yellow-border {
+  border: 1px solid rgba(227, 184, 42, 0.4);
+}
+/* line 42, src/styles/components/_modal.scss */
+.modal-overlay .modal-box .modal-close-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 5px 5px;
+  z-index: 10;
+}
+/* line 49, src/styles/components/_modal.scss */
+.modal-overlay .modal-box .modal-content {
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #ffffff;
+}
+/* line 56, src/styles/components/_modal.scss */
+.modal-overlay .modal-box .wm-header {
+  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;
+  background-clip: 'text';
+  -webkit-background-clip: text;
+  color: transparent;
+  margin-top: 2rem;
+}
+/* line 63, src/styles/components/_modal.scss */
+.modal-overlay .modal-box .wm-name {
+  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;
+  background-clip: 'text';
+  -webkit-background-clip: text;
+  color: transparent;
+  margin-bottom: 1.25rem;
+}
+/* line 70, src/styles/components/_modal.scss */
+.modal-overlay .modal-box .button-ok {
+  width: 90%;
+  margin-bottom: 2rem;
+}
+/* line 74, src/styles/components/_modal.scss */
+.modal-overlay .modal-box .wm-perso {
+  text-align: center;
+  width: 60%;
+  margin: 1rem;
+}
+/* line 79, src/styles/components/_modal.scss */
+.modal-overlay .modal-box .wm-connect {
+  text-align: center;
+  width: 88%;
+  margin: 1rem;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -2787,50 +3610,63 @@ p {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0 1.5rem; }
+  padding: 0 1.5rem;
+}
+/* line 11, src/styles/components/_faq.scss */
+.faq-root .faq-content {
+  margin-bottom: -1rem;
+  width: 45.75rem;
+}
+/* line 14, src/styles/components/_faq.scss */
+.faq-root .faq-content a {
+  text-decoration: none;
+}
+@media only screen and (max-width: 768px) {
   /* line 11, src/styles/components/_faq.scss */
   .faq-root .faq-content {
-    margin-bottom: -1rem;
-    width: 45.75rem; }
-    /* line 14, src/styles/components/_faq.scss */
-    .faq-root .faq-content a {
-      text-decoration: none; }
-    @media only screen and (max-width: 768px) {
-      /* line 11, src/styles/components/_faq.scss */
-      .faq-root .faq-content {
-        width: 100%; } }
-    /* line 20, src/styles/components/_faq.scss */
-    .faq-root .faq-content .faq-header {
-      margin-top: 2.5rem;
-      margin-bottom: 1.25rem;
-      color: #e0e0e0; }
+    width: 100%;
+  }
+}
+/* line 20, src/styles/components/_faq.scss */
+.faq-root .faq-content .faq-header {
+  margin-top: 2.5rem;
+  margin-bottom: 1.25rem;
+  color: #e0e0e0;
+}
 
 /* line 28, src/styles/components/_faq.scss */
 .faq-card-link {
-  color: black; }
+  color: black;
+}
 
 /* line 31, src/styles/components/_faq.scss */
 .faq-card {
   display: flex;
   flex-direction: row;
   margin: -0.75rem 0;
-  width: 100%; }
-  @media only screen and (max-width: 768px) {
-    /* line 31, src/styles/components/_faq.scss */
-    .faq-card {
-      width: 100%; } }
-  /* line 39, src/styles/components/_faq.scss */
-  .faq-card .faq-card-content {
-    display: flex;
-    flex-direction: row; }
-    /* line 42, src/styles/components/_faq.scss */
-    .faq-card .faq-card-content .faq-card-content-icon {
-      margin: 0.5rem 0; }
-    /* line 45, src/styles/components/_faq.scss */
-    .faq-card .faq-card-content .faq-card-content-title {
-      margin: 0 1rem;
-      align-self: center;
-      text-decoration: none; }
+  width: 100%;
+}
+@media only screen and (max-width: 768px) {
+  /* line 31, src/styles/components/_faq.scss */
+  .faq-card {
+    width: 100%;
+  }
+}
+/* line 39, src/styles/components/_faq.scss */
+.faq-card .faq-card-content {
+  display: flex;
+  flex-direction: row;
+}
+/* line 42, src/styles/components/_faq.scss */
+.faq-card .faq-card-content .faq-card-content-icon {
+  margin: 0.5rem 0;
+}
+/* line 45, src/styles/components/_faq.scss */
+.faq-card .faq-card-content .faq-card-content-title {
+  margin: 0 1rem;
+  align-self: center;
+  text-decoration: none;
+}
 
 /* line 54, src/styles/components/_faq.scss */
 .faq-view-root {
@@ -2839,27 +3675,35 @@ p {
   align-items: center;
   justify-content: center;
   padding: 1rem 0;
-  margin-top: 1.5rem; }
+  margin-top: 1.5rem;
+}
+/* line 61, src/styles/components/_faq.scss */
+.faq-view-root .faq-view-content {
+  width: 45.75rem;
+}
+@media only screen and (max-width: 768px) {
   /* line 61, src/styles/components/_faq.scss */
   .faq-view-root .faq-view-content {
-    width: 45.75rem; }
-    @media only screen and (max-width: 768px) {
-      /* line 61, src/styles/components/_faq.scss */
-      .faq-view-root .faq-view-content {
-        width: 100%; } }
-    /* line 66, src/styles/components/_faq.scss */
-    .faq-view-root .faq-view-content .faq-content-detail {
-      padding-bottom: 0.6rem; }
-      /* line 68, src/styles/components/_faq.scss */
-      .faq-view-root .faq-view-content .faq-content-detail .text-bold {
-        font-weight: bold; }
-      /* line 71, src/styles/components/_faq.scss */
-      .faq-view-root .faq-view-content .faq-content-detail .text-underline {
-        text-decoration: underline; }
-      /* line 74, src/styles/components/_faq.scss */
-      .faq-view-root .faq-view-content .faq-content-detail .spaceline {
-        height: 0.6rem;
-        display: block; }
+    width: 100%;
+  }
+}
+/* line 66, src/styles/components/_faq.scss */
+.faq-view-root .faq-view-content .faq-content-detail {
+  padding-bottom: 0.6rem;
+}
+/* line 68, src/styles/components/_faq.scss */
+.faq-view-root .faq-view-content .faq-content-detail .text-bold {
+  font-weight: bold;
+}
+/* line 71, src/styles/components/_faq.scss */
+.faq-view-root .faq-view-content .faq-content-detail .text-underline {
+  text-decoration: underline;
+}
+/* line 74, src/styles/components/_faq.scss */
+.faq-view-root .faq-view-content .faq-content-detail .spaceline {
+  height: 0.6rem;
+  display: block;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -2879,60 +3723,77 @@ p {
   align-items: center;
   justify-content: center;
   color: #ffffff;
-  padding: 1.5rem 1.5rem 0; }
+  padding: 1.5rem 1.5rem 0;
+}
+/* line 12, src/styles/components/_legalnotice.scss */
+.legal-notice-root .legal-notice-content {
+  width: 45.75rem;
+}
+/* line 13, src/styles/components/_legalnotice.scss */
+.legal-notice-root .legal-notice-content p {
+  color: #ffffff;
+}
+/* line 16, src/styles/components/_legalnotice.scss */
+.legal-notice-root .legal-notice-content a {
+  color: #ffffff;
+  text-decoration: none;
+}
+/* line 20, src/styles/components/_legalnotice.scss */
+.legal-notice-root .legal-notice-content li {
+  margin: 1rem 0;
+}
+/* line 23, src/styles/components/_legalnotice.scss */
+.legal-notice-root .legal-notice-content h2 {
+  color: #ffffff;
+}
+/* line 26, src/styles/components/_legalnotice.scss */
+.legal-notice-root .legal-notice-content h3 {
+  color: #ffffff;
+  margin: 2.5rem 0 1rem;
+}
+/* line 30, src/styles/components/_legalnotice.scss */
+.legal-notice-root .legal-notice-content .ln-contact {
+  color: #e3b82a;
+}
+@media only screen and (max-width: 768px) {
   /* line 12, src/styles/components/_legalnotice.scss */
   .legal-notice-root .legal-notice-content {
-    width: 45.75rem; }
-    /* line 13, src/styles/components/_legalnotice.scss */
-    .legal-notice-root .legal-notice-content p {
-      color: #ffffff; }
-    /* line 16, src/styles/components/_legalnotice.scss */
-    .legal-notice-root .legal-notice-content a {
-      color: #ffffff;
-      text-decoration: none; }
-    /* line 20, src/styles/components/_legalnotice.scss */
-    .legal-notice-root .legal-notice-content li {
-      margin: 1rem 0; }
-    /* line 23, src/styles/components/_legalnotice.scss */
-    .legal-notice-root .legal-notice-content h2 {
-      color: #ffffff; }
-    /* line 26, src/styles/components/_legalnotice.scss */
-    .legal-notice-root .legal-notice-content h3 {
-      color: #ffffff;
-      margin: 2.5rem 0 1rem; }
-    /* line 30, src/styles/components/_legalnotice.scss */
-    .legal-notice-root .legal-notice-content .ln-contact {
-      color: #e3b82a; }
-    @media only screen and (max-width: 768px) {
-      /* line 12, src/styles/components/_legalnotice.scss */
-      .legal-notice-root .legal-notice-content {
-        width: 100%; } }
+    width: 100%;
+  }
+}
 
 /* line 40, src/styles/components/_legalnotice.scss */
 .legal-notice-card-link {
-  color: black; }
+  color: black;
+}
 
 /* line 43, src/styles/components/_legalnotice.scss */
 .legal-notice-card {
   display: flex;
   flex-direction: row;
   margin: -0.75rem 0;
-  width: 100%; }
-  @media only screen and (max-width: 768px) {
-    /* line 43, src/styles/components/_legalnotice.scss */
-    .legal-notice-card {
-      width: 100%; } }
-  /* line 51, src/styles/components/_legalnotice.scss */
-  .legal-notice-card .legal-notice-card-content {
-    display: flex;
-    flex-direction: row; }
-    /* line 54, src/styles/components/_legalnotice.scss */
-    .legal-notice-card .legal-notice-card-content .legal-notice-card-content-icon {
-      margin: 0.5rem 0; }
-    /* line 57, src/styles/components/_legalnotice.scss */
-    .legal-notice-card .legal-notice-card-content .legal-notice-card-content-title {
-      margin: 0 1rem;
-      align-self: center; }
+  width: 100%;
+}
+@media only screen and (max-width: 768px) {
+  /* line 43, src/styles/components/_legalnotice.scss */
+  .legal-notice-card {
+    width: 100%;
+  }
+}
+/* line 51, src/styles/components/_legalnotice.scss */
+.legal-notice-card .legal-notice-card-content {
+  display: flex;
+  flex-direction: row;
+}
+/* line 54, src/styles/components/_legalnotice.scss */
+.legal-notice-card .legal-notice-card-content .legal-notice-card-content-icon {
+  margin: 0.5rem 0;
+}
+/* line 57, src/styles/components/_legalnotice.scss */
+.legal-notice-card .legal-notice-card-content .legal-notice-card-content-title {
+  margin: 0 1rem;
+  align-self: center;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -2956,38 +3817,44 @@ p {
   overflow: hidden;
   background-color: #1b1c22;
   display: flex;
-  flex-direction: column; }
-  /* line 15, src/styles/components/_splash.scss */
-  .splash-root .splash-header {
-    height: 6rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--textBright); }
-  /* line 22, src/styles/components/_splash.scss */
-  .splash-root .splash-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex: 1;
-    margin-top: 6rem; }
-  /* line 30, src/styles/components/_splash.scss */
-  .splash-root .splash-footer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    height: 10rem;
-    margin: 0 2rem; }
-    /* line 37, src/styles/components/_splash.scss */
-    .splash-root .splash-footer .splash-footer-error-text {
-      text-align: center;
-      color: red;
-      margin: 0.5rem 0; }
-    /* line 42, src/styles/components/_splash.scss */
-    .splash-root .splash-footer .splash-footer-button {
-      max-width: 50vw; }
+  flex-direction: column;
+}
+/* line 15, src/styles/components/_splash.scss */
+.splash-root .splash-header {
+  height: 6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--greyBright);
+}
+/* line 22, src/styles/components/_splash.scss */
+.splash-root .splash-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  margin-top: 6rem;
+}
+/* line 30, src/styles/components/_splash.scss */
+.splash-root .splash-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  height: 10rem;
+  margin: 0 2rem;
+}
+/* line 37, src/styles/components/_splash.scss */
+.splash-root .splash-footer .splash-footer-error-text {
+  text-align: center;
+  color: red;
+  margin: 0.5rem 0;
+}
+/* line 42, src/styles/components/_splash.scss */
+.splash-root .splash-footer .splash-footer-button {
+  max-width: 50vw;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -3005,21 +3872,26 @@ p {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%; }
-  @media only screen and (max-width: 768px) {
-    /* line 4, src/styles/components/_auth.scss */
-    .authform-button-content {
-      justify-content: left; } }
-  /* line 12, src/styles/components/_auth.scss */
-  .authform-button-content .authform-button-content-icon {
-    margin: 0 1.375rem; }
-  /* line 15, src/styles/components/_auth.scss */
-  .authform-button-content .authform-button-text {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    text-align: left;
-    max-width: 10.625rem; }
+  width: 100%;
+}
+@media only screen and (max-width: 768px) {
+  /* line 4, src/styles/components/_auth.scss */
+  .authform-button-content {
+    justify-content: left;
+  }
+}
+/* line 12, src/styles/components/_auth.scss */
+.authform-button-content .authform-button-content-icon {
+  margin: 0 1.375rem;
+}
+/* line 15, src/styles/components/_auth.scss */
+.authform-button-content .authform-button-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: left;
+  max-width: 10.625rem;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -3034,83 +3906,103 @@ p {
 /** TABS GRADIENT **/
 /* line 5, src/styles/components/_feedback.scss */
 .fb-root {
-  overflow-y: auto; }
-  /* line 7, src/styles/components/_feedback.scss */
-  .fb-root .fb-header {
-    color: #e3b82a;
-    padding: 1.5rem 1.5rem 0rem 1.5rem;
-    display: flex;
-    justify-content: center; }
-  /* line 14, src/styles/components/_feedback.scss */
-  .fb-root .fb-content {
-    padding: 1rem 1.5rem 1.5rem 1.5rem;
-    display: flex;
-    flex-direction: column; }
-    /* line 18, src/styles/components/_feedback.scss */
-    .fb-root .fb-content .fb-content-success {
-      color: #e0e0e0;
-      color: #e0e0e0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center; }
-    /* line 26, src/styles/components/_feedback.scss */
-    .fb-root .fb-content .fb-content-error {
-      color: #e0e0e0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center; }
-    /* line 33, src/styles/components/_feedback.scss */
-    .fb-root .fb-content .fb-icon {
-      display: flex;
-      justify-content: center;
-      margin: 0 0 1.5rem 0; }
-    /* line 38, src/styles/components/_feedback.scss */
-    .fb-root .fb-content .fb-label {
-      margin: 0.5rem 0 0 0; }
-    /* line 41, src/styles/components/_feedback.scss */
-    .fb-root .fb-content .fb-selector {
-      margin: 0.5rem 0;
-      display: flex;
-      flex-direction: row;
-      align-content: space-around;
-      justify-content: space-around; }
-      /* line 47, src/styles/components/_feedback.scss */
-      .fb-root .fb-content .fb-selector .fb-selector-item {
-        height: 3.125rem;
-        width: 3.125rem; }
-        /* line 50, src/styles/components/_feedback.scss */
-        .fb-root .fb-content .fb-selector .fb-selector-item .fb-selector-item-label {
-          color: #e0e0e0; }
-        /* line 53, src/styles/components/_feedback.scss */
-        .fb-root .fb-content .fb-selector .fb-selector-item .fb-selector-item-selectedlabel {
-          color: white; }
-    /* line 58, src/styles/components/_feedback.scss */
-    .fb-root .fb-content .fb-form {
-      margin: 0.5rem 0;
-      border: 1px solid #7b7b7b;
-      border-radius: 4px;
-      color: #e0e0e0;
-      background: rgba(0, 0, 0, 0.3);
-      padding: 0 1rem;
-      outline: none; }
-    /* line 67, src/styles/components/_feedback.scss */
-    .fb-root .fb-content .fb-form:focus {
-      border: 1px solid #e3b82a; }
-    /* line 70, src/styles/components/_feedback.scss */
-    .fb-root .fb-content .fb-textarea {
-      height: 8.725rem;
-      padding: 0.5rem 1rem;
-      resize: none; }
-    /* line 75, src/styles/components/_feedback.scss */
-    .fb-root .fb-content .fb-input {
-      height: 2rem; }
-    /* line 78, src/styles/components/_feedback.scss */
-    .fb-root .fb-content .fb-button {
-      max-width: 9.375rem;
-      align-self: center;
-      margin-top: 1rem; }
+  overflow-y: auto;
+}
+/* line 7, src/styles/components/_feedback.scss */
+.fb-root .fb-header {
+  color: #e3b82a;
+  padding: 1.5rem 1.5rem 0rem 1.5rem;
+  display: flex;
+  justify-content: center;
+}
+/* line 14, src/styles/components/_feedback.scss */
+.fb-root .fb-content {
+  padding: 1rem 1.5rem 1.5rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+/* line 18, src/styles/components/_feedback.scss */
+.fb-root .fb-content .fb-content-success {
+  color: #e0e0e0;
+  color: #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+/* line 26, src/styles/components/_feedback.scss */
+.fb-root .fb-content .fb-content-error {
+  color: #e0e0e0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+/* line 33, src/styles/components/_feedback.scss */
+.fb-root .fb-content .fb-icon {
+  display: flex;
+  justify-content: center;
+  margin: 0 0 1.5rem 0;
+}
+/* line 38, src/styles/components/_feedback.scss */
+.fb-root .fb-content .fb-label {
+  margin: 0.5rem 0 0 0;
+}
+/* line 41, src/styles/components/_feedback.scss */
+.fb-root .fb-content .fb-selector {
+  margin: 0.5rem 0;
+  display: flex;
+  flex-direction: row;
+  align-content: space-around;
+  justify-content: space-around;
+}
+/* line 47, src/styles/components/_feedback.scss */
+.fb-root .fb-content .fb-selector .fb-selector-item {
+  height: 3.125rem;
+  width: 3.125rem;
+}
+/* line 50, src/styles/components/_feedback.scss */
+.fb-root .fb-content .fb-selector .fb-selector-item .fb-selector-item-label {
+  color: #e0e0e0;
+}
+/* line 53, src/styles/components/_feedback.scss */
+.fb-root
+  .fb-content
+  .fb-selector
+  .fb-selector-item
+  .fb-selector-item-selectedlabel {
+  color: white;
+}
+/* line 58, src/styles/components/_feedback.scss */
+.fb-root .fb-content .fb-form {
+  margin: 0.5rem 0;
+  border: 1px solid #7b7b7b;
+  border-radius: 4px;
+  color: #e0e0e0;
+  background: rgba(0, 0, 0, 0.3);
+  padding: 0 1rem;
+  outline: none;
+}
+/* line 67, src/styles/components/_feedback.scss */
+.fb-root .fb-content .fb-form:focus {
+  border: 1px solid #e3b82a;
+}
+/* line 70, src/styles/components/_feedback.scss */
+.fb-root .fb-content .fb-textarea {
+  height: 8.725rem;
+  padding: 0.5rem 1rem;
+  resize: none;
+}
+/* line 75, src/styles/components/_feedback.scss */
+.fb-root .fb-content .fb-input {
+  height: 2rem;
+}
+/* line 78, src/styles/components/_feedback.scss */
+.fb-root .fb-content .fb-button {
+  max-width: 9.375rem;
+  align-self: center;
+  margin-top: 1rem;
+}
 
 /** BLACK **/
 /** TEXT COLOR **/
@@ -3127,15 +4019,30 @@ p {
 .version-root {
   color: #e0e0e0;
   text-align: end;
-  margin: 1rem 1.5rem 2rem; }
+  margin: 1rem 1.5rem 2rem;
+}
 
 /* line 30, src/styles/index.scss */
 :root {
-  --blue: #58FFFF;
-  --blue40: #58FFFF40;
-  --blueBackground: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58FFFF;
-  --blueRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(1, 153, 163, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #58FFFF;
-  --blueRadialGradientTrans: radial-gradient(circle, #58FFFF 0%, rgba(255, 255, 255, 0) 100%);
+  --blue: #58ffff;
+  --blue40: #58ffff40;
+  --blueBackground: radial-gradient(
+      105.25% 64.58% at 49.68% 70.83%,
+      rgba(1, 153, 163, 0.5) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    #58ffff;
+  --blueRadialGradient: radial-gradient(
+      105.25% 64.58% at 49.68% 70.83%,
+      rgba(1, 153, 163, 0.5) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    #58ffff;
+  --blueRadialGradientTrans: radial-gradient(
+    circle,
+    #58ffff 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
   --elecColor: #d87b39;
   --elecColor40: rgba(216, 123, 57, 0.4);
   --elecCompareColor: #e2bca1;
@@ -3147,30 +4054,70 @@ p {
   --waterCompareColor: #abd4fa;
   --multiColor: #e3b82a;
   --multiCompareColor: #ffd597;
-  --redPrimary: #D25959;
+  --redPrimary: #d25959;
   --greyBright: #e0e0e0;
   --greyDark: #7b7b7b;
   --textBlack: black;
   --textWhite: #ffffff;
-  --textBright: #e0e0e0;
+  --greyBright: #e0e0e0;
   --textDark: #a0a0a0;
   --darkLight: #25262b;
   --darkLight2: #121212;
   --textFont: Lato, sans-serif;
-  --greyBackground: linear-gradient(180deg, #323339 0%, #25262B 100%);
-  --multiColorRadialGradientTrans: radial-gradient(circle, #e3b82a 0%, rgba(255, 255, 255, 0) 100%);
-  --elecColorRadialGradientTrans: radial-gradient(circle, #d87b39 0%, rgba(255, 255, 255, 0) 100%);
-  --waterColorRadialGradientTrans: radial-gradient(circle, #3a98ec 0%, rgba(255, 255, 255, 0) 100%);
-  --gasColorRadialGradientTrans: radial-gradient(circle, #e3b82a 0%, rgba(255, 255, 255, 0) 100%);
-  --multiColorRadialGradient: 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;
-  --elecColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(158, 67, 2, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #d87b39;
-  --gasColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(4, 106, 88, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #45d1b8;
-  --waterColorRadialGradient: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(2, 93, 174, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #3a98ec; }
+  --greyBackground: linear-gradient(180deg, #323339 0%, #25262b 100%);
+  --multiColorRadialGradientTrans: radial-gradient(
+    circle,
+    #e3b82a 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --elecColorRadialGradientTrans: radial-gradient(
+    circle,
+    #d87b39 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --waterColorRadialGradientTrans: radial-gradient(
+    circle,
+    #3a98ec 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --gasColorRadialGradientTrans: radial-gradient(
+    circle,
+    #e3b82a 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --multiColorRadialGradient: 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;
+  --elecColorRadialGradient: radial-gradient(
+      105.25% 64.58% at 49.68% 70.83%,
+      rgba(158, 67, 2, 0.5) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    #d87b39;
+  --gasColorRadialGradient: radial-gradient(
+      105.25% 64.58% at 49.68% 70.83%,
+      rgba(4, 106, 88, 0.5) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    #45d1b8;
+  --waterColorRadialGradient: radial-gradient(
+      105.25% 64.58% at 49.68% 70.83%,
+      rgba(2, 93, 174, 0.5) 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    #3a98ec;
+}
 
 /* line 68, src/styles/index.scss */
 .application {
-  overflow-x: hidden; }
-  @media only screen and (max-width: 768px) {
-    /* line 68, src/styles/index.scss */
-    .application {
-      min-height: 100vh; } }
+  overflow-x: hidden;
+}
+@media only screen and (max-width: 768px) {
+  /* line 68, src/styles/index.scss */
+  .application {
+    min-height: 100vh;
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index cc2d4e564564bce64699d758995d69281808e25d..8b6dd2a82b40531b0cb0ae01bd03192fa48de6b3 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -9,7 +9,7 @@
 @import 'base/typography';
 @import 'components/card';
 @import 'components/form';
-@import 'components/button';
+// @import 'components/button';
 @import 'components/konnector';
 @import 'components/fluid';
 @import 'components/navigator';
@@ -28,6 +28,8 @@
 @import 'components/version';
 @import 'components/report';
 
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
+
 :root {
   --blue: #{$blue};
   --blue40: #{$blue-40};
@@ -48,14 +50,12 @@
   --redPrimary: #{$red-primary};
   --greyBright: #{$grey-bright};
   --greyDark: #{$grey-dark};
-  --textBlack: #{$text-black};
-  --textWhite: #{$text-white};
-  --textBright: #{$text-bright};
-  --textDark: #{$text-dark};
+  --textWhite: #{$white};
+  --softGrey: #{$soft-grey};
   --darkLight: #{$dark-light};
   --darkLight2: #{$dark-light-2};
   --textFont: #{$text-font};
-  --greyBackground: #{$grey-background};
+  --greyLinearGradientBackground: #{$grey-linear-gradient-background};
   --multiColorRadialGradientTrans: #{$multi-color-radial-gradient-transparent};
   --elecColorRadialGradientTrans: #{$elec-color-radial-gradient-transparent};
   --waterColorRadialGradientTrans: #{$water-color-radial-gradient-transparent};
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 8abaa689936af75aea94cfa513f8c629552677d4..cc18516422651bc5818e17cd016088fc1685c82a 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -62,47 +62,7 @@ export function getParamPicto(type: FluidType) {
   }
 }
 
-/**
- * Return a string corresponding to Fuild style
- * @param type FluidType
- */
-export function getCardColor(type: FluidType) {
-  switch (type) {
-    case FluidType.ELECTRICITY:
-      return 'card orange'
-    case FluidType.WATER:
-      return 'card blue'
-    case FluidType.GAS:
-      return 'card green'
-    default:
-      return 'card'
-  }
-}
-/**
- * Return a string corresponding to Fuild style
- * @param fluidTypes FluidType[]
- */
-export function getColorClass(fluidTypes: FluidType[]) {
-  if (fluidTypes.length === 1) {
-    switch (fluidTypes[0]) {
-      case FluidType.ELECTRICITY:
-        return 'var(--elecColor)'
-      case FluidType.WATER:
-        return 'var(--waterColor)'
-      case FluidType.GAS:
-        return 'var(--gasColor)'
-      default:
-        return 'var(--elecColor)'
-    }
-  }
-  return styles.multiColor
-}
-
-/**
- * Return a FuildType corresponding to type string
- * @param type string
- */
-export function getFuildType(type: string) {
+export function getFluidType(type: string) {
   switch (type.toUpperCase()) {
     case 'ELECTRICITY':
       return FluidType.ELECTRICITY
@@ -129,11 +89,6 @@ export function compareDates(dateA: DateTime, dateB: DateTime) {
   return dateA < dateB ? -1 : 1
 }
 
-export function getDoctype(fluid: FluidType) {
-  // TODO add doctypes
-  return ENEDIS_DAY_DOCTYPE
-}
-
 export const formatCompareChallengeDate = (challenge: UserChallenge) => {
   let durationTimeStep = ''
   let duration = 0