diff --git a/site/source/components/App.tsx b/site/source/components/App.tsx
index 7a2c0d205..2c5120774 100644
--- a/site/source/components/App.tsx
+++ b/site/source/components/App.tsx
@@ -4,7 +4,7 @@ import rules from 'modele-social'
 import { ComponentProps, StrictMode, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Route, Routes } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import Footer from '@/components/layout/Footer/Footer'
 import Header from '@/components/layout/Header'
diff --git a/site/source/components/BarChart.tsx b/site/source/components/BarChart.tsx
index ed71061ee..68801fd39 100644
--- a/site/source/components/BarChart.tsx
+++ b/site/source/components/BarChart.tsx
@@ -2,7 +2,7 @@ import { formatValue } from 'publicodes'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { animated, config, useSpring } from 'react-spring'
-import styled, { ThemeContext } from 'styled-components'
+import { styled, ThemeContext } from 'styled-components'
 
 import useDisplayOnIntersecting from '@/components/utils/useDisplayOnIntersecting'
 import { Emoji } from '@/design-system/emoji'
diff --git a/site/source/components/BetaBanner/index.tsx b/site/source/components/BetaBanner/index.tsx
index cebd6a1ae..fe549054a 100644
--- a/site/source/components/BetaBanner/index.tsx
+++ b/site/source/components/BetaBanner/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { Message } from '@/design-system'
 import { CloseButton } from '@/design-system/buttons'
diff --git a/site/source/components/ChiffreAffairesActivitéMixte.tsx b/site/source/components/ChiffreAffairesActivitéMixte.tsx
index 1c299ed31..293ff24cf 100644
--- a/site/source/components/ChiffreAffairesActivitéMixte.tsx
+++ b/site/source/components/ChiffreAffairesActivitéMixte.tsx
@@ -3,7 +3,7 @@ import { PublicodesExpression, serializeEvaluation } from 'publicodes'
 import { useCallback } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Switch } from '@/design-system/switch'
 import { batchUpdateSituation } from '@/store/actions/actions'
diff --git a/site/source/components/EngineValue.tsx b/site/source/components/EngineValue.tsx
index 34e16b757..52abf27e6 100644
--- a/site/source/components/EngineValue.tsx
+++ b/site/source/components/EngineValue.tsx
@@ -8,7 +8,7 @@ import Engine, {
 } from 'publicodes'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { keyframes } from 'styled-components'
+import { keyframes, styled } from 'styled-components'
 
 import RuleLink from './RuleLink'
 import { useEngine } from './utils/EngineContext'
diff --git a/site/source/components/Feedback/FeedbackForm.tsx b/site/source/components/Feedback/FeedbackForm.tsx
index 314fb980e..34cdba544 100644
--- a/site/source/components/Feedback/FeedbackForm.tsx
+++ b/site/source/components/Feedback/FeedbackForm.tsx
@@ -1,7 +1,7 @@
 import { ReactNode, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { ScrollToElement } from '@/components/utils/Scroll'
 import { Checkbox, Message, TextAreaField, TextField } from '@/design-system'
diff --git a/site/source/components/Feedback/FeedbackRating.tsx b/site/source/components/Feedback/FeedbackRating.tsx
index 02d518b00..cd019269a 100644
--- a/site/source/components/Feedback/FeedbackRating.tsx
+++ b/site/source/components/Feedback/FeedbackRating.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Emoji } from '@/design-system/emoji'
 
diff --git a/site/source/components/Feedback/index.tsx b/site/source/components/Feedback/index.tsx
index 5154b9c5e..5829b7418 100644
--- a/site/source/components/Feedback/index.tsx
+++ b/site/source/components/Feedback/index.tsx
@@ -1,7 +1,7 @@
 import FocusTrap from 'focus-trap-react'
 import { MutableRefObject, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Emoji } from '@/design-system/emoji'
 import { FocusStyle } from '@/design-system/global-style'
diff --git a/site/source/components/Logo.tsx b/site/source/components/Logo.tsx
index ef24391e1..5a1ae94f4 100644
--- a/site/source/components/Logo.tsx
+++ b/site/source/components/Logo.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import logoSvgFRDark from '@/assets/images/logo-monentreprise_white.svg'
 import logoSvgFR from '@/assets/images/logo-monentreprise.svg'
diff --git a/site/source/components/Notifications.tsx b/site/source/components/Notifications.tsx
index 818f3fe06..d385f56d1 100644
--- a/site/source/components/Notifications.tsx
+++ b/site/source/components/Notifications.tsx
@@ -2,7 +2,7 @@ import { DottedName } from 'modele-social'
 import Engine, { RuleNode } from 'publicodes'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { useEngine, useInversionFail } from '@/components/utils/EngineContext'
 import { Message } from '@/design-system'
diff --git a/site/source/components/PageHeader.tsx b/site/source/components/PageHeader.tsx
index e62ed6fec..536cb1fe2 100644
--- a/site/source/components/PageHeader.tsx
+++ b/site/source/components/PageHeader.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Grid } from '@/design-system/layout'
 import { H1 } from '@/design-system/typography/heading'
diff --git a/site/source/components/PlaceDesEntreprises.tsx b/site/source/components/PlaceDesEntreprises.tsx
index 2bca25a3a..e748b29b0 100644
--- a/site/source/components/PlaceDesEntreprises.tsx
+++ b/site/source/components/PlaceDesEntreprises.tsx
@@ -1,6 +1,6 @@
 import { lazy, Suspense, useRef } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'
diff --git a/site/source/components/PlaceDesEntreprisesIframe.tsx b/site/source/components/PlaceDesEntreprisesIframe.tsx
index 061cf212b..06b15c636 100644
--- a/site/source/components/PlaceDesEntreprisesIframe.tsx
+++ b/site/source/components/PlaceDesEntreprisesIframe.tsx
@@ -1,6 +1,6 @@
 import { iframeResize } from 'iframe-resizer'
 import { ReactEventHandler, useEffect } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 const Iframe = styled.iframe`
 	width: 1px;
diff --git a/site/source/components/QuickLinks.tsx b/site/source/components/QuickLinks.tsx
index 0aff96f88..979872fc7 100644
--- a/site/source/components/QuickLinks.tsx
+++ b/site/source/components/QuickLinks.tsx
@@ -1,6 +1,6 @@
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Spacing } from '@/design-system/layout'
 import { Link } from '@/design-system/typography/link'
diff --git a/site/source/components/References.tsx b/site/source/components/References.tsx
index 3ac3b49b4..e5ba91458 100644
--- a/site/source/components/References.tsx
+++ b/site/source/components/References.tsx
@@ -1,7 +1,7 @@
 import { DottedName } from 'modele-social'
 import { utils } from 'publicodes'
 import { useContext } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { EngineContext, useEngine } from '@/components/utils/EngineContext'
 import { Grid } from '@/design-system/layout'
diff --git a/site/source/components/SearchButton.tsx b/site/source/components/SearchButton.tsx
index 1929c9f14..d960c17f1 100644
--- a/site/source/components/SearchButton.tsx
+++ b/site/source/components/SearchButton.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'
diff --git a/site/source/components/SelectSimulationYear.tsx b/site/source/components/SelectSimulationYear.tsx
index b90e792e0..d8b52c47d 100644
--- a/site/source/components/SelectSimulationYear.tsx
+++ b/site/source/components/SelectSimulationYear.tsx
@@ -2,7 +2,7 @@ import { Evaluation } from 'publicodes'
 import { useContext } from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Banner from '@/components/Banner'
 import { EngineContext } from '@/components/utils/EngineContext'
diff --git a/site/source/components/ServiceWorker.tsx b/site/source/components/ServiceWorker.tsx
index f5f3fb7c2..de67a5afb 100644
--- a/site/source/components/ServiceWorker.tsx
+++ b/site/source/components/ServiceWorker.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 import { useRegisterSW } from 'virtual:pwa-register/react'
 
 import { useIsEmbedded } from '@/hooks/useIsEmbedded'
diff --git a/site/source/components/ShareSimulationBanner/index.tsx b/site/source/components/ShareSimulationBanner/index.tsx
index e39baf22c..f82ce47dd 100644
--- a/site/source/components/ShareSimulationBanner/index.tsx
+++ b/site/source/components/ShareSimulationBanner/index.tsx
@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'
diff --git a/site/source/components/SimulateurOrAssistantPage.tsx b/site/source/components/SimulateurOrAssistantPage.tsx
index c97bcd40a..e150f3cb0 100644
--- a/site/source/components/SimulateurOrAssistantPage.tsx
+++ b/site/source/components/SimulateurOrAssistantPage.tsx
@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react'
 import { useSelector } from 'react-redux'
 import { useLocation } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Meta from '@/components/utils/Meta'
 import useSearchParamsSimulationSharing from '@/components/utils/useSearchParamsSimulationSharing'
diff --git a/site/source/components/SimulateurWarning.tsx b/site/source/components/SimulateurWarning.tsx
index a3f82ac20..490554ec4 100644
--- a/site/source/components/SimulateurWarning.tsx
+++ b/site/source/components/SimulateurWarning.tsx
@@ -1,7 +1,7 @@
 import { Evaluation } from 'publicodes'
 import { useContext } from 'react'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Warning from '@/components/ui/WarningBlock'
 import { Link } from '@/design-system/typography/link'
diff --git a/site/source/components/Simulation/Questions.tsx b/site/source/components/Simulation/Questions.tsx
index 772f99bf0..cf2d8c96b 100644
--- a/site/source/components/Simulation/Questions.tsx
+++ b/site/source/components/Simulation/Questions.tsx
@@ -1,7 +1,7 @@
 import { DottedName } from 'modele-social'
 import Engine from 'publicodes'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Conversation, {
 	ConversationProps,
diff --git a/site/source/components/Simulation/SimulationGoal.tsx b/site/source/components/Simulation/SimulationGoal.tsx
index 9fbd785f0..a98272ffd 100644
--- a/site/source/components/Simulation/SimulationGoal.tsx
+++ b/site/source/components/Simulation/SimulationGoal.tsx
@@ -2,7 +2,7 @@ import { DottedName } from 'modele-social'
 import { formatValue, PublicodesExpression } from 'publicodes'
 import React, { useCallback, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
 import { Grid } from '@/design-system/layout'
diff --git a/site/source/components/Simulation/SimulationGoals.tsx b/site/source/components/Simulation/SimulationGoals.tsx
index ea6b18caf..e4a238036 100644
--- a/site/source/components/Simulation/SimulationGoals.tsx
+++ b/site/source/components/Simulation/SimulationGoals.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
 import { Grid } from '@/design-system/layout'
diff --git a/site/source/components/Simulation/index.tsx b/site/source/components/Simulation/index.tsx
index 1d3ddadab..2b6865a8a 100644
--- a/site/source/components/Simulation/index.tsx
+++ b/site/source/components/Simulation/index.tsx
@@ -3,7 +3,7 @@ import Engine from 'publicodes'
 import React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { ConversationProps } from '@/components/conversation/Conversation'
 import ShareOrSaveSimulationBanner from '@/components/ShareSimulationBanner'
diff --git a/site/source/components/StackedBarChart.tsx b/site/source/components/StackedBarChart.tsx
index cfc72f08d..0bb2d6a02 100755
--- a/site/source/components/StackedBarChart.tsx
+++ b/site/source/components/StackedBarChart.tsx
@@ -4,7 +4,7 @@ import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { animated, useSpring } from 'react-spring'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import RuleLink from '@/components/RuleLink'
 import useDisplayOnIntersecting from '@/components/utils/useDisplayOnIntersecting'
diff --git a/site/source/components/StatutTag.tsx b/site/source/components/StatutTag.tsx
index 67fad87ff..07639e130 100644
--- a/site/source/components/StatutTag.tsx
+++ b/site/source/components/StatutTag.tsx
@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import {
 	CircleIcon,
diff --git a/site/source/components/charts/PagesCharts.tsx b/site/source/components/charts/PagesCharts.tsx
index f2fa62d93..12f091bed 100644
--- a/site/source/components/charts/PagesCharts.tsx
+++ b/site/source/components/charts/PagesCharts.tsx
@@ -10,7 +10,7 @@ import {
 	XAxis,
 	YAxis,
 } from 'recharts'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { Strong } from '@/design-system/typography'
 import { Li, Ul } from '@/design-system/typography/list'
diff --git a/site/source/components/company/Details.tsx b/site/source/components/company/Details.tsx
index cbe564438..59a2bf1d1 100644
--- a/site/source/components/company/Details.tsx
+++ b/site/source/components/company/Details.tsx
@@ -1,6 +1,6 @@
 import { ComponentType } from 'react'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Message } from '@/design-system'
 import { Grid, Spacing } from '@/design-system/layout'
diff --git a/site/source/components/company/SearchDetails.tsx b/site/source/components/company/SearchDetails.tsx
index 13349df7f..9c5dab840 100644
--- a/site/source/components/company/SearchDetails.tsx
+++ b/site/source/components/company/SearchDetails.tsx
@@ -1,6 +1,6 @@
 import { Fragment, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { FabriqueSocialEntreprise } from '@/api/fabrique-social'
 import { Spacing } from '@/design-system/layout'
diff --git a/site/source/components/company/SearchField.tsx b/site/source/components/company/SearchField.tsx
index c5b16664d..fc759f1b9 100644
--- a/site/source/components/company/SearchField.tsx
+++ b/site/source/components/company/SearchField.tsx
@@ -1,7 +1,7 @@
 import { useSearchFieldState } from '@react-stately/searchfield'
 import { ReactNode, useEffect, useRef } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { FabriqueSocialEntreprise } from '@/api/fabrique-social'
 import {
diff --git a/site/source/components/conversation/AnswerList.tsx b/site/source/components/conversation/AnswerList.tsx
index 6d24d078a..edac19def 100644
--- a/site/source/components/conversation/AnswerList.tsx
+++ b/site/source/components/conversation/AnswerList.tsx
@@ -3,7 +3,7 @@ import { PublicodesExpression, RuleNode, utils } from 'publicodes'
 import { useCallback, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { EvaluatedRule, useEngine } from '@/components/utils/EngineContext'
 import { Message, PopoverWithTrigger } from '@/design-system'
diff --git a/site/source/components/conversation/ChoicesInput.tsx b/site/source/components/conversation/ChoicesInput.tsx
index 8383cb1ac..7486daf7b 100644
--- a/site/source/components/conversation/ChoicesInput.tsx
+++ b/site/source/components/conversation/ChoicesInput.tsx
@@ -7,7 +7,7 @@ import {
 } from 'publicodes'
 import { Fragment, Key, useCallback, useEffect, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import {
 	Item,
diff --git a/site/source/components/conversation/InputSuggestions.tsx b/site/source/components/conversation/InputSuggestions.tsx
index ee37b5c64..2e7065b3d 100644
--- a/site/source/components/conversation/InputSuggestions.tsx
+++ b/site/source/components/conversation/InputSuggestions.tsx
@@ -1,7 +1,7 @@
 import { ASTNode } from 'publicodes'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Link } from '@/design-system/typography/link'
 import { SmallBody } from '@/design-system/typography/paragraphs'
diff --git a/site/source/components/conversation/NumberInput.tsx b/site/source/components/conversation/NumberInput.tsx
index 4e64bd543..c5598d8a8 100644
--- a/site/source/components/conversation/NumberInput.tsx
+++ b/site/source/components/conversation/NumberInput.tsx
@@ -2,7 +2,7 @@ import { NumberFieldProps } from '@react-types/numberfield'
 import { ASTNode, parseUnit, serializeUnit, Unit } from 'publicodes'
 import { useCallback, useContext, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { EngineContext } from '@/components/utils/EngineContext'
 import { NumberField } from '@/design-system/field'
diff --git a/site/source/components/conversation/ParagrapheInput.tsx b/site/source/components/conversation/ParagrapheInput.tsx
index f7adcfc91..bf1bad5d2 100644
--- a/site/source/components/conversation/ParagrapheInput.tsx
+++ b/site/source/components/conversation/ParagrapheInput.tsx
@@ -1,6 +1,6 @@
 import { Evaluation } from 'publicodes'
 import { useCallback } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { debounce } from '../../utils'
 import { InputProps } from './RuleInput'
diff --git a/site/source/components/conversation/SeeAnswersButton.tsx b/site/source/components/conversation/SeeAnswersButton.tsx
index 210f56b2b..a5d164591 100644
--- a/site/source/components/conversation/SeeAnswersButton.tsx
+++ b/site/source/components/conversation/SeeAnswersButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { PopoverWithTrigger } from '@/design-system'
 import { Button } from '@/design-system/buttons'
diff --git a/site/source/components/conversation/select/SelectCommune.tsx b/site/source/components/conversation/select/SelectCommune.tsx
index 0b023c1e4..219b88b73 100644
--- a/site/source/components/conversation/select/SelectCommune.tsx
+++ b/site/source/components/conversation/select/SelectCommune.tsx
@@ -1,6 +1,6 @@
 import { KeyboardEvent, useCallback, useMemo, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import {
 	Commune,
diff --git a/site/source/components/conversation/select/SelectTauxRisque.tsx b/site/source/components/conversation/select/SelectTauxRisque.tsx
index f6bdad2ff..38e0c77ae 100644
--- a/site/source/components/conversation/select/SelectTauxRisque.tsx
+++ b/site/source/components/conversation/select/SelectTauxRisque.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Card } from '@/design-system/card'
 import TextField from '@/design-system/field/TextField'
diff --git a/site/source/components/layout/Footer/Footer.tsx b/site/source/components/layout/Footer/Footer.tsx
index c77e31d57..8a5c140b9 100644
--- a/site/source/components/layout/Footer/Footer.tsx
+++ b/site/source/components/layout/Footer/Footer.tsx
@@ -1,7 +1,7 @@
 import { Helmet } from 'react-helmet-async'
 import { Trans, useTranslation } from 'react-i18next'
 import { generatePath, matchPath, useLocation } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import Contact from '@/components/Contact'
 import FeedbackButton from '@/components/Feedback'
diff --git a/site/source/components/layout/Header.tsx b/site/source/components/layout/Header.tsx
index 20d64671b..10ea5edb6 100644
--- a/site/source/components/layout/Header.tsx
+++ b/site/source/components/layout/Header.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Logo } from '@/components/Logo'
 import SearchButton from '@/components/SearchButton'
diff --git a/site/source/components/layout/Menu.tsx b/site/source/components/layout/Menu.tsx
index b407b5341..4be37650a 100644
--- a/site/source/components/layout/Menu.tsx
+++ b/site/source/components/layout/Menu.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Button } from '@/design-system/buttons'
 import { Drawer } from '@/design-system/drawer'
diff --git a/site/source/components/search/Hightlight.tsx b/site/source/components/search/Hightlight.tsx
index 92e078198..c9c5bbf42 100644
--- a/site/source/components/search/Hightlight.tsx
+++ b/site/source/components/search/Hightlight.tsx
@@ -1,5 +1,5 @@
 import { Highlight as ISHighlight } from 'react-instantsearch-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export const Highlight = styled(ISHighlight)`
 	& .ais-Highlight-highlighted,
diff --git a/site/source/components/search/RulesInfiniteHits/index.tsx b/site/source/components/search/RulesInfiniteHits/index.tsx
index 8747bd6da..74e79a97c 100644
--- a/site/source/components/search/RulesInfiniteHits/index.tsx
+++ b/site/source/components/search/RulesInfiniteHits/index.tsx
@@ -2,7 +2,7 @@ import { DottedName } from 'modele-social'
 import { useTranslation } from 'react-i18next'
 import { Hit as AlgoliaHit } from 'react-instantsearch-core'
 import { connectInfiniteHits } from 'react-instantsearch-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Button } from '@/design-system/buttons'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'
diff --git a/site/source/components/search/SearchRoot.tsx b/site/source/components/search/SearchRoot.tsx
index 4881ad7f5..076968acb 100644
--- a/site/source/components/search/SearchRoot.tsx
+++ b/site/source/components/search/SearchRoot.tsx
@@ -1,5 +1,5 @@
 import { InstantSearch, InstantSearchProps } from 'react-instantsearch-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 interface SearchType extends InstantSearchProps {
 	role?: string
diff --git a/site/source/components/search/SimulatorHits.tsx b/site/source/components/search/SimulatorHits.tsx
index e8b113481..fe78cf354 100644
--- a/site/source/components/search/SimulatorHits.tsx
+++ b/site/source/components/search/SimulatorHits.tsx
@@ -1,7 +1,7 @@
 import { Trans } from 'react-i18next'
 import { Hit } from 'react-instantsearch-core'
 import { connectHits } from 'react-instantsearch-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { SmallCard } from '@/design-system/card'
 import { Emoji } from '@/design-system/emoji'
diff --git a/site/source/components/simulationExplanation/InstitutionsPartenaires.tsx b/site/source/components/simulationExplanation/InstitutionsPartenaires.tsx
index 31bd14e89..8c9a57f64 100644
--- a/site/source/components/simulationExplanation/InstitutionsPartenaires.tsx
+++ b/site/source/components/simulationExplanation/InstitutionsPartenaires.tsx
@@ -1,7 +1,7 @@
 import { DottedName } from 'modele-social'
 import { Trans } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import assuranceMaladieSrc from '@/assets/images/assurance-maladie.svg'
 import dgfipSrc from '@/assets/images/logo-dgfip.svg'
diff --git a/site/source/components/ui/AnimatedTargetValue.tsx b/site/source/components/ui/AnimatedTargetValue.tsx
index 7279e3c2b..28824f882 100644
--- a/site/source/components/ui/AnimatedTargetValue.tsx
+++ b/site/source/components/ui/AnimatedTargetValue.tsx
@@ -2,7 +2,7 @@ import { formatValue } from 'publicodes'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import styled, { keyframes } from 'styled-components'
+import { keyframes, styled } from 'styled-components'
 
 import { targetUnitSelector } from '@/store/selectors/simulationSelectors'
 
diff --git a/site/source/components/ui/Checklist/index.tsx b/site/source/components/ui/Checklist/index.tsx
index c2014401f..8d44fb55f 100644
--- a/site/source/components/ui/Checklist/index.tsx
+++ b/site/source/components/ui/Checklist/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Markdown } from '@/components/utils/markdown'
 import { ScrollToElement } from '@/components/utils/Scroll'
diff --git a/site/source/components/ui/Progress.tsx b/site/source/components/ui/Progress.tsx
index 94f6f29e6..1c28b39a8 100644
--- a/site/source/components/ui/Progress.tsx
+++ b/site/source/components/ui/Progress.tsx
@@ -1,6 +1,6 @@
 import { useProgressBar } from '@react-aria/progress'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Body } from '@/design-system/typography/paragraphs'
 
diff --git a/site/source/components/ui/animate.tsx b/site/source/components/ui/animate.tsx
index 665dc782e..96e286488 100644
--- a/site/source/components/ui/animate.tsx
+++ b/site/source/components/ui/animate.tsx
@@ -7,7 +7,7 @@ import {
 	useTrail,
 } from 'react-spring'
 import useMeasure from 'react-use-measure'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { DisableAnimationContext } from '@/components/utils/DisableAnimationContext'
 
diff --git a/site/source/components/utils/markdown.tsx b/site/source/components/utils/markdown.tsx
index f2652c032..9f7f2134f 100644
--- a/site/source/components/utils/markdown.tsx
+++ b/site/source/components/utils/markdown.tsx
@@ -1,7 +1,7 @@
 import MarkdownToJsx, { MarkdownToJSX } from 'markdown-to-jsx'
 import React, { useContext, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Message } from '@/design-system'
 import { Emoji } from '@/design-system/emoji'
diff --git a/site/source/design-system/InfoBulle/index.tsx b/site/source/design-system/InfoBulle/index.tsx
index fb471df63..fffbfef80 100644
--- a/site/source/design-system/InfoBulle/index.tsx
+++ b/site/source/design-system/InfoBulle/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 const QuestionMark = styled.span`
 	color: var(--color);
diff --git a/site/source/design-system/accordion/index.tsx b/site/source/design-system/accordion/index.tsx
index 877c25819..35dcc2a05 100644
--- a/site/source/design-system/accordion/index.tsx
+++ b/site/source/design-system/accordion/index.tsx
@@ -6,7 +6,7 @@ import { ReactNode, useEffect, useRef, useState } from 'react'
 import { Trans } from 'react-i18next'
 import { animated, useSpring } from 'react-spring'
 import useMeasure from 'react-use-measure'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { omit } from '@/utils'
 
diff --git a/site/source/design-system/banner/index.ts b/site/source/design-system/banner/index.ts
index 5806b5d36..45332c752 100644
--- a/site/source/design-system/banner/index.ts
+++ b/site/source/design-system/banner/index.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export const Banner = styled.div`
 	display: flex;
diff --git a/site/source/design-system/buttons/Button.tsx b/site/source/design-system/buttons/Button.tsx
index ac301c694..27033d0e1 100644
--- a/site/source/design-system/buttons/Button.tsx
+++ b/site/source/design-system/buttons/Button.tsx
@@ -1,5 +1,5 @@
 import React, { ForwardedRef, forwardRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import {
 	GenericButtonOrNavLinkProps,
diff --git a/site/source/design-system/buttons/CloseButton.tsx b/site/source/design-system/buttons/CloseButton.tsx
index 59843afcb..ad24d54e1 100644
--- a/site/source/design-system/buttons/CloseButton.tsx
+++ b/site/source/design-system/buttons/CloseButton.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { GenericButtonOrNavLinkProps } from '../typography/link'
 import { Button } from './Button'
diff --git a/site/source/design-system/buttons/HelpButtonWithPopover.tsx b/site/source/design-system/buttons/HelpButtonWithPopover.tsx
index a1cc3f06e..6460493f5 100644
--- a/site/source/design-system/buttons/HelpButtonWithPopover.tsx
+++ b/site/source/design-system/buttons/HelpButtonWithPopover.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { PopoverWithTrigger } from '@/design-system'
 
diff --git a/site/source/design-system/card/Article.tsx b/site/source/design-system/card/Article.tsx
index 9bba093a0..70dbafa22 100644
--- a/site/source/design-system/card/Article.tsx
+++ b/site/source/design-system/card/Article.tsx
@@ -1,7 +1,7 @@
 import { useButton } from '@react-aria/button'
 import React, { useRef } from 'react'
 import { Link } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { ChevronIcon } from '@/design-system/icons'
 import { H4 } from '@/design-system/typography/heading'
diff --git a/site/source/design-system/card/Card.tsx b/site/source/design-system/card/Card.tsx
index 1388ac410..c4862d7f9 100644
--- a/site/source/design-system/card/Card.tsx
+++ b/site/source/design-system/card/Card.tsx
@@ -1,7 +1,7 @@
 import { AriaButtonProps } from '@react-types/button'
 import React, { ComponentPropsWithRef, ReactHTML, useRef } from 'react'
 import { Link as BaseLink } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { StyledButton } from '@/design-system/buttons/Button'
 import { H3, H4, HeadingUnderline } from '@/design-system/typography/heading'
diff --git a/site/source/design-system/card/SmallCard.tsx b/site/source/design-system/card/SmallCard.tsx
index c64aba187..183f4e80b 100644
--- a/site/source/design-system/card/SmallCard.tsx
+++ b/site/source/design-system/card/SmallCard.tsx
@@ -1,7 +1,7 @@
 import { useButton } from '@react-aria/button'
 import React, { useRef } from 'react'
 import { Link } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { H6 } from '@/design-system/typography/heading'
 import {
diff --git a/site/source/design-system/checklist/index.tsx b/site/source/design-system/checklist/index.tsx
index 4170b4832..a7995a059 100644
--- a/site/source/design-system/checklist/index.tsx
+++ b/site/source/design-system/checklist/index.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { CheckmarkIcon, CrossIcon } from '../icons'
 
diff --git a/site/source/design-system/chip/index.tsx b/site/source/design-system/chip/index.tsx
index baef1fdb8..838b5332c 100644
--- a/site/source/design-system/chip/index.tsx
+++ b/site/source/design-system/chip/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
 import { Palette, SmallPalette } from '@/types/styled'
diff --git a/site/source/design-system/drawer/Drawer.tsx b/site/source/design-system/drawer/Drawer.tsx
index f4d5bfc50..a606bce4b 100644
--- a/site/source/design-system/drawer/Drawer.tsx
+++ b/site/source/design-system/drawer/Drawer.tsx
@@ -3,7 +3,7 @@ import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import ReactDOM from 'react-dom'
 import { Trans } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { useOnClickOutside } from '@/hooks/useOnClickOutside'
 import { useOnKeyDown } from '@/hooks/useOnKeyDown'
diff --git a/site/source/design-system/field/Checkbox.tsx b/site/source/design-system/field/Checkbox.tsx
index 6498c663c..802c1418c 100644
--- a/site/source/design-system/field/Checkbox.tsx
+++ b/site/source/design-system/field/Checkbox.tsx
@@ -2,7 +2,7 @@ import { useCheckbox } from '@react-aria/checkbox'
 import { useToggleState } from '@react-stately/toggle'
 import { AriaCheckboxProps } from '@react-types/checkbox'
 import { useRef } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Body } from '@/design-system/typography/paragraphs'
 
diff --git a/site/source/design-system/field/DateField.tsx b/site/source/design-system/field/DateField.tsx
index f850e6490..3f15ad16d 100644
--- a/site/source/design-system/field/DateField.tsx
+++ b/site/source/design-system/field/DateField.tsx
@@ -9,7 +9,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useId } from 'react-aria'
 import { DayPicker, useInput } from 'react-day-picker'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { useOnClickOutside } from '@/hooks/useOnClickOutside'
 
diff --git a/site/source/design-system/field/NumberField.tsx b/site/source/design-system/field/NumberField.tsx
index c44c6eee0..4efdc32a1 100644
--- a/site/source/design-system/field/NumberField.tsx
+++ b/site/source/design-system/field/NumberField.tsx
@@ -15,7 +15,7 @@ import {
 	useRef,
 	useState,
 } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { omit } from '@/utils'
 
diff --git a/site/source/design-system/field/Radio/Radio.tsx b/site/source/design-system/field/Radio/Radio.tsx
index bbbe784de..d70b739fa 100644
--- a/site/source/design-system/field/Radio/Radio.tsx
+++ b/site/source/design-system/field/Radio/Radio.tsx
@@ -2,7 +2,7 @@ import { useRadio } from '@react-aria/radio'
 import { RadioGroupState } from '@react-stately/radio'
 import { AriaRadioProps } from '@react-types/radio'
 import { createContext, useContext, useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { FocusStyle } from '@/design-system/global-style'
 import { Body } from '@/design-system/typography/paragraphs'
diff --git a/site/source/design-system/field/Radio/RadioCard.tsx b/site/source/design-system/field/Radio/RadioCard.tsx
index 09b10ad92..9ada136d2 100644
--- a/site/source/design-system/field/Radio/RadioCard.tsx
+++ b/site/source/design-system/field/Radio/RadioCard.tsx
@@ -1,6 +1,6 @@
 import { AriaRadioProps } from '@react-types/radio'
 import React, { ComponentProps } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { CardContainer } from '@/design-system/card/Card'
 import { Emoji } from '@/design-system/emoji'
diff --git a/site/source/design-system/field/Radio/RadioCardGroup.tsx b/site/source/design-system/field/Radio/RadioCardGroup.tsx
index 068d2692c..2718c009b 100644
--- a/site/source/design-system/field/Radio/RadioCardGroup.tsx
+++ b/site/source/design-system/field/Radio/RadioCardGroup.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { ToggleGroup, ToggleGroupContainer } from './ToggleGroup'
 
diff --git a/site/source/design-system/field/Radio/RadioGroup.tsx b/site/source/design-system/field/Radio/RadioGroup.tsx
index 3bd4320a0..f0bdc30c0 100644
--- a/site/source/design-system/field/Radio/RadioGroup.tsx
+++ b/site/source/design-system/field/Radio/RadioGroup.tsx
@@ -1,7 +1,7 @@
 import { useRadioGroup } from '@react-aria/radio'
 import { useRadioGroupState } from '@react-stately/radio'
 import { AriaRadioGroupProps } from '@react-types/radio'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { RadioContext } from './Radio'
 
diff --git a/site/source/design-system/field/Radio/ToggleGroup.tsx b/site/source/design-system/field/Radio/ToggleGroup.tsx
index 19dcd0410..79af1c2fb 100644
--- a/site/source/design-system/field/Radio/ToggleGroup.tsx
+++ b/site/source/design-system/field/Radio/ToggleGroup.tsx
@@ -1,7 +1,7 @@
 import { useRadioGroup } from '@react-aria/radio'
 import { useRadioGroupState } from '@react-stately/radio'
 import { AriaRadioGroupProps } from '@react-types/radio'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import {
 	InputRadio,
diff --git a/site/source/design-system/field/SearchField.tsx b/site/source/design-system/field/SearchField.tsx
index 2f4b69dea..6dab7f403 100644
--- a/site/source/design-system/field/SearchField.tsx
+++ b/site/source/design-system/field/SearchField.tsx
@@ -6,7 +6,7 @@ import {
 } from '@react-stately/searchfield'
 import { AriaSearchFieldProps } from '@react-types/searchfield'
 import { useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { SearchIcon } from '@/design-system/icons'
 import { Loader } from '@/design-system/icons/Loader'
diff --git a/site/source/design-system/field/Select/ListBox.tsx b/site/source/design-system/field/Select/ListBox.tsx
index 18ae949f0..9f996754a 100644
--- a/site/source/design-system/field/Select/ListBox.tsx
+++ b/site/source/design-system/field/Select/ListBox.tsx
@@ -9,7 +9,7 @@ import {
 	useContext,
 	useRef,
 } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 interface ListBoxProps extends AriaListBoxOptions<unknown> {
 	listBoxRef?: RefObject<HTMLUListElement>
diff --git a/site/source/design-system/field/Select/PopOver.tsx b/site/source/design-system/field/Select/PopOver.tsx
index 4bb86ce43..7813809a8 100644
--- a/site/source/design-system/field/Select/PopOver.tsx
+++ b/site/source/design-system/field/Select/PopOver.tsx
@@ -1,7 +1,7 @@
 import { FocusScope } from '@react-aria/focus'
 import { DismissButton, useOverlay } from '@react-aria/overlays'
 import { ReactNode, RefObject, useRef } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 interface PopoverProps {
 	popoverRef?: RefObject<HTMLDivElement>
diff --git a/site/source/design-system/field/Select/index.tsx b/site/source/design-system/field/Select/index.tsx
index a5ba30395..bbc783553 100644
--- a/site/source/design-system/field/Select/index.tsx
+++ b/site/source/design-system/field/Select/index.tsx
@@ -6,7 +6,7 @@ import { useSelectState } from '@react-stately/select'
 import type { AriaSelectProps } from '@react-types/select'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { FocusStyle } from '@/design-system/global-style'
 import { CarretDownIcon } from '@/design-system/icons'
diff --git a/site/source/design-system/field/TextAreaField.tsx b/site/source/design-system/field/TextAreaField.tsx
index 1d66a9970..b59abdd5a 100644
--- a/site/source/design-system/field/TextAreaField.tsx
+++ b/site/source/design-system/field/TextAreaField.tsx
@@ -1,6 +1,6 @@
 import { AriaTextFieldOptions, useTextField } from '@react-aria/textfield'
 import { HTMLAttributes, RefObject, useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { ExtraSmallBody } from '@/design-system/typography/paragraphs'
 
diff --git a/site/source/design-system/field/TextField.tsx b/site/source/design-system/field/TextField.tsx
index 93ff4358b..fb19d17cd 100644
--- a/site/source/design-system/field/TextField.tsx
+++ b/site/source/design-system/field/TextField.tsx
@@ -1,6 +1,6 @@
 import { AriaTextFieldOptions, useTextField } from '@react-aria/textfield'
 import { HTMLAttributes, RefObject, useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { ExtraSmallBody } from '@/design-system/typography/paragraphs'
 import { omit } from '@/utils'
diff --git a/site/source/design-system/footer/column.tsx b/site/source/design-system/footer/column.tsx
index 46de3ad43..cb30da09a 100644
--- a/site/source/design-system/footer/column.tsx
+++ b/site/source/design-system/footer/column.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Grid } from '@/design-system/layout'
 import { H1 } from '@/design-system/typography/heading'
diff --git a/site/source/design-system/footer/container.tsx b/site/source/design-system/footer/container.tsx
index 700d939de..795643ef2 100644
--- a/site/source/design-system/footer/container.tsx
+++ b/site/source/design-system/footer/container.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Grid } from '@/design-system/layout'
 
diff --git a/site/source/design-system/icons/index.tsx b/site/source/design-system/icons/index.tsx
index 3d062cbe2..176e06149 100644
--- a/site/source/design-system/icons/index.tsx
+++ b/site/source/design-system/icons/index.tsx
@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export const SvgIcon = styled.svg`
 	/* width: ${({ theme }) => theme.spacings.lg};
diff --git a/site/source/design-system/layout/Container.tsx b/site/source/design-system/layout/Container.tsx
index 106fec792..54cde83b9 100644
--- a/site/source/design-system/layout/Container.tsx
+++ b/site/source/design-system/layout/Container.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import styled, { DefaultTheme } from 'styled-components'
+import { DefaultTheme, styled } from 'styled-components'
 
 import {
 	ForceThemeProvider,
diff --git a/site/source/design-system/layout/Grid.tsx b/site/source/design-system/layout/Grid.tsx
index f07362334..a4d4800b7 100644
--- a/site/source/design-system/layout/Grid.tsx
+++ b/site/source/design-system/layout/Grid.tsx
@@ -1,5 +1,5 @@
 import { ComponentType, createContext, useContext } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { Merge } from '@/types/utils'
 
diff --git a/site/source/design-system/layout/index.ts b/site/source/design-system/layout/index.ts
index df8dd1cb6..f004adc9b 100644
--- a/site/source/design-system/layout/index.ts
+++ b/site/source/design-system/layout/index.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export { default as Container } from './Container'
 export { default as Grid } from './Grid'
diff --git a/site/source/design-system/message/index.stories.tsx b/site/source/design-system/message/index.stories.tsx
index 89a3b2972..7d82705c0 100644
--- a/site/source/design-system/message/index.stories.tsx
+++ b/site/source/design-system/message/index.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Message } from '@/design-system'
 
diff --git a/site/source/design-system/message/index.tsx b/site/source/design-system/message/index.tsx
index b5c05bace..911907ed9 100644
--- a/site/source/design-system/message/index.tsx
+++ b/site/source/design-system/message/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { css, CSSProperties, DefaultTheme } from 'styled-components'
+import { css, CSSProperties, DefaultTheme, styled } from 'styled-components'
 
 import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
 import { Palette, SmallPalette } from '@/types/styled'
diff --git a/site/source/design-system/popover/Popover.tsx b/site/source/design-system/popover/Popover.tsx
index daa404f3e..24a3a0e44 100644
--- a/site/source/design-system/popover/Popover.tsx
+++ b/site/source/design-system/popover/Popover.tsx
@@ -11,7 +11,7 @@ import { AriaDialogProps } from '@react-types/dialog'
 import FocusTrap from 'focus-trap-react'
 import React, { RefObject, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { css, keyframes } from 'styled-components'
+import { css, keyframes, styled } from 'styled-components'
 
 import { Grid } from '@/design-system/layout'
 import { wrapperDebounceEvents } from '@/utils'
diff --git a/site/source/design-system/popover/PopoverConfirm.tsx b/site/source/design-system/popover/PopoverConfirm.tsx
index e0be6b48c..a80b47317 100644
--- a/site/source/design-system/popover/PopoverConfirm.tsx
+++ b/site/source/design-system/popover/PopoverConfirm.tsx
@@ -1,6 +1,6 @@
 import { ReactElement } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Button } from '@/design-system/buttons'
 
diff --git a/site/source/design-system/root.tsx b/site/source/design-system/root.tsx
index dd7d444f3..a60ceda30 100644
--- a/site/source/design-system/root.tsx
+++ b/site/source/design-system/root.tsx
@@ -1,7 +1,8 @@
 import isbot from 'isbot'
 import { ReactNode } from 'react'
-import styled, {
+import {
 	css,
+	styled,
 	StyleSheetManager,
 	ThemeProvider,
 } from 'styled-components'
diff --git a/site/source/design-system/stepper/index.tsx b/site/source/design-system/stepper/index.tsx
index 8292bd764..97e529abe 100644
--- a/site/source/design-system/stepper/index.tsx
+++ b/site/source/design-system/stepper/index.tsx
@@ -4,7 +4,7 @@ import { AriaButtonProps } from '@react-types/button'
 import { ComponentPropsWithRef } from 'react'
 import { Trans } from 'react-i18next'
 import { Link as RouterLink, useMatch } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { Link } from '../typography/link'
 
diff --git a/site/source/design-system/switch/Switch.tsx b/site/source/design-system/switch/Switch.tsx
index ed9f0aee7..06d98be13 100644
--- a/site/source/design-system/switch/Switch.tsx
+++ b/site/source/design-system/switch/Switch.tsx
@@ -1,7 +1,7 @@
 import { useSwitch } from '@react-aria/switch'
 import { useToggleState } from '@react-stately/toggle'
 import { ReactNode, useRef } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { FocusStyle, SROnly } from '@/design-system/global-style'
 
diff --git a/site/source/design-system/tag/index.tsx b/site/source/design-system/tag/index.tsx
index 5f3c3f878..4352eb374 100644
--- a/site/source/design-system/tag/index.tsx
+++ b/site/source/design-system/tag/index.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Colors, getColorGroup, isColor } from '../theme'
 import { KeysOfUnion, LG, MD, SM } from '../types'
diff --git a/site/source/design-system/tooltip/Tooltip.tsx b/site/source/design-system/tooltip/Tooltip.tsx
index 6326950d2..56c0f4896 100644
--- a/site/source/design-system/tooltip/Tooltip.tsx
+++ b/site/source/design-system/tooltip/Tooltip.tsx
@@ -3,7 +3,7 @@ import { Tooltip as RTooltip } from 'react-tooltip'
 
 import 'react-tooltip/dist/react-tooltip.css'
 
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 // TODO: Replace react-tooltip with @floating-ui/react-dom for more control (see DateField.tsx for example)
 export const Tooltip = ({
diff --git a/site/source/design-system/typography/heading.tsx b/site/source/design-system/typography/heading.tsx
index af0937e87..1dbe91bfe 100644
--- a/site/source/design-system/typography/heading.tsx
+++ b/site/source/design-system/typography/heading.tsx
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 const baseHeading = css`
 	font-family: 'Montserrat', sans-serif;
diff --git a/site/source/design-system/typography/index.ts b/site/source/design-system/typography/index.ts
index fdd0751f0..8cb672d00 100644
--- a/site/source/design-system/typography/index.ts
+++ b/site/source/design-system/typography/index.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export * as headings from './heading'
 export * as lists from './list'
diff --git a/site/source/design-system/typography/link.tsx b/site/source/design-system/typography/link.tsx
index 06791d5fe..e217aa1b1 100644
--- a/site/source/design-system/typography/link.tsx
+++ b/site/source/design-system/typography/link.tsx
@@ -8,7 +8,7 @@ import React, {
 	useRef,
 } from 'react'
 import { NavLink } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 export const StyledLinkHover = css`
 	text-decoration: underline;
diff --git a/site/source/design-system/typography/list.tsx b/site/source/design-system/typography/list.tsx
index 3c0090d98..83f5346f7 100644
--- a/site/source/design-system/typography/list.tsx
+++ b/site/source/design-system/typography/list.tsx
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { baseParagraphStyle } from './paragraphs'
 
diff --git a/site/source/design-system/typography/paragraphs.tsx b/site/source/design-system/typography/paragraphs.tsx
index 02e11646c..80df35a95 100644
--- a/site/source/design-system/typography/paragraphs.tsx
+++ b/site/source/design-system/typography/paragraphs.tsx
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 export const baseParagraphStyle = css`
 	font-family: ${({ theme }) => theme.fonts.main};
diff --git a/site/source/pages/Accessibilité.tsx b/site/source/pages/Accessibilité.tsx
index 0cedf3bf5..66e14cc3d 100644
--- a/site/source/pages/Accessibilité.tsx
+++ b/site/source/pages/Accessibilité.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { H1, H2, H3, H4, H5 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
diff --git a/site/source/pages/Documentation.tsx b/site/source/pages/Documentation.tsx
index b11cff61b..64153c269 100644
--- a/site/source/pages/Documentation.tsx
+++ b/site/source/pages/Documentation.tsx
@@ -12,7 +12,7 @@ import {
 	useLocation,
 	useParams,
 } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { References } from '@/components/References'
 import SearchRules from '@/components/search/SearchRules'
diff --git a/site/source/pages/Plan.tsx b/site/source/pages/Plan.tsx
index 191038e44..bded7eab5 100644
--- a/site/source/pages/Plan.tsx
+++ b/site/source/pages/Plan.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { H1 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
diff --git a/site/source/pages/_landing/Landing.tsx b/site/source/pages/_landing/Landing.tsx
index 47c4cbd99..4b2dc422a 100644
--- a/site/source/pages/_landing/Landing.tsx
+++ b/site/source/pages/_landing/Landing.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { TrackPage } from '@/components/ATInternetTracking'
 import PageHeader from '@/components/PageHeader'
diff --git a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
index ff15a4dff..60b06fa09 100644
--- a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
+++ b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { TrackPage } from '@/components/ATInternetTracking'
 import { Button } from '@/design-system/buttons'
diff --git a/site/source/pages/assistants/choix-du-statut/_components/StatutsPossibles.tsx b/site/source/pages/assistants/choix-du-statut/_components/StatutsPossibles.tsx
index 1256f925a..0c36efa60 100644
--- a/site/source/pages/assistants/choix-du-statut/_components/StatutsPossibles.tsx
+++ b/site/source/pages/assistants/choix-du-statut/_components/StatutsPossibles.tsx
@@ -1,7 +1,7 @@
 import { DottedName } from 'modele-social'
 import { forwardRef } from 'react'
 import FlipMove from 'react-flip-move'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { StatutTag, StatutType } from '@/components/StatutTag'
 import { useEngine } from '@/components/utils/EngineContext'
diff --git a/site/source/pages/assistants/components/Fields.tsx b/site/source/pages/assistants/components/Fields.tsx
index c075acd96..cc1d5e46e 100644
--- a/site/source/pages/assistants/components/Fields.tsx
+++ b/site/source/pages/assistants/components/Fields.tsx
@@ -3,7 +3,7 @@ import { DottedName } from 'modele-social'
 import { PublicodesExpression, RuleNode } from 'publicodes'
 import { useCallback, useContext } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { ExplicableRule } from '@/components/conversation/Explicable'
 import RuleInput from '@/components/conversation/RuleInput'
diff --git a/site/source/pages/assistants/declaration-charges-sociales-independant/components/ExplicationResultatFiscal.tsx b/site/source/pages/assistants/declaration-charges-sociales-independant/components/ExplicationResultatFiscal.tsx
index be1736227..2a5edc641 100644
--- a/site/source/pages/assistants/declaration-charges-sociales-independant/components/ExplicationResultatFiscal.tsx
+++ b/site/source/pages/assistants/declaration-charges-sociales-independant/components/ExplicationResultatFiscal.tsx
@@ -1,5 +1,5 @@
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import HelpButtonWithPopover from '@/design-system/buttons/HelpButtonWithPopover'
 import { Li, Ul } from '@/design-system/typography/list'
diff --git a/site/source/pages/assistants/declaration-charges-sociales-independant/components/RésultatSimple.tsx b/site/source/pages/assistants/declaration-charges-sociales-independant/components/RésultatSimple.tsx
index 67a4006ce..5eb613bb8 100644
--- a/site/source/pages/assistants/declaration-charges-sociales-independant/components/RésultatSimple.tsx
+++ b/site/source/pages/assistants/declaration-charges-sociales-independant/components/RésultatSimple.tsx
@@ -1,6 +1,6 @@
 import { utils } from 'publicodes'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Value, { Condition } from '@/components/EngineValue'
 import { FromTop } from '@/components/ui/animate'
diff --git a/site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx b/site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx
index b8c2b6959..73dccc91a 100644
--- a/site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx
+++ b/site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx
@@ -3,7 +3,7 @@ import { PublicodesExpression } from 'publicodes'
 import { useCallback } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { TrackPage } from '@/components/ATInternetTracking'
 import RuleInput from '@/components/conversation/RuleInput'
diff --git a/site/source/pages/assistants/declaration-revenu-independants/components/DéclarationRevenu.tsx b/site/source/pages/assistants/declaration-revenu-independants/components/DéclarationRevenu.tsx
index 8f49ef1ed..c890617c9 100644
--- a/site/source/pages/assistants/declaration-revenu-independants/components/DéclarationRevenu.tsx
+++ b/site/source/pages/assistants/declaration-revenu-independants/components/DéclarationRevenu.tsx
@@ -2,7 +2,7 @@ import { DottedName } from 'modele-social'
 import { PublicodesExpression, Rule, RuleNode } from 'publicodes'
 import { Fragment, useCallback } from 'react'
 import { useDispatch } from 'react-redux'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { TrackPage } from '@/components/ATInternetTracking'
 import { ExplicableRule } from '@/components/conversation/Explicable'
diff --git a/site/source/pages/assistants/declaration-revenu-independants/components/FormulaireTitle.tsx b/site/source/pages/assistants/declaration-revenu-independants/components/FormulaireTitle.tsx
index de21eacb2..cda1fe5f5 100644
--- a/site/source/pages/assistants/declaration-revenu-independants/components/FormulaireTitle.tsx
+++ b/site/source/pages/assistants/declaration-revenu-independants/components/FormulaireTitle.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { SmallBody } from '@/design-system/typography/paragraphs'
 
diff --git a/site/source/pages/assistants/declaration-revenu-independants/components/ModeAccompagnement.tsx b/site/source/pages/assistants/declaration-revenu-independants/components/ModeAccompagnement.tsx
index e859ef54e..ffd83a4b8 100644
--- a/site/source/pages/assistants/declaration-revenu-independants/components/ModeAccompagnement.tsx
+++ b/site/source/pages/assistants/declaration-revenu-independants/components/ModeAccompagnement.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { Trans } from 'react-i18next'
 import { useDispatch } from 'react-redux'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { useEngine } from '@/components/utils/EngineContext'
 import { Message } from '@/design-system'
diff --git a/site/source/pages/assistants/declaration-revenu-independants/components/NotHandledCase.tsx b/site/source/pages/assistants/declaration-revenu-independants/components/NotHandledCase.tsx
index 28111746f..4794bb257 100644
--- a/site/source/pages/assistants/declaration-revenu-independants/components/NotHandledCase.tsx
+++ b/site/source/pages/assistants/declaration-revenu-independants/components/NotHandledCase.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Message } from '@/design-system'
 import { Button } from '@/design-system/buttons'
diff --git a/site/source/pages/assistants/pour-mon-entreprise/CodeDuTravailNumeriqueCard.tsx b/site/source/pages/assistants/pour-mon-entreprise/CodeDuTravailNumeriqueCard.tsx
index 425bd21c3..0acba4788 100644
--- a/site/source/pages/assistants/pour-mon-entreprise/CodeDuTravailNumeriqueCard.tsx
+++ b/site/source/pages/assistants/pour-mon-entreprise/CodeDuTravailNumeriqueCard.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Article } from '@/design-system/card'
 import { Spacing } from '@/design-system/layout'
diff --git a/site/source/pages/assistants/pour-mon-entreprise/index.tsx b/site/source/pages/assistants/pour-mon-entreprise/index.tsx
index 5c311c5c7..8f3f82213 100644
--- a/site/source/pages/assistants/pour-mon-entreprise/index.tsx
+++ b/site/source/pages/assistants/pour-mon-entreprise/index.tsx
@@ -12,7 +12,7 @@ import {
 	Routes,
 	useParams,
 } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import {
 	FabriqueSocialEntreprise,
diff --git a/site/source/pages/assistants/recherche-code-ape/Result.tsx b/site/source/pages/assistants/recherche-code-ape/Result.tsx
index 2db68536d..56e9e19b3 100644
--- a/site/source/pages/assistants/recherche-code-ape/Result.tsx
+++ b/site/source/pages/assistants/recherche-code-ape/Result.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { Appear } from '@/components/ui/animate'
 import { Chip } from '@/design-system'
diff --git a/site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx b/site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx
index b955a3c93..d4e18f6ee 100644
--- a/site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx
+++ b/site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx
@@ -1,7 +1,7 @@
 import UFuzzy from '@leeoniya/ufuzzy'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { TrackPage } from '@/components/ATInternetTracking'
 import { FromTop } from '@/components/ui/animate'
diff --git a/site/source/pages/assistants/économie-collaborative/ActiviteCard/index.tsx b/site/source/pages/assistants/économie-collaborative/ActiviteCard/index.tsx
index 09ecc24a7..7a7449b61 100644
--- a/site/source/pages/assistants/économie-collaborative/ActiviteCard/index.tsx
+++ b/site/source/pages/assistants/économie-collaborative/ActiviteCard/index.tsx
@@ -2,7 +2,7 @@ import { useButton } from '@react-aria/button'
 import { usePress } from '@react-aria/interactions'
 import React, { useCallback, useContext, useRef } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Button } from '@/design-system/buttons'
 import HelpButtonWithPopover from '@/design-system/buttons/HelpButtonWithPopover'
diff --git a/site/source/pages/assistants/économie-collaborative/index.tsx b/site/source/pages/assistants/économie-collaborative/index.tsx
index 0a46aa522..95ac90586 100644
--- a/site/source/pages/assistants/économie-collaborative/index.tsx
+++ b/site/source/pages/assistants/économie-collaborative/index.tsx
@@ -1,6 +1,6 @@
 import { Trans } from 'react-i18next'
 import { Route, Routes } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { TrackChapter } from '@/components/ATInternetTracking'
 import { Link } from '@/design-system/typography/link'
diff --git a/site/source/pages/budget/index.tsx b/site/source/pages/budget/index.tsx
index dc54c6647..158f71033 100644
--- a/site/source/pages/budget/index.tsx
+++ b/site/source/pages/budget/index.tsx
@@ -1,7 +1,7 @@
 import { formatValue } from 'publicodes'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { TrackPage } from '@/components/ATInternetTracking'
 import MoreInfosOnUs from '@/components/MoreInfosOnUs'
diff --git a/site/source/pages/integration/Iframe.tsx b/site/source/pages/integration/Iframe.tsx
index 52f6a7163..f465c35dc 100644
--- a/site/source/pages/integration/Iframe.tsx
+++ b/site/source/pages/integration/Iframe.tsx
@@ -3,7 +3,7 @@ import { str2Color } from '@atomik-color/core'
 import { useEffect, useRef, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useHref, useSearchParams } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import urssafLogo from '@/assets/images/Urssaf.svg'
 import { TrackPage } from '@/components/ATInternetTracking'
diff --git a/site/source/pages/nouveautés/index.tsx b/site/source/pages/nouveautés/index.tsx
index 08705ba79..fb6e46937 100644
--- a/site/source/pages/nouveautés/index.tsx
+++ b/site/source/pages/nouveautés/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Navigate, useMatch, useNavigate } from 'react-router-dom'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { TrackPage } from '@/components/ATInternetTracking'
 import { determinant, useHideNewsBanner } from '@/components/layout/NewsBanner'
diff --git a/site/source/pages/simulateurs/chômage-partiel/ChômagePartiel.tsx b/site/source/pages/simulateurs/chômage-partiel/ChômagePartiel.tsx
index 51085139a..e937630b9 100644
--- a/site/source/pages/simulateurs/chômage-partiel/ChômagePartiel.tsx
+++ b/site/source/pages/simulateurs/chômage-partiel/ChômagePartiel.tsx
@@ -2,7 +2,7 @@ import { DottedName } from 'modele-social'
 import { formatValue } from 'publicodes'
 import React, { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Value from '@/components/EngineValue'
 import { PlaceDesEntreprisesButton } from '@/components/PlaceDesEntreprises'
diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/DetailsRowCards.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/DetailsRowCards.tsx
index 48a3cbfb7..2d2d32b64 100644
--- a/site/source/pages/simulateurs/comparaison-statuts/components/DetailsRowCards.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/DetailsRowCards.tsx
@@ -1,6 +1,6 @@
 import Engine, { PublicodesExpression } from 'publicodes'
 import { ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { DottedName } from '@/../../modele-social'
 import Value, { Condition, WhenNotApplicable } from '@/components/EngineValue'
diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx
index b9229e109..8d651946d 100644
--- a/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { ExplicableRule } from '@/components/conversation/Explicable'
 import Value, { Condition } from '@/components/EngineValue'
diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/ItemTitle.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/ItemTitle.tsx
index b343de9e3..5cbb3a6e5 100644
--- a/site/source/pages/simulateurs/comparaison-statuts/components/ItemTitle.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/ItemTitle.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { CircledArrowIcon } from '@/design-system/icons'
 import { H3 } from '@/design-system/typography/heading'
diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/ModifierOptions.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/ModifierOptions.tsx
index 0832e1076..6941ccf0c 100644
--- a/site/source/pages/simulateurs/comparaison-statuts/components/ModifierOptions.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/ModifierOptions.tsx
@@ -2,7 +2,7 @@ import { PublicodesExpression } from 'publicodes'
 import { useCallback, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { SwitchInput } from '@/components/conversation/ChoicesInput'
 import { ExplicableRule } from '@/components/conversation/Explicable'
diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/RevenuEstimé.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/RevenuEstimé.tsx
index ac8779bd8..c1983742e 100644
--- a/site/source/pages/simulateurs/comparaison-statuts/components/RevenuEstimé.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/RevenuEstimé.tsx
@@ -1,5 +1,5 @@
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Value, {
 	WhenAlreadyDefined,
diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/RevenuTable.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/RevenuTable.tsx
index 407ac2dce..1c7ecd453 100644
--- a/site/source/pages/simulateurs/comparaison-statuts/components/RevenuTable.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/RevenuTable.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import Value from '@/components/EngineValue'
 import { StatutTag } from '@/components/StatutTag'
diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/StatusCard.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/StatusCard.tsx
index 61784504f..d6fedffe7 100644
--- a/site/source/pages/simulateurs/comparaison-statuts/components/StatusCard.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/StatusCard.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useRef } from 'react'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { StatutTag, StatutType } from '@/components/StatutTag'
 import { CardContainer } from '@/design-system/card/Card'
diff --git a/site/source/pages/simulateurs/comparaison-statuts/components/WarningTooltip.tsx b/site/source/pages/simulateurs/comparaison-statuts/components/WarningTooltip.tsx
index 598b74caf..2c7ddc1da 100644
--- a/site/source/pages/simulateurs/comparaison-statuts/components/WarningTooltip.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/WarningTooltip.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { WarningIcon } from '@/design-system/icons'
 import { Tooltip } from '@/design-system/tooltip'
diff --git a/site/source/pages/simulateurs/impot-societe/index.tsx b/site/source/pages/simulateurs/impot-societe/index.tsx
index a0209f0f3..8fc47ccfd 100644
--- a/site/source/pages/simulateurs/impot-societe/index.tsx
+++ b/site/source/pages/simulateurs/impot-societe/index.tsx
@@ -1,6 +1,6 @@
 import { Trans, useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { TrackPage } from '@/components/ATInternetTracking'
 import { StyledInputSuggestion } from '@/components/conversation/InputSuggestions'
diff --git a/site/source/pages/simulateurs/salarié/Salarié.tsx b/site/source/pages/simulateurs/salarié/Salarié.tsx
index e7fdf9dfd..f4cc5f079 100644
--- a/site/source/pages/simulateurs/salarié/Salarié.tsx
+++ b/site/source/pages/simulateurs/salarié/Salarié.tsx
@@ -2,7 +2,7 @@ import { DottedName } from 'modele-social'
 import { ASTNode, reduceAST } from 'publicodes'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import Banner from '@/components/Banner'
 import Value, {
diff --git a/site/source/pages/statistiques/AccessibleTable.tsx b/site/source/pages/statistiques/AccessibleTable.tsx
index f2bafd3e8..28a23ad15 100644
--- a/site/source/pages/statistiques/AccessibleTable.tsx
+++ b/site/source/pages/statistiques/AccessibleTable.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Body } from '@/design-system/typography/paragraphs'
 
diff --git a/site/source/pages/statistiques/DemandesUtilisateurs.tsx b/site/source/pages/statistiques/DemandesUtilisateurs.tsx
index ca16ff107..591a75144 100644
--- a/site/source/pages/statistiques/DemandesUtilisateurs.tsx
+++ b/site/source/pages/statistiques/DemandesUtilisateurs.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
-import styled, { css } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 import { Chip } from '@/design-system'
 import { Button } from '@/design-system/buttons'
diff --git a/site/source/pages/statistiques/SatisfactionChart.tsx b/site/source/pages/statistiques/SatisfactionChart.tsx
index 0bf7a0179..4f51fc725 100644
--- a/site/source/pages/statistiques/SatisfactionChart.tsx
+++ b/site/source/pages/statistiques/SatisfactionChart.tsx
@@ -8,7 +8,7 @@ import {
 	Tooltip,
 	XAxis,
 } from 'recharts'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { StyledLegend } from '@/components/charts/PagesCharts'
 import { Radio, ToggleGroup } from '@/design-system'
diff --git a/site/source/pages/statistiques/StatsDetail.tsx b/site/source/pages/statistiques/StatsDetail.tsx
index 3dc08d836..b49ce0909 100644
--- a/site/source/pages/statistiques/StatsDetail.tsx
+++ b/site/source/pages/statistiques/StatsDetail.tsx
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSearchParams } from 'react-router-dom'
 import { BrushProps } from 'recharts'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { toAtString } from '@/components/ATInternetTracking'
 import PagesChart from '@/components/charts/PagesCharts'
diff --git a/site/source/pages/statistiques/utils.tsx b/site/source/pages/statistiques/utils.tsx
index 0fdd783c9..f31dfff06 100644
--- a/site/source/pages/statistiques/utils.tsx
+++ b/site/source/pages/statistiques/utils.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 import { Strong } from '@/design-system/typography'
 import { H4 } from '@/design-system/typography/heading'
diff --git a/site/vite.config.ts b/site/vite.config.ts
index e54ef5ad3..ee7564c6c 100644
--- a/site/vite.config.ts
+++ b/site/vite.config.ts
@@ -128,11 +128,7 @@ export default defineConfig(({ command, mode }) => ({
 		 * markdown-to-jsx: https://github.com/probablyup/markdown-to-jsx/pull/414
 		 * styled-components: https://github.com/styled-components/styled-components/issues/3601 (wait v6 release)
 		 */
-		noExternal: [
-			/markdown-to-jsx/,
-			/styled-components|emotion/,
-			/publicodes-react/, // use styled-components
-		],
+		noExternal: [/styled-components|emotion/, /tslib/],
 	},
 }))