feat: update the textual content (explantions, etc...) + minor UI ref…

…resh

README.md

@@ -1,4 +1,4 @@
-# Mesaidesvelo.fr
+# mesaidesvelo.fr
 
 ### Puis-je bénéficier d'aides pour acheter un vélo ?
 
@@ -10,23 +10,31 @@ Les modalités de ces aides sont variées, elles sont parfois cumulables et
 parfois pas, parfois conditionnées à un niveau de revenus et d'autres fois
 ouvertes à tous, etc.
 
-**Mesaidesvelo.fr** rassemble [toutes les
-aides](https://mesaidesvelo.fr/liste-aides) existantes et permet d'en estimer
+**mesaidesvelo.fr** rassemble [toutes les
+aides](https://mesaidesvelo.fr/liste-aides)[^1] existantes et permet d'en estimer
 le montant rapidement et simplement.
 
+[^1]:
+    _ou presque_. En effet, nous allons jusqu'au niveau de la commune pour
+    référencer les aides. Ce qui représente un grand nombre d'aides à maintenir et
+    référencer. Or ce travail est fait à la main par quelques personnes des équipes
+    beta.gouv.fr. Si vous souhaitez faire remonter une aide manquante ou plus à
+    jour, veuillez consulter la section [Comment contribuer
+    ?](#comment-contribuer-).
+
 ### Comment contribuer ?
 
 #### Pour corriger ou proposer une aide
 
+> [!NOTE]
+> Les aides sont modélisées dans un dépôt dédié :
+> [betagouv/publicodes-aides-velo](https://github.com/betagouv/publicodes-aides-velo).
+
 Vous avez identifié une erreur ou une aide que nous ne prenons pas en compte ?
 
 Vous pouvez [ouvrir un ticket sur
 GitHub](https://github.com/betagouv/publicodes-aides-velo/issues/new).
 
-> [!NOTE]
-> Les aides sont modélisées dans un dépôt dédié :
-> [betagouv/publicodes-aides-velo](https://github.com/betagouv/publicodes-aides-velo).
-
 #### Pour améliorer l'application
 
 Si vous êtes développeur/euse vous pouvez aussi améliorer l'application. Il

retrofit/routes/(about)/liste-aides/+page.svelte

@@ -24,11 +24,11 @@
 	<h2>Les aides des métropoles</h2>
 
 	<ul>
-		<li><a href="/ville/lyon">Lyon</a></li>
-		<li><a href="/ville/toulouse">Toulouse</a></li>
-		<li><a href="/ville/grenoble">Grenoble</a></li>
-		<li><a href="/ville/reims">Reims</a></li>
-		<li><a href="/ville/rouen">Rouen Normandie</a></li>
-		<li><a href="/ville/strasbourg">Strasbourg</a></li>
+		<li><a class="!hover:text-sky-600" href="/ville/lyon">Lyon</a></li>
+		<li><a class="!hover:text-sky-600" href="/ville/toulouse">Toulouse</a></li>
+		<li><a class="!hover:text-sky-600" href="/ville/grenoble">Grenoble</a></li>
+		<li><a class="!hover:text-sky-600" href="/ville/reims">Reims</a></li>
+		<li><a class="!hover:text-sky-600" href="/ville/rouen">Rouen Normandie</a></li>
+		<li><a class="!hover:text-sky-600" href="/ville/strasbourg">Strasbourg</a></li>
 	</ul>
 </div>

retrofit/routes/(search)/Search.svelte

@@ -19,9 +19,9 @@
 </script>
 
 <div
-	class="w-full max-w-screen-md m-auto bg-gradient-to-r from-sky-100 to-sky-200 py-8 px-4 sm:px-6 mt-6 flex flex-col gap-x-4 gap-y-2 sm:flex-row sm:items-center rounded"
+	class="w-full max-w-screen-md m-auto bg-gradient-to-r from-sky-100 to-sky-200 py-8 px-4 sm:px-6 mt-6 flex flex-col gap-x-4 gap-y-2 sm:flex-row sm:items-center rounded border border-sky-300"
 >
-	<label for="localisation-input">Localisation :</label>
+	<label for="localisation-input" class="sm:text-lg text-sky-900">Localisation</label>
 	<div class="flex-1 flex flex-row items-center bg-white shadow rounded-3xl px-3 pt-1">
 		<label for="localisation-input" class="relative z-99"
 			><svg

retrofit/routes/(search)/ville/[slug]/Results.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <RevenuSelector goals={activeAides} />
-<div class="border-t border-b mt-6 bg-white">
+<div class="border rounded mt-6 bg-white">
 	{#each activeAides as aide}
 		{@const rawNode = engine.getRule(aide).rawNode}
 		{@const conditionDeRessources = true}

retrofit/routes/+layout.svelte

@@ -43,21 +43,48 @@
 	:global(.bg-green-100) {
 		@apply !bg-sky-100;
 	}
+	:global(.bg-green-200) {
+		@apply !bg-sky-200;
+	}
+	:global(.bg-green-300) {
+		@apply !bg-sky-300;
+	}
+	:global(.bg-green-400) {
+		@apply !bg-sky-400;
+	}
 	:global(.bg-green-500) {
 		@apply !bg-sky-500;
 	}
 	:global(.bg-green-600) {
 		@apply !bg-sky-600;
 	}
+	:global(.border-green-600) {
+		@apply !border-sky-600;
+	}
 	:global(.hover\:bg-green-100) {
 		@apply !hover:bg-sky-100;
 	}
 	:global(.hover\:bg-green-200) {
 		@apply !hover:bg-sky-200;
 	}
+	:global(.hover\:bg-green-300) {
+		@apply !hover:bg-sky-300;
+	}
+	:global(.hover\:bg-green-400) {
+		@apply !hover:bg-sky-400;
+	}
+	:global(.hover\:border-green-300) {
+		@apply !hover:border-sky-300;
+	}
 	:global(.text-green-700) {
 		@apply !text-sky-700;
 	}
+	:global(.hover\:text-green-600) {
+		@apply !hover:text-sky-600;
+	}
+	:global(.hover\:text-green-700) {
+		@apply !hover:text-sky-700;
+	}
 	:global(.border-green-300) {
 		@apply !border-sky-300;
 	}

src/lib/components/Details.svelte

@@ -85,7 +85,7 @@
 	<p class="text-gray-700 text-sm">{categoryDescription}</p>
 {/if}
 
-<div class="border-t border-b mt-6 bg-white">
+<div class="border rounded mt-6 bg-white">
 	{#each aidesDetails as ruleName (ruleName)}
 		<div transition:slide={{ duration: 200 }} class="border-b last:border-b-0">
 			<DetailsLine {ruleName} />
@@ -111,11 +111,11 @@
 	<p class="mt-4">
 		{#if aidesDetails.length === 1}Cette aide est valable{:else}Ces aides sont valables{/if}
 		{#if montantAidesVeloNeuf === montantAidesVeloOccasion}
-			pour un vélo neuf ou un vélo d’occasion.
+			pour un vélo neuf ou un vélo d'occasion.
 		{:else if montantAidesVeloOccasion > 0}
-			uniquement pour l’achat d’un vélo d’occasion.
+			uniquement pour l'achat d'un vélo d'occasion.
 		{:else}
-			uniquement pour l’achat d’un vélo neuf.
+			uniquement pour l'achat d'un vélo neuf.
 		{/if}
 	</p>
 {/if}

src/lib/components/DetailsLine.svelte

@@ -6,6 +6,7 @@
 	import AnimatedAmount from './AnimatedAmount.svelte';
 	import Badge from './Badge.svelte';
 	import { localisation, publicodeSituation, veloCat, veloTypeValue } from '$lib/stores';
+	import SvelteMarkdown from 'svelte-markdown';
 
 	export let ruleName;
 
@@ -40,7 +41,7 @@
 </script>
 
 {#if aide.nodeValue !== null}
-	<div class="flex flex-row">
+	<div class="flex flex-row items-start">
 		{#if miniatures[ruleName]}
 			<button
 				title="Logo {title.toLowerCase()} (ouvrir le site dans un nouvel onglet)"
@@ -68,9 +69,9 @@
 					</span>
 				{/if}
 			</div>
-			<p class="text-gray-600 mt-2 text-sm">
-				{notice}
-			</p>
+			<div class="text-gray-600 mt-2 prose-sm">
+				<SvelteMarkdown source={notice} options={{ breaks: true }} />
+			</div>
 			{#if rawNode.lien}
 				<p class="mt-2 text-sm text-green-700">
 					<a href={rawNode.lien} target="_blank" class="hover:underline">→ En savoir plus</a>

src/lib/components/Footer.svelte

@@ -7,35 +7,38 @@
 </script>
 
 <footer
-	class="flex flex-col items-start gap-6 py-6 pt-3 justify-between w-full max-w-screen-md mx-auto md:(flex-row items-end) text-xs"
+	class="flex flex-col items-start gap-6 py-6 pt-3 justify-between w-full max-w-screen-md mx-auto md:(flex-row) text-xs border-t border-gray-200"
 >
 	{#if !isEmbeded || $page.url.pathname !== '/'}<UserFeedback />{/if}
 	{#if !isEmbeded}
 		<ul class="flex flex-wrap gap-x-4 gap-y-3 text-gray-600 md:justify-end">
 			<li>
-				<a href="/a-propos" class="hover:(underline text-green-600)">À propos</a>
+				<a href="/a-propos" class="underline hover:(text-green-600)">À propos</a>
 			</li>
 			<li>
-				<a href="https://aideretrofit.fr" rel="external" class="  hover:(underline text-green-600)"
+				<a href="https://aideretrofit.fr" rel="external" class="underline hover:(text-green-600)"
 					>Aide Retrofit</a
 				>
 			</li>
 			<li>
-				<a href="/liste-aides" class="hover:(underline text-green-600)">Liste des aides</a>
+				<a href="/liste-aides" class="underline hover:(text-green-600)">Liste des aides</a>
 			</li>
 			<li>
+				Code Source :
 				<a
 					href="https://github.com/mquandalle/mesaidesvelo"
 					target="_blank"
-					class="inline-flex gap-x-2 hover:(underline text-green-600)"
+					class="inline-flex gap-x-2 underline hover:text-green-600"
 				>
-					Code Source
-					<svg viewBox="15 15 34 34" class="h-4"
-						><path
-							d="M32,16c-8.8,0-16,7.2-16,16c0,7.1,4.6,13.1,10.9,15.2 c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.6,2.5,1.6c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3 c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5c3.1-2.1,4.4-1.6,4.4-1.6 c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.1-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4 c0,0.4,0.3,0.9,1.1,0.8C43.4,45.1,48,39.1,48,32C48,23.2,40.8,16,32,16z"
-							class="fill-current"
-						/></svg
-					>
+					Site
+				</a>
+				/
+				<a
+					href="https://github.com/betagouv/publicodes-aides-velo/blob/main/src/rules/aides.publicodes"
+					target="_blank"
+					class="inline-flex underline gap-x-2 hover:(text-green-600)"
+				>
+					Aides
 				</a>
 			</li>
 		</ul>

src/lib/components/MultipleChoiceAnswer.svelte

@@ -7,8 +7,8 @@
 
 <label
 	class="border rounded px-4 py-2 shadow-sm flex items-center gap-x-2 cursor-pointer {isSelected
-		? 'bg-green-500 text-white'
-		: 'bg-white hover:bg-green-200 text-gray-700'}"
+		? 'bg-green-500 border-green-600 text-white'
+		: 'bg-white text-gray-700 hover:bg-green-200 hover:border-green-300 hover:text-gray-800'}"
 >
 	<input type="radio" bind:group {value} />
 	<span class="text-current"><slot /></span>

src/lib/components/Question.svelte

@@ -50,14 +50,17 @@
 		><label for={domId}>{optionalEvaluate(ruleInfos.question)?.replace(/\s+?$/, '\u00A0?')}</label>
 		{#if ruleInfos.description}
 			<button
-				title="Plus d’informations"
+				title="Plus d'informations"
 				class="cursor-pointer"
 				on:click={() => (showExplanations = !showExplanations)}
-				><Emoji emoji="ℹ" />
+				><Emoji className="align-middle" emoji="ℹ" />
 			</button>
 			{#if showExplanations}
-				<p class="m-4 mt-2 text-gray-600 text-sm" transition:slide={{ duration: 100 }}>
-					<SvelteMarkdown source={ruleInfos.description} isInline />
+				<p
+					class="my-2 text-gray-700 prose-sm border-l-2 rounded-r p-2 bg-gray-50"
+					transition:slide={{ duration: 100 }}
+				>
+					<SvelteMarkdown source={ruleInfos.description} />
 				</p>
 			{/if}
 		{/if}

src/lib/components/Questions.svelte

@@ -30,8 +30,8 @@
 		// de parts'. However, to match the previous behavior, we ask
 		// directly the question to the user, maybe we should change
 		// this to ask separately the number of parts and the revenu.
-		'demandeur . en situation de handicap',
 		'revenu fiscal de référence par part',
+		'demandeur . en situation de handicap',
 		'vélo . prix',
 	];
 

src/lib/components/RevenuSelector.svelte

@@ -194,12 +194,16 @@
 {#if numberFieldIsRequired || displayedThresholds.length > 0}
 	<div class="mt-6">
 		Quel est votre revenu net mensuel (quotient familial) ? <span
-			title="Plus d’informations"
+			title="Plus d'informations"
 			class="cursor-pointer"
-			on:click={() => (showExplanations = !showExplanations)}><Emoji emoji="ℹ" /></span
+			on:click={() => (showExplanations = !showExplanations)}
+			><Emoji className="align-middle" emoji="ℹ" /></span
 		>
 		{#if showExplanations}
-			<p class="m-4 mt-2 text-gray-600 text-sm" transition:slide={{ duration: 100 }}>
+			<p
+				class="my-2 text-gray-700 prose-sm border-l-2 rounded-r p-2 bg-gray-50"
+				transition:slide={{ duration: 100 }}
+			>
 				Le montant des aides dépend de votre revenu par part de quotient familial. Sur votre avis
 				d'imposition cela correspond au montant du « revenu fiscal de référence » divisé par le
 				nombre de parts du quotient familial, puis divisé par 12.

src/lib/components/Search.svelte

@@ -18,9 +18,9 @@
 </script>
 
 <div
-	class="w-full max-w-screen-md m-auto bg-gradient-to-r from-green-100 to-green-200 py-8 px-4 sm:px-6 mt-6 flex flex-col gap-x-4 gap-y-2 sm:flex-row sm:items-center rounded"
+	class="w-full max-w-screen-md m-auto bg-gradient-to-r from-green-100 to-green-200 py-6 sm:py-8 px-4 sm:px-6 mt-6 flex flex-col gap-x-4 gap-y-2 sm:flex-row sm:items-center rounded border border-green-300"
 >
-	<label for="localisation-input">Localisation :</label>
+	<label for="localisation-input" class="sm:text-lg text-green-900">Localisation</label>
 	<div class="flex-1 flex flex-row items-center bg-white shadow rounded-3xl px-3 pt-1">
 		<label for="localisation-input" class="relative z-99"
 			><svg

src/routes/(front)/(about)/+layout.svelte

@@ -10,17 +10,16 @@
 	];
 </script>
 
-<nav class="w-full max-w-screen-md m-auto pb-2 mt-6 shadow-inner">
+<nav class="w-full max-w-screen-md m-auto pb-2 mt-6 border-b">
 	<ul class="flex flex-wrap gap-x-4 gap-y-3 text-gray-600">
 		{#each pages as [path, label]}
 			{@const isActive = $page.url.pathname.startsWith(path)}
 			<li>
 				<a
 					href={path}
 					aria-current={isActive ? true : undefined}
-					class="hover:(bg-gray-100 rounded-t) p-2 {isActive
-						? 'text-green-700 md:(border-b border-b-green-700 border-b-width-2)'
-						: ''}">{label}</a
+					class="hover:(bg-green-50 text-green-600 rounded) p-2 {isActive ? 'text-green-600' : ''}"
+					>{label}</a
 				>
 			</li>
 		{/each}
@@ -30,7 +29,4 @@
 <slot />
 
 <style>
-	nav {
-		box-shadow: inset 0 -1px 0 #d1d5db;
-	}
 </style>

src/routes/(front)/(about)/a-propos/+page.svx

@@ -11,19 +11,30 @@
 
 # À propos
 
-## Qu’est ce que c’est ?
+## Qu'est ce que c'est ?
 
-Cet outil rassemble l’ensemble des aides à l’achat de vélo. Il vous permet d’identifier en
-quelques clics celles auxquelles vous avez droit.
+Cet outil rassemble l'ensemble des aides à l'achat de vélo. Il vous permet
+d'identifier en quelques clics celles auxquelles vous avez droit.
 
-Il est gratuit, et développé de manière ouverte.
+Il est gratuit, et développé de manière [ouverte](https://github.com/mquandalle/mesaidesvelo).
 
 ## Quelles sont les aides prises en compte ?
 
-Nous voulons intégrer l’ensemble des aides disponibles dans toutes les villes de France. Il
-s’agit néanmoins d’un travail de fourmi car il n’existe aucune base centrale les recensant
-toutes. Il nous faut donc les saisir à la main une par une.
+Nous voulons intégrer l'ensemble des aides disponibles dans toutes les villes
+de France. Il s'agit néanmoins d'un travail de fourmi car il n'existe aucune
+base centrale les recensant toutes. Il nous faut donc les saisir à la main une
+par une.
 
 ➡ Voir la [liste des aides intégrées](/liste-aides)
 
+## Qui s'en occupe ?
+
+Le projet a été initié par Maxime Quendalle bénévolement, il l'a ensuite
+maintenu pendant quelques temps financé par l'équipe
+de [1jeune1solution](https://mes-aides.1jeune1solution.beta.gouv.fr/).
+
+A présent, la mise à jours des aides est principalement faite par les membres
+des différentes équipes de [beta.gouv.fr](https://beta.gouv.fr) qui les
+utilisent.
+
 </div>

src/routes/(front)/(about)/liste-aides/+page.server.ts

@@ -42,7 +42,7 @@ export async function load() {
 	const aidesEtat = associatedCollectivities
 		.filter(({ collectivity }) => collectivity.kind === 'pays' && collectivity.value === 'France')
 		.map(({ rawNode }) => ({
-			titre: rawNode.titre.replace(/de l’état/i, '').trim(),
+			titre: rawNode.titre.replace(/de l'état/i, '').trim(),
 		}));
 
 	const aidesRegions = associatedCollectivities

src/routes/(front)/(about)/liste-aides/+page.svelte

@@ -10,6 +10,7 @@
 <svelte:head>
 	<title>MesAidesVélo - Liste des aides</title>
 </svelte:head>
+
 <div class="prose mt-8 w-full max-w-screen-md m-auto">
 	<h1>Les aides intégrées sur le site</h1>
 	<p>