diff --git a/1/ecolyo.6b6625985ac180d66a18.js b/1/ecolyo.16a699f1442815dc23fe.js
similarity index 96%
rename from 1/ecolyo.6b6625985ac180d66a18.js
rename to 1/ecolyo.16a699f1442815dc23fe.js
index 6f9936452ad0dd7be8aa945f2fa468f7faa36ba2..8b607b1233dbaf09e9218246543aba4c244d4938 100644
--- a/1/ecolyo.6b6625985ac180d66a18.js
+++ b/1/ecolyo.16a699f1442815dc23fe.js
@@ -192,10 +192,7 @@ var NoDataModal = function NoDataModal(_ref) {
   }, t('consumption_visualizer.dataModal.list_title')), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, t('consumption_visualizer.dataModal.item1')), /*#__PURE__*/_react.default.createElement("li", null, t('consumption_visualizer.dataModal.item2')), /*#__PURE__*/_react.default.createElement("li", null, t('consumption_visualizer.dataModal.item3')), /*#__PURE__*/_react.default.createElement("li", null, t('consumption_visualizer.dataModal.item4'))), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture_info_modal.button_close'),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('ecogesture_info_modal.button_close'))));
 };
 
@@ -788,10 +785,7 @@ var ConnectionNotFound = function ConnectionNotFound(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('konnector_form.accessibility.button_install'),
     onClick: openKonnectorURL,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('konnector_form.button_install'))));
 };
 
@@ -805,7 +799,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.kmodal-content {\n  margin: 0.5rem 1.5rem;\n  min-height: 12rem;\n}\n@media only screen and (max-width : 768px) {\n  .kmodal-content {\n    margin: 0.5rem 0;\n  }\n}\n.kmodal-content .kmodal-content-text {\n  color: #e0e0e0;\n  margin: 1rem;\n  text-align: center;\n}\n.kmodal-content .kmodal-waiting-text {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  margin: 1rem;\n  min-height: 11.25rem;\n  text-align: center;\n}\n.kmodal-content .kmodal-waiting-text .kc-wait {\n  margin-bottom: 2rem;\n}\n.kmodal-content .kmodal-waiting-text .waiting-text {\n  display: none;\n}\n.kmodal-content .kmodal-waiting-text .waiting-text.show {\n  animation-duration: 8s;\n  animation-name: fadeIn;\n  display: block;\n  opacity: 0;\n}\n.kmodal-content .kmodal-content-text-center {\n  text-align: center;\n}\n.kmodal-content .kmodal-info {\n  padding: 1rem;\n  text-align: center;\n}\n.kmodal-content .kmodal-info .buttons {\n  display: flex;\n  gap: 0.825rem;\n}\n.kmodal-content .kmodal-info .konnector-config {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  gap: 1rem;\n}\n.kmodal-content .kmodal-info .konnector-config .elec-fail {\n  color: #e0e0e0;\n  margin-top: 1rem;\n}\n.kmodal-content .kmodal-info .konnector-config.mismatch .title {\n  color: #ec9d41;\n}\n.kmodal-content .kmodal-info .konnector-config.mismatch div {\n  margin-bottom: 1rem;\n}\n.kmodal-content .kmodal-info .konnector-config.mismatch .info {\n  color: #e0e0e0;\n}\n.kmodal-content .kmodal-info .konnector-config .kce-picto-txt {\n  color: #d25959;\n}\n.kmodal-content .kmodal-info .konnector-config .kcs-picto-txt {\n  color: #e3b82a;\n}\n.kmodal-content .kmodal-info .konnector-config .commonErrors {\n  text-decoration: underline;\n  cursor: pointer;\n  margin: 1rem auto 0.5rem;\n}\n.kmodal-content .kmodal-info .konnector-config .commonErrorsList {\n  text-align: left;\n}\n.kmodal-content .kmodal-info .konnector-config .commonErrorsList span {\n  font-weight: 700;\n}\n.kmodal-content .kmodal-info .konnector-config .commonErrorsList span.gold {\n  color: #e3b82a;\n}\n.kmodal-content .kmodal-info .konnector-config .commonErrorsList .center {\n  text-align: center;\n  font-weight: 700;\n}\n.kmodal-content .kmodal-info .konnector-config .commonErrorsList p {\n  text-align: center;\n  font-style: italic;\n  font-weight: 400;\n  font-size: 0.9rem;\n}\n\n#accessibility-title {\n  display: none;\n}\n\n@keyframes fadeIn {\n  10%, 90% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.kmodal-content {\n  margin: 0.5rem 1.5rem;\n  min-height: 12rem;\n}\n@media only screen and (max-width : 768px) {\n  .kmodal-content {\n    margin: 0.5rem 0;\n  }\n}\n.kmodal-content .kmodal-content-text {\n  color: #e0e0e0;\n  margin: 1rem;\n  text-align: center;\n}\n.kmodal-content .kmodal-waiting-text {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  margin: 1rem;\n  min-height: 11.25rem;\n  text-align: center;\n}\n.kmodal-content .kmodal-waiting-text .kc-wait {\n  margin-bottom: 2rem;\n}\n.kmodal-content .kmodal-waiting-text .waiting-text {\n  display: none;\n}\n.kmodal-content .kmodal-waiting-text .waiting-text.show {\n  animation-duration: 8s;\n  animation-name: fadeIn;\n  display: block;\n  opacity: 0;\n}\n.kmodal-content .kmodal-content-text-center {\n  text-align: center;\n}\n.kmodal-content .kmodal-info {\n  padding: 1rem;\n  text-align: center;\n}\n.kmodal-content .kmodal-info .buttons {\n  display: flex;\n  gap: 0.825rem;\n}\n.kmodal-content .kmodal-info .konnector-config {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  text-align: center;\n  gap: 1rem;\n}\n.kmodal-content .kmodal-info .konnector-config .elec-fail {\n  color: #e0e0e0;\n  margin-top: 1rem;\n}\n.kmodal-content .kmodal-info .konnector-config.mismatch .title {\n  color: #ec9d41;\n}\n.kmodal-content .kmodal-info .konnector-config.mismatch div {\n  margin-bottom: 1rem;\n}\n.kmodal-content .kmodal-info .konnector-config.mismatch .info {\n  color: #e0e0e0;\n}\n.kmodal-content .kmodal-info .konnector-config .kce-picto-txt {\n  color: #d25959;\n}\n.kmodal-content .kmodal-info .konnector-config .kcs-picto-txt {\n  color: #e3b82a;\n}\n.kmodal-content .kmodal-info .konnector-config .commonErrors {\n  text-decoration: underline;\n  cursor: pointer;\n  margin: 1rem auto 0.5rem;\n}\n.kmodal-content .kmodal-info .konnector-config .commonErrorsList {\n  text-align: left;\n}\n.kmodal-content .kmodal-info .konnector-config .commonErrorsList span {\n  font-weight: 700;\n}\n.kmodal-content .kmodal-info .konnector-config .commonErrorsList span.gold {\n  color: #e3b82a;\n}\n.kmodal-content .kmodal-info .konnector-config .commonErrorsList .center {\n  text-align: center;\n  font-weight: 700;\n}\n.kmodal-content .kmodal-info .konnector-config .commonErrorsList p {\n  text-align: center;\n  font-style: italic;\n  font-weight: 400;\n  font-size: 0.9rem;\n}\n.kmodal-content .kmodal-info button {\n  margin-top: 1rem;\n}\n\n#accessibility-title {\n  display: none;\n}\n\n@keyframes fadeIn {\n  10%, 90% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}", ""]);
 
 
 
@@ -1047,15 +1041,9 @@ var SgeInit = function SgeInit() {
     onClick: function onClick() {
       navigate('/sge-connect');
     },
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t("auth.".concat(konnectorSlug, ".connect"))), currentFluidStatus.firstDataDate && /*#__PURE__*/_react.default.createElement(_core.Button, {
-    classes: {
-      root: 'btn-secondary',
-      label: 'text-16-bold'
-    },
+    className: "btnSecondary",
     onClick: function onClick() {
       return dispatch((0, _chart.setShowOfflineData)(true));
     }
@@ -1120,9 +1108,8 @@ var TimeStepSelector = function TimeStepSelector(_ref) {
 
   var dateChartService = new _dateChart.default();
   var client = (0, _cozyClient.useClient)();
-  var timeStepElecArray = [_enums.TimeStep.HALF_AN_HOUR, _enums.TimeStep.WEEK, _enums.TimeStep.DAY, _enums.TimeStep.MONTH, _enums.TimeStep.YEAR];
   var timeStepMultiArray = [_enums.TimeStep.WEEK, _enums.TimeStep.DAY, _enums.TimeStep.MONTH, _enums.TimeStep.YEAR];
-  var timeStepArray = fluidType === _enums.FluidType.ELECTRICITY ? [].concat(timeStepElecArray) : [].concat(timeStepMultiArray);
+  var timeStepArray = fluidType === _enums.FluidType.ELECTRICITY ? [_enums.TimeStep.HALF_AN_HOUR].concat(timeStepMultiArray) : [].concat(timeStepMultiArray);
 
   var handleToday = function handleToday() {
     var today = _luxon.DateTime.local().setZone('utc', {
@@ -1158,9 +1145,10 @@ var TimeStepSelector = function TimeStepSelector(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     onClick: handleToday,
     classes: {
-      root: 'btn-today',
+      root: 'btnSecondary',
       label: 'text-13-normal'
-    }
+    },
+    size: "large"
   }, t('timestep.today')), /*#__PURE__*/_react.default.createElement("div", {
     className: "timestep-container"
   }, /*#__PURE__*/_react.default.createElement("ul", {
@@ -2481,10 +2469,7 @@ var KonnectorViewerCard = function KonnectorViewerCard(_ref) {
   var getConnectionCard = (0, _react.useCallback)(function () {
     if (showOfflineData && !account) {
       return /*#__PURE__*/_react.default.createElement(_core.Button, {
-        classes: {
-          root: 'btn-highlight',
-          label: 'text-16-bold'
-        },
+        className: "btnPrimary",
         onClick: toggleModalConnection
       }, t("auth.".concat((0, _utils.getKonnectorSlug)(fluidType), ".connect")));
     }
@@ -2832,17 +2817,11 @@ var DeleteGRDFAccountModal = function DeleteGRDFAccountModal(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t("delete_grdf_modal.cancel"),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-secondary-positive',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t("delete_grdf_modal.cancel")), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t("delete_grdf_modal.go"),
     onClick: handleDelete,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t("delete_grdf_modal.go")))));
 };
 
@@ -3227,26 +3206,18 @@ var ExpiredConsentModal = function ExpiredConsentModal(_ref) {
     size: 135
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "text-20-bold title ".concat((0, _utils.getFluidName)(fluidType))
-  }, t("consent_outdated.title.".concat(fluidType))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-normal text1"
-  }, t("consent_outdated.text1.".concat(fluidType))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-normal justified-text"
+  }, t("consent_outdated.title.".concat(fluidType))), /*#__PURE__*/_react.default.createElement("div", null, t("consent_outdated.text1.".concat(fluidType))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-16-bold"
   }, t("consent_outdated.text2.".concat(fluidType))), /*#__PURE__*/_react.default.createElement("div", {
     className: "buttons"
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('consent_outdated.later'),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-secondary-positive',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, fluidType === _enums.FluidType.ELECTRICITY ? t('consent_outdated.no') : t('consent_outdated.later')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('consent_outdated.go'),
     onClick: launchUpdateConsent,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, fluidType === _enums.FluidType.ELECTRICITY ? t('consent_outdated.yes') : t('consent_outdated.go')))));
 };
 
@@ -3428,7 +3399,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.connection-update-result {\n  flex: 1;\n  margin: 0 1.3rem 1rem;\n}\n@media only screen and (max-width : 1023px) {\n  .connection-update-result {\n    margin: 0 0 0.25rem;\n  }\n}\n.connection-update-result .connection-update-errored,\n.connection-update-result .connection-caption-errored {\n  background-color: #d25959;\n  margin: 0 -2.5rem;\n  padding: 0.4rem 2.5rem;\n  display: flex;\n  align-items: center;\n}\n@media only screen and (max-width : 1023px) {\n  .connection-update-result .connection-update-errored,\n.connection-update-result .connection-caption-errored {\n    margin: 0 -1.2rem;\n    padding: 0.4rem 1.2rem;\n  }\n}\n.connection-update-result .connection-update-errored .warning-icon,\n.connection-update-result .connection-caption-errored .warning-icon {\n  min-width: 20px;\n  margin-right: 1rem;\n}\n.connection-update-result .connection-update-errored .warning-white,\n.connection-update-result .connection-caption-errored .warning-white {\n  margin-right: 1rem;\n}\n.connection-update-result .connection-caption-warning {\n  background-color: #e3b82a;\n  margin: 0 -2.5rem;\n  padding: 0.4rem 2.5rem;\n  display: flex;\n  align-items: center;\n  color: #1b1c22;\n}\n@media only screen and (max-width : 1023px) {\n  .connection-update-result .connection-caption-warning {\n    margin: 0 -1.2rem;\n    padding: 0.4rem 1.2rem;\n  }\n}\n.connection-update-result .connection-caption-warning .warning-icon {\n  min-width: 20px;\n  margin-right: 1rem;\n}\n.connection-update-result .connection-caption-warning .warning-white {\n  margin-right: 1rem;\n}\n.connection-update-result .connection-caption {\n  color: #e0e0e0;\n}\n\n.delta-caption {\n  color: #a0a0a0;\n}\n\n.inline-buttons {\n  display: flex;\n  flex-flow: row nowrap;\n  gap: 1rem;\n}\n.inline-buttons button.btn-secondary-positive span:first-child {\n  color: #ffffff !important;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.connection-update-result {\n  flex: 1;\n  margin: 0 1.3rem 1rem;\n}\n@media only screen and (max-width : 1023px) {\n  .connection-update-result {\n    margin: 0 0 0.25rem;\n  }\n}\n.connection-update-result .connection-update-errored,\n.connection-update-result .connection-caption-errored {\n  background-color: #d25959;\n  margin: 0 -2.5rem;\n  padding: 0.4rem 2.5rem;\n  display: flex;\n  align-items: center;\n}\n@media only screen and (max-width : 1023px) {\n  .connection-update-result .connection-update-errored,\n.connection-update-result .connection-caption-errored {\n    margin: 0 -1.2rem;\n    padding: 0.4rem 1.2rem;\n  }\n}\n.connection-update-result .connection-update-errored .warning-icon,\n.connection-update-result .connection-caption-errored .warning-icon {\n  min-width: 20px;\n  margin-right: 1rem;\n}\n.connection-update-result .connection-update-errored .warning-white,\n.connection-update-result .connection-caption-errored .warning-white {\n  margin-right: 1rem;\n}\n.connection-update-result .connection-caption-warning {\n  background-color: #e3b82a;\n  margin: 0 -2.5rem;\n  padding: 0.4rem 2.5rem;\n  display: flex;\n  align-items: center;\n  color: #1b1c22;\n}\n@media only screen and (max-width : 1023px) {\n  .connection-update-result .connection-caption-warning {\n    margin: 0 -1.2rem;\n    padding: 0.4rem 1.2rem;\n  }\n}\n.connection-update-result .connection-caption-warning .warning-icon {\n  min-width: 20px;\n  margin-right: 1rem;\n}\n.connection-update-result .connection-caption-warning .warning-white {\n  margin-right: 1rem;\n}\n.connection-update-result .connection-caption {\n  color: #e0e0e0;\n}\n\n.delta-caption {\n  color: #a0a0a0;\n}\n\n.inline-buttons {\n  margin-top: 1rem;\n  display: flex;\n  flex-flow: row nowrap;\n  gap: 1rem;\n}", ""]);
 
 
 
@@ -3528,7 +3499,7 @@ var PartnerIssueModal = function PartnerIssueModal(_ref) {
     dangerouslySetInnerHTML: {
       __html: t("consumption.partner_issue_modal.error_connect_".concat(getFluidTypeLabel()))
     }
-  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: t("consumption.partner_issue_modal.additional_text")
     }
@@ -3536,10 +3507,7 @@ var PartnerIssueModal = function PartnerIssueModal(_ref) {
     onClick: function onClick() {
       return handleCloseClick(issuedFluid);
     },
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('consumption.partner_issue_modal.ok'))));
 };
 
@@ -3553,7 +3521,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.partners-connection-step-content {\n  padding: 0.5rem 0.5rem 0;\n  text-align: center;\n}\n.partners-connection-step-content .footer button.btn-highlight {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-evenly;\n  margin: 1.5rem 0 1rem;\n  padding: 1rem 2rem;\n  transition: all 300ms ease;\n}\n\n.partners-connection-step-navigation {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  gap: 1rem;\n}\n.partners-connection-step-navigation .disabled {\n  opacity: 0;\n}\n.partners-connection-step-navigation button {\n  max-width: 10rem;\n  min-height: 2.5rem;\n  margin-top: 0.5rem;\n  padding: 0rem 1rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.partners-connection-step-content {\n  padding: 0.5rem 0.5rem 0;\n  text-align: center;\n}\n\n.partners-connection-step-navigation {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
 
 
 
@@ -3634,7 +3602,7 @@ exports.push([module.i, ".fluidchartswipe-root {\n  flex: 1;\n  height: 22rem;\n
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.customPopupRoot {\n  border: 1px solid #f1c017;\n}\n\n.customPopupModal {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 1rem;\n  max-width: 20rem;\n}\n.customPopupModal .customPopup-title {\n  color: #e3b82a;\n  margin: 1rem auto;\n}\n.customPopupModal .customPopup-content {\n  text-align: center;\n  font-weight: 700;\n}\n.customPopupModal .customPopup-content p {\n  color: #e0e0e0;\n}\n.customPopupModal .customPopup-content a {\n  color: #e3b82a;\n}\n.customPopupModal button.btn-highlight {\n  padding: 0.65rem 2.5rem;\n  margin-top: 1rem;\n  width: unset;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.customPopupRoot {\n  border: 1px solid #f1c017;\n}\n\n.customPopupModal {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 1rem;\n  max-width: 20rem;\n}\n.customPopupModal .customPopup-title {\n  color: #e3b82a;\n  margin: 1rem auto;\n}\n.customPopupModal .customPopup-content {\n  text-align: center;\n  font-weight: 700;\n}\n.customPopupModal .customPopup-content p {\n  color: #e0e0e0;\n}\n.customPopupModal .customPopup-content a {\n  color: #e3b82a;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
 
 
 
@@ -3748,7 +3716,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.release-root.black .modal-overlay .modal-close-button {\n  display: none;\n}\n\n.release-note-container {\n  border-radius: 4px;\n  margin-bottom: 1rem;\n  color: #e0e0e0;\n}\n.release-note-container .em-content {\n  padding: 1rem;\n}\n.release-note-container .release-note-title {\n  color: #e3b82a;\n  margin-bottom: 2rem;\n}\n.release-note-container .release-note-button {\n  display: flex;\n  justify-content: center;\n  margin-top: 2rem;\n}\n.release-note-container .release-note-button button.btn-highlight, .release-note-container .release-note-button button.btn-secondary-positive {\n  width: 45%;\n  margin-bottom: 0;\n}\n.release-note-container .release-note-button button.btn-secondary-positive {\n  padding: 0.5rem 1rem;\n}\n.release-note-container .release-note-button button.btn-highlight {\n  padding: 0.25rem 0.5rem;\n}\n@media only screen and (max-width : 768px) {\n  .release-note-container .release-note-button {\n    flex-direction: column-reverse;\n  }\n  .release-note-container .release-note-button button.btn-highlight, .release-note-container .release-note-button button.btn-secondary-positive {\n    margin-bottom: 0;\n    width: 100%;\n    height: 45px;\n  }\n}\n.release-note-container .release-note-part {\n  margin-top: 0.5rem;\n}\n.release-note-container .release-note-description {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.release-root.black .modal-overlay .modal-close-button {\n  display: none;\n}\n\n.release-note-container {\n  border-radius: 4px;\n  margin-bottom: 1rem;\n  color: #e0e0e0;\n}\n.release-note-container .em-content {\n  padding: 1rem;\n}\n.release-note-container .release-note-title {\n  color: #e3b82a;\n  margin-bottom: 2rem;\n}\n.release-note-container .release-note-part {\n  margin-top: 0.5rem;\n}\n.release-note-container .release-note-description {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
 
 
 
@@ -3786,6 +3754,8 @@ var Sentry = _interopRequireWildcard(__webpack_require__("agHs"));
 
 var _trailingIcon = _interopRequireDefault(__webpack_require__("h1zO"));
 
+var _classnames = _interopRequireDefault(__webpack_require__("TSYQ"));
+
 var _StyledIcon = _interopRequireDefault(__webpack_require__("I07j"));
 
 var _StyledIconButton = _interopRequireDefault(__webpack_require__("jZ8W"));
@@ -3871,18 +3841,17 @@ var FormLogin = function FormLogin() {
   };
 
   var handleSubmit = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              e.preventDefault();
-              _context.prev = 1;
+              _context.prev = 0;
               setError('');
               setLoading(true);
 
               if (!(!login || !password)) {
-                _context.next = 8;
+                _context.next = 7;
                 break;
               }
 
@@ -3890,46 +3859,46 @@ var FormLogin = function FormLogin() {
               setLoading(false);
               return _context.abrupt("return", null);
 
-            case 8:
+            case 7:
               if (account) {
-                _context.next = 14;
+                _context.next = 13;
                 break;
               }
 
-              _context.next = 11;
+              _context.next = 10;
               return connect();
 
-            case 11:
+            case 10:
               setLoading(false);
-              _context.next = 16;
+              _context.next = 15;
               break;
 
-            case 14:
-              _context.next = 16;
+            case 13:
+              _context.next = 15;
               return update();
 
-            case 16:
-              _context.next = 23;
+            case 15:
+              _context.next = 22;
               break;
 
-            case 18:
-              _context.prev = 18;
-              _context.t0 = _context["catch"](1);
+            case 17:
+              _context.prev = 17;
+              _context.t0 = _context["catch"](0);
 
               _logger.default.error(_context.t0);
 
               Sentry.captureException(_context.t0);
               setLoading(false);
 
-            case 23:
+            case 22:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[1, 18]]);
+      }, _callee, null, [[0, 17]]);
     }));
 
-    return function handleSubmit(_x) {
+    return function handleSubmit() {
       return _ref.apply(this, arguments);
     };
   }();
@@ -3950,17 +3919,14 @@ var FormLogin = function FormLogin() {
       setError(t('konnector_form.error_login_failed'));
     }
   }, [account, lastEpglLogin, t]);
-  return /*#__PURE__*/_react2.default.createElement("form", {
-    className: "form",
-    onSubmit: function onSubmit(e) {
-      return handleSubmit(e);
-    }
-  }, /*#__PURE__*/_react2.default.createElement("div", {
+  return /*#__PURE__*/_react2.default.createElement("form", null, /*#__PURE__*/_react2.default.createElement("div", {
     className: "form-group"
   }, /*#__PURE__*/_react2.default.createElement("input", {
     id: 'idFieldLogin' + fluidName,
     type: "number",
-    className: error === '' ? 'form-control form-input' : 'form-control form-input --error',
+    className: (0, _classnames.default)('inputText', {
+      error: error !== ''
+    }),
     "aria-label": t("auth.".concat(konnectorSlug, ".connect_form.login")),
     placeholder: t("auth.".concat(konnectorSlug, ".connect_form.login")),
     name: "login",
@@ -3975,7 +3941,9 @@ var FormLogin = function FormLogin() {
     id: 'idFieldPassword' + fluidName,
     name: "password",
     type: showPassword ? 'text' : 'password',
-    className: error === '' ? 'form-control form-input' : 'form-control form-input --error',
+    className: (0, _classnames.default)('inputText', {
+      error: error !== ''
+    }),
     "aria-label": t("auth.".concat(konnectorSlug, ".connect_form.password")),
     placeholder: t("auth.".concat(konnectorSlug, ".connect_form.password")),
     onChange: function onChange(e) {
@@ -3997,13 +3965,13 @@ var FormLogin = function FormLogin() {
   }, error === '' ? null : error), /*#__PURE__*/_react2.default.createElement("div", {
     className: "connection-form-connect-button"
   }, /*#__PURE__*/_react2.default.createElement(_Button.default, {
-    type: "submit",
     "aria-label": t('auth.accessibility.button_connect'),
     disabled: loading,
     classes: {
-      root: 'btn-highlight',
+      root: 'btnPrimary',
       label: 'text-18-bold'
-    }
+    },
+    onClick: handleSubmit
   }, /*#__PURE__*/_react2.default.createElement("div", {
     className: "connection-form-connect-button-content"
   }, /*#__PURE__*/_react2.default.createElement("div", {
@@ -4069,7 +4037,7 @@ var GrdfForm = function GrdfForm() {
       return dispatch((0, _modal.openConnectionModal)(true));
     },
     classes: {
-      root: 'btn-highlight',
+      root: 'btnPrimary',
       label: 'text-18-bold'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -4243,13 +4211,7 @@ var KonnectorModalFooter = function KonnectorModalFooter(_ref) {
     onClick: function onClick() {
       return handleCloseClick(state === _flowEvents.SUCCESS_EVENT);
     },
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    },
-    style: {
-      height: '40px'
-    }
+    className: "btnPrimary"
   }, /*#__PURE__*/_react.default.createElement("div", null, t('konnector_modal.button_validate')));
 
   var errorButtons = function errorButtons() {
@@ -4261,13 +4223,7 @@ var KonnectorModalFooter = function KonnectorModalFooter(_ref) {
           onClick: function onClick() {
             return handleCloseClick(state === _flowEvents.SUCCESS_EVENT);
           },
-          classes: {
-            root: 'btn-highlight',
-            label: 'text-16-bold'
-          },
-          style: {
-            height: '40px'
-          }
+          className: "btnPrimary"
         }, /*#__PURE__*/_react.default.createElement("div", null, t('konnector_modal.button_understood')));
 
       case _enums.KonnectorError.LOGIN_FAILED:
@@ -4278,13 +4234,7 @@ var KonnectorModalFooter = function KonnectorModalFooter(_ref) {
           onClick: function onClick() {
             return handleCloseClick(state === _flowEvents.SUCCESS_EVENT);
           },
-          classes: {
-            root: 'btn-highlight',
-            label: 'text-16-bold'
-          },
-          style: {
-            height: '40px'
-          }
+          className: "btnPrimary"
         }, /*#__PURE__*/_react.default.createElement("div", null, t('konnector_modal.button_try_again')));
 
       case _enums.KonnectorError.TERMS_VERSION_MISMATCH:
@@ -4295,23 +4245,11 @@ var KonnectorModalFooter = function KonnectorModalFooter(_ref) {
           onClick: function onClick() {
             return handleCloseClick(state === _flowEvents.SUCCESS_EVENT);
           },
-          classes: {
-            root: 'btn-secondary-negative',
-            label: 'text-16-bold'
-          },
-          style: {
-            height: '40px'
-          }
+          className: "btnSecondary"
         }, /*#__PURE__*/_react.default.createElement("div", null, "Plus tard")), /*#__PURE__*/_react.default.createElement(_Button.default, {
           "aria-label": t('konnector_modal.accessibility.button_close'),
           onClick: !isUpdating ? handleSGELoginRetry : handleResetSGEAccount,
-          classes: {
-            root: 'btn-highlight',
-            label: 'text-16-bold'
-          },
-          style: {
-            height: '40px'
-          }
+          className: "btnPrimary"
         }, /*#__PURE__*/_react.default.createElement("div", null, !isUpdating ? 'Vérifier les infos' : 'Jy vais')));
 
       default:
@@ -4333,7 +4271,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.konnector-form {\n  width: 100%;\n  margin: 0;\n}\n@media only screen and (min-width: 768px) {\n  .konnector-form {\n    padding-top: 1rem;\n    margin: 1rem 1.5rem 2rem 1.5rem;\n    padding-bottom: 1rem;\n  }\n}\n\n.connection-form {\n  text-align: center;\n}\n.connection-form span {\n  color: #e3b82a;\n  font-weight: bold;\n}\n.connection-form .connection-form-title {\n  margin: 0;\n}\n.connection-form .connection-form-title.enedissgegrandlyon {\n  color: #d87b39;\n}\n.connection-form .connection-form-title.grdfgrandlyon {\n  color: #45d1b8;\n}\n.connection-form .connection-form-title.eglgrandlyon {\n  color: #3a98ec;\n}\n.connection-form .connection-form-subtitle {\n  margin: 0 auto 0.5rem auto;\n  color: #ffffff;\n}\n.connection-form .connection-form-infotext {\n  color: #e0e0e0;\n}\n.connection-form button.btn-secondary-positive span:first-child {\n  color: #e0e0e0;\n}\n.connection-form .connection-form-button {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n}\n.connection-form .connection-form-button button {\n  height: 2.5rem;\n  max-width: 22.5rem;\n  margin: 0;\n}\n.connection-form .connection-form-connect-button {\n  margin: 0 0.5rem;\n}\n.connection-form .connection-form-connect-button button {\n  padding: 0.5rem;\n  height: 5rem;\n}\n.connection-form .connection-form-connect-button.grdf {\n  margin-top: 2rem;\n}\n.connection-form .connection-form-connect-button .connection-form-connect-button-content {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n@media only screen and (max-width : 768px) {\n  .connection-form .connection-form-connect-button .connection-form-connect-button-content {\n    justify-content: left;\n  }\n}\n.connection-form .connection-form-connect-button .connection-form-connect-button-content .connection-form-connect-button-content-icon {\n  margin: 0 0.5rem 0 0;\n}\n.connection-form .connection-form-connect-button .connection-form-connect-button-content .connection-form-connect-button-text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  text-align: left;\n  max-width: 13.5rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.konnector-form {\n  width: 100%;\n  margin: 0;\n}\n@media only screen and (min-width: 768px) {\n  .konnector-form {\n    padding-top: 1rem;\n    margin: 1rem 1.5rem 2rem 1.5rem;\n    padding-bottom: 1rem;\n  }\n}\n\n.connection-form {\n  text-align: center;\n}\n.connection-form span {\n  color: #e3b82a;\n  font-weight: bold;\n}\n.connection-form .connection-form-title {\n  margin: 0;\n}\n.connection-form .connection-form-title.enedissgegrandlyon {\n  color: #d87b39;\n}\n.connection-form .connection-form-title.grdfgrandlyon {\n  color: #45d1b8;\n}\n.connection-form .connection-form-title.eglgrandlyon {\n  color: #3a98ec;\n}\n.connection-form .connection-form-subtitle {\n  margin: 0 auto 0.5rem auto;\n  color: #ffffff;\n}\n.connection-form .connection-form-infotext {\n  color: #e0e0e0;\n}\n.connection-form .connection-form-button {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n}\n.connection-form .connection-form-button button {\n  height: 2.5rem;\n  max-width: 22.5rem;\n  margin: 0;\n}\n.connection-form .connection-form-connect-button button {\n  height: auto;\n}\n.connection-form .connection-form-connect-button.grdf {\n  margin-top: 2rem;\n}\n.connection-form .connection-form-connect-button .connection-form-connect-button-content {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n@media only screen and (max-width : 768px) {\n  .connection-form .connection-form-connect-button .connection-form-connect-button-content {\n    justify-content: left;\n  }\n}\n.connection-form .connection-form-connect-button .connection-form-connect-button-content .connection-form-connect-button-content-icon {\n  margin: 0 0.5rem 0 0;\n}\n.connection-form .connection-form-connect-button .connection-form-connect-button-content .connection-form-connect-button-text {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  text-align: left;\n  max-width: 19.5rem;\n}", ""]);
 
 
 
@@ -4549,16 +4487,11 @@ var ReleaseNotesModal = function ReleaseNotesModal(_ref) {
         __html: note.description
       }
     }));
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "release-note-button"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('consumption_visualizer.release_notes_modal.accessibility.button_go_back'),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
-  }, t('consumption_visualizer.release_notes_modal.go_back'))))));
+    className: "btnPrimary"
+  }, t('consumption_visualizer.release_notes_modal.go_back')))));
 };
 
 var _default = ReleaseNotesModal;
@@ -4727,19 +4660,13 @@ var GrdfConnectModal = function GrdfConnectModal(_ref) {
       onClick: function onClick() {
         return setCurrentStep(StepEnum.CreateAccount);
       },
-      classes: {
-        root: 'btn-profile-back',
-        label: 'text-16-bold'
-      }
+      className: "btnSecondary"
     }, t('auth.button_create_account')),
     rightButton: /*#__PURE__*/_react.default.createElement(_core.Button, {
       onClick: function onClick() {
         return setCurrentStep(StepEnum.GiveConsent);
       },
-      classes: {
-        root: 'btn-profile-next',
-        label: 'text-16-bold'
-      }
+      className: "btnPrimary"
     }, t('auth.button_has_account'))
   }), (0, _defineProperty2.default)(_steps, StepEnum.CreateAccount, {
     content: /*#__PURE__*/_react.default.createElement(_GrdfCreateAccount.default, null),
@@ -4747,27 +4674,18 @@ var GrdfConnectModal = function GrdfConnectModal(_ref) {
       onClick: function onClick() {
         return setCurrentStep(StepEnum.DoYouHaveAccount);
       },
-      classes: {
-        root: 'btn-profile-back',
-        label: 'text-16-bold'
-      }
-    }, "< ".concat(t('auth.button_previous'))),
+      className: "btnSecondary"
+    }, t('auth.button_previous')),
     rightButton: /*#__PURE__*/_react.default.createElement(_core.Button, {
       onClick: handleGoToPartnerSite,
-      classes: {
-        root: 'btn-profile-next',
-        label: 'text-16-bold'
-      }
+      className: "btnPrimary"
     }, t('auth.grdfgrandlyon.button_go_to_partner_site'))
   }), (0, _defineProperty2.default)(_steps, StepEnum.GiveConsent, {
     content: /*#__PURE__*/_react.default.createElement(_GrdfGiveConsent.default, null),
     leftButton: /*#__PURE__*/_react.default.createElement(_core.Button, {
       onClick: handleGiveConsentPrevious,
-      classes: {
-        root: 'btn-profile-back',
-        label: 'text-16-bold'
-      }
-    }, "< ".concat(t('auth.button_previous'))),
+      className: "btnSecondary"
+    }, t('auth.button_previous')),
     rightButton: /*#__PURE__*/_react.default.createElement(_GrdfFormOAuth.default, {
       onSuccess: handleSuccess
     })
@@ -5061,10 +4979,7 @@ var CustomPopupModal = function CustomPopupModal(_ref) {
     }
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-highlight ',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('consumption.partner_issue_modal.ok'))));
 };
 
@@ -5078,7 +4993,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.form {\n  margin: 0 1.3rem 1rem;\n}\n@media only screen and (max-width : 768px) {\n  .form {\n    margin: 0 0 0.25rem;\n  }\n}\n.form .form-info-provider {\n  padding: 0;\n  margin: 0;\n  color: #e0e0e0;\n  text-align: center;\n}\n.form label {\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  color: #e0e0e0;\n  margin-top: 0rem;\n}\n.form .form-input {\n  background: rgba(0, 0, 0, 0.3);\n  border: 1px solid #7b7b7b;\n  border-radius: 4px;\n  color: #e0e0e0;\n  padding: 0 5%;\n  outline-offset: -1px;\n}\n.form .form-input.--error {\n  border: 1px solid #d25959;\n}\n.form .form-input:focus {\n  outline: none;\n  border: 1px solid #e3b82a;\n}\n.form .form-group {\n  display: flex;\n  flex-direction: column;\n  margin: 0.75rem 0 0 0;\n}\n.form .form-group .form-trailing-icon {\n  float: right;\n  position: relative;\n  margin-top: -48px;\n  margin-right: 15px;\n}\n.form .form-control {\n  height: 3rem;\n}\n@media only screen and (max-width : 768px) {\n  .form .form-control {\n    max-width: 100vw;\n  }\n}\n.form .form-message {\n  color: #d25959;\n  min-height: 1.25rem;\n  margin-top: 0.25rem;\n}\n.form button.btn-highlight {\n  margin-top: 0.75rem;\n}\n.form ::placeholder {\n  color: #e0e0e0;\n  opacity: 0.6;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ninput.inputText,\ninput.inputNumber {\n  box-sizing: border-box;\n  border: 1px solid #7b7b7b;\n  background: transparent;\n  transition: all 300ms ease;\n  color: #e0e0e0;\n}\ninput.inputText:focus, input.inputText:focus-visible,\ninput.inputNumber:focus,\ninput.inputNumber:focus-visible {\n  border-color: #e3b82a;\n  outline: none;\n}\n\ninput.inputText {\n  appearance: none;\n  border-radius: 4px;\n  height: 45px;\n  width: 100%;\n  max-width: 280px;\n  padding: 0 0.5rem;\n}\n\ninput.inputNumber {\n  border-radius: 2px;\n  height: 40px;\n  width: 60px;\n  max-width: 5rem;\n  text-align: center;\n}\n\ninput.inputCheckbox {\n  width: 24px;\n  min-width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  cursor: pointer;\n  appearance: none;\n  background: #121212;\n  position: relative;\n  border: solid 1px #7b7b7b;\n}\ninput.inputCheckbox:checked {\n  background: #e3b82a;\n  border-color: #e3b82a;\n}\ninput.inputCheckbox:checked:before, input.inputCheckbox:checked:after {\n  content: \"\";\n  position: absolute;\n  display: inline-block;\n  background: #121212;\n  border-radius: 0.5rem;\n}\ninput.inputCheckbox:checked:before {\n  width: 3px;\n  height: 12px;\n  left: 10px;\n  top: 4px;\n  transform: rotate(41deg);\n}\ninput.inputCheckbox:checked:after {\n  width: 3px;\n  height: 6px;\n  left: 5px;\n  top: 8px;\n  transform: rotate(133deg);\n}\n\nform {\n  margin-top: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\nform .form-info-provider {\n  padding: 0;\n  margin: 0;\n  color: #e0e0e0;\n  text-align: center;\n}\nform label {\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  color: #e0e0e0;\n  margin-top: 0rem;\n}\nform .form-group {\n  display: flex;\n  flex-direction: column;\n}\nform .form-group input {\n  max-width: unset;\n}\nform .form-group input.error {\n  border: 1px solid #d25959;\n}\nform .form-group .form-trailing-icon {\n  float: right;\n  position: relative;\n  margin-top: -48px;\n  margin-right: 15px;\n}\nform .form-message {\n  color: #d25959;\n  min-height: 1.25rem;\n  margin-top: 0.25rem;\n}", ""]);
 
 
 
@@ -5261,17 +5176,11 @@ var EpglConnectModal = function EpglConnectModal(_ref) {
       onClick: function onClick() {
         return setCurrentStep(StepEnum.CreateAccount);
       },
-      classes: {
-        root: 'btn-profile-back',
-        label: 'text-16-bold'
-      }
+      className: "btnSecondary"
     }, t('auth.button_create_account')),
     rightButton: /*#__PURE__*/_react.default.createElement(_core.Button, {
       onClick: handleShowForm,
-      classes: {
-        root: 'btn-profile-next',
-        label: 'text-16-bold'
-      }
+      className: "btnPrimary"
     }, t('auth.button_connect'))
   }), (0, _defineProperty2.default)(_steps, StepEnum.CreateAccount, {
     content: /*#__PURE__*/_react.default.createElement(_EpglCreateAccount.default, null),
@@ -5279,17 +5188,11 @@ var EpglConnectModal = function EpglConnectModal(_ref) {
       onClick: function onClick() {
         return setCurrentStep(StepEnum.DoYouHaveAccount);
       },
-      classes: {
-        root: 'btn-profile-back',
-        label: 'text-16-bold'
-      }
-    }, "< ".concat(t('auth.button_previous'))),
+      className: "btnSecondary"
+    }, t('auth.button_previous')),
     rightButton: /*#__PURE__*/_react.default.createElement(_core.Button, {
       onClick: handleGoToPartnerSite,
-      classes: {
-        root: 'btn-profile-next',
-        label: 'text-16-bold'
-      }
+      className: "btnPrimary"
     }, t('auth.eglgrandlyon.button_go_to_partner_site'))
   }), _steps);
   return /*#__PURE__*/_react.default.createElement(_core.Dialog, {
@@ -5349,7 +5252,7 @@ if(false) {}
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.timestep-selector {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-evenly;\n  align-items: flex-end;\n  margin: auto;\n  max-width: 45.75rem;\n  height: 36px;\n}\n.timestep-selector .btn-today {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #a0a0a0;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n  max-width: 90px;\n  border-radius: 4px;\n  margin-top: 0;\n}\n.timestep-selector .btn-today span:first-child {\n  color: #e0e0e0;\n}\n.timestep-selector .btn-today:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.timestep-selector .timestep-container {\n  width: 100%;\n}\n.timestep-selector .timestep-bar {\n  margin: 0 1rem 0 1.7rem;\n  padding: 0;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  height: 3rem;\n}\n.timestep-selector .timestep-bar.elec-bar {\n  margin-left: 1rem;\n}\n.timestep-selector .timestep-bar .circle {\n  cursor: pointer;\n  position: relative;\n  display: block;\n  width: 8px;\n  height: 8px;\n  border-radius: 100%;\n  text-align: center;\n  background-color: #a0a0a0;\n  z-index: 1;\n  transition: all 300ms ease;\n  margin: 0 2px;\n}\n.timestep-selector .timestep-bar .circle .clickable-area {\n  position: absolute;\n  width: 35px;\n  height: 35px;\n  display: block;\n  left: -14px;\n  top: -15px;\n}\n.timestep-selector .timestep-bar .text {\n  position: relative;\n  display: block;\n  top: 15px;\n  left: -20px;\n  text-align: center;\n  color: #7b7b7b;\n  width: 50px;\n  overflow: visible;\n}\n@media only screen and (max-width: 355px) {\n  .timestep-selector .timestep-bar .text {\n    opacity: 0;\n  }\n}\n.timestep-selector .timestep-bar .bar {\n  width: 100%;\n  position: relative;\n  display: block;\n  background-color: transparent;\n  border-top: 1px dashed #a0a0a0;\n  height: 0;\n  z-index: 0;\n  padding: 0 2px;\n}\n.timestep-selector .timestep-bar .bar:last-of-type {\n  display: none;\n}\n.timestep-selector .timestep-bar .circle.active {\n  background-color: white;\n  width: 10px;\n  height: 10px;\n}\n.timestep-selector .timestep-bar .circle.active .text {\n  opacity: 1;\n  top: 16px;\n  color: white;\n  transition: 300ms ease;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.timestep-selector {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-evenly;\n  align-items: flex-end;\n  margin: auto;\n  max-width: 45.75rem;\n  height: 36px;\n}\n.timestep-selector .btnSecondary {\n  max-width: 90px;\n  border-radius: 4px;\n  margin-top: 0;\n}\n.timestep-selector .timestep-container {\n  width: 100%;\n}\n.timestep-selector .timestep-bar {\n  margin: 0 1rem 0 1.7rem;\n  padding: 0;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  height: 3rem;\n}\n.timestep-selector .timestep-bar.elec-bar {\n  margin-left: 1rem;\n}\n.timestep-selector .timestep-bar .circle {\n  cursor: pointer;\n  position: relative;\n  display: block;\n  width: 8px;\n  height: 8px;\n  border-radius: 100%;\n  text-align: center;\n  background-color: #a0a0a0;\n  z-index: 1;\n  transition: all 300ms ease;\n  margin: 0 2px;\n}\n.timestep-selector .timestep-bar .circle .clickable-area {\n  position: absolute;\n  width: 35px;\n  height: 35px;\n  display: block;\n  left: -14px;\n  top: -15px;\n}\n.timestep-selector .timestep-bar .text {\n  position: relative;\n  display: block;\n  top: 15px;\n  left: -20px;\n  text-align: center;\n  color: #7b7b7b;\n  width: 50px;\n  overflow: visible;\n}\n@media only screen and (max-width: 355px) {\n  .timestep-selector .timestep-bar .text {\n    opacity: 0;\n  }\n}\n.timestep-selector .timestep-bar .bar {\n  width: 100%;\n  position: relative;\n  display: block;\n  background-color: transparent;\n  border-top: 1px dashed #a0a0a0;\n  height: 0;\n  z-index: 0;\n  padding: 0 2px;\n}\n.timestep-selector .timestep-bar .bar:last-of-type {\n  display: none;\n}\n.timestep-selector .timestep-bar .circle.active {\n  background-color: white;\n  width: 10px;\n  height: 10px;\n}\n.timestep-selector .timestep-bar .circle.active .text {\n  opacity: 1;\n  top: 16px;\n  color: white;\n  transition: 300ms ease;\n}", ""]);
 
 
 
@@ -5935,10 +5838,7 @@ var FluidChart = function FluidChart(_ref) {
     }, t('consumption_visualizer.last_valid_data', {
       date: (currentFluidStatus === null || currentFluidStatus === void 0 ? void 0 : (_currentFluidStatus$l = currentFluidStatus.lastDataDate) === null || _currentFluidStatus$l === void 0 ? void 0 : _currentFluidStatus$l.toFormat('dd/MM/yy')) || '-'
     })), /*#__PURE__*/_react.default.createElement("p", null, t('auth.warningOfflineData')), /*#__PURE__*/_react.default.createElement(_core.Button, {
-      classes: {
-        root: 'btn-secondary-negative',
-        label: 'text-16-bold'
-      },
+      className: "btnSecondary",
       onClick: toggleModalConnection
     }, t("auth.".concat((0, _utils.getKonnectorSlug)(fluidType), ".connect"))));
   };
@@ -6318,15 +6218,9 @@ var GrdfBill = function GrdfBill() {
     onClick: function onClick() {
       return dispatch((0, _modal.openConnectionModal)(true));
     },
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('auth.grdfgrandlyon.connect')), currentFluidStatus.firstDataDate && /*#__PURE__*/_react.default.createElement(_Button.default, {
-    classes: {
-      root: 'btn-secondary',
-      label: 'text-16-bold'
-    },
+    className: "btnSecondary",
     onClick: function onClick() {
       return dispatch((0, _chart.setShowOfflineData)(true));
     }
@@ -7091,20 +6985,14 @@ var ConnectionResult = function ConnectionResult(_ref) {
     "aria-label": t('konnector_form.accessibility.button_delete'),
     onClick: fluidType === _enums.FluidType.GAS ? toggleGRDFDeletionModal : deleteAccountsAndTriggers,
     disabled: updating || deleting,
-    classes: {
-      root: 'btn-secondary-positive',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, deleting ? t('konnector_form.loading') : t('konnector_form.button_delete')), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('konnector_form.accessibility.button_update'),
     onClick: consentError ? function () {
       return handleRefreshConsent(fluidType);
     } : updateKonnector,
     disabled: updating || deleting,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, updating && /*#__PURE__*/_react.default.createElement(_Loader.default, {
     color: "black"
   }), !updating && /*#__PURE__*/_react.default.createElement("div", null, consentError ? t('konnector_form.button_oauth_reload') : t('konnector_form.button_update')))), fluidType === _enums.FluidType.GAS && /*#__PURE__*/_react.default.createElement(_DeleteGRDFAccountModal.default, {
@@ -7403,10 +7291,7 @@ var GrdfFormOAuth = function GrdfFormOAuth(_ref) {
     "aria-label": t('auth.accessibility.button_connect'),
     onClick: startOAuth,
     disabled: isWaiting,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, isWaiting ? t('auth.connect_oauth.loading') : t('auth.button_validate')), isWaiting && /*#__PURE__*/_react.default.createElement(_OAuthWindow.OAuthWindow, {
     client: client,
     konnector: konnector,
@@ -7533,7 +7418,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.expired-consent-modal .icon-main {\n  display: flex;\n}\n.expired-consent-modal .icon-main svg {\n  margin: auto;\n}\n.expired-consent-modal .title {\n  text-align: center;\n}\n.expired-consent-modal .title.electricity {\n  color: #d87b39;\n}\n.expired-consent-modal .title.gas {\n  color: #45d1b8;\n}\n.expired-consent-modal .text1 {\n  color: #e0e0e0;\n  margin: 1rem 0;\n}\n.expired-consent-modal .buttons {\n  display: flex;\n}\n.expired-consent-modal .buttons button.btn-secondary-positive {\n  margin-right: 1rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.expired-consent-modal {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  color: #e0e0e0;\n}\n.expired-consent-modal .icon-main {\n  display: flex;\n}\n.expired-consent-modal .icon-main svg {\n  margin: auto;\n}\n.expired-consent-modal .title {\n  text-align: center;\n}\n.expired-consent-modal .title.electricity {\n  color: #d87b39;\n}\n.expired-consent-modal .title.gas {\n  color: #45d1b8;\n}\n.expired-consent-modal .buttons {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}", ""]);
 
 
 
@@ -7603,15 +7488,9 @@ var EpglBill = function EpglBill() {
     onClick: function onClick() {
       return dispatch((0, _modal.openConnectionModal)(true));
     },
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('auth.eglgrandlyon.connect')), currentFluidStatus.firstDataDate && /*#__PURE__*/_react.default.createElement(_Button.default, {
-    classes: {
-      root: 'btn-secondary',
-      label: 'text-16-bold'
-    },
+    className: "btnSecondary",
     onClick: function onClick() {
       return dispatch((0, _chart.setShowOfflineData)(true));
     }
@@ -7650,7 +7529,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.delete-grdf-modal .icon-main {\n  display: flex;\n}\n.delete-grdf-modal .icon-main svg {\n  margin: auto;\n}\n.delete-grdf-modal .text1 {\n  margin-top: 1rem;\n}\n.delete-grdf-modal .text2 {\n  color: #e0e0e0;\n  margin: 1rem 0;\n}\n.delete-grdf-modal .text3 {\n  margin-bottom: 1rem;\n}\n.delete-grdf-modal .buttons {\n  display: flex;\n}\n.delete-grdf-modal .buttons button.btn-secondary-positive {\n  margin-right: 1rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.delete-grdf-modal .icon-main {\n  display: flex;\n}\n.delete-grdf-modal .icon-main svg {\n  margin: auto;\n}\n.delete-grdf-modal .text1 {\n  margin-top: 1rem;\n}\n.delete-grdf-modal .text2 {\n  color: #e0e0e0;\n  margin: 1rem 0;\n}\n.delete-grdf-modal .text3 {\n  margin-bottom: 1rem;\n}\n.delete-grdf-modal .buttons {\n  display: flex;\n  gap: 1rem;\n}", ""]);
 
 
 
@@ -7777,7 +7656,7 @@ if(false) {}
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.partnerIssueModal {\n  padding: 1rem;\n  max-width: 20rem;\n  text-align: center;\n}\n.partnerIssueModal .warn-icon {\n  margin: 1rem auto;\n  display: block;\n}\n.partnerIssueModal .partner-issue-title {\n  color: #ec9d41;\n  margin: 1rem auto;\n  text-align: center;\n}\n.partnerIssueModal .partner-issue-content {\n  color: #e0e0e0;\n  font-weight: bold;\n}\n.partnerIssueModal .partner-issue-content span.gaz {\n  color: #45d1b8;\n}\n.partnerIssueModal .partner-issue-content span.elec {\n  color: #d87b39;\n}\n.partnerIssueModal .partner-issue-content span.water {\n  color: #3a98ec;\n}\n.partnerIssueModal button.btn-highlight {\n  padding: 0.65rem;\n}\n\n.partner-issue-portal .modal-overlay .modal-box {\n  max-width: 21rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.partnerIssueModal {\n  padding: 1rem;\n  max-width: 20rem;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.partnerIssueModal .warn-icon {\n  margin: 0 auto;\n}\n.partnerIssueModal .partner-issue-title {\n  color: #ec9d41;\n  text-align: center;\n}\n.partnerIssueModal .partner-issue-content {\n  color: #e0e0e0;\n  font-weight: bold;\n}\n.partnerIssueModal .partner-issue-content span.gaz {\n  color: #45d1b8;\n}\n.partnerIssueModal .partner-issue-content span.elec {\n  color: #d87b39;\n}\n.partnerIssueModal .partner-issue-content span.water {\n  color: #3a98ec;\n}\n\n.partner-issue-portal .modal-overlay .modal-box {\n  max-width: 21rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
 
 
 
diff --git a/4/ecolyo.ed87413fc9f81039a5c7.js b/4/ecolyo.e44f681829f74b9ff80d.js
similarity index 88%
rename from 4/ecolyo.ed87413fc9f81039a5c7.js
rename to 4/ecolyo.e44f681829f74b9ff80d.js
index ff1a10791d10deabe62984bd8f022762195a8631..3d7ee0f94679d9fedb2ee53bcad9e71750de073e 100644
--- a/4/ecolyo.ed87413fc9f81039a5c7.js
+++ b/4/ecolyo.e44f681829f74b9ff80d.js
@@ -94,7 +94,7 @@ if(false) {}
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-reinit-modal {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  align-items: center;\n  color: #e0e0e0;\n}\n.eg-reinit-modal .title {\n  text-align: center;\n  color: #ffffff;\n}\n.eg-reinit-modal .warn-title {\n  color: #ec9d41;\n  margin: 0 0.3rem;\n}\n.eg-reinit-modal .buttons-container {\n  display: flex;\n  gap: 1rem;\n  width: 100%;\n}\n.eg-reinit-modal .buttons-container button {\n  margin: 0;\n  min-height: 45px;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-reinit-modal {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  align-items: center;\n  color: #e0e0e0;\n}\n.eg-reinit-modal .title {\n  text-align: center;\n  color: #ffffff;\n}\n.eg-reinit-modal .warn-title {\n  color: #ec9d41;\n  margin: 0 0.3rem;\n}\n.eg-reinit-modal .buttons-container {\n  display: flex;\n  gap: 1rem;\n  width: 100%;\n}", ""]);
 
 
 
@@ -831,18 +831,11 @@ var EcogestureReinitModal = function EcogestureReinitModal(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture.reinitModal.btn1'),
     onClick: handleCloseClick,
-    className: "btn1",
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-bold'
-    }
+    className: "btnSecondary"
   }, t('ecogesture.reinitModal.btn1')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture.reinitModal.btn2'),
     onClick: handleLaunchReinit,
-    classes: {
-      root: 'btn-profile-next rounded',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('ecogesture.reinitModal.btn2')))));
 };
 
@@ -856,7 +849,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-init-modal {\n  color: #e0e0e0;\n  margin: 1rem 0;\n}\n.eg-init-modal .title {\n  text-align: center;\n  color: #e3b82a;\n}\n.eg-init-modal .text {\n  margin: 1rem 0;\n}\n.eg-init-modal .buttons-container {\n  display: flex;\n  gap: 1rem;\n}\n.eg-init-modal .buttons-container button {\n  margin: 0;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-init-modal {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.eg-init-modal .title {\n  text-align: center;\n  color: #e3b82a;\n}\n.eg-init-modal .buttons-container {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}", ""]);
 
 
 
@@ -975,32 +968,18 @@ var EcogestureList = function EcogestureList(_ref) {
   };
 
   var selectFilters = function selectFilters() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "filters text-16-normal"
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "filter-button",
-      onClick: function onClick() {
-        return toggleDropDown();
-      },
-      tabIndex: 0,
-      onBlur: function onBlur(e) {
-        if (e.relatedTarget === null) toggleDropDown();
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-      classes: {
-        root: 'btn-secondary-negative',
-        label: 'text-14-normal'
-      },
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      className: "btnSecondary btnFilter",
       "aria-controls": "simple-menu",
       "aria-haspopup": "true",
       "aria-label": t("ecogesture.MENU_TITLE"),
       onClick: toggleMenu,
-      variant: "contained"
+      size: "small"
     }, /*#__PURE__*/_react.default.createElement(_StyledIcon.default, {
       icon: _sort.default,
       size: 20
     }), /*#__PURE__*/_react.default.createElement("span", {
-      className: openDropDown ? 'ecogestures opened' : 'ecogestures'
+      className: openDropDown ? 'opened' : ''
     }, ecogestureFilter === _enums.Usage.ALL ? t("ecogesture.MENU_TITLE") : t("ecogesture.".concat(_enums.Usage[ecogestureFilter])))), /*#__PURE__*/_react.default.createElement(_core.Menu, {
       anchorEl: anchorEl,
       keepMounted: true,
@@ -1034,7 +1013,7 @@ var EcogestureList = function EcogestureList(_ref) {
         icon: _check.default,
         size: 13
       })));
-    }))));
+    })));
   };
 
   var continueSelection = function continueSelection() {
@@ -1042,12 +1021,9 @@ var EcogestureList = function EcogestureList(_ref) {
       in: displaySelection
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "selection text-16-normal"
-    }, /*#__PURE__*/_react.default.createElement("span", null, t('ecogesture.selection')), /*#__PURE__*/_react.default.createElement("span", null, "(".concat(selectionViewed, " ").concat(t('ecogesture.selection_2'), " ").concat(selectionTotal, ")")), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, t('ecogesture.selection')), /*#__PURE__*/_react.default.createElement("div", null, "(".concat(selectionViewed, " ").concat(t('ecogesture.selection_2'), " ").concat(selectionTotal, ")"))), /*#__PURE__*/_react.default.createElement(_Button.default, {
       "aria-label": t('ecogesture.accessibility.button_selection'),
-      classes: {
-        root: 'btn-highlight',
-        label: 'text-16-bold'
-      },
+      className: "btnPrimary",
       onClick: function onClick() {
         return navigate('/ecogesture-selection');
       }
@@ -1062,10 +1038,7 @@ var EcogestureList = function EcogestureList(_ref) {
     className: "ecogesture-content"
   }, renderEcogestureContent(), !displaySelection && handleReinitClick && /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: handleReinitClick,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('ecogesture.reinit'))));
 };
 
@@ -1124,36 +1097,27 @@ var EcogestureEmptyList = function EcogestureEmptyList(_ref) {
     icon: isObjective ? _objectiveEnabled.default : _doingEnabled.default,
     size: 150
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-normal text"
+    className: "text-16-normal"
   }, t("ecogesture.emptyList.".concat(objOrDoing, "1").concat(isDone))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-normal text"
+    className: "text-16-normal"
   }, t("ecogesture.emptyList.".concat(objOrDoing, "2").concat(isDone))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "btn-container"
+    className: "buttons"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('ecogesture.emptyList.btn1'),
     onClick: function onClick() {
       return setTab(2);
     },
-    classes: {
-      root: 'btn-secondary-negative btn1',
-      label: 'text-16-bold'
-    }
+    className: "btnSecondary"
   }, t('ecogesture.emptyList.btn1')), isSelectionDone && /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('ecogesture.reinit'),
     onClick: handleReinitClick,
-    classes: {
-      root: 'reinit-button btn-profile-next rounded',
-      label: 'text-16-bold'
-    }
+    className: "btnSecondary"
   }, t('ecogesture.reinit')), !isSelectionDone && /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('ecogesture.emptyList.btn2'),
     onClick: function onClick() {
       navigate('/ecogesture-form');
     },
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('ecogesture.emptyList.btn2')))));
 };
 
@@ -1167,7 +1131,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.ec-empty-container {\n  margin-top: 6rem;\n}\n.ec-empty-container .ec-empty-content {\n  color: #e0e0e0;\n  text-align: center;\n  padding: 0 1.5rem;\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n  align-items: center;\n  margin: 0 auto;\n}\n@media (min-width: 576px) {\n  .ec-empty-container .ec-empty-content {\n    max-width: 45%;\n  }\n}\n@media (min-width: 1200px) {\n  .ec-empty-container .ec-empty-content {\n    max-width: 35%;\n  }\n}\n.ec-empty-container .ec-empty-content .btn-container {\n  margin-top: 1rem;\n  display: flex;\n  gap: 1rem;\n}\n.ec-empty-container .ec-empty-content .btn-container button {\n  margin: 0;\n}\n.ec-empty-container .ec-empty-content .reinit-button {\n  margin-left: 15px;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.ec-empty-container {\n  margin-top: 6rem;\n}\n.ec-empty-container .ec-empty-content {\n  color: #e0e0e0;\n  text-align: center;\n  padding: 0 1.5rem;\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n  align-items: center;\n  margin: 0 auto;\n}\n@media (min-width: 576px) {\n  .ec-empty-container .ec-empty-content {\n    max-width: 45%;\n  }\n}\n@media (min-width: 1200px) {\n  .ec-empty-container .ec-empty-content {\n    max-width: 35%;\n  }\n}\n.ec-empty-container .ec-empty-content .buttons {\n  display: flex;\n  gap: 1rem;\n  flex-direction: column;\n  width: 100%;\n}", ""]);
 
 
 
@@ -1285,25 +1249,19 @@ var EcogestureInitModal = function EcogestureInitModal(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "title text-20-bold"
   }, t('ecogesture.initModal.title')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-normal text"
+    className: "text-16-normal"
   }, t('ecogesture.initModal.text1')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-normal text"
+    className: "text-16-normal"
   }, t('ecogesture.initModal.text2')), /*#__PURE__*/_react.default.createElement("div", {
     className: "buttons-container"
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture.initModal.btn1'),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-bold'
-    }
+    className: "btnSecondary"
   }, t('ecogesture.initModal.btn1')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture.initModal.btn2'),
     onClick: handleLaunchForm,
-    classes: {
-      root: 'btn-profile-next rounded',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('ecogesture.initModal.btn2')))));
 };
 
@@ -1317,7 +1275,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.ecogesture-root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 1rem 1.5rem 2.5rem 1.5rem;\n  gap: 1rem;\n}\n.ecogesture-root .efficiency-button-content {\n  max-width: 52rem;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.ecogesture-root .efficiency-button-content .selection {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  color: white;\n  text-align: center;\n}\n.ecogesture-root .efficiency-button-content .selection button.btn-highlight {\n  padding: 0.625rem;\n}\n.ecogesture-root .efficiency-button-content .filters {\n  display: flex;\n  align-items: center;\n  height: 50px;\n  color: white;\n  position: relative;\n}\n.ecogesture-root .efficiency-button-content .filters .filter {\n  height: 45px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n}\n.ecogesture-root .efficiency-button-content .filters .filter svg {\n  margin-right: 1rem;\n}\n.ecogesture-root .efficiency-button-content .filters .filter .checkicon {\n  opacity: 0;\n  margin-left: auto;\n  transition: all 300ms ease;\n}\n.ecogesture-root .efficiency-button-content .filters .filter .checkicon.active {\n  opacity: 1;\n}\n.ecogesture-root .efficiency-button-content .filters .ecogestures {\n  font-size: 0.95rem;\n  text-transform: initial;\n  padding-left: 0.5rem;\n}\n.ecogesture-root .efficiency-button-content .filters .ecogestures.opened {\n  color: #e3b82a;\n}\n.ecogesture-root .efficiency-button-content .filters .filter-button {\n  display: flex;\n}\n.ecogesture-root .efficiency-button-content .filters .filter-button .button.btn-secondary-negative {\n  margin: auto;\n  display: flex;\n  align-items: center;\n}\n.ecogesture-root .efficiency-button-content .filters .filter-button .button.btn-secondary-negative span {\n  display: inline-flex;\n  margin-bottom: 0;\n  transition: all 300ms ease;\n}\n.ecogesture-root .efficiency-button-content .filters .filter-button .button.btn-secondary-negative svg {\n  margin-right: 1rem;\n  margin-left: -0.5rem;\n}\n.ecogesture-root .efficiency-button-content button.btn-secondary-negative {\n  margin: 0;\n  padding: 0.3rem 0.5rem;\n  min-width: 11rem;\n  height: 2.25rem;\n  justify-content: left;\n}\n.ecogesture-root .efficiency-button-content button.btn-secondary-negative.btn-info {\n  margin: 0 0 0 1rem;\n  padding: 0;\n  width: 2.25rem;\n  min-width: 2.25rem;\n  justify-content: center;\n}\n.ecogesture-root .ecogesture-content {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 53rem;\n  animation: appear 600ms ease;\n  width: 100%;\n  gap: 1rem;\n}\n@media only screen and (max-width : 1023px) {\n  .ecogesture-root .ecogesture-content {\n    gap: 0.5rem;\n  }\n}\n@keyframes appear {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ecogesture-root .ecogesture-content .ecogesture-content-loading {\n  height: 80vh;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  color: #e0e0e0;\n}\n.ecogesture-root .ecogesture-content .ecogesture-list-item {\n  box-sizing: border-box;\n  height: 8rem;\n  animation: appear 600ms ease;\n  display: flex;\n  flex: 1;\n  flex-basis: 45%;\n  max-width: 48%;\n}\n.ecogesture-root .ecogesture-content .ecogesture-list-item > button {\n  height: 100%;\n  overflow: hidden;\n  animation: appear 600ms ease;\n}\n.ecogesture-root .ec-filter-error {\n  color: #e0e0e0;\n  text-align: center;\n  margin-top: 2rem;\n}\n.ecogesture-root .ec-filter-error div:first-child {\n  margin-bottom: 1rem;\n}\n\ndiv.filter-menu {\n  margin-top: 3.5rem;\n  margin-left: -0.5rem;\n  color: white;\n  background: linear-gradient(0deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09)), linear-gradient(180deg, #323339 0%, #25262b 100%);\n  border: 1px solid #a0a0a0;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  z-index: 3;\n  width: 220px;\n  padding: 0.5rem 0rem;\n  font-size: 0.875rem;\n  left: 0;\n  transition: all 300ms ease;\n}\ndiv.filter-menu.opened {\n  display: block;\n}\ndiv.filter-menu .filter {\n  padding: 0 1rem;\n}\ndiv.filter-menu .filter.filter-active {\n  background: rgba(160, 160, 160, 0.2);\n}\n\n.filter-menu-list li {\n  color: #ffffff;\n  text-transform: initial;\n  font-family: Lato, sans-serif;\n}\n.filter-menu-list li.item-active {\n  font-weight: 700;\n}\n\n.filter-menu-icon {\n  margin-left: auto;\n  min-width: 0;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.ecogesture-root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 1rem 1.5rem 2.5rem 1.5rem;\n  gap: 1rem;\n}\n.ecogesture-root .efficiency-button-content {\n  max-width: 52rem;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.ecogesture-root .efficiency-button-content .selection {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: 1rem;\n  color: white;\n  text-align: center;\n}\n.ecogesture-root .efficiency-button-content .btnFilter {\n  max-width: 12rem;\n  justify-content: flex-start;\n}\n.ecogesture-root .efficiency-button-content .btnFilter span {\n  padding-left: 0.5rem;\n}\n.ecogesture-root .efficiency-button-content .btnFilter span.opened {\n  color: #e3b82a;\n}\n.ecogesture-root .ecogesture-content {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 53rem;\n  animation: appear 600ms ease;\n  width: 100%;\n  gap: 1rem;\n}\n@keyframes appear {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ecogesture-root .ecogesture-content .ecogesture-content-loading {\n  height: 80vh;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  color: #e0e0e0;\n}\n.ecogesture-root .ecogesture-content .ecogesture-list-item {\n  box-sizing: border-box;\n  height: 8rem;\n  animation: appear 600ms ease;\n  display: flex;\n  flex: 1;\n  flex-basis: 45%;\n  max-width: 48%;\n}\n.ecogesture-root .ecogesture-content .ecogesture-list-item > button {\n  height: 100%;\n  overflow: hidden;\n  animation: appear 600ms ease;\n}\n.ecogesture-root .ec-filter-error {\n  color: #e0e0e0;\n  text-align: center;\n  margin-top: 2rem;\n}\n.ecogesture-root .ec-filter-error div:first-child {\n  margin-bottom: 1rem;\n}\n\ndiv.filter-menu {\n  margin-top: 3.5rem;\n  margin-left: -0.5rem;\n  color: white;\n  background: linear-gradient(0deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09)), linear-gradient(180deg, #323339 0%, #25262b 100%);\n  border: 1px solid #a0a0a0;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  z-index: 3;\n  width: 220px;\n  padding: 0.5rem 0rem;\n  font-size: 0.875rem;\n  left: 0;\n  transition: all 300ms ease;\n}\ndiv.filter-menu.opened {\n  display: block;\n}\ndiv.filter-menu .filter {\n  padding: 0 1rem;\n}\ndiv.filter-menu .filter.filter-active {\n  background: rgba(160, 160, 160, 0.2);\n}\n\n.filter-menu-list li {\n  color: #ffffff;\n  text-transform: initial;\n  font-family: Lato, sans-serif;\n}\n.filter-menu-list li.item-active {\n  font-weight: 700;\n}\n\n.filter-menu-icon {\n  margin-left: auto;\n  min-width: 0;\n}", ""]);
 
 
 
diff --git a/5/ecolyo.d5601eac9d2424eaf101.js b/5/ecolyo.e91ba98547f78b53dac8.js
similarity index 92%
rename from 5/ecolyo.d5601eac9d2424eaf101.js
rename to 5/ecolyo.e91ba98547f78b53dac8.js
index ac38702fe34678b787f039f2caf70bf446aa768d..762781e925db0996b711edff2134014de1f16f13 100644
--- a/5/ecolyo.d5601eac9d2424eaf101.js
+++ b/5/ecolyo.e91ba98547f78b53dac8.js
@@ -42,7 +42,7 @@ exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ndiv.expansion-panel-root,\ndiv.expansion-panel-root.Mui-expanded:last-child {\n  margin: 0.2rem 0;\n}\n\n.export-option-root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  margin-top: 0.5rem;\n  padding: 0 1.5rem;\n}\n\n.export-option-content {\n  width: 45.75rem;\n}\n@media only screen and (max-width : 768px) {\n  .export-option-content {\n    width: 100%;\n  }\n}\n.export-option-content .MuiAccordionSummary-content {\n  margin: 0;\n}\n.export-option-content .MuiIconButton-edgeEnd {\n  margin: 0;\n}\n.export-option-content .accordion-title {\n  color: #ffffff;\n}\n.export-option-content .expansion-panel-details {\n  flex-direction: column;\n}\n.export-option-content .expansion-panel-details .content {\n  padding-bottom: 16px;\n}\n.export-option-content .expansion-panel-details .intro {\n  color: #a0a0a0;\n}\n.export-option-content .expansion-panel-details .btn-secondary-negative {\n  border-color: #e0e0e0 !important;\n  height: 40px;\n}\n.export-option-content .expansion-panel-details .checkbox {\n  margin: 0;\n}\n.export-option-content .expansion-panel-details .checkbox input {\n  margin: 0.5rem;\n  border: 1px solid #a0a0a0;\n  border-radius: 2px;\n}\n.export-option-content .expansion-panel-details .answer-checked input:before,\n.export-option-content .expansion-panel-details .answer-checked input:after {\n  background: black;\n}\n.export-option-content .expansion-panel-details .answer-checked input {\n  background: #e3b82a;\n  border: 2px solid #e3b82a;\n}\n.export-option-content .expansion-panel-details .answer-checked input:before {\n  height: 13px;\n  left: 11px;\n  top: 3px;\n}\n.export-option-content .expansion-panel-details .answer-checked input:after {\n  height: 9px;\n  left: 4px;\n}\n.export-option-content div.expansion-panel-summary {\n  padding: 0 0.25rem 0 1rem;\n}\n.export-option-content div.expansion-panel-summary .expansion-panel-content {\n  gap: 1rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ndiv.expansion-panel-root,\ndiv.expansion-panel-root.Mui-expanded:last-child {\n  margin: 0.2rem 0;\n}\n\n.export-option-root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  margin-top: 0.5rem;\n  padding: 0 1.5rem;\n}\n.export-option-root .export-option-content {\n  width: 45.75rem;\n}\n@media only screen and (max-width : 768px) {\n  .export-option-root .export-option-content {\n    width: 100%;\n  }\n}\n.export-option-root .export-option-content .MuiAccordionSummary-content {\n  margin: 0;\n}\n.export-option-root .export-option-content .MuiIconButton-edgeEnd {\n  margin: 0;\n}\n.export-option-root .export-option-content .accordion-title {\n  color: #ffffff;\n}\n.export-option-root .export-option-content .expansion-panel-summary {\n  padding: 0 0.25rem 0 1rem;\n}\n.export-option-root .export-option-content .expansion-panel-summary .expansion-panel-content {\n  gap: 1rem;\n}\n.export-option-root .export-option-content .expansion-panel-details {\n  flex-direction: column;\n  gap: 1rem;\n}\n.export-option-root .export-option-content .expansion-panel-details .grey {\n  color: #a0a0a0;\n}\n.export-option-root .export-option-content .expansion-panel-details label {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n}", ""]);
 
 
 
@@ -53,7 +53,7 @@ exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.modal-loading-root .content {\n  text-align: center;\n  padding-top: 2rem;\n}\n.modal-loading-root .content .text {\n  color: #e0e0e0;\n}\n.modal-loading-root .content .text1 {\n  margin: 2rem 0;\n  color: #e3b82a;\n}\n.modal-loading-root .content button {\n  height: 40px;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.modal-loading-root .content {\n  text-align: center;\n  padding-top: 2rem;\n  color: #e0e0e0;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.modal-loading-root .content .subtitle {\n  margin: 1rem 0;\n  color: #e3b82a;\n}\n.modal-loading-root .content button {\n  height: 40px;\n}", ""]);
 
 
 
@@ -133,6 +133,7 @@ var ReportOptions = function ReportOptions() {
       sendConsumptionAlert: value
     }));
   }, [dispatch]);
+  var isWaterConnected = fluidStatus[_enums.FluidType.WATER].status !== _enums.FluidState.NOT_CONNECTED && fluidStatus[_enums.FluidType.WATER].status !== _enums.FluidState.KONNECTOR_NOT_FOUND && fluidStatus[_enums.FluidType.WATER].status !== _enums.FluidState.ERROR_LOGIN_FAILED;
 
   var setWaterLimit = function setWaterLimit(e) {
     if (e.target.value !== null && parseInt(e.target.value) > 0) {
@@ -220,13 +221,14 @@ var ReportOptions = function ReportOptions() {
     },
     variant: "contained",
     classes: {
-      root: 'btn-highlight',
+      root: 'btnPrimary',
       label: 'text-18-bold'
-    },
-    type: "submit"
-  }, profile.sendAnalysisNotification ? t('profile.report.deactivate') : t('profile.report.activate')))), fluidStatus[_enums.FluidType.WATER].status !== _enums.FluidState.NOT_CONNECTED && fluidStatus[_enums.FluidType.WATER].status !== _enums.FluidState.KONNECTOR_NOT_FOUND && fluidStatus[_enums.FluidType.WATER].status !== _enums.FluidState.ERROR_LOGIN_FAILED && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    }
+  }, profile.sendAnalysisNotification ? t('profile.report.deactivate') : t('profile.report.activate')))), isWaterConnected && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "head text-16-normal-uppercase"
   }, t('profile.report.title_alert')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "waterAlert"
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "switch-container-alert"
   }, /*#__PURE__*/_react.default.createElement(_StyledSwitch.default, {
     checked: profile.sendConsumptionAlert,
@@ -235,17 +237,13 @@ var ReportOptions = function ReportOptions() {
       'aria-label': t('profile.accessibility.button_toggle_consumption_alert')
     }
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "switch-label text-16-normal"
-  }, t('profile.report.switch_label_alert')))), profile.sendConsumptionAlert && /*#__PURE__*/_react.default.createElement("div", {
-    className: "alert-inputs-display"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "alert-input-row"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "head text-16-normal"
+    className: "text-16-normal"
+  }, t('profile.report.switch_label_alert'))), profile.sendConsumptionAlert && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-16-normal"
   }, t('profile.report.input_label_alert')), /*#__PURE__*/_react.default.createElement("div", {
     className: "switch-container-alert"
   }, /*#__PURE__*/_react.default.createElement("input", {
-    className: "input-style",
+    className: "inputNumber text-18",
     type: "number",
     defaultValue: profile.waterDailyConsumptionLimit === 0 ? '' : profile.waterDailyConsumptionLimit,
     onBlur: setWaterLimit,
@@ -253,9 +251,9 @@ var ReportOptions = function ReportOptions() {
     inputMode: "numeric"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "switch-label text-16-normal"
-  }, "L"))), maxDayData && /*#__PURE__*/_react.default.createElement("div", {
-    className: "alert-input-subtext"
-  }, t('profile.report.input_label_subtext_alert'), Math.round(maxDayData.value), ' L'))));
+  }, "L")), maxDayData && /*#__PURE__*/_react.default.createElement("div", {
+    className: "alert-input-subtext text-14"
+  }, t('profile.report.input_label_subtext_alert'), Math.round(maxDayData.value), ' L'))))));
 };
 
 var _default = ReportOptions;
@@ -329,27 +327,17 @@ var ExportStartModal = function ExportStartModal(_ref) {
     icon: _download.default,
     size: 48
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-bold text text1"
-  }, t('export.modal_start.text1')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-normal text"
-  }, t('export.modal_start.text2'), /*#__PURE__*/_react.default.createElement("br", null), t('export.modal_start.text3')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-16-bold subtitle"
+  }, t('export.modal_start.text1')), /*#__PURE__*/_react.default.createElement("div", null, t('export.modal_start.text2'), /*#__PURE__*/_react.default.createElement("br", null), t('export.modal_start.text3')), /*#__PURE__*/_react.default.createElement("div", {
     className: "buttons"
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('export.modal_start.button_cancel'),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-bold'
-    },
-    type: "submit"
+    className: "btnSecondary"
   }, t('export.modal_start.button_cancel')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('export.button_download'),
     onClick: handleDownloadClick,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    },
-    type: "submit"
+    className: "btnPrimary"
   }, t('export.button_download'))))));
 };
 
@@ -373,8 +361,6 @@ exports.default = void 0;
 
 var _regenerator = _interopRequireDefault(__webpack_require__("o0o1"));
 
-var _defineProperty2 = _interopRequireDefault(__webpack_require__("lSNA"));
-
 var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("yXPU"));
 
 var _toConsumableArray2 = _interopRequireDefault(__webpack_require__("RIqP"));
@@ -387,8 +373,6 @@ var _chevronDown = _interopRequireDefault(__webpack_require__("CYAo"));
 
 var _export = _interopRequireDefault(__webpack_require__("l5xD"));
 
-var _classnames = _interopRequireDefault(__webpack_require__("TSYQ"));
-
 var _cozyClient = __webpack_require__("SH7X");
 
 var _I18n = __webpack_require__("buk/");
@@ -523,10 +507,10 @@ var ExportData = function ExportData() {
   var fluidCheckbox = function fluidCheckbox() {
     return exportableFluids.map(function (fluidType, key) {
       return /*#__PURE__*/_react.default.createElement("label", {
-        key: key,
-        className: (0, _classnames.default)('checkbox', (0, _defineProperty2.default)({}, 'answer-checked', answer.includes(fluidType)))
+        key: key
       }, /*#__PURE__*/_react.default.createElement("input", {
         type: "checkbox",
+        className: "inputCheckbox",
         value: fluidType,
         name: t("FLUID.".concat(_enums.FluidType[fluidType], ".LABEL")),
         onChange: function onChange() {
@@ -578,21 +562,17 @@ var ExportData = function ExportData() {
       root: 'expansion-panel-details'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-15-normal content intro"
+    className: "text-15-normal grey"
   }, t('export.text1')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-bold content"
+    className: "text-16-bold"
   }, t('export.fluid_select')), exportableFluids.length === 0 ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-15-normal content intro"
+    className: "text-15-normal grey"
   }, t('export.no_data')) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fluidCheckbox(), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('unsubscribe.button_accessibility'),
     onClick: function onClick() {
       return setIsExportStartModal(true);
     },
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    },
-    type: "submit",
+    className: "btnSecondary",
     disabled: answer.length === 0
   }, t('export.button_download'))))))), /*#__PURE__*/_react.default.createElement(_exportStartModal.default, {
     open: isExportStartModal,
@@ -910,16 +890,11 @@ var ProfileTypeOptions = function ProfileTypeOptions() {
     className: "label"
   }, t('profile_type.cooking_fluid.title')), /*#__PURE__*/_react.default.createElement("div", {
     className: "value"
-  }, t("FLUID.".concat(Object.values(_enums.FluidType)[profileType.cookingFluid], ".LABEL")))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "inline-buttons"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, t("FLUID.".concat(Object.values(_enums.FluidType)[profileType.cookingFluid], ".LABEL")))), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('profile_type.accessibility.button_update_profile'),
     onClick: goToForm,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
-  }, t('profile_type.button_update_profile')))))), !profile.isProfileTypeCompleted && /*#__PURE__*/_react.default.createElement(_StyledCard.default, {
+    className: "btnSecondary"
+  }, t('profile_type.button_update_profile'))))), !profile.isProfileTypeCompleted && /*#__PURE__*/_react.default.createElement(_StyledCard.default, {
     onClick: goToForm,
     className: "profile-link"
   }, /*#__PURE__*/_react.default.createElement(_StyledIcon.default, {
@@ -963,7 +938,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.modal-start-root .content {\n  text-align: center;\n  padding-top: 2rem;\n}\n.modal-start-root .content .text {\n  margin: 2rem 0 0;\n  color: #e0e0e0;\n}\n.modal-start-root .content .text1 {\n  color: #e3b82a;\n}\n.modal-start-root .content .buttons {\n  margin-top: 2rem;\n  display: flex;\n  gap: 1rem;\n}\n.modal-start-root .content .buttons button {\n  margin: 0;\n  height: 40px;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.modal-start-root .content {\n  text-align: center;\n  padding-top: 2rem;\n  color: #e0e0e0;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.modal-start-root .content .subtitle {\n  color: #e3b82a;\n}\n.modal-start-root .content .buttons {\n  display: flex;\n  gap: 1rem;\n}", ""]);
 
 
 
@@ -1103,7 +1078,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.modal-done-root .content {\n  text-align: center;\n  padding-top: 2rem;\n}\n.modal-done-root .content .text {\n  margin: 2rem 0 0;\n  color: #e0e0e0;\n}\n.modal-done-root .content .text1 {\n  margin-bottom: 2rem;\n  color: #e3b82a;\n}\n.modal-done-root .content .error1 {\n  color: #d25959;\n}\n.modal-done-root .content button {\n  height: 40px;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.modal-done-root .content {\n  text-align: center;\n  padding-top: 2rem;\n  color: #e0e0e0;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.modal-done-root .content .subtitle {\n  color: #e3b82a;\n}\n.modal-done-root .content .error1 {\n  color: #d25959;\n}", ""]);
 
 
 
@@ -1638,21 +1613,15 @@ var ExportDoneModal = function ExportDoneModal(_ref) {
     icon: error ? _warnCross.default : _exportDone.default,
     size: 44
   })), !error && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-bold text text1"
-  }, t('export.modal_done.text1')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-normal text"
-  }, t('export.modal_done.text2'))), error && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-20-bold text error1"
+    className: "text-16-bold subtitle"
+  }, t('export.modal_done.text1')), /*#__PURE__*/_react.default.createElement("div", null, t('export.modal_done.text2'))), error && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-20-bold error1"
   }, t('export.modal_done.error1')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-bold text"
+    className: "text-16-bold"
   }, t('export.modal_done.error2'))), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('export.modal_done.button_close'),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    },
-    type: "submit"
+    className: "btnPrimary"
   }, error ? t('export.modal_done.button_close_error') : t('export.modal_done.button_close')))));
 };
 
@@ -2180,17 +2149,11 @@ var ExportLoadingModal = function ExportLoadingModal(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Loader.default, {
     color: "gold"
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-bold text text1"
-  }, t('export.modal_loading.text1')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-16-normal text"
-  }, t('export.modal_loading.text2')), /*#__PURE__*/_react.default.createElement(_core.Button, {
+    className: "text-16-bold subtitle"
+  }, t('export.modal_loading.text1')), /*#__PURE__*/_react.default.createElement("div", null, t('export.modal_loading.text2')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('export.modal_loading.button_cancel'),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-bold'
-    },
-    type: "submit"
+    className: "btnSecondary"
   }, t('export.modal_loading.button_cancel')))));
 };
 
@@ -2353,7 +2316,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.profile-type-root {\n  margin-top: 1.5rem;\n  padding: 0 1.5rem;\n}\n.profile-type-root .profile-type-content {\n  margin: 0 auto;\n  width: 100%;\n}\n@media (min-width: 768px) {\n  .profile-type-root .profile-type-content {\n    width: 45.75rem;\n  }\n}\n.profile-type-root .profile-type-content .MuiButtonBase-root {\n  height: 40px;\n  margin: 0;\n}\n.profile-type-root .profile-type-content .btn-secondary-negative {\n  border-color: #e0e0e0;\n  height: 40px;\n}\n.profile-type-root .value {\n  color: #ffffff;\n  padding: 0 0 0.5rem 0;\n}\n.profile-type-root ul {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  margin-top: 0;\n}\n.profile-type-root ul li {\n  list-style-type: none;\n  margin-right: 0.5rem;\n}\n.profile-type-root .head {\n  color: #e0e0e0;\n  margin-bottom: 1rem;\n}\n.profile-type-root .label {\n  color: #a0a0a0;\n  padding-bottom: 0.5rem;\n}\n.profile-type-root .profile-container {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  width: 100%;\n  margin: 0 1.3rem 1rem;\n}\n@media only screen and (max-width : 768px) {\n  .profile-type-root .profile-container {\n    margin: 0 0 0.25rem;\n  }\n}\n.profile-type-root .fields {\n  align-items: flex-start;\n  padding: 8px 0px;\n  width: 100%;\n}\n.profile-type-root .profile-title {\n  padding-left: 1rem;\n}\n.profile-type-root button.profile-link {\n  height: 64px !important;\n}\n.profile-type-root button.profile-link .profile-icon {\n  vertical-align: middle;\n}\n.profile-type-root button.profile-link > button {\n  margin-bottom: 0;\n}\n.profile-type-root button.profile-link > button > div {\n  padding: 0.3rem 1rem;\n}\n.profile-type-root div.expansion-panel-summary {\n  padding: 0 0.25rem 0 1rem;\n}\n.profile-type-root .MuiCardContent-root {\n  padding: 0 1rem !important;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.profile-type-root {\n  margin-top: 1.5rem;\n  padding: 0 1.5rem;\n}\n.profile-type-root .profile-type-content {\n  margin: 0 auto;\n  width: 100%;\n}\n@media (min-width: 768px) {\n  .profile-type-root .profile-type-content {\n    width: 45.75rem;\n  }\n}\n.profile-type-root .profile-type-content .MuiButtonBase-root {\n  height: 40px;\n  margin: 0;\n}\n.profile-type-root .value {\n  color: #ffffff;\n  padding: 0 0 0.5rem 0;\n}\n.profile-type-root ul {\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0;\n  margin-top: 0;\n}\n.profile-type-root ul li {\n  list-style-type: none;\n  margin-right: 0.5rem;\n}\n.profile-type-root .head {\n  color: #e0e0e0;\n  margin-bottom: 1rem;\n}\n.profile-type-root .label {\n  color: #a0a0a0;\n  padding-bottom: 0.5rem;\n}\n.profile-type-root .profile-container {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  width: 100%;\n  margin: 0 1.3rem 1rem;\n}\n@media only screen and (max-width : 768px) {\n  .profile-type-root .profile-container {\n    margin: 0 0 0.25rem;\n  }\n}\n.profile-type-root .fields {\n  align-items: flex-start;\n  padding: 8px 0px;\n  width: 100%;\n}\n.profile-type-root .profile-title {\n  padding-left: 1rem;\n}\n.profile-type-root button.profile-link {\n  height: 64px !important;\n}\n.profile-type-root button.profile-link .profile-icon {\n  vertical-align: middle;\n}\n.profile-type-root button.profile-link > button {\n  margin-bottom: 0;\n}\n.profile-type-root button.profile-link > button > div {\n  padding: 0.3rem 1rem;\n}\n.profile-type-root div.expansion-panel-summary {\n  padding: 0 0.25rem 0 1rem;\n}\n.profile-type-root .MuiCardContent-root {\n  padding: 0 1rem !important;\n}", ""]);
 
 
 
@@ -2408,7 +2371,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.report-option-root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1.5rem;\n  margin-top: 2rem;\n}\n.report-option-root .report-option-content {\n  width: 45.75rem;\n}\n@media only screen and (max-width : 768px) {\n  .report-option-root .report-option-content {\n    width: 100%;\n  }\n}\n.report-option-root .head {\n  color: #e0e0e0;\n  margin-bottom: 1rem;\n}\n.report-option-root .switch-container-bilan {\n  display: flex;\n  flex-direction: column;\n  color: #e0e0e0;\n  margin-bottom: 2rem;\n}\n.report-option-root .switch-container-bilan .switch-label {\n  margin-left: 0.2rem;\n  padding-right: 0.8rem;\n}\n.report-option-root .switch-container-bilan .button-container {\n  max-width: 200px;\n}\n.report-option-root .switch-container-bilan .button-container button {\n  width: 125px;\n  margin-top: 0.75rem;\n}\n.report-option-root .switch-container-alert {\n  display: flex;\n  align-items: center;\n  color: #e0e0e0;\n}\n.report-option-root .switch-container-alert .switch-label {\n  margin-left: 0.2rem;\n  padding-right: 0.8rem;\n}\n.report-option-root .switch-container-alert .input-style {\n  width: 60px;\n  text-align: center;\n  margin: 0.5rem;\n  background: #121212;\n  color: #ffffff;\n  border: 1px solid #a0a0a0;\n  max-width: 5rem;\n  height: 2rem;\n}\n.report-option-root .switch-container-alert .input-style:focus {\n  outline: #e3b82a 1px;\n}\n.report-option-root .switch-container-alert .input-style:disabled {\n  -webkit-text-fill-color: #ffffff;\n  opacity: 1;\n}\n.report-option-root .alert-inputs-display {\n  padding: 0 1rem;\n}\n.report-option-root .alert-input-row {\n  display: flex;\n  justify-content: space-between;\n}\n.report-option-root .alert-input-subtext {\n  color: #a0a0a0;\n  font-size: 14px;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.report-option-root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1.5rem;\n  margin-top: 2rem;\n}\n.report-option-root .report-option-content {\n  width: 45.75rem;\n}\n@media only screen and (max-width : 768px) {\n  .report-option-root .report-option-content {\n    width: 100%;\n  }\n}\n.report-option-root .head {\n  color: #e0e0e0;\n  margin-bottom: 1rem;\n}\n.report-option-root .switch-container-bilan {\n  display: flex;\n  flex-direction: column;\n  color: #e0e0e0;\n  margin-bottom: 2rem;\n}\n.report-option-root .switch-container-bilan .switch-label {\n  margin-left: 0.2rem;\n  padding-right: 0.8rem;\n}\n.report-option-root .switch-container-bilan .button-container {\n  max-width: 200px;\n}\n.report-option-root .switch-container-bilan .button-container button {\n  width: 125px;\n  margin-top: 0.75rem;\n}\n.report-option-root .waterAlert {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  color: #e0e0e0;\n}\n.report-option-root .waterAlert .switch-container-alert {\n  color: #e0e0e0;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.report-option-root .waterAlert .alert-input-subtext {\n  color: #a0a0a0;\n}", ""]);
 
 
 
diff --git a/6/ecolyo.7ceb9d1630f63c2c40ec.js b/6/ecolyo.3ac0fa971654da221f7f.js
similarity index 97%
rename from 6/ecolyo.7ceb9d1630f63c2c40ec.js
rename to 6/ecolyo.3ac0fa971654da221f7f.js
index f3491376bfb8badc257e892af70fad7112dc2a06..e13876ea0ae17ae01f5bd732515ec59bf0300317 100644
--- a/6/ecolyo.7ceb9d1630f63c2c40ec.js
+++ b/6/ecolyo.3ac0fa971654da221f7f.js
@@ -5,7 +5,7 @@
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.special-elec-container {\n  color: white;\n}\n.special-elec-container .elec-icon {\n  margin: auto;\n  display: block;\n}\n.special-elec-container .title {\n  text-align: center;\n  margin-top: 1rem;\n  color: #e0e0e0;\n}\n.special-elec-container .navigator {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  text-align: center;\n  margin: 1rem 0;\n}\n.special-elec-container .navigator .text-1 {\n  color: #e0e0e0;\n}\n.special-elec-container .navigator .week {\n  color: #e2bca1;\n}\n.special-elec-container .navigator .weekend {\n  color: #ffd597;\n}\n.special-elec-container .minIcon {\n  margin: auto 0.8rem auto 0;\n}\n.special-elec-container .activation-text {\n  margin: 1rem 0 0.7rem 0;\n}\n.special-elec-container .oauthform-button-content {\n  display: flex;\n  padding: 0.5rem;\n}\n.special-elec-container .oauthform-button-text {\n  text-align: left;\n  margin-left: 1rem;\n}\n.special-elec-container .container {\n  margin-bottom: 1rem;\n  padding: 1rem;\n  border: 1px solid #e0e0e0;\n  border-radius: 10px;\n  display: flex;\n}\n.special-elec-container .container .min {\n  max-width: 150px;\n}\n.special-elec-container .container .text {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.special-elec-container .container .value {\n  margin-left: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: self-end;\n  min-width: 80px;\n  justify-content: space-between;\n}\n.special-elec-container .container .kvAval {\n  margin: auto 0 auto auto;\n}\n.special-elec-container .consomin {\n  min-height: 100px;\n}\n.special-elec-container .no_data {\n  text-align: center;\n  color: white;\n}\n.special-elec-container .showmodal {\n  cursor: pointer;\n  margin: 1.5rem 0 0.5rem;\n  text-align: center;\n  color: #e0e0e0;\n  text-decoration: underline;\n}\n\n.graph-elec-half-hour {\n  height: 12rem;\n  margin-top: 2rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.special-elec-container {\n  color: white;\n}\n.special-elec-container .elec-icon {\n  margin: auto;\n  display: block;\n}\n.special-elec-container .title {\n  text-align: center;\n  margin-top: 1rem;\n  color: #e0e0e0;\n}\n.special-elec-container .navigator {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  text-align: center;\n  margin: 1rem 0;\n}\n.special-elec-container .navigator .text-1 {\n  color: #e0e0e0;\n}\n.special-elec-container .navigator .week {\n  color: #e2bca1;\n}\n.special-elec-container .navigator .weekend {\n  color: #ffd597;\n}\n.special-elec-container .minIcon {\n  margin: auto 0.8rem auto 0;\n}\n.special-elec-container .activation-text {\n  margin: 1rem 0 0.7rem 0;\n}\n.special-elec-container .oauthform-button-content {\n  display: flex;\n  padding: 0.5rem;\n}\n.special-elec-container .oauthform-button-text {\n  text-align: left;\n  margin-left: 1rem;\n}\n.special-elec-container .container {\n  margin-bottom: 1rem;\n  padding: 1rem;\n  border: 1px solid #e0e0e0;\n  border-radius: 10px;\n  display: flex;\n}\n.special-elec-container .container .min {\n  max-width: 150px;\n}\n.special-elec-container .container .text {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.special-elec-container .container .value {\n  margin-left: auto;\n  display: flex;\n  flex-direction: column;\n  align-items: self-end;\n  min-width: 80px;\n  justify-content: space-between;\n}\n.special-elec-container .container .kvAval {\n  margin: auto 0 auto auto;\n}\n.special-elec-container .consomin {\n  min-height: 100px;\n}\n.special-elec-container .no_data {\n  text-align: center;\n  color: white;\n}\n.special-elec-container button {\n  display: flex;\n  margin: auto;\n}\n\n.graph-elec-half-hour {\n  height: 12rem;\n  margin-top: 2rem;\n}", ""]);
 
 
 
@@ -345,7 +345,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.analysis-root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 1rem 1rem 1.5rem;\n  gap: 1rem;\n}\n.analysis-root .analysis-content {\n  width: 45.75rem;\n}\n@media only screen and (max-width : 768px) {\n  .analysis-root .analysis-content {\n    width: 100%;\n  }\n}\n.analysis-root .status-header {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-gap: 0.5rem;\n  justify-content: end;\n  color: #e0e0e0 !important;\n}\n.analysis-root .status-header p {\n  color: #e0e0e0;\n}\n.analysis-root .status-header div {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  grid-column: 2;\n}\n.analysis-root .status-header button {\n  grid-column: 3;\n  display: flex;\n  justify-self: end;\n}\n.analysis-root .status-header button.btn-secondary-negative {\n  min-width: 40px;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  margin: 0;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.analysis-root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 1rem 1rem 1.5rem;\n  gap: 1rem;\n}\n.analysis-root .analysis-content {\n  width: 45.75rem;\n}\n@media only screen and (max-width : 768px) {\n  .analysis-root .analysis-content {\n    width: 100%;\n  }\n}\n.analysis-root .status-header {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-gap: 0.5rem;\n  justify-content: end;\n  color: #e0e0e0 !important;\n}\n.analysis-root .status-header p {\n  color: #e0e0e0;\n}\n.analysis-root .status-header div {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  grid-column: 2;\n}\n.analysis-root .status-header button {\n  grid-column: 3;\n  display: flex;\n  justify-self: end;\n}\n.analysis-root .status-header button.btnIcon {\n  border: 1px solid #e0e0e0;\n  min-width: 40px;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  margin: 0;\n}", ""]);
 
 
 
@@ -356,7 +356,7 @@ exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.analysis-error-container {\n  color: #e0e0e0;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n.analysis-error-container .analysis-error-title {\n  color: #e3b82a;\n}\n.analysis-error-container .analysis-error-button {\n  display: flex;\n  justify-content: space-between;\n  gap: 1rem;\n}\n.analysis-error-container .analysis-error-button button {\n  margin: 0;\n  height: 45px;\n}\n.analysis-error-container .analysis-error-button button.btn-secondary-positive {\n  margin-bottom: 0;\n}\n@media only screen and (max-width : 768px) {\n  .analysis-error-container .analysis-error-button {\n    flex-direction: column-reverse;\n  }\n  .analysis-error-container .analysis-error-button button {\n    width: 100%;\n  }\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.analysis-error-container {\n  color: #e0e0e0;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n.analysis-error-container .analysis-error-title {\n  color: #e3b82a;\n}\n.analysis-error-container .analysis-error-button {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n}", ""]);
 
 
 
@@ -772,7 +772,7 @@ if(false) {}
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, ".comparison {\n  display: flex;\n  flex-direction: column;\n}\n.comparison .tabs {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n}\n.comparison .tabs button {\n  flex-grow: 1;\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(180deg, #323339 0%, #25262b 100%);\n  border-radius: 4px 4px 0px 0px;\n  color: #ffffff;\n  text-transform: none;\n  font-size: 0.75rem;\n  line-height: 1.3;\n  padding: 0.5rem 0;\n  box-shadow: 6px 0px 12px rgba(0, 0, 0, 0.3);\n}\n.comparison .tabs button.active {\n  background: #5e5e5e;\n}\n.comparison .performanceIndicators {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  border: 1px solid #5e5e5e;\n  border-radius: 0px 0px 4px 4px;\n  padding: 1rem;\n}", ""]);
+exports.push([module.i, ".comparison {\n  display: flex;\n  flex-direction: column;\n}\n.comparison .tabs {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n}\n.comparison .tabs button {\n  flex-grow: 1;\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(180deg, #323339 0%, #25262b 100%);\n  border-radius: 4px 4px 0px 0px;\n  box-shadow: 6px 0px 12px rgba(0, 0, 0, 0.3);\n  padding: 0.5rem 0;\n}\n.comparison .tabs button span {\n  color: #ffffff;\n  text-transform: none;\n  font-size: 0.75rem;\n  line-height: 1.3;\n}\n.comparison .tabs button.active {\n  background: #5e5e5e;\n}\n.comparison .performanceIndicators {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  border: 1px solid #5e5e5e;\n  border-radius: 0px 0px 4px 4px;\n  padding: 1rem;\n}", ""]);
 
 
 
@@ -1028,20 +1028,14 @@ var NoAnalysisModal = function NoAnalysisModal(_ref) {
   }, t('analysis_error_modal.message')), /*#__PURE__*/_react.default.createElement("div", {
     className: "analysis-error-button"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    "aria-label": t('analysis_error_modal.accessibility.button_understood'),
-    onClick: close,
-    classes: {
-      root: 'btn-secondary-positive',
-      label: 'text-16-normal'
-    }
-  }, t('analysis_error_modal.understood')), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('analysis_error_modal.accessibility.button_goto_konnector'),
     onClick: goToConsumption,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
-  }, t('analysis_error_modal.go_to_conso')))));
+    className: "btnPrimary"
+  }, t('analysis_error_modal.go_to_conso')), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    "aria-label": t('analysis_error_modal.accessibility.button_understood'),
+    onClick: close,
+    className: "btnSecondary"
+  }, t('analysis_error_modal.understood')))));
 };
 
 var _default = NoAnalysisModal;
@@ -1054,7 +1048,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.totalAnalysis-container {\n  display: flex;\n  justify-content: space-around;\n  flex-direction: column;\n  color: white;\n}\n.totalAnalysis-container .title {\n  text-align: center;\n  color: #e0e0e0;\n  margin-bottom: 1.5rem;\n}\n.totalAnalysis-container .no_data {\n  color: #e0e0e0;\n  margin-top: 1rem;\n}\n.totalAnalysis-container .pie-container {\n  text-align: center;\n  position: relative;\n  margin: auto;\n  overflow: visible;\n}\n.totalAnalysis-container svg {\n  margin: auto;\n  overflow: visible;\n}\n.totalAnalysis-container .pie-center {\n  box-sizing: border-box;\n  position: absolute;\n  border-radius: 50%;\n  background: #121212;\n  z-index: 5;\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.totalAnalysis-container .pie-center .euro-unit {\n  margin-left: 0.6rem;\n}\n.totalAnalysis-container .pie-center .date {\n  text-transform: uppercase;\n  color: #a0a0a0;\n  display: inline-block;\n  margin: 0.5rem 0;\n}\n.totalAnalysis-container .pie-center .estimated {\n  display: block;\n  text-decoration: underline;\n}\n.totalAnalysis-container .pie-center .circle {\n  box-sizing: border-box;\n  border: 1px solid #7b7b7b;\n  position: absolute;\n  border-radius: 50%;\n  background: transparent;\n  z-index: -1;\n  padding: 1rem;\n}\n@media screen and (max-width: 345px) {\n  .totalAnalysis-container .pie-center .circle {\n    display: none;\n  }\n}\n.totalAnalysis-container .total-card-container {\n  display: flex;\n  justify-content: center;\n  margin-top: 1rem;\n}\n.totalAnalysis-container .total-card-container .total-card {\n  margin: 1rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n@media screen and (max-width: 350px) {\n  .totalAnalysis-container .total-card-container .total-card {\n    margin: 0.5rem;\n  }\n}\n.totalAnalysis-container .total-card-container .total-card svg {\n  margin: 0.7rem 0;\n}\n@media screen and (max-width: 345px) {\n  .totalAnalysis-container .text-36-bold {\n    font-size: 1.6rem;\n  }\n}\n@media screen and (max-width: 345px) {\n  .totalAnalysis-container .date {\n    font-size: 1rem;\n  }\n}\n@media screen and (max-width: 365px) {\n  .totalAnalysis-container .text-18-bold {\n    font-size: 1rem;\n  }\n}\n.totalAnalysis-container .estimation-text {\n  cursor: pointer;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.totalAnalysis-container {\n  display: flex;\n  justify-content: space-around;\n  flex-direction: column;\n  color: white;\n}\n.totalAnalysis-container .title {\n  text-align: center;\n  color: #e0e0e0;\n  margin-bottom: 1.5rem;\n}\n.totalAnalysis-container .no_data {\n  color: #e0e0e0;\n  margin-top: 1rem;\n}\n.totalAnalysis-container .pie-container {\n  text-align: center;\n  position: relative;\n  margin: auto;\n  overflow: visible;\n}\n.totalAnalysis-container svg {\n  margin: auto;\n  overflow: visible;\n}\n.totalAnalysis-container .pie-center {\n  box-sizing: border-box;\n  position: absolute;\n  border-radius: 50%;\n  background: #121212;\n  z-index: 5;\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.totalAnalysis-container .pie-center .euro-unit {\n  margin-left: 0.6rem;\n}\n.totalAnalysis-container .pie-center .date {\n  text-transform: uppercase;\n  color: #a0a0a0;\n  display: inline-block;\n  margin: 4px 0;\n}\n.totalAnalysis-container .pie-center button .estimated {\n  line-height: 20px;\n  font-weight: 700;\n}\n.totalAnalysis-container .pie-center .circle {\n  box-sizing: border-box;\n  border: 1px solid #7b7b7b;\n  position: absolute;\n  border-radius: 50%;\n  background: transparent;\n  z-index: -1;\n  padding: 1rem;\n}\n@media screen and (max-width: 345px) {\n  .totalAnalysis-container .pie-center .circle {\n    display: none;\n  }\n}\n.totalAnalysis-container .total-card-container {\n  display: flex;\n  justify-content: center;\n  margin-top: 1rem;\n}\n.totalAnalysis-container .total-card-container .total-card {\n  margin: 1rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n@media screen and (max-width: 350px) {\n  .totalAnalysis-container .total-card-container .total-card {\n    margin: 0.5rem;\n  }\n}\n.totalAnalysis-container .total-card-container .total-card svg {\n  margin: 0.7rem 0;\n}\n@media screen and (max-width: 345px) {\n  .totalAnalysis-container .text-36-bold {\n    font-size: 1.6rem;\n  }\n}\n@media screen and (max-width: 345px) {\n  .totalAnalysis-container .date {\n    font-size: 1rem;\n  }\n}\n@media screen and (max-width: 365px) {\n  .totalAnalysis-container .text-18-bold {\n    font-size: 1rem;\n  }\n}", ""]);
 
 
 
@@ -1065,7 +1059,7 @@ exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.analysis-graph .consumption-title {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n}\n.analysis-graph .consumption-title .user-title,\n.analysis-graph .consumption-title .average-title {\n  flex-basis: 45%;\n  line-height: 3rem;\n}\n.analysis-graph .consumption-title .user-title {\n  line-height: 3rem;\n  text-align: right;\n  color: #e3b82a;\n}\n.analysis-graph .consumption-title .average-title {\n  color: #bfcce4;\n}\n.analysis-graph .consumption-sep {\n  border: 1px solid #7b7b7b;\n  margin: 1rem 0;\n}\n.analysis-graph div.expansion-panel-root {\n  border: solid 2px #bfcce4;\n  color: #bfcce4;\n  margin-block: 0 !important;\n  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.5490196078);\n}\n.analysis-graph .accordion-title {\n  font-weight: bold;\n}\n.analysis-graph .accordion-desc {\n  color: #e0e0e0;\n}\n.analysis-graph div.expansion-panel-summary {\n  padding: 0 1rem;\n}\n.analysis-graph .loader-container {\n  min-height: 350px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n}\n.analysis-graph .accordion-icon {\n  color: #bfcce4;\n}\n\n.no-profile {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: 1rem;\n}\n.no-profile div {\n  text-align: center;\n  color: #ffffff;\n}\n.no-profile button {\n  max-width: 320px;\n  margin-top: 0;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.analysis-graph .consumption-title {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 1rem;\n}\n.analysis-graph .consumption-title .user-title,\n.analysis-graph .consumption-title .average-title {\n  flex-basis: 45%;\n  line-height: 3rem;\n}\n.analysis-graph .consumption-title .user-title {\n  line-height: 3rem;\n  text-align: right;\n  color: #e3b82a;\n}\n.analysis-graph .consumption-title .average-title {\n  color: #bfcce4;\n}\n.analysis-graph .consumption-sep {\n  border: 1px solid #7b7b7b;\n  margin: 1rem 0;\n}\n.analysis-graph div.expansion-panel-root {\n  border: solid 2px #bfcce4;\n  color: #bfcce4;\n  margin-block: 0 !important;\n  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.5490196078);\n}\n.analysis-graph .accordion-title {\n  font-weight: bold;\n}\n.analysis-graph .accordion-desc {\n  color: #e0e0e0;\n}\n.analysis-graph div.expansion-panel-summary {\n  padding: 0 1rem;\n}\n.analysis-graph .loader-container {\n  min-height: 350px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n}\n.analysis-graph .accordion-icon {\n  color: #bfcce4;\n}\n\n.no-profile {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: 1rem;\n}\n.no-profile div {\n  text-align: center;\n  color: #ffffff;\n}\n.no-profile button {\n  max-width: 320px;\n}", ""]);
 
 
 
@@ -1090,6 +1084,8 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("yXPU"));
 
 var _slicedToArray2 = _interopRequireDefault(__webpack_require__("J4zp"));
 
+var _core = __webpack_require__("TTf+");
+
 var _EstimatedConsumptionModal = _interopRequireDefault(__webpack_require__("ta6n"));
 
 var _Loader = _interopRequireDefault(__webpack_require__("Ra/y"));
@@ -1247,8 +1243,8 @@ var TotalAnalysisChart = function TotalAnalysisChart(_ref) {
     className: "text-16-normal date"
   }, t('analysis_pie.month') + (0, _utils.getMonthNameWithPrep)(analysisMonth.minus({
     month: 1
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-14-normal estimation-text",
+  }))), /*#__PURE__*/_react.default.createElement(_core.Button, {
+    className: "btnText",
     onClick: function onClick() {
       return setOpenEstimationModal(true);
     }
@@ -2104,9 +2100,10 @@ var ProfileComparator = function ProfileComparator(_ref) {
       return navigate('/profileType');
     },
     classes: {
-      root: 'btn-highlight',
+      root: 'btnPrimary',
       label: 'text-18-bold'
-    }
+    },
+    size: "large"
   }, t('analysis.accessibility.button_go_to_profil')), /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icon: _noProfilePlaceholder.default,
     width: "100%",
@@ -2195,10 +2192,7 @@ var ProfileComparator = function ProfileComparator(_ref) {
     onClick: function onClick() {
       return navigate('/profileType');
     },
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnIcon"
   }, /*#__PURE__*/_react.default.createElement(_StyledIcon.default, {
     icon: _profileEdit.default,
     size: 40
@@ -2643,6 +2637,8 @@ var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("yXPU"));
 
 var _slicedToArray2 = _interopRequireDefault(__webpack_require__("J4zp"));
 
+var _core = __webpack_require__("TTf+");
+
 var _IconButton = _interopRequireDefault(__webpack_require__("o6Jd"));
 
 var _leftArrow = _interopRequireDefault(__webpack_require__("bZGv"));
@@ -2964,9 +2960,9 @@ var ElecHalfHourMonthlyAnalysis = function ElecHalfHourMonthlyAnalysis(_ref) {
     className: "text-18-bold"
   }, elecPrice !== null && elecPrice !== void 0 && elecPrice.price ? (enedisAnalysisValues.minimumLoad * elecPrice.price).toFixed(1) : '---', /*#__PURE__*/_react.default.createElement("span", {
     className: "text-18-normal"
-  }, " \u20AC"))) : /*#__PURE__*/_react.default.createElement("span", null, "----"))), /*#__PURE__*/_react.default.createElement("div", {
-    onClick: toggleOpenModal,
-    className: "showmodal"
+  }, " \u20AC"))) : /*#__PURE__*/_react.default.createElement("span", null, "----"))), /*#__PURE__*/_react.default.createElement(_core.Button, {
+    className: "btnText",
+    onClick: toggleOpenModal
   }, t('special_elec.showModal'))))), /*#__PURE__*/_react.default.createElement(_ElecInfoModal.default, {
     open: openInfoModal,
     handleCloseClick: toggleOpenModal
diff --git a/7/ecolyo.ccebfc6453b6ff126dbf.js b/7/ecolyo.9c28fcbb87803e4915f5.js
similarity index 92%
rename from 7/ecolyo.ccebfc6453b6ff126dbf.js
rename to 7/ecolyo.9c28fcbb87803e4915f5.js
index 4bdc76ecae2a13f020c96092c28e90a677042512..d75d587cbfde5257fa2499f3d4f5625285c23e58 100644
--- a/7/ecolyo.ccebfc6453b6ff126dbf.js
+++ b/7/ecolyo.9c28fcbb87803e4915f5.js
@@ -5,7 +5,7 @@
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.error-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  max-width: 450px;\n  margin: auto;\n  padding: 2rem;\n  text-align: center;\n}\n.error-container .head {\n  color: #e3b82a;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.error-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n  max-width: 450px;\n  margin: auto;\n  padding: 2rem;\n  text-align: center;\n}\n.error-container .head {\n  color: #e3b82a;\n}", ""]);
 
 
 
@@ -84,12 +84,7 @@ var EcogestureNotFound = function EcogestureNotFound(_ref) {
     onClick: function onClick() {
       return navigate("/".concat(returnPage));
     },
-    variant: "contained",
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-18-bold'
-    },
-    type: "submit"
+    className: "btnPrimary"
   }, t('error_page.back')))));
 };
 
@@ -129,7 +124,7 @@ if(false) {}
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.single-ecogesture {\n  color: #e0e0e0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.2rem;\n}\n.single-ecogesture .icon-container {\n  margin: auto;\n  max-width: 180px;\n  width: 100%;\n  display: flex;\n}\n.single-ecogesture .icon-container .icon-big {\n  margin: auto;\n}\n.single-ecogesture .details {\n  flex-direction: column;\n  display: flex;\n}\n.single-ecogesture .details .title {\n  color: #a0a0a0;\n  font-weight: 700;\n}\n.single-ecogesture .details .efficiency {\n  display: flex;\n  text-align: center;\n  margin: 0.7rem auto 0;\n}\n.single-ecogesture .details .efficiency .text {\n  margin-right: 0.7rem;\n}\n.single-ecogesture .styled-container {\n  line-height: 150%;\n  padding: 1rem;\n  margin: 1.5rem 0 1rem;\n  max-width: 500px;\n}\n.single-ecogesture .styled-container .long-name {\n  text-align: center;\n  color: white;\n}\n.single-ecogesture .styled-container .showMore {\n  text-align: center;\n  text-decoration: underline;\n  margin-top: 1.5rem;\n  cursor: pointer;\n}\n.single-ecogesture .styled-container .longDescription {\n  margin: 1em 0.5rem;\n  text-align: left;\n}\n.single-ecogesture .buttons-selection {\n  width: 100%;\n  display: flex;\n  gap: 0.5rem;\n  justify-content: center;\n}\n.single-ecogesture .buttons-selection button {\n  margin: 0;\n}\n.single-ecogesture .buttons-selection button.btn-secondary-negative {\n  height: 45px;\n  max-width: 160px;\n  width: 100%;\n  border-radius: 4px;\n}\n.single-ecogesture .buttons-selection .objective-btn span {\n  color: #e0e0e0;\n}\n.single-ecogesture .buttons-selection .objective-btn.active {\n  background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(12, 44, 91, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #4470b3;\n  border-color: transparent;\n}\n.single-ecogesture .buttons-selection .objective-btn.active span {\n  color: white;\n}\n.single-ecogesture .buttons-selection .doing-btn span {\n  color: #e0e0e0;\n}\n.single-ecogesture .buttons-selection .doing-btn.active {\n  background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(41, 87, 33, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #21a90b;\n  border-color: transparent;\n}\n.single-ecogesture .buttons-selection .doing-btn.active span {\n  color: white;\n}\n.single-ecogesture .buttons-selection .MuiIconButton-label {\n  justify-content: flex-start;\n  color: white;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.single-ecogesture {\n  color: #e0e0e0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.2rem;\n}\n.single-ecogesture .icon-container {\n  margin: auto;\n  max-width: 180px;\n  width: 100%;\n  display: flex;\n}\n.single-ecogesture .icon-container .icon-big {\n  margin: auto;\n}\n.single-ecogesture .details {\n  flex-direction: column;\n  display: flex;\n}\n.single-ecogesture .details .title {\n  color: #a0a0a0;\n  font-weight: 700;\n}\n.single-ecogesture .details .efficiency {\n  display: flex;\n  text-align: center;\n  margin: 0.7rem auto 0;\n}\n.single-ecogesture .details .efficiency .text {\n  margin-right: 0.7rem;\n}\n.single-ecogesture .styled-container {\n  line-height: 150%;\n  padding: 1rem;\n  margin: 1.5rem 0 1rem;\n  max-width: 500px;\n  display: flex;\n  flex-direction: column;\n}\n.single-ecogesture .styled-container .long-name {\n  text-align: center;\n  color: white;\n}\n.single-ecogesture .styled-container .showMore {\n  margin: auto;\n  text-align: center;\n  text-decoration: underline;\n  margin-top: 1.5rem;\n}\n.single-ecogesture .styled-container .showMore span {\n  text-transform: none;\n}\n.single-ecogesture .styled-container .longDescription {\n  margin: 1em 0.5rem;\n  text-align: left;\n}\n.single-ecogesture .buttons-selection {\n  width: 100%;\n  display: flex;\n  gap: 0.5rem;\n  justify-content: center;\n}\n.single-ecogesture .buttons-selection button.btnSecondary {\n  height: 45px;\n  max-width: 160px;\n  width: 100%;\n  border-radius: 4px;\n}\n.single-ecogesture .buttons-selection .objective-btn span {\n  color: #e0e0e0;\n}\n.single-ecogesture .buttons-selection .objective-btn.active {\n  background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(12, 44, 91, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #4470b3;\n  border-color: transparent;\n}\n.single-ecogesture .buttons-selection .objective-btn.active span {\n  color: white;\n}\n.single-ecogesture .buttons-selection .doing-btn span {\n  color: #e0e0e0;\n}\n.single-ecogesture .buttons-selection .doing-btn.active {\n  background: radial-gradient(105.25% 64.58% at 49.68% 70.83%, rgba(41, 87, 33, 0.5) 0%, rgba(255, 255, 255, 0) 100%), #21a90b;\n  border-color: transparent;\n}\n.single-ecogesture .buttons-selection .doing-btn.active span {\n  color: white;\n}\n.single-ecogesture .buttons-selection .MuiIconButton-label {\n  justify-content: flex-start;\n  color: white;\n}", ""]);
 
 
 
@@ -477,14 +472,16 @@ var SingleEcogestureView = function SingleEcogestureView() {
     className: "styled-container"
   }, /*#__PURE__*/_react2.default.createElement("div", {
     className: "long-name text-18-bold"
-  }, ecogesture.longName), /*#__PURE__*/_react2.default.createElement("div", {
-    className: "showMore text-15-normal",
+  }, ecogesture.longName), /*#__PURE__*/_react2.default.createElement(_core.Button, {
+    classes: {
+      root: 'btnText showMore',
+      label: 'text-15-normal'
+    },
     onClick: function onClick() {
       return setShowDetails(function (prev) {
         return !prev;
       });
-    },
-    role: "button"
+    }
   }, t("ecogesture_modal.show_".concat(showDetails ? 'less' : 'more'))), /*#__PURE__*/_react2.default.createElement(_core.Collapse, {
     in: showDetails
   }, /*#__PURE__*/_react2.default.createElement("div", {
@@ -495,7 +492,7 @@ var SingleEcogestureView = function SingleEcogestureView() {
     "aria-label": t('ecogesture.objective'),
     onClick: toggleObjective,
     classes: {
-      root: "btn-secondary-negative objective-btn ".concat(isObjective && 'active'),
+      root: "btnSecondary objective-btn ".concat(isObjective && 'active'),
       label: 'text-15-normal'
     }
   }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
@@ -506,7 +503,7 @@ var SingleEcogestureView = function SingleEcogestureView() {
     "aria-label": t('ecogesture.doing'),
     onClick: toggleDoing,
     classes: {
-      root: "btn-secondary-negative doing-btn ".concat(isDoing && 'active'),
+      root: "btnSecondary doing-btn ".concat(isDoing && 'active'),
       label: 'text-15-normal'
     }
   }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
diff --git a/8/ecolyo.1471d7fb76bc62fc84a6.js b/8/ecolyo.083c460749da3b2bb728.js
similarity index 99%
rename from 8/ecolyo.1471d7fb76bc62fc84a6.js
rename to 8/ecolyo.083c460749da3b2bb728.js
index 8505d4d11fbd0ea2ecbd38a96c4d0581b92e1da3..d9331f1682c6f9d165dfa975fd2515ab2c09c6fd 100644
--- a/8/ecolyo.1471d7fb76bc62fc84a6.js
+++ b/8/ecolyo.083c460749da3b2bb728.js
@@ -467,7 +467,7 @@ exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.date-navigator {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  width: 100%;\n  margin: auto;\n  padding-bottom: 0.6rem;\n  max-width: 45.75rem;\n}\n.date-navigator .date-navigator-button {\n  border: none;\n  background: none;\n  color: #a0a0a0;\n  text-decoration: underline;\n}\n.date-navigator .date-navigator-button.disable {\n  opacity: 0.3;\n}\n.date-navigator .date-navigator-button.disable:hover {\n  cursor: default;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.date-navigator {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-around;\n  width: 100%;\n  margin: auto;\n  padding-bottom: 0.6rem;\n  max-width: 45.75rem;\n}\n.date-navigator .date-navigator-button.disable {\n  opacity: 0.3;\n}", ""]);
 
 
 
diff --git a/app/ecolyo.4301cd6438f7ffd3d8e4.js b/app/ecolyo.0b6c59eac18a436f566c.js
similarity index 98%
rename from app/ecolyo.4301cd6438f7ffd3d8e4.js
rename to app/ecolyo.0b6c59eac18a436f566c.js
index b414828df840a77013780af054e280e845d01b4b..f46a43650216665bacde7cc54e16b0ede267609f 100644
--- a/app/ecolyo.4301cd6438f7ffd3d8e4.js
+++ b/app/ecolyo.0b6c59eac18a436f566c.js
@@ -64,7 +64,7 @@
 /******/
 /******/ 	// script path function
 /******/ 	function jsonpScriptSrc(chunkId) {
-/******/ 		return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "/ecolyo." + {"1":"6b6625985ac180d66a18","2":"62e5292a592368584bc8","4":"ed87413fc9f81039a5c7","5":"d5601eac9d2424eaf101","6":"7ceb9d1630f63c2c40ec","7":"ccebfc6453b6ff126dbf","8":"1471d7fb76bc62fc84a6","9":"559d36d928c393428876","10":"2946952809565809b75b"}[chunkId] + ".js"
+/******/ 		return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "/ecolyo." + {"1":"16a699f1442815dc23fe","2":"62e5292a592368584bc8","4":"e44f681829f74b9ff80d","5":"e91ba98547f78b53dac8","6":"3ac0fa971654da221f7f","7":"9c28fcbb87803e4915f5","8":"083c460749da3b2bb728","9":"559d36d928c393428876","10":"2946952809565809b75b"}[chunkId] + ".js"
 /******/ 	}
 /******/
 /******/ 	// The require function
@@ -435,7 +435,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-selection-end-container {\n  position: relative;\n  min-height: inherit;\n  margin: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  color: #e0e0e0;\n  max-width: 45.75rem;\n}\n@media only screen and (max-width : 768px) {\n  .eg-selection-end-container {\n    margin: 0 1rem;\n    max-width: unset;\n  }\n}\n.eg-selection-end-container .content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  gap: 1rem;\n  justify-content: center;\n  align-items: center;\n}\n.eg-selection-end-container .content .title {\n  color: #e3b82a;\n  margin: 1rem;\n}\n@media all and (min-width: 1023px) {\n  .eg-selection-end-container .content .title {\n    margin: 5rem;\n  }\n}\n.eg-selection-end-container .buttons {\n  margin: 1rem 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  width: 100%;\n}\n.eg-selection-end-container .buttons button.btn-highlight {\n  padding: 0.75rem 0.5rem;\n  margin: 0 0.5rem;\n  max-width: 25rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-selection-end-container {\n  position: relative;\n  min-height: inherit;\n  margin: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  color: #e0e0e0;\n  max-width: 45.75rem;\n}\n@media only screen and (max-width : 768px) {\n  .eg-selection-end-container {\n    margin: 0 1rem;\n    max-width: unset;\n  }\n}\n.eg-selection-end-container .content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  gap: 1rem;\n  justify-content: center;\n  align-items: center;\n}\n.eg-selection-end-container .content .title {\n  color: #e3b82a;\n  margin: 1rem;\n}\n@media all and (min-width: 1023px) {\n  .eg-selection-end-container .content .title {\n    margin: 5rem;\n  }\n}\n.eg-selection-end-container .buttons {\n  margin: 1rem 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  width: 100%;\n}", ""]);
 
 
 
@@ -749,11 +749,7 @@ var CGUModal = function CGUModal(_ref) {
   })), /*#__PURE__*/_react.default.createElement(_GCUContent.default, null), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('gcu_modal.accessibility.button_accept'),
     onClick: handleCloseClick,
-    className: "gcu-modal-button",
-    classes: {
-      root: 'btn-profile-next rounded',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('legal.accessibility.button_close')));
 };
 
@@ -883,7 +879,7 @@ exports.ACCOUNTS_DOCTYPE = ACCOUNTS_DOCTYPE;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.quiz-finish-container {\n  padding: 1.5rem;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.quiz-finish-container button.btn-secondary-negative {\n  border-color: #e0e0e0;\n}\n.quiz-finish-container .button-start {\n  margin-top: 3rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.score-final-title {\n  font-weight: bold;\n  font-size: 2rem;\n  margin: 2rem 0 0.5rem;\n}\n\n.score-final {\n  font-size: 2.2rem;\n  font-weight: bold;\n  margin-bottom: 2rem;\n}\n.score-final span {\n  color: #61f0f2;\n}\n\n.score-label {\n  font-size: 1.15rem;\n  font-weight: bold;\n  margin-bottom: 0.5rem;\n}\n\n.score-stars {\n  font-size: 1.8rem;\n  font-weight: bold;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #61f0f2;\n}\n.score-stars .quiz-icon {\n  margin-left: 0.5rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.quiz-finish-container {\n  padding: 1.5rem;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.quiz-finish-container .button-start {\n  margin-top: 3rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.score-final-title {\n  font-weight: bold;\n  font-size: 2rem;\n  margin: 2rem 0 0.5rem;\n}\n\n.score-final {\n  font-size: 2.2rem;\n  font-weight: bold;\n  margin-bottom: 2rem;\n}\n.score-final span {\n  color: #61f0f2;\n}\n\n.score-label {\n  font-size: 1.15rem;\n  font-weight: bold;\n  margin-bottom: 0.5rem;\n}\n\n.score-stars {\n  font-size: 1.8rem;\n  font-weight: bold;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #61f0f2;\n}\n.score-stars .quiz-icon {\n  margin-left: 0.5rem;\n}", ""]);
 
 
 
@@ -1217,16 +1213,10 @@ var ProfileTypeFinished = function ProfileTypeFinished(_ref) {
     size: 120
   }), /*#__PURE__*/_react2.default.createElement("div", {
     className: "profile-type-finished-label text-28-normal-uppercase"
-  }, t('profile_type.finished.title')), /*#__PURE__*/_react2.default.createElement("div", {
-    className: "profile-type-finished-description text-18-normal"
-  }, /*#__PURE__*/_react2.default.createElement("div", null, t('profile_type.finished.label1')), /*#__PURE__*/_react2.default.createElement("div", null, t('profile_type.finished.label2'))), /*#__PURE__*/_react2.default.createElement(_Button.default, {
+  }, t('profile_type.finished.title')), /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement("div", null, t('profile_type.finished.label1')), /*#__PURE__*/_react2.default.createElement("div", null, t('profile_type.finished.label2'))), /*#__PURE__*/_react2.default.createElement(_Button.default, {
     "aria-label": t('profile_type.accessibility.button_validate'),
     onClick: handleClick,
-    className: "profile-type-finished-button",
-    classes: {
-      root: 'btn-primary-positive',
-      label: 'text-16-normal'
-    }
+    className: "btnPrimary"
   }, t('profile_type.finished.button_validate')));
 };
 
@@ -1890,7 +1880,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.fb-root {\n  overflow-y: auto;\n  min-width: 70%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.fb-root p {\n  text-align: center;\n}\n.fb-root .title {\n  color: #deaf0e;\n  font-weight: 700;\n  padding: 0.5rem;\n}\n.fb-root .text {\n  color: #e0e0e0;\n}\n.fb-root .actions {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin-top: 1rem;\n  gap: 16px;\n}\n.fb-root .actions button {\n  margin-top: 0;\n  max-width: 150px;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.fb-root {\n  overflow-y: auto;\n  min-width: 70%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.fb-root p {\n  text-align: center;\n}\n.fb-root .title {\n  color: #deaf0e;\n  font-weight: 700;\n  padding: 0.5rem;\n}\n.fb-root .text {\n  color: #e0e0e0;\n}\n.fb-root .actions {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin-top: 1rem;\n  gap: 1rem;\n}\n.fb-root .actions button {\n  margin-top: 0;\n  max-width: 150px;\n}", ""]);
 
 
 
@@ -1901,7 +1891,7 @@ exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.quiz-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  padding: 1.5rem;\n  gap: 1rem;\n}\n\n.quiz-begin-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 2rem 1rem;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  text-align: center;\n}\n.quiz-begin-container svg {\n  margin-top: -33%;\n}\n@media (min-width: 768px) {\n  .quiz-begin-container {\n    max-width: 60%;\n    justify-content: space-evenly;\n  }\n}\n@media (min-width: 1201px) {\n  .quiz-begin-container {\n    max-width: 40%;\n    padding: 0.5rem 1rem 2rem;\n  }\n}\n.quiz-begin-container .btn-secondary-negative {\n  margin-top: auto;\n  border-color: #e0e0e0;\n}\n.quiz-begin-container .quiz-icon-stars {\n  margin-top: -4rem;\n}\n.quiz-begin-container .quiz-explanation {\n  margin-bottom: 2rem;\n  line-height: 24px;\n  padding: 1rem;\n}\n@media (min-width: 1201px) {\n  .quiz-begin-container .quiz-explanation {\n    padding: 0rem 2rem;\n  }\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.quiz-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  padding: 1.5rem;\n  gap: 1rem;\n}\n\n.quiz-begin-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 2rem 1rem;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  text-align: center;\n}\n.quiz-begin-container svg {\n  margin-top: -33%;\n}\n@media (min-width: 768px) {\n  .quiz-begin-container {\n    max-width: 60%;\n    justify-content: space-evenly;\n  }\n}\n@media (min-width: 1201px) {\n  .quiz-begin-container {\n    max-width: 40%;\n    padding: 0.5rem 1rem 2rem;\n  }\n}\n.quiz-begin-container .quiz-icon-stars {\n  margin-top: -4rem;\n}\n.quiz-begin-container .quiz-explanation {\n  margin-bottom: 2rem;\n  line-height: 24px;\n  padding: 1rem;\n}\n@media (min-width: 1201px) {\n  .quiz-begin-container .quiz-explanation {\n    padding: 0rem 2rem;\n  }\n}", ""]);
 
 
 
@@ -2182,10 +2172,7 @@ var ActionOnGoing = function ActionOnGoing(_ref) {
   }, " ", t('action.result')), /*#__PURE__*/_react.default.createElement("div", {
     className: "result-date text-24-bold"
   }, getResultDate()), /*#__PURE__*/_react.default.createElement(_core.Button, {
-    classes: {
-      root: 'btn-secondary-negative btn-detail',
-      label: 'text-16-normal'
-    },
+    className: "btnSecondary",
     onClick: toggleEcogestureModal
   }, t('action.details')), /*#__PURE__*/_react.default.createElement(_EcogestureModal.default, {
     open: openEcogestureModal,
@@ -3250,10 +3237,7 @@ var WelcomeModal = function WelcomeModal(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('onboarding.welcomeModal.accessibility.button_valid'),
     onClick: setWelcomeModalViewed,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('onboarding.welcomeModal.button_valid')))));
 };
 
@@ -3478,24 +3462,13 @@ var ActionDone = function ActionDone(_ref) {
     className: "action-done"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "result-title"
-  }, " ", t('action.finished')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "result-text text-16-normal"
-  }, t('action.resultText1')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "result-text text-16-normal"
-  }, t('action.resultText2')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "result-text text-16-normal"
-  }, t('action.resultText3')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "result-text text-16-normal"
-  }, t('action.resultText4')), /*#__PURE__*/_react.default.createElement("div", {
+  }, " ", t('action.finished')), /*#__PURE__*/_react.default.createElement("div", null, t('action.resultText1')), /*#__PURE__*/_react.default.createElement("div", null, t('action.resultText2')), /*#__PURE__*/_react.default.createElement("div", null, t('action.resultText3')), /*#__PURE__*/_react.default.createElement("div", null, t('action.resultText4')), /*#__PURE__*/_react.default.createElement("div", {
     className: "stars"
   }, /*#__PURE__*/_react.default.createElement("span", null, "5"), /*#__PURE__*/_react.default.createElement(_StyledIcon.default, {
     icon: _starFilled.default,
     size: 33
   })), /*#__PURE__*/_react.default.createElement(_core.Button, {
-    classes: {
-      root: 'btn-secondary-negative btn-detail',
-      label: 'text-16-normal'
-    },
+    className: "btnSecondary",
     onClick: handleEndAction
   }, t('action.ok'))));
 };
@@ -3620,38 +3593,41 @@ var StepAddress = function StepAddress(_ref) {
   }, t('auth.enedissgegrandlyon.addressTitle')), /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "address",
     className: "text-16-normal"
-  }, t('auth.enedissgegrandlyon.address')), /*#__PURE__*/_react.default.createElement("input", {
+  }, t('auth.enedissgegrandlyon.address'), /*#__PURE__*/_react.default.createElement("input", {
     type: "text",
     id: "address",
     name: "address",
+    className: "inputText",
     value: sgeState.address,
     onChange: function onChange(e) {
       return _onChange('address', e.target.value);
     }
-  }), /*#__PURE__*/_react.default.createElement("label", {
+  })), /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "zipCode",
     className: "text-16-normal"
-  }, t('auth.enedissgegrandlyon.zipCode')), /*#__PURE__*/_react.default.createElement("input", {
+  }, t('auth.enedissgegrandlyon.zipCode'), /*#__PURE__*/_react.default.createElement("input", {
     type: "number",
     min: 0,
     id: "zipCode",
     name: "zipCode",
+    className: "inputText",
     value: sgeState.zipCode !== null ? sgeState.zipCode : undefined,
     onChange: function onChange(e) {
       return _onChange('zipCode', e.target.value, 5);
     }
-  }), /*#__PURE__*/_react.default.createElement("label", {
+  })), /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "city",
     className: "text-16-normal"
-  }, t('auth.enedissgegrandlyon.city')), /*#__PURE__*/_react.default.createElement("input", {
+  }, t('auth.enedissgegrandlyon.city'), /*#__PURE__*/_react.default.createElement("input", {
     type: "text",
     id: "city",
     name: "city",
+    className: "inputText",
     value: sgeState.city,
     onChange: function onChange(e) {
       return _onChange('city', e.target.value);
     }
-  }));
+  })));
 };
 
 var _default = StepAddress;
@@ -3948,15 +3924,17 @@ var EcogestureSelectionDetail = function EcogestureSelectionDetail(_ref) {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "text-22 title"
   }, title), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text text-18-bold"
-  }, ecogesture.longName), /*#__PURE__*/_react.default.createElement("div", {
-    className: "showMore text-15-normal",
+    className: "text-18-bold"
+  }, ecogesture.longName), /*#__PURE__*/_react.default.createElement(_core.Button, {
+    classes: {
+      root: 'btnText showMore',
+      label: 'text-15-normal'
+    },
     onClick: function onClick() {
       return setShowDetails(function (prev) {
         return !prev;
       });
-    },
-    role: "button"
+    }
   }, t("ecogesture_modal.show_".concat(showDetails ? 'less' : 'more'))), /*#__PURE__*/_react.default.createElement(_core.Collapse, {
     in: showDetails,
     exit: false
@@ -3967,9 +3945,8 @@ var EcogestureSelectionDetail = function EcogestureSelectionDetail(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture_selection.button_objective'),
     classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-14-bold',
-      focusVisible: 'noFocus'
+      root: 'btnSecondary btnObjective',
+      label: 'text-14-bold'
     },
     onClick: function onClick() {
       return validate(true, false);
@@ -3980,9 +3957,8 @@ var EcogestureSelectionDetail = function EcogestureSelectionDetail(_ref) {
   }), t('ecogesture_selection.button_objective')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture_selection.button_doing'),
     classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-14-bold',
-      focusVisible: 'noFocus'
+      root: 'btnSecondary btnDoing',
+      label: 'text-14-bold'
     },
     onClick: function onClick() {
       return validate(false, true);
@@ -3993,9 +3969,8 @@ var EcogestureSelectionDetail = function EcogestureSelectionDetail(_ref) {
   }), t('ecogesture_selection.button_doing')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture_selection.button_skip'),
     classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-14-bold',
-      focusVisible: 'noFocus'
+      root: 'btnSecondary btnSkip',
+      label: 'text-14-bold'
     },
     onClick: function onClick() {
       return validate(false, false);
@@ -6397,7 +6372,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.sge-view {\n  box-sizing: border-box;\n  min-height: inherit;\n  width: inherit;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.sge-view .sge-container {\n  padding: 1rem;\n}\n.sge-view .sge-container .sge-step-container {\n  color: #e0e0e0;\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.sge-view .sge-container .sge-step-container .title,\n.sge-view .sge-container .sge-step-container .head {\n  margin-top: 1rem;\n}\n.sge-view .sge-container .sge-step-container label {\n  display: block;\n  margin-top: 1rem;\n  margin-bottom: 0.625rem;\n  cursor: pointer;\n}\n.sge-view .sge-container .sge-step-container label span span {\n  color: #e3b82a;\n}\n.sge-view .sge-container .sge-step-container #zipCode {\n  max-width: 115px;\n}\n.sge-view .sge-container .sge-step-container .checkbox {\n  margin: 0.5rem 0;\n  display: flex;\n  align-items: center;\n}\n.sge-view .sge-container .sge-step-container .checkbox:first-of-type {\n  margin-top: 1.5rem;\n}\n.sge-view .sge-container .sge-step-container .checkbox input {\n  margin: 0.5rem 1rem 0.5rem 0.5rem;\n  appearance: none;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  width: 1.45rem;\n  height: 1.45rem;\n  min-width: 1.45rem;\n  min-height: 1.45rem;\n  background: radial-gradient(60.65% 30.62% at 50% 3.13%, #2a2b30 0%, #1b1c22 100%);\n  position: relative;\n  border: solid 2px #e3b82a;\n  cursor: pointer;\n}\n.sge-view .sge-container .sge-step-container .answer-checked input:before, .sge-view .sge-container .sge-step-container .answer-checked input:after {\n  content: \"\";\n  position: absolute;\n  display: inline-block;\n  background: #e3b82a;\n  border-radius: 0.5rem;\n}\n.sge-view .sge-container .sge-step-container .answer-checked input:before {\n  width: 3px;\n  height: 12px;\n  left: 10px;\n  top: 4px;\n  transform: rotate(41deg);\n}\n.sge-view .sge-container .sge-step-container .answer-checked input:after {\n  width: 3px;\n  height: 6px;\n  left: 5px;\n  top: 8px;\n  transform: rotate(133deg);\n}\n.sge-view .sge-container .sge-step-container input:not([type=checkbox]) {\n  appearance: none;\n  max-width: 280px;\n  width: 100%;\n  height: 45px;\n  border-radius: 4px;\n  border: 1px solid #7b7b7b;\n  background: rgba(0, 0, 0, 0.3);\n  transition: all 300ms ease;\n  color: #e0e0e0;\n  padding: 0 0.5rem;\n}\n.sge-view .sge-container .sge-step-container input:not([type=checkbox]):focus, .sge-view .sge-container .sge-step-container input:not([type=checkbox]):focus-visible {\n  border: 1px solid #e3b82a;\n  outline: none;\n}\n.sge-view .sge-container .sge-step-container input::-webkit-outer-spin-button,\n.sge-view .sge-container .sge-step-container input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.sge-view .sge-container .sge-step-container input[type=number] {\n  -moz-appearance: textfield;\n}\n.sge-view .sge-container .sge-step-container .pdl-hint {\n  display: inline-block;\n  cursor: pointer;\n  border-bottom: solid 1px #e0e0e0;\n  text-align: center;\n  margin: 1rem auto auto;\n  padding: 0.2rem;\n}\n@media (min-width: 1023px) {\n  .sge-view .sge-container .sge-step-container .pdl-hint {\n    margin-left: 0;\n  }\n}\n.sge-view .sge-container .sge-step-container ul {\n  padding: 0 1rem 1rem;\n  line-height: 130%;\n  border-bottom: 1px solid #7b7b7b;\n}\n.sge-view .sge-container .sge-step-container ul li {\n  margin: 0.5rem 0;\n}\n\n.sgeHintModal {\n  text-align: center;\n}\n.sgeHintModal .title {\n  color: #e3b82a;\n  margin: 1rem 0;\n}\n.sgeHintModal .pdl {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  background: #eff2f4;\n  text-align: left;\n}\n.sgeHintModal .pdl p {\n  color: #526576;\n  margin: 0;\n}\n.sgeHintModal .pdl .bill {\n  display: flex;\n  gap: 0.5rem;\n}\n.sgeHintModal .pdl svg.prm {\n  width: 100%;\n  height: 180px;\n}\n.sgeHintModal .pdl svg.bill {\n  width: 150px;\n  height: 80px;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ninput.inputText,\ninput.inputNumber {\n  box-sizing: border-box;\n  border: 1px solid #7b7b7b;\n  background: transparent;\n  transition: all 300ms ease;\n  color: #e0e0e0;\n}\ninput.inputText:focus, input.inputText:focus-visible,\ninput.inputNumber:focus,\ninput.inputNumber:focus-visible {\n  border-color: #e3b82a;\n  outline: none;\n}\n\ninput.inputText {\n  appearance: none;\n  border-radius: 4px;\n  height: 45px;\n  width: 100%;\n  max-width: 280px;\n  padding: 0 0.5rem;\n}\n\ninput.inputNumber {\n  border-radius: 2px;\n  height: 40px;\n  width: 60px;\n  max-width: 5rem;\n  text-align: center;\n}\n\ninput.inputCheckbox {\n  width: 24px;\n  min-width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  cursor: pointer;\n  appearance: none;\n  background: #121212;\n  position: relative;\n  border: solid 1px #7b7b7b;\n}\ninput.inputCheckbox:checked {\n  background: #e3b82a;\n  border-color: #e3b82a;\n}\ninput.inputCheckbox:checked:before, input.inputCheckbox:checked:after {\n  content: \"\";\n  position: absolute;\n  display: inline-block;\n  background: #121212;\n  border-radius: 0.5rem;\n}\ninput.inputCheckbox:checked:before {\n  width: 3px;\n  height: 12px;\n  left: 10px;\n  top: 4px;\n  transform: rotate(41deg);\n}\ninput.inputCheckbox:checked:after {\n  width: 3px;\n  height: 6px;\n  left: 5px;\n  top: 8px;\n  transform: rotate(133deg);\n}\n\n.sge-view {\n  box-sizing: border-box;\n  min-height: inherit;\n  width: inherit;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.sge-view .sge-container {\n  padding: 1rem;\n}\n.sge-view .sge-container .sge-step-container {\n  margin-top: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  color: #e0e0e0;\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.sge-view .sge-container .sge-step-container .head {\n  margin-top: 1rem;\n}\n.sge-view .sge-container .sge-step-container label {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 10px;\n  cursor: pointer;\n}\n.sge-view .sge-container .sge-step-container label.inline {\n  flex-direction: row;\n  align-items: center;\n  gap: 0.5rem;\n}\n.sge-view .sge-container .sge-step-container label span span {\n  color: #e3b82a;\n}\n.sge-view .sge-container .sge-step-container #zipCode {\n  max-width: 115px;\n}\n.sge-view .sge-container .sge-step-container input::-webkit-outer-spin-button,\n.sge-view .sge-container .sge-step-container input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.sge-view .sge-container .sge-step-container input[type=number] {\n  -moz-appearance: textfield;\n}\n.sge-view .sge-container .sge-step-container .pdl-hint {\n  display: inline-block;\n  cursor: pointer;\n  border-bottom: solid 1px #e0e0e0;\n  margin: 0 auto;\n  padding: 0.2rem;\n}\n@media (min-width: 1023px) {\n  .sge-view .sge-container .sge-step-container .pdl-hint {\n    margin-left: 0;\n  }\n}\n.sge-view .sge-container .sge-step-container ul {\n  margin: 0;\n  padding: 0 1rem 1rem;\n  line-height: 130%;\n  border-bottom: 1px solid #7b7b7b;\n}\n.sge-view .sge-container .sge-step-container ul li {\n  margin: 0.5rem 0;\n}\n\n.sgeHintModal {\n  text-align: center;\n}\n.sgeHintModal .title {\n  color: #e3b82a;\n  margin: 1rem 0;\n}\n.sgeHintModal .pdl {\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  background: #eff2f4;\n  text-align: left;\n}\n.sgeHintModal .pdl p {\n  color: #526576;\n  margin: 0;\n}\n.sgeHintModal .pdl .bill {\n  display: flex;\n  gap: 0.5rem;\n}\n.sgeHintModal .pdl svg.prm {\n  width: 100%;\n  height: 180px;\n}\n.sgeHintModal .pdl svg.bill {\n  width: 150px;\n  height: 80px;\n}\n.sgeHintModal button {\n  margin-top: 1rem;\n}", ""]);
 
 
 
@@ -6819,13 +6794,9 @@ var SplashScreenError = function SplashScreenError(_ref) {
     className: "splash-footer"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('splashscreen.accessibility.button_reload'),
-    className: "splash-footer-button",
+    className: "btnPrimary splash-footer-button",
     onClick: function onClick() {
       return window.location.reload();
-    },
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
     }
   }, t('splashscreen.button_reload'))));
 };
@@ -8400,10 +8371,7 @@ var ChallengeCardUnlocked = function ChallengeCardUnlocked(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('challenge.accessibility.button_launch'),
     onClick: launchChallenge,
-    classes: {
-      root: 'btn-duel-active',
-      label: 'text-16-bold'
-    },
+    className: "btnPrimaryNegative",
     disabled: currentChallenge !== null
   }, t('challenge.card_unlocked.button_launch'))), /*#__PURE__*/_react.default.createElement(_ChallengeNoFluidModal.default, {
     open: openNoFluidModal,
@@ -8495,44 +8463,47 @@ var StepIdentityAndPdl = function StepIdentityAndPdl(_ref) {
   }, t('auth.enedissgegrandlyon.identityTitle')), /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "firstName",
     className: "text-16-normal"
-  }, t('auth.enedissgegrandlyon.firstName')), /*#__PURE__*/_react.default.createElement("input", {
+  }, t('auth.enedissgegrandlyon.firstName'), /*#__PURE__*/_react.default.createElement("input", {
     type: "text",
     id: "firstName",
     name: "firstName",
+    className: "inputText",
     value: sgeState.firstName,
     onChange: function onChange(e) {
       return _onChange('firstName', e.target.value);
     },
     required: true
-  }), /*#__PURE__*/_react.default.createElement("label", {
+  })), /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "lastName",
     className: "text-16-normal"
-  }, t('auth.enedissgegrandlyon.lastName')), /*#__PURE__*/_react.default.createElement("input", {
+  }, t('auth.enedissgegrandlyon.lastName'), /*#__PURE__*/_react.default.createElement("input", {
     type: "text",
     id: "lastName",
     name: "lastName",
+    className: "inputText",
     value: sgeState.lastName,
     onChange: function onChange(e) {
       return _onChange('lastName', e.target.value);
     },
     required: true
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "title text-22-bold"
   }, t('auth.enedissgegrandlyon.pdlTitle')), /*#__PURE__*/_react.default.createElement("label", {
     htmlFor: "pdl",
     className: "text-16-normal"
-  }, t('auth.enedissgegrandlyon.pdlLabel')), /*#__PURE__*/_react.default.createElement("input", {
+  }, t('auth.enedissgegrandlyon.pdlLabel'), /*#__PURE__*/_react.default.createElement("input", {
     id: "pdl",
     name: "pdl",
     type: "number",
     min: 0,
+    className: "inputText",
     value: sgeState.pdl ? sgeState.pdl : undefined,
     onChange: function onChange(e) {
       return _onChange('pdl', e.target.value, 14);
     },
     inputMode: "numeric",
     required: true
-  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement("div", {
     onClick: toggleModal,
     className: "pdl-hint text-16-normal"
   }, t('auth.enedissgegrandlyon.pdlHint')), /*#__PURE__*/_react.default.createElement(_SgeModalHint.default, {
@@ -8558,7 +8529,7 @@ module.exports = JSON.parse("{\"common\":{\"title_app\":\"Ecolyo\",\"title_consu
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.modal-overlay {\n  width: 100%;\n  height: 100%;\n}\n\n.cardUnlocked {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55));\n}\n.cardUnlocked button.btn-duel-active {\n  padding: 1.2rem 1.5rem;\n}\n@media all and (max-height: 700px) {\n  .cardUnlocked .challengeIcon {\n    width: 65%;\n    margin: auto;\n  }\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.modal-overlay {\n  width: 100%;\n  height: 100%;\n}\n\n.cardUnlocked {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55));\n}\n@media all and (max-height: 700px) {\n  .cardUnlocked .challengeIcon {\n    width: 65%;\n    margin: auto;\n  }\n}\n.cardUnlocked button {\n  height: 60px;\n}", ""]);
 
 
 
@@ -10020,7 +9991,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.duel-unlocked-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1.25rem;\n}\n\n.duel-icon {\n  margin-top: 2.5rem;\n}\n\n.duel-title {\n  color: #a0a0a0;\n}\n\n.duel-description {\n  color: #61f0f2;\n  margin-top: 0.75rem;\n  text-align: center;\n}\n\n.duel-average-info {\n  color: #e0e0e0;\n  margin-top: 2.5rem;\n  text-align: center;\n}\n\n.button-start {\n  margin-top: 1rem;\n  width: 100%;\n  max-width: 175px;\n}\n\nbutton.btn-secondary-negative {\n  margin: 0;\n  padding: 0.5rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.duel-unlocked-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 0 1.25rem;\n}\n\n.duel-icon {\n  margin-top: 2.5rem;\n}\n\n.duel-title {\n  color: #a0a0a0;\n}\n\n.duel-description {\n  color: #61f0f2;\n  margin-top: 0.75rem;\n  text-align: center;\n}\n\n.duel-average-info {\n  color: #e0e0e0;\n  margin-top: 2.5rem;\n  text-align: center;\n}\n\n.button-start {\n  margin-top: 1rem;\n  width: 100%;\n  max-width: 175px;\n}", ""]);
 
 
 
@@ -10167,13 +10138,7 @@ var SgeModalHint = function SgeModalHint(_ref) {
   })), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('auth.enedissgegrandlyon.modalHint.button-accessibility'),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    },
-    style: {
-      height: '40px'
-    }
+    className: "btnPrimary"
   }, t('auth.enedissgegrandlyon.modalHint.button'))));
 };
 
@@ -11443,7 +11408,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.exploration-card {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  width: 80%;\n  text-align: center;\n  padding: 1rem 1.5rem 1rem;\n  font-size: 1.1rem;\n  font-weight: 700;\n}\n@media (min-width: 1023px) {\n  .exploration-card {\n    width: 50%;\n  }\n}\n@media (min-width: 1201px) {\n  .exploration-card {\n    width: 40%;\n  }\n}\n.exploration-card .exploration-finish {\n  width: 75%;\n}\n@media (min-width: 768px) {\n  .exploration-card .exploration-finish {\n    width: auto;\n  }\n}\n.exploration-card button.btn-secondary-negative {\n  border-color: #e0e0e0;\n  margin-top: 1rem;\n}\n.exploration-card .exploration-icon {\n  margin-left: 0.5rem;\n}\n.exploration-card .congratulation {\n  font-size: 2.3rem;\n  margin: 2rem 0 1rem;\n}\n.exploration-card .exploration-earn {\n  margin: 2rem 0 1rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.exploration-card {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  width: 80%;\n  text-align: center;\n  padding: 1rem 1.5rem 1rem;\n  font-size: 1.1rem;\n  font-weight: 700;\n}\n@media (min-width: 1023px) {\n  .exploration-card {\n    width: 50%;\n  }\n}\n@media (min-width: 1201px) {\n  .exploration-card {\n    width: 40%;\n  }\n}\n.exploration-card .exploration-finish {\n  width: 75%;\n}\n@media (min-width: 768px) {\n  .exploration-card .exploration-finish {\n    width: auto;\n  }\n}\n.exploration-card .exploration-icon {\n  margin-left: 0.5rem;\n}\n.exploration-card .congratulation {\n  font-size: 2.3rem;\n  margin: 2rem 0 1rem;\n}\n.exploration-card .exploration-earn {\n  margin: 2rem 0 1rem;\n}\n.exploration-card button {\n  margin-top: 1rem;\n}", ""]);
 
 
 
@@ -12856,11 +12821,7 @@ var LegalNoticeModal = function LegalNoticeModal(_ref) {
   })), /*#__PURE__*/_react.default.createElement(_LegalNoticeContent.default, null), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('gcu_modal.accessibility.button_accept'),
     onClick: handleCloseClick,
-    className: "gcu-modal-button",
-    classes: {
-      root: 'btn-profile-next rounded',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('legal.accessibility.button_close')));
 };
 
@@ -13466,7 +13427,7 @@ if(false) {}
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.action-ongoing {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  width: 100%;\n  max-width: 600px;\n  padding: 1.5rem;\n  min-height: 75vh;\n  margin: auto;\n}\n.action-ongoing .duration,\n.action-ongoing .result-title {\n  color: #e0e0e0;\n}\n.action-ongoing .description {\n  color: white;\n  margin-top: 1rem;\n}\n.action-ongoing .result-date {\n  color: #61f0f2;\n  margin-bottom: 2rem;\n}\n.action-ongoing button.btn-detail {\n  padding: 0.3rem;\n}\n.action-ongoing .duration-image {\n  position: relative;\n  padding: 1rem;\n  margin: 3rem 0;\n}\n.action-ongoing .duration-image .pie {\n  width: 9rem;\n  height: 9rem;\n  display: block;\n  border-radius: 50%;\n  background-color: #121212;\n  border: 4px solid #121212;\n  position: relative;\n  top: 5px;\n  left: -2px;\n  z-index: 0;\n}\n.action-ongoing .duration-image .duration-icon {\n  position: absolute;\n  left: -25px;\n  top: -25px;\n  z-index: 0;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.action-ongoing {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  width: 100%;\n  max-width: 600px;\n  padding: 1.5rem;\n  min-height: 75vh;\n  margin: auto;\n}\n.action-ongoing .duration,\n.action-ongoing .result-title {\n  color: #e0e0e0;\n}\n.action-ongoing .description {\n  color: white;\n  margin-top: 1rem;\n}\n.action-ongoing .result-date {\n  color: #61f0f2;\n  margin-bottom: 2rem;\n}\n.action-ongoing .duration-image {\n  position: relative;\n  padding: 1rem;\n  margin: 3rem 0;\n}\n.action-ongoing .duration-image .pie {\n  width: 9rem;\n  height: 9rem;\n  display: block;\n  border-radius: 50%;\n  background-color: #121212;\n  border: 4px solid #121212;\n  position: relative;\n  top: 5px;\n  left: -2px;\n  z-index: 0;\n}\n.action-ongoing .duration-image .duration-icon {\n  position: absolute;\n  left: -25px;\n  top: -25px;\n  z-index: 0;\n}", ""]);
 
 
 
@@ -13727,7 +13688,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, ".noFluidModal {\n  padding: 1rem;\n  max-width: 20rem;\n}\n.noFluidModal .no-fluid-title {\n  text-transform: uppercase;\n  font-size: 1.8rem;\n  color: white;\n  font-family: Lato, sans-serif;\n  margin: 0.5rem auto;\n  text-align: center;\n}\n.noFluidModal .no-fluid-content {\n  font-size: 1.1rem;\n  color: white;\n  font-family: Lato, sans-serif;\n  text-align: center;\n}\n.noFluidModal button.btn-secondary-negative {\n  display: block;\n  text-align: center;\n  margin: auto;\n  margin-top: 3.5rem;\n  margin-bottom: 0;\n}\n\n.nofluid-portal .modal-overlay .modal-box {\n  max-width: 21rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
+exports.push([module.i, ".noFluidModal {\n  padding: 1rem;\n  max-width: 20rem;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.noFluidModal .no-fluid-title {\n  text-transform: uppercase;\n  font-size: 1.8rem;\n}\n.noFluidModal .no-fluid-content {\n  font-size: 1.1rem;\n}\n\n.nofluid-portal .modal-overlay .modal-box {\n  max-width: 21rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
 
 
 
@@ -13795,16 +13756,12 @@ exports.default = void 0;
 
 var _regenerator = _interopRequireDefault(__webpack_require__("o0o1"));
 
-var _defineProperty2 = _interopRequireDefault(__webpack_require__("lSNA"));
-
 var _asyncToGenerator2 = _interopRequireDefault(__webpack_require__("yXPU"));
 
 var _slicedToArray2 = _interopRequireDefault(__webpack_require__("J4zp"));
 
 var _core = __webpack_require__("TTf+");
 
-var _classnames = _interopRequireDefault(__webpack_require__("TSYQ"));
-
 var _cozyClient = __webpack_require__("SH7X");
 
 var _I18n = __webpack_require__("buk/");
@@ -13935,17 +13892,19 @@ var TermsView = function TermsView() {
   }, termsStatus.versionType === 'major' || termsStatus.versionType === 'init' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "terms-content"
   }, /*#__PURE__*/_react.default.createElement(_DataShareConsentContent.default, null), /*#__PURE__*/_react.default.createElement("label", {
-    className: (0, _classnames.default)('checkbox', (0, _defineProperty2.default)({}, 'answer-checked', dataConsentValidation))
+    className: "inline"
   }, /*#__PURE__*/_react.default.createElement("input", {
     type: "checkbox",
     name: "Data-consent-validation",
+    className: "inputCheckbox",
     onChange: handleDataConsentValidation,
     checked: dataConsentValidation
   }), t('dataShare.validDataConsent')), /*#__PURE__*/_react.default.createElement("label", {
-    className: (0, _classnames.default)('checkbox', (0, _defineProperty2.default)({}, 'answer-checked', GCUValidation))
+    className: "inline"
   }, /*#__PURE__*/_react.default.createElement("input", {
     type: "checkbox",
     name: "GCU-validation",
+    className: "inputCheckbox",
     onChange: handleGCUValidate,
     checked: GCUValidation
   }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
@@ -13969,12 +13928,8 @@ var TermsView = function TermsView() {
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('dataShare.accessibility.button_accept'),
     onClick: handleTermValidate,
-    className: (0, _classnames.default)('gcu-modal-button', (0, _defineProperty2.default)({}, 'disabled', !GCUValidation || !dataConsentValidation)),
     disabled: !GCUValidation || !dataConsentValidation,
-    classes: {
-      root: 'btn-profile-next rounded',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('dataShare.button_accept')))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "terms-content"
   }, /*#__PURE__*/_react.default.createElement(_MinorUpdateContent.default, null)), /*#__PURE__*/_react.default.createElement("div", {
@@ -13982,11 +13937,7 @@ var TermsView = function TermsView() {
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('minorUpdate.button'),
     onClick: handleTermValidate,
-    className: "gcu-modal-button",
-    classes: {
-      root: 'btn-profile-next rounded',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('minorUpdate.button')))), /*#__PURE__*/_react.default.createElement(_CGUModal.default, {
     open: openCGUModal,
     handleCloseClick: toggleCGUModal
@@ -14102,7 +14053,7 @@ exports.setPeriod = setPeriod;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-init-modal {\n  color: #e0e0e0;\n  margin: 1rem 0;\n}\n.eg-init-modal .title {\n  text-align: center;\n  color: #e3b82a;\n}\n.eg-init-modal .text {\n  margin: 1rem 0;\n}\n.eg-init-modal button {\n  min-height: 45px;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-init-modal {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.eg-init-modal .title {\n  text-align: center;\n  color: #e3b82a;\n}", ""]);
 
 
 
@@ -14438,7 +14389,7 @@ var DuelResultModal = function DuelResultModal(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "accessibility-title"
   }, t('duel_result_modal.accessibility.window_title')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "duel-result-modal-root "
+    className: "duel-result-modal-root"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "imgResultContainer"
   }, win && /*#__PURE__*/_react.default.createElement(_Icon.default, {
@@ -14461,12 +14412,8 @@ var DuelResultModal = function DuelResultModal(_ref) {
     title: userChallenge.title
   })), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('duel_result_modal.accessibility.button_validate'),
-    className: "buttonCloseModal",
-    onClick: handleCloseClick,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary",
+    onClick: handleCloseClick
   }, t("duel_result_modal.".concat(statusKey, ".button_validate")))));
 };
 
@@ -14887,10 +14834,7 @@ var EcogestureSelectionModal = function EcogestureSelectionModal(_ref) {
   }, t('ecogesture_selection.selectionModal.text')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture_selection.selectionModal.button_close'),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('ecogesture_selection.selectionModal.button_close'))));
 };
 
@@ -15166,18 +15110,12 @@ var ActionBegin = function ActionBegin(_ref) {
     className: "action-buttons"
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     onClick: toggleLaunchModal,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('action.apply')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     onClick: function onClick() {
       return setShowList(true);
     },
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('action.other')))), /*#__PURE__*/_react.default.createElement(_ActionModal.default, {
     open: openLaunchModal,
     action: currentAction,
@@ -15203,7 +15141,7 @@ module.exports = JSON.parse("[{\"_id\":\"DUEL001\",\"title\":\"Simone VEILLE\",\
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.action-begin {\n  margin: auto;\n}\n\n.action-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  padding: 1.5rem;\n}\n\n.action-begin-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  height: auto;\n  gap: 1.5rem;\n  max-height: 63svh;\n  text-align: center;\n  position: relative;\n  padding: 5rem 1rem 1rem 1rem;\n}\n@media (min-width: 1201px) {\n  .action-begin-container {\n    margin: 6rem 1rem 1rem 1rem;\n  }\n}\n.action-begin-container .icon-container {\n  width: 8.125rem;\n  height: 8.125rem;\n  position: absolute;\n  left: 0;\n  right: 0;\n  margin: 0 auto;\n  top: -70px;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 8px;\n  border: solid 2px #58ffff;\n  display: flex;\n}\n.action-begin-container .action-icon {\n  margin: auto;\n}\n.action-begin-container .action-icon-stars {\n  margin-top: -4rem;\n}\n.action-begin-container .stars .star:not(:last-of-type) {\n  margin-right: 0.4rem;\n}\n.action-begin-container .action-duration {\n  color: #e0e0e0;\n}\n.action-begin-container .action-explanation {\n  margin-bottom: 2rem;\n  line-height: 24px;\n  padding: 1rem;\n}\n@media (min-width: 1201px) {\n  .action-begin-container .action-explanation {\n    padding: 0rem 2rem;\n  }\n}\n.action-begin-container .action-buttons button {\n  padding: 0.7rem;\n  border-color: #e0e0e0;\n  margin-top: 0.5rem;\n}\n.action-begin-container .action-buttons button span {\n  font-weight: 700;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.action-begin {\n  margin: auto;\n}\n\n.action-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  padding: 1.5rem;\n}\n\n.action-begin-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  height: auto;\n  gap: 1.5rem;\n  max-height: 63svh;\n  text-align: center;\n  position: relative;\n  padding: 5rem 1rem 1rem 1rem;\n}\n@media (min-width: 1201px) {\n  .action-begin-container {\n    margin: 6rem 1rem 1rem 1rem;\n  }\n}\n.action-begin-container .icon-container {\n  width: 8.125rem;\n  height: 8.125rem;\n  position: absolute;\n  left: 0;\n  right: 0;\n  margin: 0 auto;\n  top: -70px;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 8px;\n  border: solid 2px #58ffff;\n  display: flex;\n}\n.action-begin-container .action-icon {\n  margin: auto;\n}\n.action-begin-container .action-icon-stars {\n  margin-top: -4rem;\n}\n.action-begin-container .stars .star:not(:last-of-type) {\n  margin-right: 0.4rem;\n}\n.action-begin-container .action-duration {\n  color: #e0e0e0;\n}\n.action-begin-container .action-explanation {\n  margin-bottom: 2rem;\n  line-height: 24px;\n  padding: 1rem;\n}\n@media (min-width: 1201px) {\n  .action-begin-container .action-explanation {\n    padding: 0rem 2rem;\n  }\n}\n.action-begin-container .action-buttons {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}", ""]);
 
 
 
@@ -15346,7 +15284,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.profile-form-container {\n  color: #ffffff;\n  margin: 1rem 1rem 3.5rem;\n  max-width: 53rem;\n}\n.profile-form-container .text,\n.profile-form-container .number {\n  font-size: 1.25rem;\n}\n.profile-form-container .text input,\n.profile-form-container .number input {\n  margin: 0.5rem;\n  background: #121212;\n  color: #ffffff;\n  border: 1px solid #e3b82a;\n  max-width: 5rem;\n  height: 2.5rem;\n  text-align: center;\n}\n.profile-form-container .text input:focus,\n.profile-form-container .number input:focus {\n  outline: #e3b82a 1px;\n}\n.profile-form-container .text input:disabled,\n.profile-form-container .number input:disabled {\n  -webkit-text-fill-color: #ffffff;\n  opacity: 1;\n}\n.profile-form-container .profile-question-label {\n  font-weight: bold;\n  font-size: 1.375rem;\n  line-height: 150%;\n  padding: 1rem 0;\n}\n.profile-form-container .profile-question-hint {\n  font-size: 1rem;\n  color: #e0e0e0;\n  display: block;\n  margin-bottom: 1rem;\n  font-style: italic;\n}\n.profile-form-container .profile-question-answers {\n  display: flex;\n}\n.profile-form-container .profile-question-answers-radio-long {\n  flex-wrap: wrap;\n}\n.profile-form-container .profile-question-answers-other {\n  flex-direction: column;\n}\n.profile-form-container .radio_short,\n.profile-form-container .radio_long,\n.profile-form-container .checkbox {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  margin: 0.5rem 0;\n  display: flex;\n  align-items: center;\n  font-weight: bold;\n}\n.profile-form-container .radio_short input,\n.profile-form-container .radio_long input,\n.profile-form-container .checkbox input {\n  margin: 0.5rem 1rem 0.5rem 0.5rem;\n  appearance: none;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  width: 1.2rem;\n  height: 1.2rem;\n  border-radius: 50%;\n  background: radial-gradient(60.65% 30.62% at 50% 3.13%, #2a2b30 0%, #1b1c22 100%);\n  position: relative;\n}\n.profile-form-container .checkbox input {\n  border-radius: 1px;\n}\n.profile-form-container .radio_short,\n.profile-form-container .checkbox {\n  padding: 1.2rem;\n  border-radius: 4px;\n}\n.profile-form-container .radio_long {\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n  text-align: center;\n}\n.profile-form-container .answer-checked {\n  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;\n  color: #121212;\n}\n.profile-form-container .answer-checked input:before, .profile-form-container .answer-checked input:after {\n  content: \"\";\n  position: absolute;\n  display: inline-block;\n  background: #e3b82a;\n  border-radius: 0.5rem;\n}\n.profile-form-container .answer-checked input:before {\n  width: 3px;\n  height: 12px;\n  left: 10px;\n  top: 4px;\n  transform: rotate(41deg);\n}\n.profile-form-container .answer-checked input:after {\n  width: 3px;\n  height: 6px;\n  left: 5px;\n  top: 8px;\n  transform: rotate(133deg);\n}\n.profile-form-container .number-container {\n  display: flex;\n  justify-content: left;\n  align-items: center;\n}\n.profile-form-container .btn-profile-number {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  background-color: transparent;\n  border: none;\n  border-radius: 2px;\n  width: 2.5rem;\n  height: 2.5rem;\n  font-size: 2rem;\n  color: #ffffff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0.5rem;\n}\n.profile-form-container .btn-profile-number:disabled {\n  color: rgba(255, 255, 255, 0.5);\n}\n.profile-form-container .date-select {\n  margin: 0.5em;\n  border: 1px solid #e3b82a;\n  background: #121212;\n  font-weight: bold;\n}\n.profile-form-container .date-select .MuiInput-underline:after {\n  display: none;\n}\n.profile-form-container .date-select .year {\n  text-align: center;\n  display: inline-flex;\n  align-content: center;\n  font-size: 1.25rem;\n  font-family: Lato, sans-serif;\n  color: #ffffff;\n  width: 93px;\n}\n.profile-form-container .date-select .year svg {\n  top: 0;\n  background-color: #e3b82a;\n  height: 100%;\n}\n.profile-form-container .date-select .month {\n  color: #ffffff;\n  font-size: 1.25rem;\n  text-align: center;\n  display: inline-flex;\n  align-content: center;\n  font-family: Lato, sans-serif;\n  min-width: 130px;\n  max-width: 150px;\n}\n.profile-form-container .date-select .month svg {\n  top: 0;\n  right: 0;\n  background-color: #e3b82a;\n  height: 100%;\n}\n.profile-form-container .select-container {\n  display: flex;\n}\n.profile-form-container .date-option {\n  color: #ffffff;\n}\n.profile-form-container ul {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  color: #ffffff;\n  font-weight: normal;\n}\n.profile-form-container ul .MuiMenuItem-root {\n  font-family: Lato, sans-serif;\n  text-align: center;\n  font-size: 1.25rem;\n  display: flex;\n  justify-content: space-evenly;\n}\n.profile-form-container ul .MuiMenuItem-root :hover {\n  background-color: #e3b82a;\n}\n.profile-form-container ul .MuiListItem-root.Mui-selected,\n.profile-form-container ul .MuiListItem-root.Mui-selected:hover {\n  background-color: #e3b82a;\n  color: #1b1c22;\n  font-weight: bold;\n  display: flex;\n  justify-content: space-evenly;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.profile-form-container {\n  color: #ffffff;\n  margin: 1rem 1rem 3.5rem;\n  max-width: 53rem;\n}\n.profile-form-container .text {\n  font-size: 1.25rem;\n}\n.profile-form-container .profile-question-label {\n  font-weight: bold;\n  font-size: 1.375rem;\n  line-height: 150%;\n  padding: 1rem 0;\n}\n.profile-form-container .profile-question-hint {\n  font-size: 1rem;\n  color: #e0e0e0;\n  display: block;\n  margin-bottom: 1rem;\n  font-style: italic;\n}\n.profile-form-container .profile-question-answers {\n  display: flex;\n}\n.profile-form-container .profile-question-answers-radio-long {\n  flex-wrap: wrap;\n}\n.profile-form-container .profile-question-answers-other {\n  flex-direction: column;\n}\n.profile-form-container .radio_short,\n.profile-form-container .radio_long,\n.profile-form-container .checkbox {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  margin: 0.5rem 0;\n  display: flex;\n  align-items: center;\n  font-weight: bold;\n}\n.profile-form-container .radio_short input,\n.profile-form-container .radio_long input,\n.profile-form-container .checkbox input {\n  margin: 0.5rem 1rem 0.5rem 0.5rem;\n  appearance: none;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  width: 1.2rem;\n  height: 1.2rem;\n  border-radius: 50%;\n  background: radial-gradient(60.65% 30.62% at 50% 3.13%, #2a2b30 0%, #1b1c22 100%);\n  position: relative;\n}\n.profile-form-container .checkbox input {\n  border-radius: 1px;\n}\n.profile-form-container .radio_short,\n.profile-form-container .checkbox {\n  padding: 1.2rem;\n  border-radius: 4px;\n}\n.profile-form-container .radio_long {\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n  text-align: center;\n}\n.profile-form-container .answer-checked {\n  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;\n  color: #121212;\n}\n.profile-form-container .answer-checked input:before, .profile-form-container .answer-checked input:after {\n  content: \"\";\n  position: absolute;\n  display: inline-block;\n  background: #e3b82a;\n  border-radius: 0.5rem;\n}\n.profile-form-container .answer-checked input:before {\n  width: 3px;\n  height: 12px;\n  left: 10px;\n  top: 4px;\n  transform: rotate(41deg);\n}\n.profile-form-container .answer-checked input:after {\n  width: 3px;\n  height: 6px;\n  left: 5px;\n  top: 8px;\n  transform: rotate(133deg);\n}\n.profile-form-container .number-container {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n.profile-form-container .number-container input {\n  border-color: #e3b82a;\n}\n.profile-form-container .date-select {\n  margin: 0.5em;\n  border: 1px solid #e3b82a;\n  background: #121212;\n  font-weight: bold;\n}\n.profile-form-container .date-select .MuiInput-underline:after {\n  display: none;\n}\n.profile-form-container .date-select .year {\n  text-align: center;\n  display: inline-flex;\n  align-content: center;\n  font-size: 1.25rem;\n  font-family: Lato, sans-serif;\n  color: #ffffff;\n  width: 93px;\n}\n.profile-form-container .date-select .year svg {\n  top: 0;\n  background-color: #e3b82a;\n  height: 100%;\n}\n.profile-form-container .date-select .month {\n  color: #ffffff;\n  font-size: 1.25rem;\n  text-align: center;\n  display: inline-flex;\n  align-content: center;\n  font-family: Lato, sans-serif;\n  min-width: 130px;\n  max-width: 150px;\n}\n.profile-form-container .date-select .month svg {\n  top: 0;\n  right: 0;\n  background-color: #e3b82a;\n  height: 100%;\n}\n.profile-form-container .select-container {\n  display: flex;\n}\n.profile-form-container .date-option {\n  color: #ffffff;\n}\n.profile-form-container ul {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  color: #ffffff;\n  font-weight: normal;\n}\n.profile-form-container ul .MuiMenuItem-root {\n  font-family: Lato, sans-serif;\n  text-align: center;\n  font-size: 1.25rem;\n  display: flex;\n  justify-content: space-evenly;\n}\n.profile-form-container ul .MuiMenuItem-root :hover {\n  background-color: #e3b82a;\n}\n.profile-form-container ul .MuiListItem-root.Mui-selected,\n.profile-form-container ul .MuiListItem-root.Mui-selected:hover {\n  background-color: #e3b82a;\n  color: #1b1c22;\n  font-weight: bold;\n  display: flex;\n  justify-content: space-evenly;\n}", ""]);
 
 
 
@@ -15401,7 +15339,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.unsubscribe-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  max-width: 450px;\n  margin: auto;\n  padding: 2rem;\n  text-align: center;\n}\n.unsubscribe-container .head {\n  color: #e3b82a;\n}\n.unsubscribe-container .question {\n  color: #ffffff;\n  margin-top: 1.5rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.unsubscribe-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n  max-width: 450px;\n  margin: auto;\n  padding: 2rem;\n  text-align: center;\n}\n.unsubscribe-container .head {\n  color: #e3b82a;\n}\n.unsubscribe-container .question {\n  color: #ffffff;\n}", ""]);
 
 
 
@@ -15708,7 +15646,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.splash-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 100%;\n}\n.splash-content .splash-loader {\n  width: 100%;\n  margin-top: 20vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.splash-content .splash-loader .error {\n  margin-bottom: 1rem;\n}\n.splash-content .splash-loader span {\n  color: #ffffff;\n  font-size: 3rem;\n  margin: 0;\n  letter-spacing: -0.02em;\n  font-weight: 400;\n}\n.splash-content .splash-logos-container {\n  margin-top: auto;\n  margin-bottom: 1rem;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.splash-content .step-label {\n  margin: 1rem 0;\n  max-width: 350px;\n  color: white;\n  text-align: center;\n  height: 40px;\n}\n.splash-content .splash-error-text {\n  text-align: center;\n  color: #d25959;\n  margin: 0.5rem;\n}\n\n.splash-footer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  height: 10rem;\n}\n.splash-footer button.btn-highlight {\n  max-width: 230px;\n  width: 100%;\n  margin: 0.5rem 0 0;\n  height: 40px;\n}\n\n.splash-progress {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 1rem auto;\n  padding: 1rem;\n  transition: all 300ms ease;\n  border-radius: 12px;\n  box-sizing: border-box;\n  max-width: 350px;\n}\n.splash-progress .splash-progress-bar-container {\n  flex: 1;\n  height: 12px;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, #e3b82a 11.11%, #1b1c22 11.11%, #1b1c22 50%, #e3b82a 50%, #e3b82a 61.11%, #1b1c22 61.11%, #1b1c22 100%);\n  background-size: 9px 9px;\n  border: solid 1px #e3b82a;\n  border-radius: 12px;\n  overflow: hidden;\n  position: relative;\n}\n.splash-progress .splash-progress-bar-container .splash-progress-bar-content {\n  background-color: #e3b82a;\n  position: absolute;\n  bottom: -150px;\n  left: -100%;\n  height: 300px;\n  width: 100%;\n  transform: rotate(45deg);\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.splash-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  height: 100%;\n}\n.splash-content .splash-loader {\n  width: 100%;\n  margin-top: 20vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.splash-content .splash-loader .error {\n  margin-bottom: 1rem;\n}\n.splash-content .splash-loader span {\n  color: #ffffff;\n  font-size: 3rem;\n  margin: 0;\n  letter-spacing: -0.02em;\n  font-weight: 400;\n}\n.splash-content .splash-logos-container {\n  margin-top: auto;\n  margin-bottom: 1rem;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.splash-content .step-label {\n  margin: 1rem 0;\n  max-width: 350px;\n  color: white;\n  text-align: center;\n  height: 40px;\n}\n.splash-content .splash-error-text {\n  text-align: center;\n  color: #d25959;\n  margin: 0.5rem;\n}\n\n.splash-footer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  height: 10rem;\n}\n.splash-footer button {\n  max-width: 230px;\n}\n\n.splash-progress {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 1rem auto;\n  padding: 1rem;\n  transition: all 300ms ease;\n  border-radius: 12px;\n  box-sizing: border-box;\n  max-width: 350px;\n}\n.splash-progress .splash-progress-bar-container {\n  flex: 1;\n  height: 12px;\n  box-sizing: border-box;\n  background-image: linear-gradient(45deg, #e3b82a 11.11%, #1b1c22 11.11%, #1b1c22 50%, #e3b82a 50%, #e3b82a 61.11%, #1b1c22 61.11%, #1b1c22 100%);\n  background-size: 9px 9px;\n  border: solid 1px #e3b82a;\n  border-radius: 12px;\n  overflow: hidden;\n  position: relative;\n}\n.splash-progress .splash-progress-bar-container .splash-progress-bar-content {\n  background-color: #e3b82a;\n  position: absolute;\n  bottom: -150px;\n  left: -100%;\n  height: 300px;\n  width: 100%;\n  transform: rotate(45deg);\n}", ""]);
 
 
 
@@ -15809,10 +15747,7 @@ var ExplorationError = function ExplorationError() {
     onClick: function onClick() {
       return navigate(-1);
     },
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('exploration.button_go_back'))));
 };
 
@@ -17048,10 +16983,7 @@ var DuelEmptyValueModal = function DuelEmptyValueModal(_ref) {
   }, t('duel_empty_value_modal.message')), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('duel_empty_value_modal.accessibility.button_validate'),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('duel_empty_value_modal.button'))));
 };
 
@@ -17141,6 +17073,41 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 /***/ }),
 
+/***/ "SlEa":
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.theme = void 0;
+
+var _core = __webpack_require__("TTf+");
+
+var theme = (0, _core.createTheme)({
+  palette: {
+    type: 'dark'
+  },
+  overrides: {
+    MuiButton: {
+      root: {
+        height: 40
+      },
+      sizeSmall: {
+        height: 32
+      },
+      sizeLarge: {
+        height: 40
+      }
+    }
+  }
+});
+exports.theme = theme;
+
+/***/ }),
+
 /***/ "Slpi":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -17341,10 +17308,7 @@ var DuelUnlocked = function DuelUnlocked(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('duel.accessibility.button_start_duel'),
     onClick: launchDuel,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('duel.button_start')))));
 };
 
@@ -17636,10 +17600,7 @@ var QuizQuestionContent = function QuizQuestionContent(_ref) {
     "aria-label": t('quiz.accessibility.button_validate'),
     onClick: validateQuestion,
     disabled: !userChoice,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary validate"
   }, t('quiz.button_validate')), openModal && /*#__PURE__*/_react.default.createElement(_QuizExplanationModal.default, {
     open: openModal,
     answerIndex: answerIndex,
@@ -18492,10 +18453,7 @@ var DuelError = function DuelError() {
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('duel.accessibility.button_go_back'),
     onClick: goBack,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('duel.button_go_back'))));
 };
 
@@ -18791,17 +18749,11 @@ var ChallengeCardDone = function ChallengeCardDone(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('challenge.card_done.final_defi_view'),
     onClick: goDuel,
-    classes: {
-      root: 'btn-secondary-negative grey-border',
-      label: 'text-15-bold'
-    }
+    className: "btnSecondary"
   }, t('challenge.card_done.final_defi_view')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('challenge.card_done.reset_defi'),
     onClick: handleChallengeReset,
-    classes: {
-      root: userChallenge.success === _enums.UserChallengeSuccess.WIN ? 'btn-secondary-negative grey-border' : 'btn-primary-challenge',
-      label: 'text-15-bold'
-    },
+    className: userChallenge.success === _enums.UserChallengeSuccess.WIN ? 'btnSecondary' : 'btnPrimaryNegative',
     disabled: currentChallenge !== null
   }, t('challenge.card_done.reset_defi'))));
 };
@@ -19983,7 +19935,7 @@ exports.default = CustomPopupService;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.action-modal {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: #e0e0e0;\n  padding: 1.5rem;\n  max-width: 400px;\n}\n.action-modal .action-duration {\n  margin-top: 1rem;\n}\n.action-modal .action-text {\n  margin: 1.6rem 0;\n}\n.action-modal .buttons button {\n  margin-top: 0.5rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.action-modal {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: #e0e0e0;\n  padding: 1.5rem;\n  max-width: 400px;\n}\n.action-modal .action-duration {\n  margin-top: 1rem;\n}\n.action-modal .action-text {\n  margin: 1.6rem 0;\n}\n.action-modal .buttons {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
 
 
 
@@ -20261,19 +20213,13 @@ var EcogestureSelectionRestart = function EcogestureSelectionRestart(_ref) {
     className: "buttons"
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture_selection.accessibility.button_go_to_ecogesture'),
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    },
+    className: "btnSecondary",
     onClick: function onClick() {
       return navigate('/ecogestures?tab=0');
     }
   }, t('ecogesture_selection.button_go_to_ecogesture')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture_selection.accessibility.button_continue'),
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    },
+    className: "btnPrimary",
     onClick: restart
   }, t('ecogesture_selection.button_continue'))));
 };
@@ -20526,7 +20472,7 @@ exports.getActualAnalysisDate = getActualAnalysisDate;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.quiz-container .question-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 1.5rem;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  position: relative;\n}\n@media (min-width: 768px) {\n  .quiz-container .question-container {\n    height: 45vh;\n  }\n}\n.quiz-container .question-container .question-loading {\n  min-height: 13.875rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.quiz-container .question-container .question {\n  color: #e0e0e0;\n  text-align: center;\n  margin-bottom: 2rem;\n}\n@media (min-width: 768px) {\n  .quiz-container .question-container .question {\n    padding: 0 1rem;\n  }\n}\n.quiz-container .question-container .question-title {\n  color: #61f0f2;\n  margin-bottom: 0.5rem;\n}\n.quiz-container .question-container .btn-back {\n  color: #ffffff;\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 1.3rem;\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n}\n.quiz-container .answer {\n  text-align: center;\n  width: 100%;\n}\n@media (min-width: 768px) {\n  .quiz-container .answer {\n    max-width: 80%;\n  }\n}\n.quiz-container .answer input[type=radio] {\n  position: fixed;\n  opacity: 0;\n  pointer-events: none;\n}\n.quiz-container .answer input[type=radio]:focus + label {\n  background: #61f0f2;\n  color: #121212;\n  border-color: #61f0f2;\n}\n.quiz-container .answer label {\n  display: block;\n  border: 1px solid #e0e0e0;\n  padding: 0.5rem;\n  margin-bottom: 1rem;\n  cursor: pointer;\n}\n.quiz-container .answer input[type=radio]:checked + label,\n.quiz-container .answer label:hover {\n  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;\n  color: #121212;\n  border-color: #61f0f2;\n}\n.quiz-container button.btn-secondary-negative {\n  width: auto;\n  padding: 0.5rem 3rem;\n  border-color: #e0e0e0;\n}\n.quiz-container .index-question {\n  margin: 2rem 0 1rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.quiz-container .question-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 1.5rem;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  position: relative;\n}\n@media (min-width: 768px) {\n  .quiz-container .question-container {\n    height: 45vh;\n  }\n}\n.quiz-container .question-container .question-loading {\n  min-height: 13.875rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.quiz-container .question-container .question {\n  color: #e0e0e0;\n  text-align: center;\n  margin-bottom: 2rem;\n}\n@media (min-width: 768px) {\n  .quiz-container .question-container .question {\n    padding: 0 1rem;\n  }\n}\n.quiz-container .question-container .question-title {\n  color: #61f0f2;\n  margin-bottom: 0.5rem;\n}\n.quiz-container .question-container .btn-back {\n  color: #ffffff;\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: 1.3rem;\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n}\n.quiz-container .answer {\n  text-align: center;\n  width: 100%;\n}\n@media (min-width: 768px) {\n  .quiz-container .answer {\n    max-width: 80%;\n  }\n}\n.quiz-container .answer input[type=radio] {\n  position: fixed;\n  opacity: 0;\n  pointer-events: none;\n}\n.quiz-container .answer input[type=radio]:focus + label {\n  background: #61f0f2;\n  color: #121212;\n  border-color: #61f0f2;\n}\n.quiz-container .answer label {\n  display: block;\n  border: 1px solid #e0e0e0;\n  padding: 0.5rem;\n  margin-bottom: 1rem;\n  cursor: pointer;\n}\n.quiz-container .answer input[type=radio]:checked + label,\n.quiz-container .answer label:hover {\n  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;\n  color: #121212;\n  border-color: #61f0f2;\n}\n.quiz-container button.validate {\n  margin-top: 1rem;\n  width: auto;\n  padding: 0.5rem 3rem;\n}\n.quiz-container .index-question {\n  margin: 2rem 0 1rem;\n}", ""]);
 
 
 
@@ -20728,10 +20674,7 @@ var EcogestureModal = function EcogestureModal(_ref) {
     className: "text-16-bold long-name"
   }, ecogesture.longName), isAction ? /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('ecogesture_modal.accessibility.button_select_action'),
-    classes: {
-      root: 'btn-action-launch',
-      label: 'text-16-bold'
-    },
+    className: "btnPrimaryNegative",
     onClick: selectEcogesture
   }, t('ecogesture_modal.select_action')) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Collapse, {
     in: showDetails
@@ -20744,10 +20687,7 @@ var EcogestureModal = function EcogestureModal(_ref) {
         return !prev;
       });
     },
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-14-normal'
-    }
+    className: "btnSecondary"
   }, t("ecogesture_modal.show_".concat(showDetails ? 'less' : 'more')))))));
 };
 
@@ -21159,7 +21099,7 @@ if(false) {}
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.em-header {\n  color: #e0e0e0;\n  border-bottom: 1px solid rgba(163, 163, 163, 0.4);\n  padding: 1em 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.em-root {\n  overflow: auto;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  /* width */\n  /* Track */\n  /* Handle */\n}\n.em-root::-webkit-scrollbar {\n  width: 10px;\n}\n.em-root::-webkit-scrollbar-track {\n  background: #3e4045;\n}\n.em-root::-webkit-scrollbar-thumb {\n  background: #6f7074;\n}\n.em-root .em-content {\n  padding: 1.5rem 2.5rem;\n  width: 100%;\n}\n@media only screen and (max-width : 768px) {\n  .em-root .em-content {\n    width: 100%;\n    padding: 2rem;\n  }\n}\n.em-root .em-content .em-content-box-img {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.em-root .em-content .em-content-box-img .icon {\n  margin-bottom: 1rem;\n}\n.em-root .em-content .em-detail {\n  display: flex;\n  flex-direction: row;\n  margin: 0.5em 0;\n}\n.em-root .em-content .em-detail .em-detail-efficiency {\n  display: flex;\n  flex: 1;\n  align-self: flex-start;\n  margin-top: 0.65rem;\n  color: #a0a0a0;\n}\n.em-root .em-content .em-detail .em-picto-flow {\n  display: flex;\n  align-self: flex-end;\n}\n.em-root .em-content .em-detail .em-picto-flow .em-pic-content {\n  margin: 0.3em;\n}\n.em-root .em-content .em-efficiency {\n  margin: 0 0.5rem 0 0.25rem;\n}\n.em-root .em-content .em-title {\n  margin-bottom: 0;\n  text-align: center;\n}\n.em-root .em-content .long-name {\n  font-weight: bold;\n  line-height: 150%;\n  background: radial-gradient(60.65% 30.62% at 50% 3.13%, #2a2b30 0%, #1b1c22 100%);\n  border: 1px solid #58ffff;\n  padding: 1.5rem 0.6rem;\n  border-radius: 50px 1px 50px 1px;\n  text-align: center;\n  margin: 1.5rem 0 1rem;\n}\n.em-root .em-content button.btn-action-launch {\n  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;\n  border: none;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: none;\n  cursor: pointer;\n  padding: 0.6rem 0;\n}\n\n.em-content-box-text {\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem 2.5rem;\n}\n@media only screen and (max-width : 768px) {\n  .em-content-box-text {\n    padding: 1.5rem 1.5rem;\n  }\n}\n.em-content-box-text .em-description {\n  padding-bottom: 2rem;\n}\n.em-content-box-text .em-description-2 {\n  padding-top: 2rem;\n}\n.em-content-box-text .em-description-3 {\n  padding-bottom: 0.5rem;\n}\n.em-content-box-text .em-title {\n  margin-bottom: 0;\n}\n\n.block {\n  display: block !important;\n}\n\n.ecogesture-modal button.btn-secondary-negative {\n  margin: 1rem 0 1.5rem !important;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.em-header {\n  color: #e0e0e0;\n  border-bottom: 1px solid rgba(163, 163, 163, 0.4);\n  padding: 1em 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.em-root {\n  display: flex;\n}\n.em-root .em-content {\n  padding: 1.5rem 2.5rem;\n}\n.em-root .em-content button {\n  margin-top: 1rem;\n}\n@media only screen and (max-width : 768px) {\n  .em-root .em-content {\n    padding: 2rem;\n  }\n}\n.em-root .em-content .em-content-box-img {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n.em-root .em-content .em-content-box-img .icon {\n  margin-bottom: 1rem;\n}\n.em-root .em-content .em-detail {\n  display: flex;\n  flex-direction: row;\n  margin: 0.5em 0;\n}\n.em-root .em-content .em-detail .em-detail-efficiency {\n  display: flex;\n  flex: 1;\n  align-self: flex-start;\n  margin-top: 0.65rem;\n  color: #a0a0a0;\n}\n.em-root .em-content .em-detail .em-picto-flow {\n  display: flex;\n  align-self: flex-end;\n}\n.em-root .em-content .em-detail .em-picto-flow .em-pic-content {\n  margin: 0.3em;\n}\n.em-root .em-content .em-efficiency {\n  margin: 0 0.5rem 0 0.25rem;\n}\n.em-root .em-content .em-title {\n  margin-bottom: 0;\n  text-align: center;\n}\n.em-root .em-content .long-name {\n  font-weight: bold;\n  line-height: 150%;\n  background: radial-gradient(60.65% 30.62% at 50% 3.13%, #2a2b30 0%, #1b1c22 100%);\n  border: 1px solid #58ffff;\n  padding: 1.5rem 0.6rem;\n  border-radius: 50px 1px 50px 1px;\n  text-align: center;\n  margin: 1.5rem 0 1rem;\n}\n\n.em-content-box-text {\n  display: flex;\n  flex-direction: column;\n  padding: 1.5rem 2.5rem;\n}\n@media only screen and (max-width : 768px) {\n  .em-content-box-text {\n    padding: 1.5rem 1.5rem;\n  }\n}\n.em-content-box-text .em-description {\n  padding-bottom: 2rem;\n}\n.em-content-box-text .em-description-2 {\n  padding-top: 2rem;\n}\n.em-content-box-text .em-description-3 {\n  padding-bottom: 0.5rem;\n}\n.em-content-box-text .em-title {\n  margin-bottom: 0;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
 
 
 
@@ -21653,10 +21593,7 @@ var EcogestureLaunchFormModal = function EcogestureLaunchFormModal(_ref) {
   }, t('ecogesture.initModal.text3')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture.initModal.btn2'),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-profile-next rounded',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('ecogesture.initModal.btn2'))));
 };
 
@@ -21837,17 +21774,11 @@ var FeedbackModal = function FeedbackModal() {
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('feedback.later'),
     onClick: closeModal,
-    classes: {
-      root: 'btn-secondary-positive',
-      label: 'text-16-bold'
-    }
+    className: "btnSecondary"
   }, t('feedback.later')), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('feedback.lets_go'),
     onClick: goToSAU,
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary"
   }, t('feedback.lets_go')))));
 };
 
@@ -23256,7 +23187,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.duel-result-modal-root {\n  text-align: center;\n  overflow-x: hidden;\n}\n.duel-result-modal-root .title {\n  margin: 2rem 0 1rem;\n  color: #e0e0e0;\n}\n\n#accessibility-title {\n  display: none;\n}\n\n.imgResultContainer {\n  position: relative;\n  height: 300px;\n  width: 100%;\n}\n.imgResultContainer .challengeWon {\n  position: absolute;\n  transform: translateX(-50%);\n}\n.imgResultContainer .imgResult {\n  position: absolute;\n  transform: translate(-50%, 32%);\n}\n\n.buttonCloseModal {\n  margin-top: 1rem !important;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.duel-result-modal-root {\n  text-align: center;\n  overflow-x: hidden;\n}\n.duel-result-modal-root .title {\n  margin: 2rem 0 1rem;\n  color: #e0e0e0;\n}\n.duel-result-modal-root button {\n  margin-top: 1rem;\n}\n\n#accessibility-title {\n  display: none;\n}\n\n.imgResultContainer {\n  position: relative;\n  height: 300px;\n  width: 100%;\n}\n.imgResultContainer .challengeWon {\n  position: absolute;\n  transform: translateX(-50%);\n}\n.imgResultContainer .imgResult {\n  position: absolute;\n  transform: translate(-50%, 32%);\n}", ""]);
 
 
 
@@ -24118,7 +24049,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-selection-detail-container {\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n  color: #e0e0e0;\n  padding: 0 1.5rem;\n  flex: 1;\n  max-height: calc(100vh - 60px - 72px - 0px);\n}\n.eg-selection-detail-container .content {\n  display: flex;\n  gap: 0.5rem;\n  flex-direction: column;\n  flex: 1;\n  justify-content: flex-start;\n  align-items: center;\n  overflow-y: auto;\n}\n.eg-selection-detail-container .content .title {\n  color: #a0a0a0;\n  font-weight: 700;\n}\n.eg-selection-detail-container .content .iconContainer {\n  height: 240px;\n}\n.eg-selection-detail-container .content .showMore {\n  text-align: center;\n  text-decoration: underline;\n  margin-top: 1rem;\n  cursor: pointer;\n}\n.eg-selection-detail-container .content .longDescription {\n  margin: 1rem 0.5rem;\n  text-align: left;\n}\n.eg-selection-detail-container .buttons {\n  margin: 1rem 0;\n  display: flex;\n  gap: 0.5rem;\n  flex-direction: row;\n  justify-content: center;\n  width: 100%;\n}\n.eg-selection-detail-container .buttons button.btn-secondary-negative {\n  margin: 0;\n  padding: 0.75rem 0.25rem;\n  height: 7.375rem;\n  border: 1px solid #e0e0e0;\n  border-radius: 0.25rem;\n}\n.eg-selection-detail-container .buttons button.btn-secondary-negative:focus, .eg-selection-detail-container .buttons button.btn-secondary-negative.active, .eg-selection-detail-container .buttons button.btn-secondary-negative:disabled, .eg-selection-detail-container .buttons button.btn-secondary-negative:hover {\n  background: transparent;\n}\n.eg-selection-detail-container .buttons button.btn-secondary-negative span {\n  flex-direction: column;\n  color: #e0e0e0;\n}\n.eg-selection-detail-container .buttons button.noFocus {\n  background: transparent;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-selection-detail-container {\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n  color: #e0e0e0;\n  padding: 0 1.5rem;\n  flex: 1;\n  max-height: calc(100vh - 60px - 72px - 0px);\n}\n.eg-selection-detail-container .content {\n  display: flex;\n  gap: 0.5rem;\n  flex-direction: column;\n  flex: 1;\n  justify-content: flex-start;\n  align-items: center;\n  overflow-y: auto;\n}\n.eg-selection-detail-container .content .title {\n  color: #a0a0a0;\n  font-weight: 700;\n}\n.eg-selection-detail-container .content .iconContainer {\n  height: 240px;\n}\n.eg-selection-detail-container .content .showMore {\n  text-align: center;\n  text-decoration: underline;\n  margin-top: 1rem;\n  cursor: pointer;\n}\n.eg-selection-detail-container .content .longDescription {\n  margin: 1rem 0.5rem;\n  text-align: left;\n}\n.eg-selection-detail-container .buttons {\n  margin: 1rem 0;\n  display: flex;\n  gap: 0.5rem;\n  flex-direction: row;\n  justify-content: center;\n  width: 100%;\n}\n.eg-selection-detail-container .buttons button.btnSecondary {\n  padding: 0.75rem 0.25rem;\n  height: 7.375rem;\n  border-radius: 4px;\n}\n.eg-selection-detail-container .buttons button.btnSecondary span {\n  flex-direction: column;\n}", ""]);
 
 
 
@@ -25633,7 +25564,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.quiz-modal-root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  gap: 1rem;\n}\n.quiz-modal-root .quiz-modal-answer {\n  font-weight: bold;\n  font-size: 1.7rem;\n  text-transform: uppercase;\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n.quiz-modal-root .quiz-modal-answer.correct {\n  color: #e3b82a;\n}\n.quiz-modal-root .quiz-modal-answer.wrong {\n  color: #d25959;\n}\n.quiz-modal-root .answer-label {\n  margin-bottom: 0.5rem;\n}\n.quiz-modal-root button.btn-secondary-negative {\n  width: auto;\n  padding: 0.5rem 3rem;\n  border-color: #e0e0e0;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.quiz-modal-root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  gap: 1rem;\n}\n.quiz-modal-root .quiz-modal-answer {\n  font-weight: bold;\n  font-size: 1.7rem;\n  text-transform: uppercase;\n  margin-top: 0;\n  margin-bottom: 1rem;\n}\n.quiz-modal-root .quiz-modal-answer.correct {\n  color: #e3b82a;\n}\n.quiz-modal-root .quiz-modal-answer.wrong {\n  color: #d25959;\n}\n.quiz-modal-root .answer-label {\n  margin-bottom: 0.5rem;\n}\n.quiz-modal-root button {\n  margin-top: 1rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
 
 
 
@@ -25888,7 +25819,7 @@ exports.setCurrentDataChart = setCurrentDataChart;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.cardContent {\n  background: transparent;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 1rem;\n}\n.cardContent.onGoing {\n  border: 1px solid #e0e0e0;\n  background: inherit !important;\n}\n.cardContent.onGoing .challengeTitle {\n  margin-top: 0;\n}\n\n.titleBlock {\n  position: absolute;\n  left: 0;\n  right: 0;\n  margin: auto;\n  top: -1.5rem;\n  background: #121212;\n  width: fit-content;\n  padding: 0 1rem;\n  max-width: 235px;\n}\n\n.notifChallenge {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  right: 4px;\n  top: 4px;\n  width: 1.25rem;\n  height: 1.25rem;\n  color: #25262b;\n  border-radius: 50%;\n  border: 1px solid #25262b;\n  z-index: 1;\n  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;\n  font-size: 12px;\n}\n\n.smallCard {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  max-height: 90px;\n}\n@media all and (max-height: 800px) {\n  .smallCard {\n    max-height: 85px;\n  }\n}\n@media all and (max-height: 730px) {\n  .smallCard {\n    max-height: 70px;\n  }\n}\n.smallCard.finished {\n  border: 1px solid #7b7b7b;\n  background: #121212;\n}\n.smallCard.finished > * {\n  color: #7b7b7b !important;\n}\n.smallCard.duelCard {\n  background: #181819;\n  border: solid 1px rgba(97, 240, 242, 0.5);\n}\n.smallCard.duelCard.active {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n}\n.smallCard.duelCard span {\n  justify-content: space-between !important;\n}\n.smallCard.goDuel {\n  background: linear-gradient(180deg, #61f0f2 0%, #48c2c4 100%);\n}\n.smallCard.goDuel span {\n  color: #121212 !important;\n  justify-content: space-between !important;\n  font-weight: 700;\n}\n.smallCard span.MuiButton-label {\n  display: flex;\n  justify-content: flex-start;\n  padding: 1rem 0.5rem;\n  color: #e0e0e0;\n  transition: all 300ms ease;\n  text-transform: capitalize;\n}\n.smallCard span.MuiButton-label .content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  text-transform: capitalize;\n}\n.smallCard span.MuiButton-label .content .stars {\n  display: flex;\n  gap: 2px;\n}\n.smallCard span.MuiButton-label .spinner-container {\n  height: 3.75rem;\n  width: 3.75rem;\n  margin: auto;\n}\n.smallCard span.MuiButton-label .cardIcon {\n  margin-right: 1rem;\n}\n.smallCard span.MuiButton-label span {\n  font-size: 1.1rem;\n  font-weight: 700;\n}\n@media all and (max-height: 700px) {\n  .smallCard span.MuiButton-label span {\n    font-size: 1rem;\n  }\n}\n.smallCard span.MuiButton-label .challengeminIcon {\n  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.55));\n}\n.smallCard span.MuiButton-label .starCount {\n  display: flex;\n  align-items: center;\n  margin: 0;\n}\n.smallCard span.MuiButton-label .starCount span {\n  margin: 0;\n}\n.smallCard span.MuiButton-label .starCount .blueNumber {\n  font-weight: 900;\n  color: #61f0f2;\n  margin: 0 0.3rem 0 0.7rem;\n}\n.smallCard span.MuiButton-label .finalDuel {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.smallCard span.MuiButton-label .finalDuel .starCount span {\n  font-size: 1rem;\n  font-weight: 500;\n}\n.smallCard span.MuiButton-label .finalDuel .starCount .blueNumber {\n  margin-left: 0;\n}\n.smallCard span.MuiButton-label .finalDuel.result span {\n  margin-bottom: 0.2rem;\n  font-weight: 600;\n  font-size: 1rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.cardContent {\n  background: transparent;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 1rem;\n}\n.cardContent.onGoing {\n  border: 1px solid #e0e0e0;\n  background: inherit !important;\n}\n.cardContent.onGoing .challengeTitle {\n  margin-top: 0;\n}\n.cardContent button {\n  height: unset;\n}\n\n.titleBlock {\n  position: absolute;\n  left: 0;\n  right: 0;\n  margin: auto;\n  top: -1.5rem;\n  background: #121212;\n  width: fit-content;\n  padding: 0 1rem;\n  max-width: 235px;\n}\n\n.notifChallenge {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  right: 4px;\n  top: 4px;\n  width: 1.25rem;\n  height: 1.25rem;\n  color: #25262b;\n  border-radius: 50%;\n  border: 1px solid #25262b;\n  z-index: 1;\n  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;\n  font-size: 12px;\n}\n\n.smallCard {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  max-height: 90px;\n}\n@media all and (max-height: 800px) {\n  .smallCard {\n    max-height: 85px;\n  }\n}\n@media all and (max-height: 730px) {\n  .smallCard {\n    max-height: 70px;\n  }\n}\n.smallCard.finished {\n  border: 1px solid #7b7b7b;\n  background: #121212;\n}\n.smallCard.finished > * {\n  color: #7b7b7b !important;\n}\n.smallCard.duelCard {\n  background: #181819;\n  border: solid 1px rgba(97, 240, 242, 0.5);\n}\n.smallCard.duelCard.active {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n}\n.smallCard.duelCard span {\n  justify-content: space-between !important;\n}\n.smallCard.goDuel {\n  background: linear-gradient(180deg, #61f0f2 0%, #48c2c4 100%);\n}\n.smallCard.goDuel span {\n  color: #121212 !important;\n  justify-content: space-between !important;\n  font-weight: 700;\n}\n.smallCard span.MuiButton-label {\n  display: flex;\n  justify-content: flex-start;\n  padding: 1rem 0.5rem;\n  color: #e0e0e0;\n  transition: all 300ms ease;\n  text-transform: capitalize;\n}\n.smallCard span.MuiButton-label .content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  text-transform: capitalize;\n}\n.smallCard span.MuiButton-label .content .stars {\n  display: flex;\n  gap: 2px;\n}\n.smallCard span.MuiButton-label .spinner-container {\n  height: 3.75rem;\n  width: 3.75rem;\n  margin: auto;\n}\n.smallCard span.MuiButton-label .cardIcon {\n  margin-right: 1rem;\n}\n.smallCard span.MuiButton-label span {\n  font-size: 1.1rem;\n  font-weight: 700;\n}\n@media all and (max-height: 700px) {\n  .smallCard span.MuiButton-label span {\n    font-size: 1rem;\n  }\n}\n.smallCard span.MuiButton-label .challengeminIcon {\n  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.55));\n}\n.smallCard span.MuiButton-label .starCount {\n  display: flex;\n  align-items: center;\n  margin: 0;\n}\n.smallCard span.MuiButton-label .starCount span {\n  margin: 0;\n}\n.smallCard span.MuiButton-label .starCount .blueNumber {\n  font-weight: 900;\n  color: #61f0f2;\n  margin: 0 0.3rem 0 0.7rem;\n}\n.smallCard span.MuiButton-label .finalDuel {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.smallCard span.MuiButton-label .finalDuel .starCount span {\n  font-size: 1rem;\n  font-weight: 500;\n}\n.smallCard span.MuiButton-label .finalDuel .starCount .blueNumber {\n  margin-left: 0;\n}\n.smallCard span.MuiButton-label .finalDuel.result span {\n  margin-bottom: 0.2rem;\n  font-weight: 600;\n  font-size: 1rem;\n}", ""]);
 
 
 
@@ -26332,10 +26263,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(__webpack_require__("lSNA"));
-
-var _classnames = _interopRequireDefault(__webpack_require__("TSYQ"));
-
 var _I18n = __webpack_require__("buk/");
 
 var _react = _interopRequireDefault(__webpack_require__("q1tI"));
@@ -26356,11 +26283,12 @@ var StepConsent = function StepConsent(_ref) {
   }, t('auth.enedissgegrandlyon.textConsent')), /*#__PURE__*/_react.default.createElement("ul", {
     className: "text-16-normal"
   }, /*#__PURE__*/_react.default.createElement("li", null, t('auth.enedissgegrandlyon.consentLi1')), /*#__PURE__*/_react.default.createElement("li", null, t('auth.enedissgegrandlyon.consentLi2')), /*#__PURE__*/_react.default.createElement("li", null, t('auth.enedissgegrandlyon.consentLi3')), /*#__PURE__*/_react.default.createElement("li", null, t('auth.enedissgegrandlyon.consentLi4'))), /*#__PURE__*/_react.default.createElement("label", {
-    className: (0, _classnames.default)('checkbox', (0, _defineProperty2.default)({}, 'answer-checked', sgeState.dataConsent))
+    className: "inline"
   }, /*#__PURE__*/_react.default.createElement("input", {
     id: "dataConsent",
     type: "checkbox",
     name: "Data-consent-validation",
+    className: "inputCheckbox",
     onChange: function onChange(e) {
       return _onChange('dataConsent', e.target.checked);
     },
@@ -26370,11 +26298,12 @@ var StepConsent = function StepConsent(_ref) {
       __html: t('auth.enedissgegrandlyon.consentCheck1')
     }
   })), /*#__PURE__*/_react.default.createElement("label", {
-    className: (0, _classnames.default)('checkbox', (0, _defineProperty2.default)({}, 'answer-checked', sgeState.pdlConfirm))
+    className: "inline"
   }, /*#__PURE__*/_react.default.createElement("input", {
     id: "pdlConfirm",
     type: "checkbox",
     name: "Data-consent-validation",
+    className: "inputCheckbox",
     onChange: function onChange(e) {
       return _onChange('pdlConfirm', e.target.checked);
     },
@@ -26478,10 +26407,7 @@ var QuizExplanationModal = function QuizExplanationModal(_ref) {
   }, question.explanation)), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('quiz.accessibility.button_go_next'),
     onClick: goNext,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('quiz.next'))));
 };
 
@@ -26623,19 +26549,13 @@ var ChallengeCardLast = function ChallengeCardLast() {
     icon: _ecolyo.default,
     size: 62
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "content"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-22-bold title-last"
+    className: "text-22-bold"
   }, t('challenge.card_last.title')), /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-18-normal message"
-  }, t('challenge.card_last.message1'))), /*#__PURE__*/_react.default.createElement(_core.Button, {
+    className: "text-18-normal"
+  }, t('challenge.card_last.message1')), /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('challenge.card_last.button'),
     onClick: handleClickFeedbacks,
-    className: "btn1",
-    classes: {
-      root: 'btn-secondary-negative btn_lastCard',
-      label: 'text-15-bold'
-    }
+    className: "btnSecondary"
   }, t('challenge.card_last.button')));
 };
 
@@ -26649,7 +26569,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-selection-modal {\n  color: #e0e0e0;\n  margin: 1rem 0;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n}\n.eg-selection-modal .title {\n  margin: 1rem 0;\n  color: #e3b82a;\n}\n.eg-selection-modal .text {\n  margin: 1rem 0;\n}\n.eg-selection-modal button.btn-highlight {\n  padding: 0.75rem 0.5rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-selection-modal {\n  color: #e0e0e0;\n  margin: 1rem 0;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n}\n.eg-selection-modal .title {\n  margin: 1rem 0;\n  color: #e3b82a;\n}\n.eg-selection-modal .text {\n  margin: 1rem 0;\n}", ""]);
 
 
 
@@ -26772,7 +26692,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-selection-restart-container {\n  position: relative;\n  min-height: inherit;\n  margin: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  color: #e0e0e0;\n  max-width: 45.75rem;\n}\n@media only screen and (max-width : 768px) {\n  .eg-selection-restart-container {\n    margin: 0 1rem;\n    max-width: unset;\n  }\n}\n.eg-selection-restart-container .content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n}\n.eg-selection-restart-container .content .title {\n  color: #e3b82a;\n  margin: 1rem;\n}\n@media all and (min-width: 1023px) {\n  .eg-selection-restart-container .content .title {\n    margin: 5rem;\n  }\n}\n.eg-selection-restart-container .content .text {\n  margin-top: 3.25rem;\n}\n.eg-selection-restart-container .buttons {\n  margin: 1rem 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n}\n.eg-selection-restart-container .buttons button.btn-secondary-negative {\n  padding: 0.75rem 0.5rem;\n  margin: 0 0.25rem;\n}\n.eg-selection-restart-container .buttons button.btn-highlight {\n  padding: 0.75rem 0.5rem;\n  margin: 0 0.5rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.eg-selection-restart-container {\n  position: relative;\n  min-height: inherit;\n  margin: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  color: #e0e0e0;\n  max-width: 45.75rem;\n}\n@media only screen and (max-width : 768px) {\n  .eg-selection-restart-container {\n    margin: 0 1rem;\n    max-width: unset;\n  }\n}\n.eg-selection-restart-container .content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n}\n.eg-selection-restart-container .content .title {\n  color: #e3b82a;\n  margin: 1rem;\n}\n@media all and (min-width: 1023px) {\n  .eg-selection-restart-container .content .title {\n    margin: 5rem;\n  }\n}\n.eg-selection-restart-container .content .text {\n  margin-top: 3.25rem;\n}\n.eg-selection-restart-container .buttons {\n  margin: 1rem 0;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  gap: 1rem;\n  width: 100%;\n}", ""]);
 
 
 
@@ -28684,10 +28604,7 @@ var QuizBegin = function QuizBegin(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('duel.accessibility.button_start_quiz'),
     onClick: launchQuiz,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('duel.button_start')))));
 };
 
@@ -28793,10 +28710,7 @@ var EcogestureSelectionEnd = function EcogestureSelectionEnd() {
     className: "buttons"
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
     "aria-label": t('ecogesture_selection.accessibility.button_ok'),
-    classes: {
-      root: 'btn-highlight',
-      label: 'text-16-bold'
-    },
+    className: "btnPrimary",
     onClick: function onClick() {
       return navigate('/ecogestures?tab=0');
     }
@@ -28872,7 +28786,7 @@ module.exports = JSON.parse("[{\"_id\":\"QUIZ001\",\"questions\":[{\"questionLab
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.info {\n  padding: 0.5rem 0.5rem 0;\n  text-align: center;\n}\n.info h1 {\n  color: #e3b82a;\n}\n.info p {\n  color: white;\n}\n.info button.btn-highlight {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-evenly;\n  margin: 1.5rem 0 1rem;\n  padding: 1rem 2rem;\n  transition: all 300ms ease;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.info {\n  padding: 0.5rem 0.5rem 0;\n  text-align: center;\n}\n.info h1 {\n  color: #e3b82a;\n}\n.info p {\n  color: #ffffff;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
 
 
 
@@ -29737,10 +29651,7 @@ var ExplorationFinished = function ExplorationFinished(_ref) {
   })), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('exploration.accessibility.button_confirm'),
     onClick: goBack,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('exploration.button_confirm'))));
 };
 
@@ -30729,12 +30640,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(__webpack_require__("lSNA"));
-
 var _Button = _interopRequireDefault(__webpack_require__("FtsS"));
 
-var _classnames = _interopRequireDefault(__webpack_require__("TSYQ"));
-
 var _I18n = __webpack_require__("buk/");
 
 var _enums = __webpack_require__("gnxY");
@@ -30782,7 +30689,7 @@ var FormNavigation = function FormNavigation(_ref) {
     } else if (isLastConnectStep || step === _enums.ProfileTypeStepForm.UPDATE_DATE || step === _enums.EcogestureStepForm.EQUIPMENTS && isEcogesture) {
       return t('profile_type.form.button_end');
     } else {
-      return "".concat(t('profile_type.form.button_next'), " >");
+      return t('profile_type.form.button_next');
     }
   }, [isEcogesture, isLastConnectStep, isLoading, step, t]);
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -30790,21 +30697,13 @@ var FormNavigation = function FormNavigation(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('profile_type.accessibility.button_previous'),
     onClick: handlePreviousClick,
-    className: "profile-navigation-button",
-    disabled: disablePrevButton || step === _enums.ProfileTypeStepForm.HOUSING_TYPE,
-    classes: {
-      root: 'btn-profile-back',
-      label: 'text-16-bold'
-    }
-  }, "< ".concat(t('profile_type.form.button_previous'))), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "btnSecondary",
+    disabled: disablePrevButton || step === _enums.ProfileTypeStepForm.HOUSING_TYPE
+  }, t('profile_type.form.button_previous')), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": step === _enums.ProfileTypeStepForm.UPDATE_DATE || step === _enums.EcogestureStepForm.EQUIPMENTS && isEcogesture ? t('profile_type.accessibility.button_end') : t('profile_type.accessibility.button_next'),
     onClick: handleNextClick,
-    className: (0, _classnames.default)('profile-navigation-button', (0, _defineProperty2.default)({}, 'disabled', disableNextButton)),
-    disabled: disableNextButton,
-    classes: {
-      root: 'btn-profile-next',
-      label: 'text-16-bold'
-    }
+    className: "btnPrimary",
+    disabled: disableNextButton
   }, getSecondButtonLabel()));
 };
 
@@ -31123,10 +31022,7 @@ var QuizQuestionContentCustom = function QuizQuestionContentCustom(_ref) {
     "aria-label": t('quiz.accessibility.button_validate'),
     onClick: validateQuestion,
     disabled: !userChoice,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary validate"
   }, t('quiz.button_validate')), /*#__PURE__*/_react.default.createElement(_QuizExplanationModal.default, {
     open: openModal,
     answerIndex: answerIndex,
@@ -31194,7 +31090,7 @@ exports.i(__webpack_require__("tgIe"), "");
 exports.push([module.i, "@import url(https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap);", ""]);
 
 // Module
-exports.push([module.i, "/* Cozy UI utilities classes */\n/* Cozy UI React components styles */\n/* App styles */\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\nhtml {\n  background: #121212;\n}\n\nbody {\n  background: #121212;\n  overflow: unset !important;\n}\n\n.column {\n  display: flex;\n  flex-direction: column;\n}\n\n.row {\n  display: flex;\n  flex-direction: row;\n}\n\n.cozy-bar {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n}\n\n[role=banner] .coz-bar-container {\n  background-color: #ffffff;\n}\n@media only screen and (max-width : 768px) {\n  [role=banner] .coz-bar-container {\n    padding: 0.6rem 0 0 0;\n    background-color: unset;\n  }\n}\n\n.coz-bar-wrapper {\n  box-shadow: unset !important;\n  background: unset !important;\n}\n\n.coz-label {\n  color: #32363f;\n}\n\n.content-view-loading {\n  height: 80vh;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  color: #e0e0e0;\n}\n.content-view-loading .content-view-loading-text {\n  padding-top: 1rem;\n  margin: 0 2rem;\n  text-align: center;\n}\n.content-view-loading .content-view-loading-button {\n  max-width: 50vw;\n  margin-top: 1rem;\n}\n\n[role=main] {\n  /* width */\n  /* Track */\n  /* Handle */\n}\n[role=main]::-webkit-scrollbar {\n  width: 10px;\n}\n[role=main]::-webkit-scrollbar-track {\n  background: #3e4045;\n}\n[role=main]::-webkit-scrollbar-thumb {\n  background: #6f7074;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n* {\n  font-family: Lato, sans-serif;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n  color: #a0a0a0;\n  font-family: Lato, sans-serif;\n}\n\n.home-title {\n  font-size: 1rem;\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  line-height: 120%;\n  text-transform: uppercase;\n}\n\n.app-title {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 21px;\n  line-height: 24px;\n  text-align: center;\n  letter-spacing: 0.15px;\n  color: #e0e0e0;\n  text-shadow: 0px -1px 0px #060609, 0px 1px 0px rgba(255, 255, 255, 0.07);\n}\n\n.text-10, .text-10-italic, .text-10-bold, .text-10-bold-capitalize, .text-10-bold-uppercase, .text-10-normal, .text-10-normal-150, .text-10-normal-uppercase {\n  font-style: normal;\n  font-size: 0.625rem;\n  line-height: 120%;\n}\n.text-10-normal, .text-10-normal-150, .text-10-normal-uppercase {\n  font-weight: normal;\n}\n.text-10-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-10-normal-150 {\n  line-height: 150%;\n}\n.text-10-bold, .text-10-bold-capitalize, .text-10-bold-uppercase {\n  font-weight: 700;\n}\n.text-10-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-10-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-10-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-14, .text-14-italic, .text-14-bold, .text-14-bold-capitalize, .text-14-bold-uppercase, .text-14-normal, .text-14-normal-150, .text-14-normal-uppercase {\n  font-style: normal;\n  font-size: 0.875rem;\n  line-height: 120%;\n}\n.text-14-normal, .text-14-normal-150, .text-14-normal-uppercase {\n  font-weight: normal;\n}\n.text-14-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-14-normal-150 {\n  line-height: 150%;\n}\n.text-14-bold, .text-14-bold-capitalize, .text-14-bold-uppercase {\n  font-weight: 700;\n}\n.text-14-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-14-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-14-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-15, .text-15-italic, .text-15-bold, .text-15-bold-capitalize, .text-15-bold-uppercase, .text-15-normal, .text-15-normal-150, .text-15-normal-uppercase {\n  font-style: normal;\n  font-size: 0.938rem;\n  line-height: 120%;\n}\n.text-15-normal, .text-15-normal-150, .text-15-normal-uppercase {\n  font-weight: normal;\n}\n.text-15-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-15-normal-150 {\n  line-height: 150%;\n}\n.text-15-bold, .text-15-bold-capitalize, .text-15-bold-uppercase {\n  font-weight: 700;\n}\n.text-15-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-15-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-15-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-16, .text-16-italic, .text-16-bold, .text-16-bold-capitalize, .text-16-bold-uppercase, .text-16-normal, .text-16-normal-150, .text-16-normal-uppercase {\n  font-style: normal;\n  font-size: 1rem;\n  line-height: 120%;\n}\n.text-16-normal, .text-16-normal-150, .text-16-normal-uppercase {\n  font-weight: normal;\n}\n.text-16-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-16-normal-150 {\n  line-height: 150%;\n}\n.text-16-bold, .text-16-bold-capitalize, .text-16-bold-uppercase {\n  font-weight: 700;\n}\n.text-16-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-16-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-16-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-18, .text-18-italic, .text-18-bold, .text-18-bold-capitalize, .text-18-bold-uppercase, .text-18-normal, .text-18-normal-150, .text-18-normal-uppercase {\n  font-style: normal;\n  font-size: 1.125rem;\n  line-height: 120%;\n}\n.text-18-normal, .text-18-normal-150, .text-18-normal-uppercase {\n  font-weight: normal;\n}\n.text-18-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-18-normal-150 {\n  line-height: 150%;\n}\n.text-18-bold, .text-18-bold-capitalize, .text-18-bold-uppercase {\n  font-weight: 700;\n}\n.text-18-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-18-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-18-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-19, .text-19-italic, .text-19-bold, .text-19-bold-capitalize, .text-19-bold-uppercase, .text-19-normal, .text-19-normal-150, .text-19-normal-uppercase {\n  font-style: normal;\n  font-size: 1.188rem;\n  line-height: 120%;\n}\n.text-19-normal, .text-19-normal-150, .text-19-normal-uppercase {\n  font-weight: normal;\n}\n.text-19-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-19-normal-150 {\n  line-height: 150%;\n}\n.text-19-bold, .text-19-bold-capitalize, .text-19-bold-uppercase {\n  font-weight: 700;\n}\n.text-19-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-19-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-19-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-20, .text-20-italic, .text-20-bold, .text-20-bold-capitalize, .text-20-bold-uppercase, .text-20-normal, .text-20-normal-150, .text-20-normal-uppercase {\n  font-style: normal;\n  font-size: 1.25rem;\n  line-height: 120%;\n}\n.text-20-normal, .text-20-normal-150, .text-20-normal-uppercase {\n  font-weight: normal;\n}\n.text-20-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-20-normal-150 {\n  line-height: 150%;\n}\n.text-20-bold, .text-20-bold-capitalize, .text-20-bold-uppercase {\n  font-weight: 700;\n}\n.text-20-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-20-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-20-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-21, .text-21-italic, .text-21-bold, .text-21-bold-capitalize, .text-21-bold-uppercase, .text-21-normal, .text-21-normal-150, .text-21-normal-uppercase {\n  font-style: normal;\n  font-size: 1.313rem;\n  line-height: 120%;\n}\n.text-21-normal, .text-21-normal-150, .text-21-normal-uppercase {\n  font-weight: normal;\n}\n.text-21-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-21-normal-150 {\n  line-height: 150%;\n}\n.text-21-bold, .text-21-bold-capitalize, .text-21-bold-uppercase {\n  font-weight: 700;\n}\n.text-21-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-21-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-21-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-22, .text-22-italic, .text-22-bold, .text-22-bold-capitalize, .text-22-bold-uppercase, .text-22-normal, .text-22-normal-150, .text-22-normal-uppercase {\n  font-style: normal;\n  font-size: 1.375rem;\n  line-height: 120%;\n}\n.text-22-normal, .text-22-normal-150, .text-22-normal-uppercase {\n  font-weight: normal;\n}\n.text-22-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-22-normal-150 {\n  line-height: 150%;\n}\n.text-22-bold, .text-22-bold-capitalize, .text-22-bold-uppercase {\n  font-weight: 700;\n}\n.text-22-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-22-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-22-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-24, .text-24-italic, .text-24-bold, .text-24-bold-capitalize, .text-24-bold-uppercase, .text-24-normal, .text-24-normal-150, .text-24-normal-uppercase {\n  font-style: normal;\n  font-size: 1.5rem;\n  line-height: 120%;\n}\n.text-24-normal, .text-24-normal-150, .text-24-normal-uppercase {\n  font-weight: normal;\n}\n.text-24-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-24-normal-150 {\n  line-height: 150%;\n}\n.text-24-bold, .text-24-bold-capitalize, .text-24-bold-uppercase {\n  font-weight: 700;\n}\n.text-24-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-24-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-24-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-26, .text-26-italic, .text-26-bold, .text-26-bold-capitalize, .text-26-bold-uppercase, .text-26-normal, .text-26-normal-150, .text-26-normal-uppercase {\n  font-style: normal;\n  font-size: 1.625rem;\n  line-height: 120%;\n}\n.text-26-normal, .text-26-normal-150, .text-26-normal-uppercase {\n  font-weight: normal;\n}\n.text-26-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-26-normal-150 {\n  line-height: 150%;\n}\n.text-26-bold, .text-26-bold-capitalize, .text-26-bold-uppercase {\n  font-weight: 700;\n}\n.text-26-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-26-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-26-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-28, .text-28-italic, .text-28-bold, .text-28-bold-capitalize, .text-28-bold-uppercase, .text-28-normal, .text-28-normal-150, .text-28-normal-uppercase {\n  font-style: normal;\n  font-size: 1.75rem;\n  line-height: 120%;\n}\n.text-28-normal, .text-28-normal-150, .text-28-normal-uppercase {\n  font-weight: normal;\n}\n.text-28-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-28-normal-150 {\n  line-height: 150%;\n}\n.text-28-bold, .text-28-bold-capitalize, .text-28-bold-uppercase {\n  font-weight: 700;\n}\n.text-28-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-28-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-28-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-36, .text-36-italic, .text-36-bold, .text-36-bold-capitalize, .text-36-bold-uppercase, .text-36-normal, .text-36-normal-150, .text-36-normal-uppercase {\n  font-style: normal;\n  font-size: 2.25rem;\n  line-height: 120%;\n}\n.text-36-normal, .text-36-normal-150, .text-36-normal-uppercase {\n  font-weight: normal;\n}\n.text-36-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-36-normal-150 {\n  line-height: 150%;\n}\n.text-36-bold, .text-36-bold-capitalize, .text-36-bold-uppercase {\n  font-weight: 700;\n}\n.text-36-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-36-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-36-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n/* Card */\n.card-title-on {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1.125rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n.card-text-bold {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 1rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n.card-indicator {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n.card-text {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n/* Chart */\n.chart-ticks-x-text {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 120%;\n}\n@media only screen and (max-width : 768px) {\n  .chart-ticks-x-text {\n    font-size: 0.685rem;\n  }\n}\n\n.chart-ticks-y-text {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.9rem;\n  line-height: 120%;\n}\n@media only screen and (max-width : 768px) {\n  .chart-ticks-y-text {\n    font-size: 0.75rem;\n  }\n}\n\n/* Cozy bar */\n.cozybar {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 1.3125rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.axis {\n  color: #7b7b7b;\n}\n.axis .tick-text {\n  fill: #7b7b7b;\n}\n.axis .tick-text.tick-text-selected {\n  fill: #e0e0e0;\n}\n.axis .separator {\n  text-align: center;\n  margin: 0 2px;\n  font-size: 1rem !important;\n}\n\n.value-text {\n  fill: #7b7b7b;\n}\n.value-text.selected {\n  fill: #e0e0e0;\n}\n\n.barContainer.disabled *,\n.barFill.disabled * {\n  cursor: default !important;\n}\n.barContainer:hover,\n.barFill:hover {\n  cursor: pointer;\n}\n\n.background-true {\n  opacity: 0.1;\n}\n.background-true:hover {\n  cursor: pointer;\n}\n\n.background-false {\n  opacity: 0;\n}\n\n.bar-compare-ELECTRICITY:hover,\n.bar-compare-GAS:hover,\n.bar-compare-WATER:hover,\n.bar-compare-MULTIFLUID:hover,\n.bar-MULTIFLUID:hover,\n.bar-WATER:hover,\n.bar-GAS:hover,\n.bar-ELECTRICITY:hover {\n  cursor: pointer;\n}\n.bar-compare-ELECTRICITY:hover.disabled,\n.bar-compare-GAS:hover.disabled,\n.bar-compare-WATER:hover.disabled,\n.bar-compare-MULTIFLUID:hover.disabled,\n.bar-MULTIFLUID:hover.disabled,\n.bar-WATER:hover.disabled,\n.bar-GAS:hover.disabled,\n.bar-ELECTRICITY:hover.disabled {\n  cursor: default;\n}\n\n.bar-ELECTRICITY {\n  fill: #5d3d2a;\n}\n.bar-ELECTRICITY.selected {\n  fill: #d87b39;\n  filter: drop-shadow(0 -0.1rem 0.2rem #d87b39);\n}\n\n.bar-compare-ELECTRICITY {\n  fill: #795c47;\n}\n.bar-compare-ELECTRICITY.selected {\n  fill: #e2bca1;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e2bca1);\n}\n\n.bar-WATER {\n  fill: #20415e;\n}\n.bar-WATER.selected {\n  fill: #3a98ec;\n  filter: drop-shadow(0 -0.1rem 0.2rem #3a98ec);\n}\n\n.bar-compare-WATER {\n  fill: #4d5c6e;\n}\n.bar-compare-WATER.selected {\n  fill: #abd4fa;\n  filter: drop-shadow(0 -0.1rem 0.2rem #abd4fa);\n}\n\n.bar-GAS {\n  fill: #184940;\n}\n.bar-GAS.selected {\n  fill: #45d1b8;\n  filter: drop-shadow(0 -0.1rem 0.2rem #45d1b8);\n}\n\n.bar-compare-GAS {\n  fill: #597773;\n}\n.bar-compare-GAS.selected {\n  fill: #a8f7e9;\n  filter: drop-shadow(0 -0.1rem 0.2rem #a8f7e9);\n}\n\n.bar-MULTIFLUID {\n  fill: #705d1d;\n}\n.bar-MULTIFLUID.selected {\n  fill: #e3b82a;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n.bar-MULTIFLUID.disabled:hover {\n  cursor: default;\n}\n\n.bar-duel {\n  fill: #61f0f2;\n}\n.bar-duel.selected {\n  fill: #61f0f2;\n  filter: drop-shadow(0 -0.1rem 0.2rem #61f0f2);\n}\n.bar-duel.disabled:hover {\n  cursor: default;\n}\n\n.bar-UNCOMING {\n  fill: #7b7b7b;\n  opacity: 0.6;\n}\n.bar-UNCOMING.selected {\n  fill: #7b7b7b;\n}\n.bar-UNCOMING.disabled:hover {\n  cursor: default;\n}\n\n.bar-compare-MULTIFLUID {\n  fill: #7d6a4e;\n}\n.bar-compare-MULTIFLUID.selected {\n  fill: #ffd597;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n\n.bar-average {\n  stroke-width: 2;\n  stroke: #e3b82a;\n}\n\n.week {\n  fill: #e2bca1;\n}\n.week.selected {\n  fill: #e2bca1;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e2bca1);\n}\n\n.weekend {\n  fill: #ffd597;\n}\n.weekend.selected {\n  fill: #ffd597;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n\n/** Animation **/\n.bounce-1 {\n  animation-name: bounce-1;\n  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);\n  animation-iteration-count: 1;\n  transform-origin: bottom center;\n  transform-box: fill-box;\n}\n\n@keyframes bounce-1 {\n  0% {\n    transform: scale(0.1, 0.1);\n  }\n  28% {\n    transform: scale(0.1, 1.1);\n  }\n  45% {\n    transform: scale(0.8, 0.95);\n  }\n  55% {\n    transform: scale(1, 1);\n  }\n  65% {\n    transform: scale(1, 0.98);\n  }\n  75% {\n    transform: scale(1, 1);\n  }\n}\n.bounce-2 {\n  animation-name: bounce-2;\n  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);\n  animation-iteration-count: 1;\n  transform-origin: bottom center;\n  transform-box: fill-box;\n}\n\n@keyframes bounce-2 {\n  0% {\n    transform: scale(1, 1);\n  }\n  28% {\n    transform: scale(1, 1.1);\n  }\n  45% {\n    transform: scale(0.8, 0.95);\n  }\n  55% {\n    transform: scale(1, 1);\n  }\n  65% {\n    transform: scale(1, 0.98);\n  }\n  75% {\n    transform: scale(1, 1);\n  }\n}\n.bounce-3 {\n  animation-name: bounce-3;\n  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);\n  animation-iteration-count: 1;\n  transform-origin: bottom center;\n}\n\n@keyframes bounce-3 {\n  0% {\n    opacity: 0.6;\n    transform: scaleY(1);\n  }\n  50% {\n    transform: scaleY(1.1);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scaleY(1);\n    opacity: 1;\n  }\n}\n/** Animation delay **/\n.delay {\n  animation-duration: 0.4s;\n}\n\n.delay--0 {\n  animation-duration: 0.4s;\n}\n\n.delay--1 {\n  animation-duration: 0.48s;\n}\n\n.delay--2 {\n  animation-duration: 0.56s;\n}\n\n.delay--3 {\n  animation-duration: 0.64s;\n}\n\n.delay--4 {\n  animation-duration: 0.72s;\n}\n\n.delay--5 {\n  animation-duration: 0.8s;\n}\n\n.delay--6 {\n  animation-duration: 0.88s;\n}\n\n.delay--7 {\n  animation-duration: 0.96s;\n}\n\n.delay--8 {\n  animation-duration: 1.04s;\n}\n\n.delay--9 {\n  animation-duration: 1.12s;\n}\n\n.delay--10 {\n  animation-duration: 1.2s;\n}\n\n.delay--11 {\n  animation-duration: 1.28s;\n}\n\n.delay--12 {\n  animation-duration: 1.36s;\n}\n\n.delay--13 {\n  animation-duration: 1.44s;\n}\n\n.delay--14 {\n  animation-duration: 1.52s;\n}\n\n.delay--15 {\n  animation-duration: 1.6s;\n}\n\n.delay--16 {\n  animation-duration: 1.68s;\n}\n\n.delay--17 {\n  animation-duration: 1.76s;\n}\n\n.delay--18 {\n  animation-duration: 1.84s;\n}\n\n.delay--19 {\n  animation-duration: 1.92s;\n}\n\n.delay--20 {\n  animation-duration: 2s;\n}\n\n.delay--21 {\n  animation-duration: 2.08s;\n}\n\n.delay--22 {\n  animation-duration: 2.16s;\n}\n\n.delay--23 {\n  animation-duration: 2.24s;\n}\n\n.delay--24 {\n  animation-duration: 2.32s;\n}\n\n.delay--25 {\n  animation-duration: 2.4s;\n}\n\n.delay--26 {\n  animation-duration: 2.48s;\n}\n\n.delay--27 {\n  animation-duration: 2.56s;\n}\n\n.delay--28 {\n  animation-duration: 2.64s;\n}\n\n.delay--29 {\n  animation-duration: 2.72s;\n}\n\n.delay--30 {\n  animation-duration: 2.8s;\n}\n\n.delay--31 {\n  animation-duration: 2.88s;\n}\n\n.delay--32 {\n  animation-duration: 2.96s;\n}\n\n.delay--33 {\n  animation-duration: 3.04s;\n}\n\n.delay--34 {\n  animation-duration: 3.12s;\n}\n\n.delay--35 {\n  animation-duration: 3.2s;\n}\n\n.delay--36 {\n  animation-duration: 3.28s;\n}\n\n.delay--37 {\n  animation-duration: 3.36s;\n}\n\n.delay--38 {\n  animation-duration: 3.44s;\n}\n\n.delay--39 {\n  animation-duration: 3.52s;\n}\n\n.delay--40 {\n  animation-duration: 3.6s;\n}\n\n.delay--41 {\n  animation-duration: 3.68s;\n}\n\n.delay--42 {\n  animation-duration: 3.76s;\n}\n\n.delay--43 {\n  animation-duration: 3.84s;\n}\n\n.delay--44 {\n  animation-duration: 3.92s;\n}\n\n.delay--45 {\n  animation-duration: 4s;\n}\n\n.delay--46 {\n  animation-duration: 4.08s;\n}\n\n.delay--47 {\n  animation-duration: 4.16s;\n}\n\n.delay--48 {\n  animation-duration: 4.24s;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\nbutton.btn-highlight {\n  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;\n  background-color: #e3b82a;\n  border: none;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-highlight span:first-child {\n  color: #000000;\n}\nbutton.btn-highlight:hover, button.btn-highlight:focus, button.btn-highlight.active, button.btn-highlight:disabled {\n  background-color: #b89318;\n}\nbutton.btn-highlight:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-primary-positive {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #121212;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-primary-positive span:first-child {\n  color: #e3b82a;\n}\nbutton.btn-primary-positive:hover, button.btn-primary-positive:focus, button.btn-primary-positive.active, button.btn-primary-positive:disabled {\n  background-color: rgba(18, 18, 18, 0.2);\n}\nbutton.btn-primary-positive:hover span:first-child, button.btn-primary-positive:focus span:first-child, button.btn-primary-positive.active span:first-child, button.btn-primary-positive:disabled span:first-child {\n  color: rgba(227, 184, 42, 0.7);\n}\nbutton.btn-primary-positive:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-primary-challenge {\n  background: transparent;\n  background-color: #61f0f2;\n  border: 1px solid #61f0f2;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-primary-challenge span:first-child {\n  color: black;\n}\nbutton.btn-primary-challenge:hover, button.btn-primary-challenge:focus, button.btn-primary-challenge.active, button.btn-primary-challenge:disabled {\n  background-color: rgba(97, 240, 242, 0.2);\n}\nbutton.btn-primary-challenge:hover span:first-child, button.btn-primary-challenge:focus span:first-child, button.btn-primary-challenge.active span:first-child, button.btn-primary-challenge:disabled span:first-child {\n  color: black;\n}\nbutton.btn-primary-challenge:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-secondary {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #7b7b7b;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-secondary span:first-child {\n  color: #f1c017;\n}\nbutton.btn-secondary:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-secondary-positive {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #ffffff;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-secondary-positive span:first-child {\n  color: #e0e0e0;\n}\nbutton.btn-secondary-positive:hover, button.btn-secondary-positive:focus, button.btn-secondary-positive.active, button.btn-secondary-positive:disabled {\n  background-color: rgba(18, 18, 18, 0.2);\n}\nbutton.btn-secondary-positive:hover span:first-child, button.btn-secondary-positive:focus span:first-child, button.btn-secondary-positive.active span:first-child, button.btn-secondary-positive:disabled span:first-child {\n  color: rgba(224, 224, 224, 0.7);\n}\nbutton.btn-secondary-positive:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-secondary-negative {\n  background: transparent;\n  background-color: transparent;\n  border: 1px solid #7b7b7b;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-secondary-negative span:first-child {\n  color: #e0e0e0;\n}\nbutton.btn-secondary-negative:hover, button.btn-secondary-negative:focus, button.btn-secondary-negative.active, button.btn-secondary-negative:disabled {\n  background-color: rgba(123, 123, 123, 0.2);\n}\nbutton.btn-secondary-negative:hover span:first-child, button.btn-secondary-negative:focus span:first-child, button.btn-secondary-negative.active span:first-child, button.btn-secondary-negative:disabled span:first-child {\n  color: rgba(224, 224, 224, 0.7);\n}\nbutton.btn-secondary-negative:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-duel-off {\n  background: #121212;\n  background-color: #121212;\n  border: 1px solid rgba(97, 240, 242, 0.5);\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-duel-off span:first-child {\n  color: #ffffff;\n}\nbutton.btn-duel-off:hover, button.btn-duel-off:focus, button.btn-duel-off.active, button.btn-duel-off:disabled {\n  background-color: black;\n}\nbutton.btn-duel-off:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-duel-active {\n  border-radius: 4px !important;\n  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;\n  background-color: 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;\n  border: none;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-duel-active span:first-child {\n  color: #121212;\n}\nbutton.btn-duel-active:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-duel-on {\n  background: radial-gradient(60.65% 30.62% at 50% 3.13%, #2a2b30 0%, #1b1c22 100%);\n  background-color: #121212;\n  border: 1px solid #58ffff;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-duel-on span:first-child {\n  color: #ffffff;\n}\nbutton.btn-duel-on:hover, button.btn-duel-on:focus, button.btn-duel-on.active, button.btn-duel-on:disabled {\n  background-color: black;\n}\nbutton.btn-duel-on:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-profile-next {\n  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;\n  background-color: #e3b82a;\n  border: 1px solid #e3b82a;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-profile-next span:first-child {\n  color: #000000;\n}\nbutton.btn-profile-next:hover, button.btn-profile-next:focus, button.btn-profile-next.active, button.btn-profile-next:disabled {\n  background-color: #b89318;\n}\nbutton.btn-profile-next:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btn-profile-back {\n  background: none;\n  background-color: none;\n  border: 1px solid #e0e0e0;\n  border-radius: 2px;\n  margin: 1.5rem 0 0;\n  width: 100%;\n  text-transform: initial;\n  cursor: pointer;\n}\nbutton.btn-profile-back span:first-child {\n  color: #e0e0e0;\n}\nbutton.btn-profile-back:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.card {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  box-sizing: border-box;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);\n  border-radius: 4px;\n  padding: 16px;\n}\n.card:hover {\n  background: linear-gradient(180deg, rgba(70, 71, 77, 0.7) 0%, rgba(57, 58, 63, 0.7) 100%);\n}\n.card.rich-card {\n  padding: 16px;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ndiv.modal-root .MuiBackdrop-root {\n  background-color: hsla(231deg, 11%, 12%, 0.85);\n}\n\ndiv.modal-paper {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  width: 36rem;\n  max-width: 100%;\n  max-height: 90vh;\n  padding: 2rem;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  margin: 0 0 0 13.75rem;\n  align-items: center;\n  color: #ffffff;\n}\n@media only screen and (max-width : 1023px) {\n  div.modal-paper {\n    width: 35rem;\n    margin: 0;\n  }\n}\n@media only screen and (max-width : 768px) {\n  div.modal-paper {\n    padding: 1rem 1rem 1.5rem;\n    width: 85%;\n    max-width: 35rem;\n    margin: 0;\n  }\n}\ndiv.modal-paper.no-padding {\n  padding: 0;\n}\ndiv.modal-paper.blue-border {\n  border: 1px solid rgba(88, 255, 255, 0.2509803922);\n}\ndiv.modal-paper.blue-light-border {\n  border: 1px solid #61f0f2;\n}\ndiv.modal-paper.yellow-border {\n  border: 1px solid rgba(227, 184, 42, 0.4);\n}\ndiv.modal-paper .modal-paper-close-button {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 5px 5px;\n  z-index: 10;\n}\n\ndiv.modal-paper-full-screen {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  max-height: 100%;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  color: #ffffff;\n  display: flex;\n  align-items: center;\n}\ndiv.modal-paper-full-screen.dark-background {\n  background: #121212;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ndiv.expansion-panel-root {\n  margin: 1.2rem 0;\n  color: #e0e0e0;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  border-radius: 4px;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);\n  transition: background-color 0.6s ease;\n  box-sizing: border-box;\n}\ndiv.expansion-panel-root.Mui-expanded:first-child {\n  margin: 1.2rem 0;\n}\ndiv.expansion-panel-root.Mui-expanded:last-child {\n  margin: 1.2rem 0;\n}\ndiv.expansion-panel-root.red-border {\n  border: 1px solid #d25959;\n}\n\ndiv.expansion-panel-summary {\n  padding: 0.25rem 1.2rem;\n  min-height: 4rem;\n}\ndiv.expansion-panel-summary.Mui-focused {\n  border-radius: 4px;\n  background-color: unset;\n  box-shadow: 0 0 0 1px #e0e0e0;\n}\ndiv.expansion-panel-summary.Mui-expanded {\n  min-height: 4rem;\n}\ndiv.expansion-panel-summary.Mui-expanded.small {\n  min-height: 3rem;\n}\ndiv.expansion-panel-summary.small {\n  padding: 0 1.2rem;\n  min-height: 3rem;\n}\ndiv.expansion-panel-summary.bold-text {\n  font-weight: bold;\n}\n\ndiv.expansion-panel-content {\n  display: flex;\n  align-items: center;\n}\ndiv.expansion-panel-content.Mui-expanded {\n  margin: 0.75rem 0;\n}\n\ndiv.expansion-panel-details {\n  padding: 0 1.2rem 1.2rem;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\na {\n  color: #deaf0e;\n}\na:visited {\n  color: #deaf0e;\n}\n\na:focus {\n  outline: none;\n  box-shadow: inset 0 0 0 1px #e0e0e0;\n}\na:focus > div:first-child {\n  box-shadow: 0 0 0 1px #e0e0e0;\n}\n\na.MuiLink-underlineHover:hover {\n  text-decoration: none;\n}\n\na.MuiTypography-colorPrimary {\n  color: #e0e0e0;\n}\n\n:root {\n  white-space: pre-line;\n  --blue: #58ffff;\n  --blue40: rgba(88, 255, 255, 0.2509803922);\n  --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;\n  --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;\n  --blueRadialGradientTrans: radial-gradient(circle, #58ffff 0%, rgba(255, 255, 255, 0) 100%);\n  --elecColor: #d87b39;\n  --elecColor40: rgba(216, 123, 57, 0.4);\n  --elecCompareColor: #e2bca1;\n  --gasColor: #45d1b8;\n  --gasColor40: rgba(69, 209, 184, 0.4);\n  --gasCompareColor: #a8f7e9;\n  --waterColor: #3a98ec;\n  --waterColor40: rgba(58, 152, 236, 0.4);\n  --waterCompareColor: #abd4fa;\n  --multiColor: #e3b82a;\n  --multiCompareColor: #ffd597;\n  --redPrimary: #d25959;\n  --greyBright: #e0e0e0;\n  --greyDark: #7b7b7b;\n  --textWhite: #ffffff;\n  --softGrey: #a0a0a0;\n  --darkLight: #25262b;\n  --darkLight2: #121212;\n  --textFont: Lato, sans-serif;\n  --greyLinearGradientBackground: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  --multiColorRadialGradientTrans: radial-gradient(circle, #e3b82a 0%, rgba(255, 255, 255, 0) 100%);\n  --elecColorRadialGradientTrans: radial-gradient(circle, #d87b39 0%, rgba(255, 255, 255, 0) 100%);\n  --waterColorRadialGradientTrans: radial-gradient(circle, #3a98ec 0%, rgba(255, 255, 255, 0) 100%);\n  --gasColorRadialGradientTrans: radial-gradient(circle, #e3b82a 0%, rgba(255, 255, 255, 0) 100%);\n  --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;\n  --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;\n  --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;\n  --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;\n}\n\n.application {\n  overflow-x: hidden;\n  background-color: #121212;\n}\n\n.accordion-icon {\n  color: #ffffff;\n}\n\n.loaderContainer {\n  height: 80vh;\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n}", ""]);
+exports.push([module.i, "/* Cozy UI utilities classes */\n/* Cozy UI React components styles */\n/* App styles */\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\nhtml {\n  background: #121212;\n}\n\nbody {\n  background: #121212;\n  overflow: unset !important;\n}\n\n.column {\n  display: flex;\n  flex-direction: column;\n}\n\n.row {\n  display: flex;\n  flex-direction: row;\n}\n\n.cozy-bar {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n}\n\n[role=banner] .coz-bar-container {\n  background-color: #ffffff;\n}\n@media only screen and (max-width : 768px) {\n  [role=banner] .coz-bar-container {\n    padding: 0.6rem 0 0 0;\n    background-color: unset;\n  }\n}\n\n.coz-bar-wrapper {\n  box-shadow: unset !important;\n  background: unset !important;\n}\n\n.coz-label {\n  color: #32363f;\n}\n\n.content-view-loading {\n  height: 80vh;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  color: #e0e0e0;\n}\n.content-view-loading .content-view-loading-text {\n  padding-top: 1rem;\n  margin: 0 2rem;\n  text-align: center;\n}\n.content-view-loading .content-view-loading-button {\n  max-width: 50vw;\n  margin-top: 1rem;\n}\n\n[role=main] {\n  /* width */\n  /* Track */\n  /* Handle */\n}\n[role=main]::-webkit-scrollbar {\n  width: 10px;\n}\n[role=main]::-webkit-scrollbar-track {\n  background: #3e4045;\n}\n[role=main]::-webkit-scrollbar-thumb {\n  background: #6f7074;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n* {\n  font-family: Lato, sans-serif;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n  color: #a0a0a0;\n  font-family: Lato, sans-serif;\n}\n\n.home-title {\n  font-size: 1rem;\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  line-height: 120%;\n  text-transform: uppercase;\n}\n\n.app-title {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 21px;\n  line-height: 24px;\n  text-align: center;\n  letter-spacing: 0.15px;\n  color: #e0e0e0;\n  text-shadow: 0px -1px 0px #060609, 0px 1px 0px rgba(255, 255, 255, 0.07);\n}\n\n.text-10, .text-10-italic, .text-10-bold, .text-10-bold-capitalize, .text-10-bold-uppercase, .text-10-normal, .text-10-normal-150, .text-10-normal-uppercase {\n  font-style: normal;\n  font-size: 0.625rem;\n  line-height: 120%;\n}\n.text-10-normal, .text-10-normal-150, .text-10-normal-uppercase {\n  font-weight: normal;\n}\n.text-10-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-10-normal-150 {\n  line-height: 150%;\n}\n.text-10-bold, .text-10-bold-capitalize, .text-10-bold-uppercase {\n  font-weight: 700;\n}\n.text-10-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-10-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-10-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-13, .text-13-italic, .text-13-bold, .text-13-bold-capitalize, .text-13-bold-uppercase, .text-13-normal, .text-13-normal-150, .text-13-normal-uppercase {\n  font-style: normal;\n  font-size: 0.8125rem;\n  line-height: 120%;\n}\n.text-13-normal, .text-13-normal-150, .text-13-normal-uppercase {\n  font-weight: normal;\n}\n.text-13-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-13-normal-150 {\n  line-height: 150%;\n}\n.text-13-bold, .text-13-bold-capitalize, .text-13-bold-uppercase {\n  font-weight: 700;\n}\n.text-13-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-13-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-13-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-14, .text-14-italic, .text-14-bold, .text-14-bold-capitalize, .text-14-bold-uppercase, .text-14-normal, .text-14-normal-150, .text-14-normal-uppercase {\n  font-style: normal;\n  font-size: 0.875rem;\n  line-height: 120%;\n}\n.text-14-normal, .text-14-normal-150, .text-14-normal-uppercase {\n  font-weight: normal;\n}\n.text-14-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-14-normal-150 {\n  line-height: 150%;\n}\n.text-14-bold, .text-14-bold-capitalize, .text-14-bold-uppercase {\n  font-weight: 700;\n}\n.text-14-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-14-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-14-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-15, .text-15-italic, .text-15-bold, .text-15-bold-capitalize, .text-15-bold-uppercase, .text-15-normal, .text-15-normal-150, .text-15-normal-uppercase {\n  font-style: normal;\n  font-size: 0.938rem;\n  line-height: 120%;\n}\n.text-15-normal, .text-15-normal-150, .text-15-normal-uppercase {\n  font-weight: normal;\n}\n.text-15-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-15-normal-150 {\n  line-height: 150%;\n}\n.text-15-bold, .text-15-bold-capitalize, .text-15-bold-uppercase {\n  font-weight: 700;\n}\n.text-15-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-15-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-15-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-16, .text-16-italic, .text-16-bold, .text-16-bold-capitalize, .text-16-bold-uppercase, .text-16-normal, .text-16-normal-150, .text-16-normal-uppercase {\n  font-style: normal;\n  font-size: 1rem;\n  line-height: 120%;\n}\n.text-16-normal, .text-16-normal-150, .text-16-normal-uppercase {\n  font-weight: normal;\n}\n.text-16-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-16-normal-150 {\n  line-height: 150%;\n}\n.text-16-bold, .text-16-bold-capitalize, .text-16-bold-uppercase {\n  font-weight: 700;\n}\n.text-16-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-16-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-16-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-18, .text-18-italic, .text-18-bold, .text-18-bold-capitalize, .text-18-bold-uppercase, .text-18-normal, .text-18-normal-150, .text-18-normal-uppercase {\n  font-style: normal;\n  font-size: 1.125rem;\n  line-height: 120%;\n}\n.text-18-normal, .text-18-normal-150, .text-18-normal-uppercase {\n  font-weight: normal;\n}\n.text-18-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-18-normal-150 {\n  line-height: 150%;\n}\n.text-18-bold, .text-18-bold-capitalize, .text-18-bold-uppercase {\n  font-weight: 700;\n}\n.text-18-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-18-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-18-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-19, .text-19-italic, .text-19-bold, .text-19-bold-capitalize, .text-19-bold-uppercase, .text-19-normal, .text-19-normal-150, .text-19-normal-uppercase {\n  font-style: normal;\n  font-size: 1.188rem;\n  line-height: 120%;\n}\n.text-19-normal, .text-19-normal-150, .text-19-normal-uppercase {\n  font-weight: normal;\n}\n.text-19-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-19-normal-150 {\n  line-height: 150%;\n}\n.text-19-bold, .text-19-bold-capitalize, .text-19-bold-uppercase {\n  font-weight: 700;\n}\n.text-19-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-19-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-19-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-20, .text-20-italic, .text-20-bold, .text-20-bold-capitalize, .text-20-bold-uppercase, .text-20-normal, .text-20-normal-150, .text-20-normal-uppercase {\n  font-style: normal;\n  font-size: 1.25rem;\n  line-height: 120%;\n}\n.text-20-normal, .text-20-normal-150, .text-20-normal-uppercase {\n  font-weight: normal;\n}\n.text-20-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-20-normal-150 {\n  line-height: 150%;\n}\n.text-20-bold, .text-20-bold-capitalize, .text-20-bold-uppercase {\n  font-weight: 700;\n}\n.text-20-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-20-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-20-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-21, .text-21-italic, .text-21-bold, .text-21-bold-capitalize, .text-21-bold-uppercase, .text-21-normal, .text-21-normal-150, .text-21-normal-uppercase {\n  font-style: normal;\n  font-size: 1.313rem;\n  line-height: 120%;\n}\n.text-21-normal, .text-21-normal-150, .text-21-normal-uppercase {\n  font-weight: normal;\n}\n.text-21-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-21-normal-150 {\n  line-height: 150%;\n}\n.text-21-bold, .text-21-bold-capitalize, .text-21-bold-uppercase {\n  font-weight: 700;\n}\n.text-21-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-21-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-21-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-22, .text-22-italic, .text-22-bold, .text-22-bold-capitalize, .text-22-bold-uppercase, .text-22-normal, .text-22-normal-150, .text-22-normal-uppercase {\n  font-style: normal;\n  font-size: 1.375rem;\n  line-height: 120%;\n}\n.text-22-normal, .text-22-normal-150, .text-22-normal-uppercase {\n  font-weight: normal;\n}\n.text-22-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-22-normal-150 {\n  line-height: 150%;\n}\n.text-22-bold, .text-22-bold-capitalize, .text-22-bold-uppercase {\n  font-weight: 700;\n}\n.text-22-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-22-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-22-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-24, .text-24-italic, .text-24-bold, .text-24-bold-capitalize, .text-24-bold-uppercase, .text-24-normal, .text-24-normal-150, .text-24-normal-uppercase {\n  font-style: normal;\n  font-size: 1.5rem;\n  line-height: 120%;\n}\n.text-24-normal, .text-24-normal-150, .text-24-normal-uppercase {\n  font-weight: normal;\n}\n.text-24-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-24-normal-150 {\n  line-height: 150%;\n}\n.text-24-bold, .text-24-bold-capitalize, .text-24-bold-uppercase {\n  font-weight: 700;\n}\n.text-24-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-24-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-24-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-26, .text-26-italic, .text-26-bold, .text-26-bold-capitalize, .text-26-bold-uppercase, .text-26-normal, .text-26-normal-150, .text-26-normal-uppercase {\n  font-style: normal;\n  font-size: 1.625rem;\n  line-height: 120%;\n}\n.text-26-normal, .text-26-normal-150, .text-26-normal-uppercase {\n  font-weight: normal;\n}\n.text-26-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-26-normal-150 {\n  line-height: 150%;\n}\n.text-26-bold, .text-26-bold-capitalize, .text-26-bold-uppercase {\n  font-weight: 700;\n}\n.text-26-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-26-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-26-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-28, .text-28-italic, .text-28-bold, .text-28-bold-capitalize, .text-28-bold-uppercase, .text-28-normal, .text-28-normal-150, .text-28-normal-uppercase {\n  font-style: normal;\n  font-size: 1.75rem;\n  line-height: 120%;\n}\n.text-28-normal, .text-28-normal-150, .text-28-normal-uppercase {\n  font-weight: normal;\n}\n.text-28-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-28-normal-150 {\n  line-height: 150%;\n}\n.text-28-bold, .text-28-bold-capitalize, .text-28-bold-uppercase {\n  font-weight: 700;\n}\n.text-28-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-28-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-28-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n.text-36, .text-36-italic, .text-36-bold, .text-36-bold-capitalize, .text-36-bold-uppercase, .text-36-normal, .text-36-normal-150, .text-36-normal-uppercase {\n  font-style: normal;\n  font-size: 2.25rem;\n  line-height: 120%;\n}\n.text-36-normal, .text-36-normal-150, .text-36-normal-uppercase {\n  font-weight: normal;\n}\n.text-36-normal-uppercase {\n  text-transform: uppercase;\n}\n.text-36-normal-150 {\n  line-height: 150%;\n}\n.text-36-bold, .text-36-bold-capitalize, .text-36-bold-uppercase {\n  font-weight: 700;\n}\n.text-36-bold-uppercase {\n  text-transform: uppercase;\n}\n.text-36-bold-capitalize {\n  text-transform: capitalize;\n}\n.text-36-italic {\n  font-style: italic;\n  font-weight: normal;\n}\n\n/* Card */\n.card-title-on {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1.125rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n.card-text-bold {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 1rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n.card-indicator {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n.card-text {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n/* Chart */\n.chart-ticks-x-text {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 1rem;\n  line-height: 120%;\n}\n@media only screen and (max-width : 768px) {\n  .chart-ticks-x-text {\n    font-size: 0.685rem;\n  }\n}\n\n.chart-ticks-y-text {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.9rem;\n  line-height: 120%;\n}\n@media only screen and (max-width : 768px) {\n  .chart-ticks-y-text {\n    font-size: 0.75rem;\n  }\n}\n\n/* Cozy bar */\n.cozybar {\n  font-family: Lato, sans-serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 1.3125rem;\n  line-height: 120%;\n  color: #e0e0e0;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.axis {\n  color: #7b7b7b;\n}\n.axis .tick-text {\n  fill: #7b7b7b;\n}\n.axis .tick-text.tick-text-selected {\n  fill: #e0e0e0;\n}\n.axis .separator {\n  text-align: center;\n  margin: 0 2px;\n  font-size: 1rem !important;\n}\n\n.value-text {\n  fill: #7b7b7b;\n}\n.value-text.selected {\n  fill: #e0e0e0;\n}\n\n.barContainer.disabled *,\n.barFill.disabled * {\n  cursor: default !important;\n}\n.barContainer:hover,\n.barFill:hover {\n  cursor: pointer;\n}\n\n.background-true {\n  opacity: 0.1;\n}\n.background-true:hover {\n  cursor: pointer;\n}\n\n.background-false {\n  opacity: 0;\n}\n\n.bar-compare-ELECTRICITY:hover,\n.bar-compare-GAS:hover,\n.bar-compare-WATER:hover,\n.bar-compare-MULTIFLUID:hover,\n.bar-MULTIFLUID:hover,\n.bar-WATER:hover,\n.bar-GAS:hover,\n.bar-ELECTRICITY:hover {\n  cursor: pointer;\n}\n.bar-compare-ELECTRICITY:hover.disabled,\n.bar-compare-GAS:hover.disabled,\n.bar-compare-WATER:hover.disabled,\n.bar-compare-MULTIFLUID:hover.disabled,\n.bar-MULTIFLUID:hover.disabled,\n.bar-WATER:hover.disabled,\n.bar-GAS:hover.disabled,\n.bar-ELECTRICITY:hover.disabled {\n  cursor: default;\n}\n\n.bar-ELECTRICITY {\n  fill: #5d3d2a;\n}\n.bar-ELECTRICITY.selected {\n  fill: #d87b39;\n  filter: drop-shadow(0 -0.1rem 0.2rem #d87b39);\n}\n\n.bar-compare-ELECTRICITY {\n  fill: #795c47;\n}\n.bar-compare-ELECTRICITY.selected {\n  fill: #e2bca1;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e2bca1);\n}\n\n.bar-WATER {\n  fill: #20415e;\n}\n.bar-WATER.selected {\n  fill: #3a98ec;\n  filter: drop-shadow(0 -0.1rem 0.2rem #3a98ec);\n}\n\n.bar-compare-WATER {\n  fill: #4d5c6e;\n}\n.bar-compare-WATER.selected {\n  fill: #abd4fa;\n  filter: drop-shadow(0 -0.1rem 0.2rem #abd4fa);\n}\n\n.bar-GAS {\n  fill: #184940;\n}\n.bar-GAS.selected {\n  fill: #45d1b8;\n  filter: drop-shadow(0 -0.1rem 0.2rem #45d1b8);\n}\n\n.bar-compare-GAS {\n  fill: #597773;\n}\n.bar-compare-GAS.selected {\n  fill: #a8f7e9;\n  filter: drop-shadow(0 -0.1rem 0.2rem #a8f7e9);\n}\n\n.bar-MULTIFLUID {\n  fill: #705d1d;\n}\n.bar-MULTIFLUID.selected {\n  fill: #e3b82a;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n.bar-MULTIFLUID.disabled:hover {\n  cursor: default;\n}\n\n.bar-duel {\n  fill: #61f0f2;\n}\n.bar-duel.selected {\n  fill: #61f0f2;\n  filter: drop-shadow(0 -0.1rem 0.2rem #61f0f2);\n}\n.bar-duel.disabled:hover {\n  cursor: default;\n}\n\n.bar-UNCOMING {\n  fill: #7b7b7b;\n  opacity: 0.6;\n}\n.bar-UNCOMING.selected {\n  fill: #7b7b7b;\n}\n.bar-UNCOMING.disabled:hover {\n  cursor: default;\n}\n\n.bar-compare-MULTIFLUID {\n  fill: #7d6a4e;\n}\n.bar-compare-MULTIFLUID.selected {\n  fill: #ffd597;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n\n.bar-average {\n  stroke-width: 2;\n  stroke: #e3b82a;\n}\n\n.week {\n  fill: #e2bca1;\n}\n.week.selected {\n  fill: #e2bca1;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e2bca1);\n}\n\n.weekend {\n  fill: #ffd597;\n}\n.weekend.selected {\n  fill: #ffd597;\n  filter: drop-shadow(0 -0.1rem 0.2rem #e3b82a);\n}\n\n/** Animation **/\n.bounce-1 {\n  animation-name: bounce-1;\n  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);\n  animation-iteration-count: 1;\n  transform-origin: bottom center;\n  transform-box: fill-box;\n}\n\n@keyframes bounce-1 {\n  0% {\n    transform: scale(0.1, 0.1);\n  }\n  28% {\n    transform: scale(0.1, 1.1);\n  }\n  45% {\n    transform: scale(0.8, 0.95);\n  }\n  55% {\n    transform: scale(1, 1);\n  }\n  65% {\n    transform: scale(1, 0.98);\n  }\n  75% {\n    transform: scale(1, 1);\n  }\n}\n.bounce-2 {\n  animation-name: bounce-2;\n  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);\n  animation-iteration-count: 1;\n  transform-origin: bottom center;\n  transform-box: fill-box;\n}\n\n@keyframes bounce-2 {\n  0% {\n    transform: scale(1, 1);\n  }\n  28% {\n    transform: scale(1, 1.1);\n  }\n  45% {\n    transform: scale(0.8, 0.95);\n  }\n  55% {\n    transform: scale(1, 1);\n  }\n  65% {\n    transform: scale(1, 0.98);\n  }\n  75% {\n    transform: scale(1, 1);\n  }\n}\n.bounce-3 {\n  animation-name: bounce-3;\n  animation-timing-function: cubic-bezier(1, 1, 0.42, 1);\n  animation-iteration-count: 1;\n  transform-origin: bottom center;\n}\n\n@keyframes bounce-3 {\n  0% {\n    opacity: 0.6;\n    transform: scaleY(1);\n  }\n  50% {\n    transform: scaleY(1.1);\n    opacity: 0.8;\n  }\n  100% {\n    transform: scaleY(1);\n    opacity: 1;\n  }\n}\n/** Animation delay **/\n.delay {\n  animation-duration: 0.4s;\n}\n\n.delay--0 {\n  animation-duration: 0.4s;\n}\n\n.delay--1 {\n  animation-duration: 0.48s;\n}\n\n.delay--2 {\n  animation-duration: 0.56s;\n}\n\n.delay--3 {\n  animation-duration: 0.64s;\n}\n\n.delay--4 {\n  animation-duration: 0.72s;\n}\n\n.delay--5 {\n  animation-duration: 0.8s;\n}\n\n.delay--6 {\n  animation-duration: 0.88s;\n}\n\n.delay--7 {\n  animation-duration: 0.96s;\n}\n\n.delay--8 {\n  animation-duration: 1.04s;\n}\n\n.delay--9 {\n  animation-duration: 1.12s;\n}\n\n.delay--10 {\n  animation-duration: 1.2s;\n}\n\n.delay--11 {\n  animation-duration: 1.28s;\n}\n\n.delay--12 {\n  animation-duration: 1.36s;\n}\n\n.delay--13 {\n  animation-duration: 1.44s;\n}\n\n.delay--14 {\n  animation-duration: 1.52s;\n}\n\n.delay--15 {\n  animation-duration: 1.6s;\n}\n\n.delay--16 {\n  animation-duration: 1.68s;\n}\n\n.delay--17 {\n  animation-duration: 1.76s;\n}\n\n.delay--18 {\n  animation-duration: 1.84s;\n}\n\n.delay--19 {\n  animation-duration: 1.92s;\n}\n\n.delay--20 {\n  animation-duration: 2s;\n}\n\n.delay--21 {\n  animation-duration: 2.08s;\n}\n\n.delay--22 {\n  animation-duration: 2.16s;\n}\n\n.delay--23 {\n  animation-duration: 2.24s;\n}\n\n.delay--24 {\n  animation-duration: 2.32s;\n}\n\n.delay--25 {\n  animation-duration: 2.4s;\n}\n\n.delay--26 {\n  animation-duration: 2.48s;\n}\n\n.delay--27 {\n  animation-duration: 2.56s;\n}\n\n.delay--28 {\n  animation-duration: 2.64s;\n}\n\n.delay--29 {\n  animation-duration: 2.72s;\n}\n\n.delay--30 {\n  animation-duration: 2.8s;\n}\n\n.delay--31 {\n  animation-duration: 2.88s;\n}\n\n.delay--32 {\n  animation-duration: 2.96s;\n}\n\n.delay--33 {\n  animation-duration: 3.04s;\n}\n\n.delay--34 {\n  animation-duration: 3.12s;\n}\n\n.delay--35 {\n  animation-duration: 3.2s;\n}\n\n.delay--36 {\n  animation-duration: 3.28s;\n}\n\n.delay--37 {\n  animation-duration: 3.36s;\n}\n\n.delay--38 {\n  animation-duration: 3.44s;\n}\n\n.delay--39 {\n  animation-duration: 3.52s;\n}\n\n.delay--40 {\n  animation-duration: 3.6s;\n}\n\n.delay--41 {\n  animation-duration: 3.68s;\n}\n\n.delay--42 {\n  animation-duration: 3.76s;\n}\n\n.delay--43 {\n  animation-duration: 3.84s;\n}\n\n.delay--44 {\n  animation-duration: 3.92s;\n}\n\n.delay--45 {\n  animation-duration: 4s;\n}\n\n.delay--46 {\n  animation-duration: 4.08s;\n}\n\n.delay--47 {\n  animation-duration: 4.16s;\n}\n\n.delay--48 {\n  animation-duration: 4.24s;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\nbutton span {\n  font-size: 1rem;\n  font-weight: 700;\n}\nbutton.btnPrimary {\n  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;\n  border: 1px solid;\n  border-color: transparent;\n  border-radius: 2px;\n  width: 100%;\n  text-transform: initial;\n  transition: all 150ms ease-in-out;\n}\nbutton.btnPrimary span:first-child {\n  color: #121212;\n}\nbutton.btnPrimary:hover, button.btnPrimary:focus, button.btnPrimary.active, button.btnPrimary:disabled {\n  background-color: #b89318;\n}\nbutton.btnPrimary:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btnSecondary {\n  background: transparent;\n  border: 1px solid;\n  border-color: #e0e0e0;\n  border-radius: 2px;\n  width: 100%;\n  text-transform: initial;\n  transition: all 150ms ease-in-out;\n}\nbutton.btnSecondary span:first-child {\n  color: #e0e0e0;\n}\nbutton.btnSecondary:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btnText {\n  text-decoration: underline;\n}\nbutton.btnText span {\n  text-transform: none;\n  font-weight: 400;\n}\nbutton.btnPrimaryNegative {\n  background: linear-gradient(180deg, #61f0f2 0%, #48c2c4 100%);\n  border: 1px solid;\n  border-color: transparent;\n  border-radius: 2px;\n  width: 100%;\n  text-transform: initial;\n  transition: all 150ms ease-in-out;\n}\nbutton.btnPrimaryNegative span:first-child {\n  color: #121212;\n}\nbutton.btnPrimaryNegative:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\nbutton.btnPrimaryNegative:hover {\n  opacity: 0.7;\n}\nbutton.btnIncrement {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  border: 1px solid;\n  border-color: transparent;\n  border-radius: 2px;\n  width: 100%;\n  text-transform: initial;\n  transition: all 150ms ease-in-out;\n  min-width: 40px;\n  width: 40px;\n  height: 40px;\n  border-radius: 4px;\n  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.55);\n}\nbutton.btnIncrement span:first-child {\n  color: #ffffff;\n}\nbutton.btnIncrement:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ninput.inputText,\ninput.inputNumber {\n  box-sizing: border-box;\n  border: 1px solid #7b7b7b;\n  background: transparent;\n  transition: all 300ms ease;\n  color: #e0e0e0;\n}\ninput.inputText:focus, input.inputText:focus-visible,\ninput.inputNumber:focus,\ninput.inputNumber:focus-visible {\n  border-color: #e3b82a;\n  outline: none;\n}\n\ninput.inputText {\n  appearance: none;\n  border-radius: 4px;\n  height: 45px;\n  width: 100%;\n  max-width: 280px;\n  padding: 0 0.5rem;\n}\n\ninput.inputNumber {\n  border-radius: 2px;\n  height: 40px;\n  width: 60px;\n  max-width: 5rem;\n  text-align: center;\n}\n\ninput.inputCheckbox {\n  width: 24px;\n  min-width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  cursor: pointer;\n  appearance: none;\n  background: #121212;\n  position: relative;\n  border: solid 1px #7b7b7b;\n}\ninput.inputCheckbox:checked {\n  background: #e3b82a;\n  border-color: #e3b82a;\n}\ninput.inputCheckbox:checked:before, input.inputCheckbox:checked:after {\n  content: \"\";\n  position: absolute;\n  display: inline-block;\n  background: #121212;\n  border-radius: 0.5rem;\n}\ninput.inputCheckbox:checked:before {\n  width: 3px;\n  height: 12px;\n  left: 10px;\n  top: 4px;\n  transform: rotate(41deg);\n}\ninput.inputCheckbox:checked:after {\n  width: 3px;\n  height: 6px;\n  left: 5px;\n  top: 8px;\n  transform: rotate(133deg);\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.card {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  box-sizing: border-box;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);\n  border-radius: 4px;\n  padding: 16px;\n}\n.card:hover {\n  background: linear-gradient(180deg, rgba(70, 71, 77, 0.7) 0%, rgba(57, 58, 63, 0.7) 100%);\n}\n.card.rich-card {\n  padding: 16px;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ndiv.modal-root .MuiBackdrop-root {\n  background-color: hsla(231deg, 11%, 12%, 0.85);\n}\n\ndiv.modal-paper {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  width: 36rem;\n  max-width: 100%;\n  max-height: 90vh;\n  padding: 2rem;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  margin: 0 0 0 13.75rem;\n  align-items: center;\n  color: #ffffff;\n}\n@media only screen and (max-width : 1023px) {\n  div.modal-paper {\n    width: 35rem;\n    margin: 0;\n  }\n}\n@media only screen and (max-width : 768px) {\n  div.modal-paper {\n    padding: 1rem 1rem 1.5rem;\n    width: 85%;\n    max-width: 35rem;\n    margin: 0;\n  }\n}\ndiv.modal-paper.no-padding {\n  padding: 0;\n}\ndiv.modal-paper.blue-border {\n  border: 1px solid rgba(88, 255, 255, 0.2509803922);\n}\ndiv.modal-paper.blue-light-border {\n  border: 1px solid #61f0f2;\n}\ndiv.modal-paper.yellow-border {\n  border: 1px solid rgba(227, 184, 42, 0.4);\n}\ndiv.modal-paper .modal-paper-close-button {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 5px 5px;\n  z-index: 10;\n}\n\ndiv.modal-paper-full-screen {\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  width: 100%;\n  max-width: 100%;\n  height: 100%;\n  max-height: 100%;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  color: #ffffff;\n  display: flex;\n  align-items: center;\n}\ndiv.modal-paper-full-screen.dark-background {\n  background: #121212;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\ndiv.expansion-panel-root {\n  margin: 1.2rem 0;\n  color: #e0e0e0;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  border-radius: 4px;\n  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);\n  transition: background-color 0.6s ease;\n  box-sizing: border-box;\n}\ndiv.expansion-panel-root.Mui-expanded:first-child {\n  margin: 1.2rem 0;\n}\ndiv.expansion-panel-root.Mui-expanded:last-child {\n  margin: 1.2rem 0;\n}\ndiv.expansion-panel-root.red-border {\n  border: 1px solid #d25959;\n}\n\ndiv.expansion-panel-summary {\n  padding: 0.25rem 1.2rem;\n  min-height: 4rem;\n}\ndiv.expansion-panel-summary.Mui-focused {\n  border-radius: 4px;\n  background-color: unset;\n  box-shadow: 0 0 0 1px #e0e0e0;\n}\ndiv.expansion-panel-summary.Mui-expanded {\n  min-height: 4rem;\n}\ndiv.expansion-panel-summary.Mui-expanded.small {\n  min-height: 3rem;\n}\ndiv.expansion-panel-summary.small {\n  padding: 0 1.2rem;\n  min-height: 3rem;\n}\ndiv.expansion-panel-summary.bold-text {\n  font-weight: bold;\n}\n\ndiv.expansion-panel-content {\n  display: flex;\n  align-items: center;\n}\ndiv.expansion-panel-content.Mui-expanded {\n  margin: 0.75rem 0;\n}\n\ndiv.expansion-panel-details {\n  padding: 0 1.2rem 1.2rem;\n}\n\n/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\na {\n  color: #deaf0e;\n}\na:visited {\n  color: #deaf0e;\n}\n\na:focus {\n  outline: none;\n  box-shadow: inset 0 0 0 1px #e0e0e0;\n}\na:focus > div:first-child {\n  box-shadow: 0 0 0 1px #e0e0e0;\n}\n\na.MuiLink-underlineHover:hover {\n  text-decoration: none;\n}\n\na.MuiTypography-colorPrimary {\n  color: #e0e0e0;\n}\n\n:root {\n  white-space: pre-line;\n  --blue: #58ffff;\n  --blue40: rgba(88, 255, 255, 0.2509803922);\n  --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;\n  --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;\n  --blueRadialGradientTrans: radial-gradient(circle, #58ffff 0%, rgba(255, 255, 255, 0) 100%);\n  --elecColor: #d87b39;\n  --elecColor40: rgba(216, 123, 57, 0.4);\n  --elecCompareColor: #e2bca1;\n  --gasColor: #45d1b8;\n  --gasColor40: rgba(69, 209, 184, 0.4);\n  --gasCompareColor: #a8f7e9;\n  --waterColor: #3a98ec;\n  --waterColor40: rgba(58, 152, 236, 0.4);\n  --waterCompareColor: #abd4fa;\n  --multiColor: #e3b82a;\n  --multiCompareColor: #ffd597;\n  --redPrimary: #d25959;\n  --greyBright: #e0e0e0;\n  --greyDark: #7b7b7b;\n  --textWhite: #ffffff;\n  --softGrey: #a0a0a0;\n  --darkLight: #25262b;\n  --darkLight2: #121212;\n  --textFont: Lato, sans-serif;\n  --greyLinearGradientBackground: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  --multiColorRadialGradientTrans: radial-gradient(circle, #e3b82a 0%, rgba(255, 255, 255, 0) 100%);\n  --elecColorRadialGradientTrans: radial-gradient(circle, #d87b39 0%, rgba(255, 255, 255, 0) 100%);\n  --waterColorRadialGradientTrans: radial-gradient(circle, #3a98ec 0%, rgba(255, 255, 255, 0) 100%);\n  --gasColorRadialGradientTrans: radial-gradient(circle, #e3b82a 0%, rgba(255, 255, 255, 0) 100%);\n  --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;\n  --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;\n  --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;\n  --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;\n}\n\n.application {\n  overflow-x: hidden;\n  background-color: #121212;\n}\n\n.accordion-icon {\n  color: #ffffff;\n}\n\n.loaderContainer {\n  height: 80vh;\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n}", ""]);
 
 
 
@@ -31234,7 +31130,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.cardContent.cardDone {\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 1rem;\n  align-items: center;\n}\n.cardContent.cardDone .challengeName {\n  text-align: center;\n}\n.cardContent.cardDone .iconResult {\n  display: flex;\n}\n@media all and (max-height: 700px) {\n  .cardContent.cardDone .iconResult {\n    width: 55%;\n    margin: auto;\n  }\n}\n.cardContent.cardDone .imgResult {\n  width: 100%;\n  height: 100%;\n}\n.cardContent.cardDone .labelResult {\n  font-weight: bold;\n  font-size: 28px;\n  line-height: 120%;\n  text-transform: uppercase;\n  margin-bottom: 0.5rem;\n}\n.cardContent.cardDone .win {\n  color: #e3b82a;\n}\n.cardContent.cardDone .lost {\n  color: #d25959;\n}\n.cardContent.cardDone .statsResult {\n  text-align: center;\n}\n.cardContent.cardDone .buttons {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  width: 100%;\n}\n.cardContent.cardDone .buttons button {\n  padding: 0.625rem;\n  margin: 0;\n}\n.cardContent.cardDone .buttons button.grey-border {\n  border: 1px solid #e0e0e0;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.cardContent.cardDone {\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 1rem;\n  align-items: center;\n}\n.cardContent.cardDone .challengeName {\n  text-align: center;\n}\n.cardContent.cardDone .iconResult {\n  display: flex;\n}\n@media all and (max-height: 700px) {\n  .cardContent.cardDone .iconResult {\n    width: 55%;\n    margin: auto;\n  }\n}\n.cardContent.cardDone .imgResult {\n  width: 100%;\n  height: 100%;\n}\n.cardContent.cardDone .labelResult {\n  font-weight: bold;\n  font-size: 28px;\n  line-height: 120%;\n  text-transform: uppercase;\n  margin-bottom: 0.5rem;\n}\n.cardContent.cardDone .win {\n  color: #e3b82a;\n}\n.cardContent.cardDone .lost {\n  color: #d25959;\n}\n.cardContent.cardDone .statsResult {\n  text-align: center;\n}\n.cardContent.cardDone .buttons {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  width: 100%;\n}", ""]);
 
 
 
@@ -31707,7 +31603,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, ".profile-type-container {\n  position: relative;\n  min-height: inherit;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.profile-type-container label,\n.profile-type-container input {\n  cursor: pointer;\n}", ""]);
+exports.push([module.i, ".profile-type-container {\n  position: relative;\n  min-height: inherit;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.profile-type-container label {\n  cursor: pointer;\n}", ""]);
 
 
 
@@ -31851,28 +31747,33 @@ var ProfileTypeFormNumberSelection = function ProfileTypeFormNumberSelection(_re
     formType: "profile"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "profile-question-label"
-  }, t("profile_type.".concat(_enums.ProfileTypeStepForm[step].toLowerCase(), ".question"))), answer !== null ? /*#__PURE__*/_react.default.createElement("div", {
+  }, t("profile_type.".concat(_enums.ProfileTypeStepForm[step].toLowerCase(), ".question"))), answer != null && /*#__PURE__*/_react.default.createElement("div", {
     className: "number-container"
   }, /*#__PURE__*/_react.default.createElement(_core.Button, {
-    className: "btn-profile-number",
     onClick: function onClick() {
       return decrement();
     },
-    disabled: index < 1
-  }, "-"), /*#__PURE__*/_react.default.createElement("label", {
-    className: "number"
-  }, /*#__PURE__*/_react.default.createElement("input", {
-    type: "text",
+    disabled: index < 1,
+    classes: {
+      root: 'btnIncrement',
+      label: 'text-36-normal'
+    }
+  }, "-"), /*#__PURE__*/_react.default.createElement("input", {
+    type: "number",
+    className: "inputNumber",
     value: answer.toString(),
     name: answerType.attribute,
     disabled: true
-  })), /*#__PURE__*/_react.default.createElement(_core.Button, {
-    className: "btn-profile-number",
+  }), /*#__PURE__*/_react.default.createElement(_core.Button, {
     onClick: function onClick() {
       return increment();
     },
-    disabled: index >= answerType.choices.length - 1
-  }, "+")) : null), /*#__PURE__*/_react.default.createElement(_FormNavigation.default, {
+    disabled: index >= answerType.choices.length - 1,
+    classes: {
+      root: 'btnIncrement',
+      label: 'text-36-normal'
+    }
+  }, "+"))), /*#__PURE__*/_react.default.createElement(_FormNavigation.default, {
     step: step,
     handlePrevious: handlePrevious,
     handleNext: handleNext,
@@ -32499,34 +32400,23 @@ var ExplorationOngoing = function ExplorationOngoing(_ref) {
         }, /*#__PURE__*/_react.default.createElement(_Button.default, {
           "aria-label": t('exploration.accessibility.button_already_done'),
           onClick: validExploration,
-          classes: {
-            root: 'btn-secondary-negative',
-            label: 'text-16-normal'
-          }
+          className: "btnSecondary"
         }, t('exploration.button_already_done')), /*#__PURE__*/_react.default.createElement(_Button.default, {
           "aria-label": t('exploration.accessibility.button_already_done'),
           onClick: function onClick() {
             return navigate(-1);
           },
-          classes: {
-            root: 'btn-secondary-negative',
-            label: 'text-16-normal'
-          }
+          className: "btnSecondary"
         }, t('exploration.button_come_back')));
 
       case _enums.UserExplorationType.ACTION:
       case _enums.UserExplorationType.ECOGESTURE:
       case _enums.UserExplorationType.CONSUMPTION:
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: "button-start"
-        }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        return /*#__PURE__*/_react.default.createElement(_Button.default, {
           "aria-label": t('exploration.accessibility.button_start'),
           onClick: startExploration,
-          classes: {
-            root: 'btn-secondary-negative',
-            label: 'text-16-normal'
-          }
-        }, t('exploration.button_start')));
+          className: "btnSecondary"
+        }, t('exploration.button_start'));
     }
   };
 
@@ -32658,10 +32548,9 @@ var UnSubscribeView = function UnSubscribeView() {
     },
     variant: "contained",
     classes: {
-      root: 'btn-highlight',
+      root: 'btnPrimary',
       label: 'text-18-bold'
-    },
-    type: "submit"
+    }
   }, t('unsubscribe.button_text')))));
 };
 
@@ -32937,12 +32826,16 @@ var ProfileTypeFormNumber = function ProfileTypeFormNumber(_ref) {
     className: "text"
   }, /*#__PURE__*/_react.default.createElement("input", {
     type: "number",
+    className: "inputNumber",
     value: answer.toString(),
     name: answerType.attribute,
     onChange: function onChange(e) {
       return setAnswer(e.target.value);
     },
-    autoFocus: true
+    autoFocus: true,
+    style: {
+      marginRight: '0.5rem'
+    }
   }), "m\xB2")), /*#__PURE__*/_react.default.createElement(_FormNavigation.default, {
     step: step,
     handlePrevious: handlePrevious,
@@ -33662,7 +33555,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.profile-type-finished-card {\n  margin: auto;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  width: 80%;\n  text-align: center;\n  padding: 1rem;\n}\n@media (min-width: 1023px) {\n  .profile-type-finished-card {\n    width: 50%;\n  }\n}\n@media (min-width: 1201px) {\n  .profile-type-finished-card {\n    width: 40%;\n  }\n}\n.profile-type-finished-card button.profile-type-finished-button {\n  margin-top: 2.875rem;\n}\n\n.profile-type-finished-label {\n  color: #e3b82a;\n}\n\n.profile-type-finished-description {\n  margin-top: 1.875rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.profile-type-finished-card {\n  margin: auto;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  width: 80%;\n  text-align: center;\n  padding: 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n.profile-type-finished-card svg {\n  margin: auto;\n}\n@media (min-width: 1023px) {\n  .profile-type-finished-card {\n    width: 50%;\n  }\n}\n@media (min-width: 1201px) {\n  .profile-type-finished-card {\n    width: 40%;\n  }\n}\n\n.profile-type-finished-label {\n  color: #e3b82a;\n}", ""]);
 
 
 
@@ -34442,26 +34335,17 @@ var QuizFinish = function QuizFinish(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('quiz.accessibility.button_end_quiz'),
     onClick: goBack,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('quiz.button_end_quiz'))) : /*#__PURE__*/_react.default.createElement("div", {
     className: "button-start"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('quiz.accessibility.button_go_back'),
     onClick: goBack,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('quiz.button_go_back')), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('quiz.accessibility.button_try_again'),
     onClick: retryQuiz,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('quiz.button_try_again')))));
 };
 
@@ -34792,6 +34676,9 @@ var ChallengeCardOnGoing = function ChallengeCardOnGoing(_ref) {
       quizProgress = _userChallenge$progre.quizProgress,
       target = userChallenge.target,
       duel = userChallenge.duel;
+  var quizFinished = userChallenge.progress.quizProgress === 5;
+  var explorationFinished = userChallenge.progress.explorationProgress === 5;
+  var actionFinished = userChallenge.progress.actionProgress === 5;
   var toggleNoFluidModal = (0, _react.useCallback)(function () {
     setIsOneFluidUp(function (prev) {
       return !prev;
@@ -35008,12 +34895,12 @@ var ChallengeCardOnGoing = function ChallengeCardOnGoing(_ref) {
   var quizButton = function quizButton() {
     return /*#__PURE__*/_react.default.createElement(_core.Button, {
       title: t('challenge.card.ongoing.quiz'),
-      tabIndex: userChallenge.progress.quizProgress === 5 ? -1 : 0,
-      className: (0, _classnames.default)('smallCard', (0, _defineProperty2.default)({}, 'finished', userChallenge.progress.quizProgress === 5)),
+      tabIndex: quizFinished ? -1 : 0,
+      className: (0, _classnames.default)('smallCard', (0, _defineProperty2.default)({}, 'finished', quizFinished)),
       onClick: goQuiz
     }, /*#__PURE__*/_react.default.createElement(_StyledIcon.default, {
       className: "cardIcon",
-      icon: userChallenge.progress.quizProgress === 5 ? _circleChecked.default : _circleUnchecked.default,
+      icon: quizFinished ? _circleChecked.default : _circleUnchecked.default,
       size: 25
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "content"
@@ -35025,12 +34912,12 @@ var ChallengeCardOnGoing = function ChallengeCardOnGoing(_ref) {
   var explorationButton = function explorationButton() {
     return /*#__PURE__*/_react.default.createElement(_core.Button, {
       title: t('challenge.card.ongoing.exploration'),
-      tabIndex: userChallenge.progress.explorationProgress === 5 ? -1 : 0,
-      className: (0, _classnames.default)('smallCard explorationCard', (0, _defineProperty2.default)({}, 'finished', userChallenge.progress.explorationProgress === 5)),
+      tabIndex: explorationFinished ? -1 : 0,
+      className: (0, _classnames.default)('smallCard explorationCard', (0, _defineProperty2.default)({}, 'finished', explorationFinished)),
       onClick: goExploration
     }, /*#__PURE__*/_react.default.createElement(_StyledIcon.default, {
       className: "cardIcon",
-      icon: userChallenge.progress.explorationProgress === 5 ? _circleChecked.default : _circleUnchecked.default,
+      icon: explorationFinished ? _circleChecked.default : _circleUnchecked.default,
       size: 25
     }), userChallenge.exploration.state === _enums.UserExplorationState.NOTIFICATION && /*#__PURE__*/_react.default.createElement("div", {
       className: "notifChallenge"
@@ -35044,12 +34931,12 @@ var ChallengeCardOnGoing = function ChallengeCardOnGoing(_ref) {
   var actionButton = function actionButton() {
     return /*#__PURE__*/_react.default.createElement(_core.Button, {
       title: t('challenge.card.ongoing.action'),
-      tabIndex: userChallenge.progress.actionProgress === 5 ? -1 : 0,
-      className: (0, _classnames.default)('smallCard actionCard', (0, _defineProperty2.default)({}, 'finished', userChallenge.progress.actionProgress === 5)),
+      tabIndex: actionFinished ? -1 : 0,
+      className: (0, _classnames.default)('smallCard actionCard', (0, _defineProperty2.default)({}, 'finished', actionFinished)),
       onClick: goAction
     }, /*#__PURE__*/_react.default.createElement(_StyledIcon.default, {
       className: "cardIcon",
-      icon: userChallenge.progress.actionProgress === 5 ? _circleChecked.default : _circleUnchecked.default,
+      icon: actionFinished ? _circleChecked.default : _circleUnchecked.default,
       size: 25
     }), userChallenge.action.state === _enums.UserActionState.NOTIFICATION && /*#__PURE__*/_react.default.createElement("div", {
       className: "notifChallenge"
@@ -35143,7 +35030,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.checkbox {\n  margin: 0.5rem 0;\n  display: flex;\n  align-items: center;\n}\n.checkbox:first-of-type {\n  margin-top: 1.5rem;\n}\n.checkbox input {\n  margin: 0.5rem 1rem 0.5rem 0.5rem;\n  appearance: none;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  width: 1.45rem;\n  height: 1.45rem;\n  min-width: 1.45rem;\n  min-height: 1.45rem;\n  background: radial-gradient(60.65% 30.62% at 50% 3.13%, #2a2b30 0%, #1b1c22 100%);\n  position: relative;\n  border: solid 2px #e3b82a;\n  cursor: pointer;\n}\n\n.answer-checked input:before, .answer-checked input:after {\n  content: \"\";\n  position: absolute;\n  display: inline-block;\n  background: #e3b82a;\n  border-radius: 0.5rem;\n}\n.answer-checked input:before {\n  width: 3px;\n  height: 12px;\n  left: 10px;\n  top: 4px;\n  transform: rotate(41deg);\n}\n.answer-checked input:after {\n  width: 3px;\n  height: 6px;\n  left: 5px;\n  top: 8px;\n  transform: rotate(133deg);\n}\n\n.terms-wrapper {\n  padding: 0rem 1.5rem 0 1.5rem;\n  box-sizing: border-box;\n  width: 100vw;\n  overflow-x: hidden;\n}\n.terms-wrapper p,\n.terms-wrapper ul,\n.terms-wrapper li,\n.terms-wrapper label,\n.terms-wrapper span {\n  color: #e0e0e0;\n}\n.terms-wrapper h1 {\n  color: #e3b82a;\n  font-weight: 800;\n}\n\n.terms-content {\n  max-width: 45rem;\n  margin: auto;\n}\n.terms-content .action {\n  cursor: pointer;\n  color: #e3b82a;\n}\n\n.dataShare-content-wrapper,\n.dataShare-content-root {\n  width: inherit;\n}\n\n.terms-footer {\n  max-width: 45rem;\n  width: 100%;\n  margin: auto;\n  height: 60px;\n  text-align: center;\n  padding-top: 1.5rem;\n}\n.terms-footer button {\n  margin: 0;\n  max-width: 150px;\n}\n.terms-footer button:disabled {\n  opacity: 0.3;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.terms-wrapper {\n  padding: 0rem 1.5rem 0 1.5rem;\n  box-sizing: border-box;\n  width: 100vw;\n  overflow-x: hidden;\n}\n.terms-wrapper p,\n.terms-wrapper ul,\n.terms-wrapper li,\n.terms-wrapper label,\n.terms-wrapper span {\n  color: #e0e0e0;\n}\n.terms-wrapper h1 {\n  color: #e3b82a;\n  font-weight: 800;\n}\n\n.terms-content {\n  max-width: 45rem;\n  margin: auto;\n}\n.terms-content .action {\n  cursor: pointer;\n  color: #e3b82a;\n}\n.terms-content label.inline {\n  margin-top: 1rem;\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n}\n\n.dataShare-content-wrapper,\n.dataShare-content-root {\n  width: inherit;\n}\n\n.terms-footer {\n  max-width: 45rem;\n  width: 100%;\n  margin: auto;\n  height: 60px;\n  text-align: center;\n  padding-top: 1.5rem;\n}\n.terms-footer button {\n  margin: 0;\n  max-width: 150px;\n}\n.terms-footer button:disabled {\n  opacity: 0.3;\n}", ""]);
 
 
 
@@ -35601,7 +35488,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.cardLast {\n  width: 100%;\n  height: inherit;\n  box-sizing: border-box;\n  padding: 5%;\n  transition: all 300ms ease;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  align-items: center;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n}\n.cardLast .content {\n  max-height: 350px;\n  flex-direction: column;\n  display: flex;\n}\n.cardLast svg {\n  max-height: 150px;\n}\n.cardLast .title-last {\n  padding: 1rem 2.3rem 1.5rem;\n}\n.cardLast .message {\n  margin: 0 0 0.7rem;\n}\n.cardLast .btn_lastCard {\n  padding: 8px;\n  max-height: 40px;\n}\n.cardLast .content,\n.cardLast .title-last,\n.cardLast .message,\n.cardLast .btn_lastCard,\n.cardLast svg {\n  flex: 1;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.cardLast {\n  height: inherit;\n  box-sizing: border-box;\n  padding: 1rem;\n  transition: all 300ms ease;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n}\n.cardLast svg {\n  max-height: 150px;\n  flex: 1;\n}", ""]);
 
 
 
@@ -35654,6 +35541,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.App = void 0;
 
+var _core = __webpack_require__("TTf+");
+
 var _Navbar = _interopRequireDefault(__webpack_require__("ikYp"));
 
 var _Routes = _interopRequireDefault(__webpack_require__("rqN/"));
@@ -35672,6 +35561,8 @@ var _reactRouterDom = __webpack_require__("SOjZ");
 
 var _hooks = __webpack_require__("Zlw4");
 
+var _theme = __webpack_require__("SlEa");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -35698,13 +35589,15 @@ var App = function App(_ref) {
       topTheme: 'light'
     });
   }, [webviewIntent]);
-  return /*#__PURE__*/_react.default.createElement(_Layout.Layout, null, /*#__PURE__*/_react.default.createElement(_SplashRoot.default, null, termsStatus.accepted && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WelcomeModal.default, {
+  return /*#__PURE__*/_react.default.createElement(_Layout.Layout, null, /*#__PURE__*/_react.default.createElement(_core.ThemeProvider, {
+    theme: _theme.theme
+  }, /*#__PURE__*/_react.default.createElement(_SplashRoot.default, null, termsStatus.accepted && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_WelcomeModal.default, {
     open: !onboarding.isWelcomeSeen
   }), /*#__PURE__*/_react.default.createElement(_Navbar.default, null)), /*#__PURE__*/_react.default.createElement("main", {
     className: "app-content"
   }, /*#__PURE__*/_react.default.createElement(_Routes.default, {
     termsStatus: termsStatus
-  }))));
+  })))));
 };
 
 exports.App = App;
@@ -35718,7 +35611,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.exploration-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  padding: 1.5rem;\n}\n\n.exploration-begin-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  padding: 2rem 1rem 1.5rem;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  text-align: center;\n}\n.exploration-begin-container svg {\n  margin-top: -33%;\n}\n@media (min-width: 768px) {\n  .exploration-begin-container {\n    width: 60%;\n    height: 100%;\n  }\n}\n@media (min-width: 1201px) {\n  .exploration-begin-container {\n    max-width: 45%;\n    padding: 0.5rem 1rem 2rem;\n  }\n}\n.exploration-begin-container .btn-start {\n  margin-top: auto;\n  border-color: #e0e0e0;\n}\n.exploration-begin-container .exploration-icon-stars {\n  margin-top: -4rem;\n}\n.exploration-begin-container .exploration-explanation {\n  line-height: 24px;\n  height: 50%;\n  display: flex;\n  flex-direction: column;\n  margin: 2.5rem 0;\n}\n.exploration-begin-container .exploration-explanation div {\n  align-self: center;\n}\n.exploration-begin-container .exploration-explanation div:first-child {\n  margin-bottom: 1rem;\n}\n.exploration-begin-container .button-start {\n  margin-top: 0;\n  width: 100%;\n}\n.exploration-begin-container .button-start button.btn-secondary-negative {\n  margin: 0;\n}\n.exploration-begin-container .stars {\n  margin-top: 1rem;\n}\n.exploration-begin-container .stars svg {\n  margin-right: 0.25rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.exploration-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  padding: 1.5rem;\n}\n\n.exploration-begin-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  padding: 2rem 1rem 1.5rem;\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n  border-radius: 4px;\n  transition: all 300ms ease;\n  color: #ffffff;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  text-align: center;\n}\n.exploration-begin-container svg {\n  margin-top: -33%;\n}\n@media (min-width: 768px) {\n  .exploration-begin-container {\n    width: 60%;\n    height: 100%;\n  }\n}\n@media (min-width: 1201px) {\n  .exploration-begin-container {\n    max-width: 45%;\n    padding: 0.5rem 1rem 2rem;\n  }\n}\n.exploration-begin-container .exploration-icon-stars {\n  margin-top: -4rem;\n}\n.exploration-begin-container .exploration-explanation {\n  line-height: 24px;\n  height: 50%;\n  display: flex;\n  flex-direction: column;\n  margin: 2.5rem 0;\n}\n.exploration-begin-container .exploration-explanation div {\n  align-self: center;\n}\n.exploration-begin-container .exploration-explanation div:first-child {\n  margin-bottom: 1rem;\n}\n.exploration-begin-container .stars {\n  margin-top: 1rem;\n}\n.exploration-begin-container .stars svg {\n  margin-right: 0.25rem;\n}", ""]);
 
 
 
@@ -36543,17 +36436,11 @@ var ActionModal = function ActionModal(_ref) {
     className: "buttons"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('action_modal.accessibility.button_accept'),
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    },
+    className: "btnSecondary",
     onClick: launchAction
   }, t('action_modal.accept')), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('action_modal.accessibility.button_refuse'),
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    },
+    className: "btnSecondary",
     onClick: handleCloseClick
   }, t('action_modal.refuse')))));
 };
@@ -37263,7 +37150,7 @@ var result = _node_modules_svg_sprite_loader_runtime_browser_sprite_build_js__WE
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.action-done-container {\n  max-width: 600px;\n  margin: auto;\n  width: 100%;\n  padding: 1.5rem;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n.action-done-container .action-done {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 3rem 1.2rem;\n  color: white;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n}\n.action-done-container .action-done .result-title {\n  font-size: 1.8rem;\n  color: white;\n  text-transform: uppercase;\n}\n.action-done-container .action-done .result-text {\n  padding: 0.7rem 0;\n}\n.action-done-container .action-done .stars {\n  display: flex;\n  align-items: center;\n  color: #61f0f2;\n  font-size: 1.5rem;\n  font-weight: bold;\n}\n.action-done-container .action-done .stars span {\n  margin-right: 0.5rem;\n}\n.action-done-container .action-done button.btn-detail {\n  max-width: 210px;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.action-done-container {\n  max-width: 600px;\n  margin: auto;\n  width: 100%;\n  padding: 1.5rem;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n}\n.action-done-container .action-done {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  gap: 1rem;\n  padding: 3rem 1.2rem;\n  color: white;\n  background: linear-gradient(180deg, #323339 0%, #25262b 100%);\n  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);\n}\n.action-done-container .action-done .result-title {\n  font-size: 1.8rem;\n  color: white;\n  text-transform: uppercase;\n}\n.action-done-container .action-done .stars {\n  display: flex;\n  align-items: center;\n  color: #61f0f2;\n  font-size: 1.5rem;\n  font-weight: bold;\n}\n.action-done-container .action-done .stars span {\n  margin-right: 0.5rem;\n}\n.action-done-container .action-done button {\n  max-width: 210px;\n}", ""]);
 
 
 
@@ -37370,7 +37257,7 @@ if(false) {}
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.profile-navigation {\n  border-top: 1px solid #7b7b7b;\n  background: #1b1c22;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1.5rem;\n  padding: 1rem;\n}\n@media (min-width: 1023px) {\n  .profile-navigation {\n    background: #121212;\n    height: 3rem;\n  }\n}\n.profile-navigation button.profile-navigation-button {\n  max-width: 12.5rem;\n  margin: 0;\n  padding: 0.5rem 1rem;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.profile-navigation {\n  border-top: 1px solid #7b7b7b;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1.5rem;\n  padding: 1rem;\n}\n@media (min-width: 1023px) {\n  .profile-navigation {\n    background: #121212;\n    height: 3rem;\n  }\n}\n.profile-navigation button {\n  max-width: 12.5rem;\n}", ""]);
 
 
 
@@ -37476,10 +37363,7 @@ var ChallengeNoFluidModal = function ChallengeNoFluidModal(_ref) {
   }, t('challenge_no_fluid_modal.content')), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": t('challenge_no_fluid_modal.accessibility.button_validate'),
     onClick: handleCloseClick,
-    classes: {
-      root: 'btn-secondary-negative',
-      label: 'text-16-normal'
-    }
+    className: "btnSecondary"
   }, t('challenge_no_fluid_modal.button_validate'))));
 };
 
@@ -37493,7 +37377,7 @@ exports.default = _default;
 
 exports = module.exports = __webpack_require__("JPst")(false);
 // Module
-exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.modal-empty-value-root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 1.5rem 0.5rem;\n  text-align: center;\n}\n.modal-empty-value-root .modal-empty-value-title {\n  margin: 2rem 0 1rem;\n}\n.modal-empty-value-root button.btn-secondary-negative {\n  margin: 2rem 0.25rem 1.5rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
+exports.push([module.i, "/** BLACK **/\n/** RED **/\n/** YELLOW **/\n/** ORANGE **/\n/** BLUE **/\n/** GREEN **/\n/** WHITE **/\n/** GREY **/\n/** App colors **/\n/** TABS GRADIENT **/\n/** SCROLLBAR **/\n.modal-empty-value-root {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 1.5rem 0.5rem 0;\n  text-align: center;\n  gap: 1rem;\n}\n\n#accessibility-title {\n  display: none;\n}", ""]);
 
 
 
diff --git a/index.html b/index.html
index 73d40f45853ca2d3c10af70476c8ee32c282b080..5d8b4604c68738243db14ca152ce51a0bc9c319b 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="{{.Locale}}"><head><meta charset="utf-8"><title>Ecolyo</title><link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"><!-- PWA Manifest --><link rel="manifest" href="/manifest.json" crossorigin="use-credentials"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#297EF2"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,viewport-fit=cover"><!-- PWA Chrome --><link rel="icon" sizes="192x192" href="/android-chrome-192x192.png"><link rel="icon" sizes="512x512" href="/android-chrome-512x512.png"><!-- PWA iOS --><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="apple-touch-startup-image" href="/apple-touch-icon.png"><meta name="apple-mobile-web-app-title" content="Ecolyo"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- PWA Colors --><meta name="theme-color" content="#343641"><meta name="background-color" content="#121212">{{.ThemeCSS}} {{.CozyBar}}<script src="//{{.Domain}}/assets/js/piwik.js"></script></head><body><div role="application" class="application" data-cozy="{{.CozyData}}"><script src="vendors/ecolyo.fbf1f65c47dc10085503.js"></script><script src="app/ecolyo.4301cd6438f7ffd3d8e4.js"></script></div></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="{{.Locale}}"><head><meta charset="utf-8"><title>Ecolyo</title><link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"><!-- PWA Manifest --><link rel="manifest" href="/manifest.json" crossorigin="use-credentials"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#297EF2"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,viewport-fit=cover"><!-- PWA Chrome --><link rel="icon" sizes="192x192" href="/android-chrome-192x192.png"><link rel="icon" sizes="512x512" href="/android-chrome-512x512.png"><!-- PWA iOS --><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="apple-touch-startup-image" href="/apple-touch-icon.png"><meta name="apple-mobile-web-app-title" content="Ecolyo"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- PWA Colors --><meta name="theme-color" content="#343641"><meta name="background-color" content="#121212">{{.ThemeCSS}} {{.CozyBar}}<script src="//{{.Domain}}/assets/js/piwik.js"></script></head><body><div role="application" class="application" data-cozy="{{.CozyData}}"><script src="vendors/ecolyo.fbf1f65c47dc10085503.js"></script><script src="app/ecolyo.0b6c59eac18a436f566c.js"></script></div></body></html>
\ No newline at end of file