Improve radio card

site/source/design-system/field/Radio/RadioCard.tsx

@@ -30,6 +30,7 @@ export const RadioCardSkeleton = ({
 
 const StyledCardContainer = styled(CardContainer)`
 	${VisibleRadio} {
+		display: initial;
 		margin: 0;
 		width: 100%;
 		background: transparent;
@@ -58,7 +59,7 @@ export function RadioCard({
 	...props
 }: RadioCardProps) {
 	return (
-		<RadioCardSkeleton {...props}>
+		<StyledRadioCardSkeleton {...props}>
 			<StyledRadioPoint />
 			<SpanBody>
 				<span>
@@ -68,6 +69,12 @@ export function RadioCard({
 					<Markdown as={Description}>{description ?? ''}</Markdown>
 				)}
 			</SpanBody>
-		</RadioCardSkeleton>
+		</StyledRadioCardSkeleton>
 	)
 }
+
+const StyledRadioCardSkeleton = styled(RadioCardSkeleton)`
+	${VisibleRadio} {
+		display: flex;
+	}
+`

site/source/design-system/field/Radio/RadioCardGroup.stories.tsx

@@ -44,6 +44,7 @@ export const Custom: Story = {
 			</RadioCardSkeleton>
 			<RadioCardSkeleton value="value2">
 				<p>Value 2</p>
+				<p>Second paragraph</p>
 			</RadioCardSkeleton>
 			<RadioCardSkeleton value="value3">
 				<p>Value 3</p>

site/source/pages/assistants/choix-du-statut/détails-activité.tsx

@@ -6,7 +6,7 @@ import { Navigate } from 'react-router-dom'
 import Skeleton from '@/components/ui/Skeleton'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Message, RadioCardGroup } from '@/design-system'
-import { StyledRadioSkeleton } from '@/design-system/field/Radio/RadioCard'
+import { RadioCardSkeleton } from '@/design-system/field/Radio/RadioCard'
 import { Spacing } from '@/design-system/layout'
 import { H3, H5 } from '@/design-system/typography/heading'
 import { Body } from '@/design-system/typography/paragraphs'
@@ -110,14 +110,14 @@ function GuichetSelection({
 			<RadioCardGroup value={codeGuichet} onChange={onGuichetSelected}>
 				{entries.map((guichetEntry) => {
 					return (
-						<StyledRadioSkeleton
+						<RadioCardSkeleton
 							value={guichetEntry.code}
 							key={guichetEntry.code}
 							visibleRadioAs="div"
 						>
 							<H5 as="h3">{getGuichetTitle(guichetEntry.label)}</H5>
 							<GuichetDescription {...guichetEntry} />
-						</StyledRadioSkeleton>
+						</RadioCardSkeleton>
 					)
 				})}
 			</RadioCardGroup>

site/source/pages/assistants/recherche-code-ape/SearchCodeAPE.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/design-system'
 import { Button } from '@/design-system/buttons'
 import { Emoji } from '@/design-system/emoji'
+import { VisibleRadio } from '@/design-system/field/Radio/Radio'
 import { RadioCardSkeleton } from '@/design-system/field/Radio/RadioCard'
 import { Spacing } from '@/design-system/layout'
 import { SmallBody } from '@/design-system/typography/paragraphs'
@@ -281,6 +282,11 @@ export default function SearchCodeAPE({
 const StyledRadioCardGroup = styled(RadioCardGroup)`
 	flex-direction: row;
 	flex-wrap: wrap;
+
+	${VisibleRadio} {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
 `
 
 const ActivityNotFound = ({ job }: { job: string }) => {