✨ Better display the water footprint throughout the test

src/app/(simulation)/simulateur/[root]/_components/Simulateur.tsx

@@ -31,7 +31,7 @@ export default function Simulateur({
       )}
       <div
         className={twMerge(
-          'flex flex-1 flex-col pt-6',
+          'flex flex-1 flex-col md:pt-8',
           isQuestionListOpen && !isDebug ? 'hidden' : 'flex'
         )}>
         <Form />

src/app/(simulation)/simulateur/[root]/_components/simulateur/Form.tsx

@@ -15,8 +15,9 @@ import { useQuestionInQueryParams } from '@/hooks/useQuestionInQueryParams'
 import { useCurrentSimulation, useEngine, useForm } from '@/publicodes-state'
 import { trackEvent } from '@/utils/matomo/trackEvent'
 import { useContext, useEffect, useState } from 'react'
-import CategoriesSummary from './form/CategoriesSummary'
 import FunFact from './form/FunFact'
+import ResultsBlocksDesktop from './form/ResultsBlocksDesktop'
+import ResultsBlocksMobile from './form/ResultsBlocksMobile'
 import CategoryIllustration from './summary/CategoryIllustration'
 
 export default function Form() {
@@ -116,8 +117,10 @@ export default function Form() {
 
   return (
     <>
-      <ContentLarge>
-        <div className="relative flex flex-1 flex-col gap-2 md:gap-8 lg:mt-0 lg:flex-row lg:gap-24">
+      <ContentLarge className="pt-2">
+        <ResultsBlocksMobile />
+
+        <div className="relative flex flex-1 flex-col gap-2 md:flex-row md:gap-8 lg:mt-0 lg:gap-24">
           <div className="relative flex flex-1 flex-col">
             <QuestionComponent
               question={currentQuestion}
@@ -129,7 +132,7 @@ export default function Form() {
 
           <div
             className={`flex flex-col gap-8 md:self-start lg:w-[20rem] short:gap-2 md:${getBgCategoryColor(currentCategory ?? 'transport', '500')}`}>
-            <CategoriesSummary />
+            <ResultsBlocksDesktop />
 
             <FunFact question={currentQuestion} />
 

src/app/(simulation)/simulateur/[root]/_components/simulateur/form/ResultsBlocksDesktop.tsx

@@ -0,0 +1,13 @@
+import Explanation from '@/components/total/total/Explanation'
+import InteractiveResultBlock from './resultsBlocksDesktop/InteractiveResultBlock'
+
+export default function ResultsBlocksDesktop() {
+  return (
+    <section className="relative hidden flex-col gap-4 md:flex">
+      <InteractiveResultBlock metric="carbone" />
+      <InteractiveResultBlock metric="eau" />
+
+      <Explanation />
+    </section>
+  )
+}

src/app/(simulation)/simulateur/[root]/_components/simulateur/form/ResultsBlocksMobile.tsx

@@ -0,0 +1,27 @@
+import TotalFootprintNumber from '@/components/misc/TotalFootprintNumber'
+import ValueChangeDisplay from '@/components/misc/ValueChangeDisplay'
+import Explanation from '@/components/total/total/Explanation'
+import Card from '@/design-system/layout/Card'
+
+export default function ResultsBlocks() {
+  return (
+    <div className="relative mb-8 grid grid-cols-2 gap-2 md:hidden">
+      <Card
+        aria-live="polite"
+        className="relative col-span-1 rounded-lg border-none bg-primary-50 p-2 pr-0">
+        <TotalFootprintNumber metric="carbone" />
+
+        <ValueChangeDisplay metric="carbone" />
+      </Card>
+      <Card
+        aria-live="polite"
+        className="relative col-span-1 rounded-lg border-none bg-primary-50 p-2">
+        <TotalFootprintNumber metric="eau" />
+
+        <ValueChangeDisplay metric="eau" />
+      </Card>
+
+      <Explanation />
+    </div>
+  )
+}

src/app/(simulation)/simulateur/[root]/_components/simulateur/form/resultsBlocksDesktop/InteractiveResultBlock.tsx

@@ -0,0 +1,36 @@
+import PlusIcon from '@/components/icons/PlusIcon'
+import TotalFootprintNumber from '@/components/misc/TotalFootprintNumber'
+import ValueChangeDisplay from '@/components/misc/ValueChangeDisplay'
+import type { Metrics } from '@incubateur-ademe/nosgestesclimat'
+import CategoriesResultList from './interactiveResultBlock/CategoriesResultList'
+
+export default function InteractiveResultBlock({
+  metric,
+}: {
+  metric: Metrics
+}) {
+  return (
+    <details className="group transition-all duration-200">
+      <summary className="relative z-10 flex cursor-pointer list-none items-center justify-between gap-2 rounded-lg border-2 border-primary-100 bg-primary-50 p-4 [&::-webkit-details-marker]:hidden [&::marker]:hidden">
+        <div className="relative w-full">
+          <div className="flex items-center gap-2">
+            <h3 className="mb-0 text-[13px] font-bold md:text-base">
+              <TotalFootprintNumber metric={metric} />
+            </h3>
+          </div>
+          <ValueChangeDisplay metric={metric} size="md" />
+        </div>
+
+        <PlusIcon className="inline-block h-4 w-4 min-w-4 origin-center transform stroke-primary-800 transition-transform duration-300 group-open:rotate-45" />
+      </summary>
+
+      <div className="border-primary-10 -z-10 -mt-2 grid cursor-default grid-rows-[0fr] overflow-hidden rounded-b-xl border-2 pt-2 transition-all duration-200 ease-in-out group-open:grid-rows-[1fr]">
+        <div className="overflow-hidden">
+          <div className="pt-1 text-sm md:text-base">
+            <CategoriesResultList metric={metric} />
+          </div>
+        </div>
+      </div>
+    </details>
+  )
+}

src/app/(simulation)/simulateur/[root]/_components/simulateur/form/resultsBlocksDesktop/interactiveResultBlock/CategoriesResultList.tsx

@@ -0,0 +1,13 @@
+import { orderedCategories } from '@/constants/orderedCategories'
+import type { Metrics } from '@incubateur-ademe/nosgestesclimat'
+import CategoryResult from './categoriesResultList/CategoryResult'
+
+export default function CategoriesResultList({ metric }: { metric: Metrics }) {
+  return (
+    <div className="flex flex-col pb-2">
+      {orderedCategories.map((category) => (
+        <CategoryResult key={category} category={category} metric={metric} />
+      ))}
+    </div>
+  )
+}

src/app/(simulation)/simulateur/[root]/_components/simulateur/form/resultsBlocksDesktop/interactiveResultBlock/categoriesResultList/CategoryResult.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import Emoji from '@/design-system/utils/Emoji'
+import { formatFootprint } from '@/helpers/formatters/formatFootprint'
+import { getTextDarkColor } from '@/helpers/getCategoryColorClass'
+import { useClientTranslation } from '@/hooks/useClientTranslation'
+import { useLocale } from '@/hooks/useLocale'
+import { useForm, useRule } from '@/publicodes-state'
+import type { DottedName, Metrics } from '@incubateur-ademe/nosgestesclimat'
+import { twMerge } from 'tailwind-merge'
+
+export default function CategoryResult({
+  category,
+  metric,
+}: {
+  category: DottedName
+  metric: Metrics
+}) {
+  const locale = useLocale()
+  const { t } = useClientTranslation()
+
+  const {
+    remainingQuestionsByCategories,
+    currentCategory,
+    questionsByCategories,
+  } = useForm()
+
+  const { title, icons, numericValue } = useRule(category, metric)
+
+  const completion =
+    (questionsByCategories[category].length -
+      remainingQuestionsByCategories[category].length) /
+    questionsByCategories[category].length
+
+  const isCompleted = completion === 1
+  const isStarted = completion > 0
+  const isCurrent = currentCategory === category
+
+  const { formattedValue, unit } = formatFootprint(numericValue, {
+    t,
+    locale,
+    metric,
+  })
+
+  const isValueZero = formattedValue === '0'
+
+  return (
+    <div
+      className={twMerge(
+        'relative mb-0 flex w-full items-center justify-between gap-4 overflow-hidden bg-white px-4 py-2 text-sm transition-colors',
+        isStarted || isCurrent ? 'text-default' : 'text-slate-600'
+      )}>
+      <div
+        className={twMerge(
+          'relative flex items-center text-sm font-normal',
+          getTextDarkColor(category)
+        )}>
+        <Emoji
+          className={twMerge(
+            isStarted || isCurrent ? 'opacity-100' : 'opacity-50',
+            'mr-2 transition-opacity'
+          )}>
+          {icons}
+        </Emoji>
+        <span>{title}</span>{' '}
+      </div>
+      <span
+        className={twMerge(
+          'relative block font-semibold transition-opacity',
+          isCompleted || isStarted
+            ? 'visible opacity-100'
+            : 'invisible opacity-0'
+        )}>
+        {(isCompleted || isStarted) && !isValueZero ? (
+          <>
+            <span>{formattedValue}</span>{' '}
+            <span className="font-normal">{unit}</span>
+          </>
+        ) : (
+          '--'
+        )}
+      </span>
+    </div>
+  )
+}

src/components/form/Question.tsx

@@ -23,7 +23,6 @@ import type { DottedName } from '@incubateur-ademe/nosgestesclimat'
 import { useEffect, useRef, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import Trans from '../translation/Trans'
-import Category from './question/Category'
 import Warning from './question/Warning'
 
 type Props = {
@@ -79,7 +78,6 @@ export default function Question({
   return (
     <>
       <div className={twMerge('mb-6 flex flex-col items-start', className)}>
-        <Category question={question} />
         <Label question={question} label={label} description={description} />
 
         <Suggestions

src/components/icons/ChevronLeft.tsx

@@ -1,3 +1,5 @@
+import { twMerge } from 'tailwind-merge'
+
 type Props = {
   className?: string
 }
@@ -10,10 +12,9 @@ export default function ChevronLeft({ className }: Props) {
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}>
+      className={twMerge('stroke-primary-700', className)}>
       <path
         d="M15 18L9 12L15 6"
-        className="stroke-primary-700"
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"

src/components/icons/Cloudicon.tsx

@@ -0,0 +1,19 @@
+import { twMerge } from 'tailwind-merge'
+
+export default function CloudIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="22"
+      height="16"
+      viewBox="0 0 22 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={twMerge('inline-block stroke-default stroke-2', className)}>
+      <path
+        d="M5.5 15C3.01472 15 1 12.9853 1 10.5C1 8.15643 2.79151 6.23129 5.07974 6.01937C5.54781 3.17213 8.02024 1 11 1C13.9798 1 16.4522 3.17213 16.9203 6.01937C19.2085 6.23129 21 8.15643 21 10.5C21 12.9853 18.9853 15 16.5 15C12.1102 15 9.3433 15 5.5 15Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

src/components/icons/DropIcon.tsx

@@ -0,0 +1,19 @@
+import { twMerge } from 'tailwind-merge'
+
+export default function DropIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="18"
+      height="22"
+      viewBox="0 0 18 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={twMerge('inline-block stroke-default stroke-2', className)}>
+      <path
+        d="M17 13C17 17.4183 13.4183 21 9 21C4.58172 21 1 17.4183 1 13C1 11.9391 1.20651 10.9264 1.58152 10C2.76829 7.06817 9 1 9 1C9 1 15.2317 7.06817 16.4185 10C16.7935 10.9264 17 11.9391 17 13Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

src/components/icons/HelpCircleIcon.tsx

@@ -0,0 +1,21 @@
+import { twMerge } from 'tailwind-merge'
+
+export default function HelpCircleIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className={twMerge('inline-block stroke-default', className)}>
+      <path
+        d="M8.09 8C8.3251 7.33167 8.78915 6.76811 9.39995 6.40913C10.0108 6.05016 10.7289 5.91894 11.4272 6.03871C12.1255 6.15849 12.7588 6.52152 13.2151 7.06353C13.6713 7.60553 13.9211 8.29152 13.92 9C13.92 11 10.92 12 10.92 12M11 16H11.01M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

src/components/icons/PlusIcon.tsx

@@ -3,13 +3,19 @@ import { twMerge } from 'tailwind-merge'
 export default function PlusIcon({ className }: { className?: string }) {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={twMerge('inline-block fill-default', className)}>
-      <path d="M16 13.5H13V16.5H11V13.5H8V11.5H11V8.5H13V11.5H16V13.5Z" />
+      aria-hidden="true"
+      className={twMerge('inline-block stroke-default', className)}>
+      <path
+        d="M8 1V15M1 8H15"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
     </svg>
   )
 }

src/components/landing-pages/WhatDoWeMeasure.tsx

@@ -59,7 +59,7 @@ export default function WhatDoWeMeasure({
         {listItems.map(({ icon, title }, index) => (
           <li
             key={`list-item-${title}-${index}`}
-            className="flex flex-col items-center gap-2 rounded-xl border-2 border-heroLightBackground bg-[#F7FBFF] p-4">
+            className="flex flex-col items-center gap-2 rounded-xl border-2 border-heroLightBackground bg-primary-50 p-4">
             {icon}
             <span className="text-center">{title}</span>
           </li>
@@ -71,7 +71,7 @@ export default function WhatDoWeMeasure({
           {listItems.map(({ icon, title }, index) => (
             <li
               key={`list-item-${title}-${index}`}
-              className="!flex !h-40 !w-52 shrink-0 flex-col items-center justify-center gap-2 rounded-xl border-2 border-heroLightBackground bg-[#F7FBFF] p-4">
+              className="!flex !h-40 !w-52 shrink-0 flex-col items-center justify-center gap-2 rounded-xl border-2 border-heroLightBackground bg-primary-50 p-4">
               <div className="flex justify-center">{icon}</div>
               <p className="mb-0 !flex justify-center text-center text-sm">
                 {title}

src/components/total/total/TotalFootprintNumber.tsx → src/components/misc/TotalFootprintNumber.tsx

@@ -53,27 +53,25 @@ export default function TotalFootprintNumber({
 
   return (
     <div
-      className="flex items-end gap-2"
+      className="flex flex-col gap-1 md:gap-0"
       aria-live="polite"
       data-cypress-id="total-footprint-number">
       {shouldDisplayTotalWithoutActions && (
-        <strong className="mr-4 block font-black leading-none text-slate-500 line-through lg:inline lg:text-4xl short:text-3xl">
+        <strong className="mr-4 block font-black leading-none text-slate-500 line-through md:text-xl">
           {!isInitialized ? '--' : formatedTotalFootprintValue}
         </strong>
       )}
       {isInitialized ? (
-        <strong className="block text-3xl font-black leading-none lg:inline lg:text-4xl short:text-3xl">
-          {formattedValue}
+        <strong className="block text-lg font-black leading-none md:text-2xl">
+          {formattedValue} <span className="text-xs font-medium">{unit}</span>
         </strong>
       ) : (
         <div className="px-2">
           <Loader color="dark" size="sm" />
         </div>
       )}
-      <span className="block text-xs font-medium leading-none lg:inline lg:text-base">
-        {' '}
-        <Trans>{unit}</Trans> <br className="lg:hidden" />
-        {duration[metric]}
+      <span className="block text-xs font-medium leading-none lg:inline lg:text-sm">
+        <span className="hidden xs:inline">{duration[metric]}</span>
       </span>
     </div>
   )