Enlève les dernières utilisation de l'attribut css=

site/source/locales/ui-en.yaml

@@ -39,6 +39,7 @@ Attention, information importante: Important information
 Attention, vos données sauvegardées seront supprimées de manière définitive.: Please note that your saved data will be permanently deleted.
 Aucun: No
 Aucun résultat: No results
+Aucun résultat ne correspond à votre recherche. Essayez avec d'autres mots-clés.: No results matching your search. Try other keywords.
 Autres outils: Other tools
 Avec <2><0></0></2> de cotisations sociales: With <2><0></0></2> in social security contributions
 Avec ACRE: With ACRE
@@ -73,6 +74,7 @@ Coût de création: Cost of creation
 "Crée le :": "Created on :"
 Dividendes nets: Net dividends
 Documentation: Documentation
+Documentation des calculs: Calculation documentation
 "Domiciliée à l'adresse :": "Domiciled at address :"
 Donner votre avis: Give your opinion
 Décrivez votre projet ou votre problème en donnant quelques éléments de contexte. Notre partenaire Place des Entrprises identifiera, parmi l’ensemble des partenaires publics et parapublics, le conseiller compétent pour votre demande. Celui-ci vous contactera par téléphone sous 5 jours et vous accompagnera en fonction de votre situation.:

site/source/locales/ui-fr.yaml

@@ -41,6 +41,9 @@ Attention, information importante: Attention, information importante
 Attention, vos données sauvegardées seront supprimées de manière définitive.: Attention, vos données sauvegardées seront supprimées de manière définitive.
 Aucun: Aucun
 Aucun résultat: Aucun résultat
+Aucun résultat ne correspond à votre recherche. Essayez avec d'autres mots-clés.:
+  Aucun résultat ne correspond à votre recherche. Essayez avec d'autres
+  mots-clés.
 Autres outils: Autres outils
 Avec <2><0></0></2> de cotisations sociales: Avec <2><0></0></2> de cotisations sociales
 Avec ACRE: Avec ACRE
@@ -75,6 +78,7 @@ Coût de création: Coût de création
 "Crée le :": "Crée le :"
 Dividendes nets: Dividendes nets
 Documentation: Documentation
+Documentation des calculs: Documentation des calculs
 "Domiciliée à l'adresse :": "Domiciliée à l'adresse :"
 Donner votre avis: Donner votre avis
 Décrivez votre projet ou votre problème en donnant quelques éléments de contexte. Notre partenaire Place des Entrprises identifiera, parmi l’ensemble des partenaires publics et parapublics, le conseiller compétent pour votre demande. Celui-ci vous contactera par téléphone sous 5 jours et vous accompagnera en fonction de votre situation.:

site/source/pages/integration/API.tsx

@@ -1,4 +1,5 @@
 import { Trans, useTranslation } from 'react-i18next'
+import styled from 'styled-components'
 
 import PageHeader from '@/components/PageHeader'
 import { ScrollToTop } from '@/components/utils/Scroll'
@@ -18,7 +19,7 @@ export default function API() {
 	const { t } = useTranslation()
 
 	return (
-		<div css="iframe{margin-top: 1em; margin-bottom: 1em}">
+		<div>
 			<ScrollToTop />
 			<Meta
 				title={t('api.title', 'Utiliser notre API REST')}
@@ -87,13 +88,22 @@ export default function API() {
 						textAlign: 'center',
 					}}
 				>
-					<iframe
-						css="width:100%; max-width: 1200px; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+					<StyledExempleIframe
 						src="https://stackblitz.com/edit/api-mon-entreprise?ctl=1&embed=1&file=main.js"
 						title="Exemple d'intégration dans un éditeur de code en ligne"
-					></iframe>
+					/>
 				</div>
 			</Trans>
 		</div>
 	)
 }
+
+export const StyledExempleIframe = styled.iframe`
+	width: 100%;
+	max-width: 1200px;
+	height: 500px;
+	border: 0;
+	margin-bottom: 2rem;
+	border-radius: 4px;
+	overflow: hidden;
+`

site/source/pages/integration/Home.tsx

@@ -45,7 +45,7 @@ export default function Options() {
 					</Trans>
 				</Intro>
 			</PageHeader>
-			<Grid container spacing={2}>
+			<Grid container spacing={3}>
 				<Grid item xs={12} md={6} lg={4}>
 					<Card
 						icon={<Emoji emoji="📱" />}

site/source/pages/integration/Library.tsx

@@ -8,9 +8,10 @@ import { Code, Strong } from '@/design-system/typography'
 import { H2, H3, H4 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Li, Ol } from '@/design-system/typography/list'
-import { Body, Intro } from '@/design-system/typography/paragraphs'
+import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs'
 
 import Meta from '../../components/utils/Meta'
+import { StyledExempleIframe } from './API'
 import { CasParticuliers } from './components/CasParticuliers'
 import StepByStep from './components/StepByStep'
 import illustration from './images/illustration_library.svg'
@@ -19,7 +20,7 @@ export default function Library() {
 	const { t } = useTranslation()
 
 	return (
-		<div css="iframe{margin-top: 1em; margin-bottom: 1em}">
+		<div>
 			<Meta
 				title={t('library.title', 'Librairie de calcul')}
 				description={t('library.description', 'Outils pour les développeurs')}
@@ -89,11 +90,10 @@ export default function Library() {
 						textAlign: 'center',
 					}}
 				>
-					<iframe
+					<StyledExempleIframe
 						src="https://codesandbox.io/embed/zen-keller-2dpct?fontsize=14&hidenavigation=1&theme=dark"
-						css="width:100%; max-width: 1200px; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 						title="Exemple d'intégration sur codesandbox.io : lancement d'un calcul"
-					></iframe>
+					/>
 				</div>
 				<H2>Paramétrer le calcul</H2>
 				<Body>
@@ -156,11 +156,10 @@ export default function Library() {
 					Voici ce que donne le calcul avec l'exemple cité ci-dessus :
 				</Body>
 				<div>
-					<iframe
+					<StyledExempleIframe
 						src="https://codesandbox.io/embed/mon-entreprise-exemple-2-cev02?fontsize=14&hidenavigation=1&theme=dark"
-						css="width:100%; max-width: 1200px; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 						title="Exemple d'intégration sur codesandbox.io : paramétrage du calcul"
-					></iframe>
+					/>
 				</div>
 				<Message type="info" icon>
 					<Body>
@@ -179,22 +178,21 @@ export default function Library() {
 					d'analyse économique ou politique. Ici, on trace le prix du travail et
 					le salaire net en fonction du brut.
 				</Body>
-				<Body css="font-style: italic; border-left: 6px solid #eee; padding-left: .6rem">
+				<SmallBody $grey>
 					On peut constater la progressivité du salaire total, qui est en
 					pourcent plus faible pour un SMIC que pour un haut revenu. Autrement
 					dit, les hauts salaires paient une partie des cotisations sociales des
 					bas salaires.
-				</Body>
+				</SmallBody>
 				<div
 					style={{
 						textAlign: 'center',
 					}}
 				>
-					<iframe
+					<StyledExempleIframe
 						src="https://codesandbox.io/embed/mon-entreprise-exemple-3-4j11c?fontsize=14&hidenavigation=1&theme=dark"
-						css="width:100%; max-width: 1200px; height:500px; border:0; border-radius: 4px; overflow:hidden;"
 						title="Exemple d'intégration sur codesandbox.io : association avec d'autres librairies"
-					></iframe>
+					/>
 				</div>
 			</Trans>
 		</div>

site/source/pages/integration/Spreadsheet.tsx

@@ -14,7 +14,7 @@ export default function Spreadsheet() {
 	const { t } = useTranslation()
 
 	return (
-		<div css="iframe{margin-top: 1em; margin-bottom: 1em}">
+		<div>
 			<ScrollToTop />
 			<Meta
 				title={t('spreadsheet.title', 'Utiliser avec un tableur')}

site/source/pages/integration/index.tsx

@@ -10,9 +10,9 @@ import { useFetchData } from '@/hooks/useFetchData'
 import { useSitePaths } from '@/sitePaths'
 
 import API from './API'
+import Home from './Home'
 import Iframe from './Iframe'
 import Library from './Library'
-import Options from './Options'
 import Spreadsheet from './Spreadsheet'
 
 type JobOffer = {
@@ -60,7 +60,7 @@ export default function Integration() {
 				</Banner>
 			)}
 			<Routes>
-				<Route index element={<Options />} />
+				<Route index element={<Home />} />
 				<Route path={relativeSitePaths.développeur.api} element={<API />} />
 				<Route
 					path={relativeSitePaths.développeur.iframe}

site/source/types/css-prop.d.ts

@@ -1,18 +0,0 @@
-import { CSSProp, DefaultTheme } from 'styled-components'
-
-declare module 'react' {
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	interface DOMAttributes<T> {
-		// @ts-ignore
-		css?: CSSProp<DefaultTheme>
-	}
-}
-
-declare global {
-	namespace JSX {
-		interface IntrinsicAttributes {
-			// @ts-ignore
-			css?: CSSProp<DefaultTheme>
-		}
-	}
-}