From c7fd5a5c4ccf7f05aa6dbe92afcf8f1294df00ad Mon Sep 17 00:00:00 2001
From: Emile Rolley <emile.rolley@tuta.io>
Date: Thu, 12 Dec 2024 18:37:18 +0100
Subject: [PATCH] feat: update the textual content (explantions, etc...) +
 minor UI refresh

---
 README.md                                     | 22 ++++++---
 .../routes/(about)/liste-aides/+page.svelte   | 12 ++---
 retrofit/routes/(search)/Search.svelte        |  4 +-
 .../(search)/ville/[slug]/Results.svelte      |  2 +-
 retrofit/routes/+layout.svelte                | 27 +++++++++++
 src/lib/components/Details.svelte             |  8 ++--
 src/lib/components/DetailsLine.svelte         |  9 ++--
 src/lib/components/Footer.svelte              | 27 ++++++-----
 .../components/MultipleChoiceAnswer.svelte    |  4 +-
 src/lib/components/Question.svelte            | 11 +++--
 src/lib/components/Questions.svelte           |  2 +-
 src/lib/components/RevenuSelector.svelte      | 10 ++--
 src/lib/components/Search.svelte              |  4 +-
 src/routes/(front)/(about)/+layout.svelte     | 10 ++--
 src/routes/(front)/(about)/a-propos/+page.svx | 25 +++++++---
 .../(about)/liste-aides/+page.server.ts       |  2 +-
 .../(front)/(about)/liste-aides/+page.svelte  |  1 +
 src/routes/(front)/(search)/+page.svelte      | 47 +++++++++++++++++--
 .../(search)/ville/[slug]/CategoryLine.svelte |  2 +-
 .../ville/[slug]/ExplanationsText.svelte      | 32 +++++++++++--
 .../(search)/ville/[slug]/Results.svelte      |  2 +-
 src/routes/(front)/+layout.svelte             |  6 +--
 windi.config.js                               | 24 +++++++++-
 23 files changed, 216 insertions(+), 77 deletions(-)

diff --git a/README.md b/README.md
index 511131a..b83786b 100644
--- a/README.md
+++ b/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
diff --git a/retrofit/routes/(about)/liste-aides/+page.svelte b/retrofit/routes/(about)/liste-aides/+page.svelte
index 4f077cf..4a962c9 100644
--- a/retrofit/routes/(about)/liste-aides/+page.svelte
+++ b/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>
diff --git a/retrofit/routes/(search)/Search.svelte b/retrofit/routes/(search)/Search.svelte
index ead546c..f4ab776 100644
--- a/retrofit/routes/(search)/Search.svelte
+++ b/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
diff --git a/retrofit/routes/(search)/ville/[slug]/Results.svelte b/retrofit/routes/(search)/ville/[slug]/Results.svelte
index b2170b6..338f804 100644
--- a/retrofit/routes/(search)/ville/[slug]/Results.svelte
+++ b/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}
diff --git a/retrofit/routes/+layout.svelte b/retrofit/routes/+layout.svelte
index bc52538..3fb784c 100644
--- a/retrofit/routes/+layout.svelte
+++ b/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;
 	}
diff --git a/src/lib/components/Details.svelte b/src/lib/components/Details.svelte
index efb6c73..802550b 100644
--- a/src/lib/components/Details.svelte
+++ b/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}
diff --git a/src/lib/components/DetailsLine.svelte b/src/lib/components/DetailsLine.svelte
index 7860d57..7b23634 100644
--- a/src/lib/components/DetailsLine.svelte
+++ b/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>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 77b1e78..8fcdd9d 100644
--- a/src/lib/components/Footer.svelte
+++ b/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>
diff --git a/src/lib/components/MultipleChoiceAnswer.svelte b/src/lib/components/MultipleChoiceAnswer.svelte
index 9a43a5d..dcc6fa6 100644
--- a/src/lib/components/MultipleChoiceAnswer.svelte
+++ b/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>
diff --git a/src/lib/components/Question.svelte b/src/lib/components/Question.svelte
index dec5aa4..3bca0b4 100644
--- a/src/lib/components/Question.svelte
+++ b/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}
diff --git a/src/lib/components/Questions.svelte b/src/lib/components/Questions.svelte
index ad1e2b8..2f83827 100644
--- a/src/lib/components/Questions.svelte
+++ b/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',
 	];
 
diff --git a/src/lib/components/RevenuSelector.svelte b/src/lib/components/RevenuSelector.svelte
index 130dbce..40ce741 100644
--- a/src/lib/components/RevenuSelector.svelte
+++ b/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.
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index 7928fc1..586ce6b 100644
--- a/src/lib/components/Search.svelte
+++ b/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
diff --git a/src/routes/(front)/(about)/+layout.svelte b/src/routes/(front)/(about)/+layout.svelte
index b7d48ad..5e9edef 100644
--- a/src/routes/(front)/(about)/+layout.svelte
+++ b/src/routes/(front)/(about)/+layout.svelte
@@ -10,7 +10,7 @@
 	];
 </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)}
@@ -18,9 +18,8 @@
 				<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>
diff --git a/src/routes/(front)/(about)/a-propos/+page.svx b/src/routes/(front)/(about)/a-propos/+page.svx
index bbdfc20..7b5a287 100644
--- a/src/routes/(front)/(about)/a-propos/+page.svx
+++ b/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>
diff --git a/src/routes/(front)/(about)/liste-aides/+page.server.ts b/src/routes/(front)/(about)/liste-aides/+page.server.ts
index a7a8a32..b38ce68 100644
--- a/src/routes/(front)/(about)/liste-aides/+page.server.ts
+++ b/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
diff --git a/src/routes/(front)/(about)/liste-aides/+page.svelte b/src/routes/(front)/(about)/liste-aides/+page.svelte
index 2cf4cfc..6d0c428 100644
--- a/src/routes/(front)/(about)/liste-aides/+page.svelte
+++ b/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>
diff --git a/src/routes/(front)/(search)/+page.svelte b/src/routes/(front)/(search)/+page.svelte
index 7ea60ac..efc5dfc 100644
--- a/src/routes/(front)/(search)/+page.svelte
+++ b/src/routes/(front)/(search)/+page.svelte
@@ -14,14 +14,55 @@
 	/>
 </svelte:head>
 
-<p class="mt-6 w-full max-w-screen-md m-auto text-gray-500 text-right">
+<div
+	class="flex flex-wrap sm:flex-row items-center justify-end gap-3 mt-6 w-full max-w-screen-md m-auto text-gray-500"
+>
 	Essayez avec
 
 	{#each biggestCities as city}
 		<a
 			href="/ville/{city.toLowerCase()}"
-			class="inline-block mb-2 border border-current rounded-xl text-green-500 px-3 py-1 mx-1 hover:(bg-green-500 text-white)"
+			class="inline-block text-center border border-current rounded-full text-green-500 px-4 py-2 sm:px-3 sm:py-1 hover:(bg-green-500 text-white)"
 			>{city}</a
 		>
 	{/each}
-</p>
+</div>
+<section class="w-full max-w-screen-md m-auto mt-12">
+	<!-- callout with a summary of the latest features -->
+	<div class="bg-yellow-50 border border-yellow-100 p-4 mt-2 rounded" role="alert">
+		<h2 class="font-bold text-lg mb-4">🚀 Nouveautés !</h2>
+		<ul>
+			<!-- 1. prise en compte des vélos adapté pour les personnes en situation de handicap -->
+			<li class="mb-2">
+				<span class="font-bold">🦿 Vélos adaptés</span> : les aides pour les vélos adaptés sont désormais
+				intégrées.
+			</li>
+			<!-- 2. suppression du bonus écologique et de la prime à la conversion -->
+			<li class="mb-2">
+				<span class="font-bold">🏛️ Aides de nationales</span> :
+				<a href="/prime-a-la-conversion" target="_blank"
+					>suppression du Bonus écologique et de la Prime à la conversion.</a
+				>
+			</li>
+			<!-- 3. relecture et mises à jour de la totalité des aides -->
+			<li class="mb-2">
+				<span class="font-bold">🔍 Mises à jour</span>
+				: relecture et mises à jour de l'ensemble des aides pour 2024.
+			</li>
+		</ul>
+	</div>
+</section>
+
+<!-- CTA to the website jagis.beta.gouv.fr with a baseline -->
+<section class="w-full max-w-screen-md m-auto mt-12">
+	<div class="bg-green-50 border border-green-100 p-4 mt-2 rounded" role="alert">
+		<a
+			href="https://jagis.beta.gouv.fr"
+			class="inline-block bg-green-500 text-white font-bold rounded-full py-2 px-4 hover:bg-green-600"
+			>Tester Jagis</a
+		>
+		<p class="text-sm text-gray-600 mt-2">
+			Le site Jagis vous permet de connaître les aides auxquelles vous avez droit en quelques clics.
+		</p>
+	</div>
+</section>
diff --git a/src/routes/(front)/(search)/ville/[slug]/CategoryLine.svelte b/src/routes/(front)/(search)/ville/[slug]/CategoryLine.svelte
index d0e8eaf..fa5237c 100644
--- a/src/routes/(front)/(search)/ville/[slug]/CategoryLine.svelte
+++ b/src/routes/(front)/(search)/ville/[slug]/CategoryLine.svelte
@@ -10,7 +10,7 @@
 	<a tabindex="0" data-sveltekit-noscroll {href} rel={relNoFollow ? 'nofollow' : null}>
 		<div
 			role="row"
-			class="flex gap-x-2 px-2 sm:(gap-x-4 px-4) items-center justify-between py-2 bg-white hover:bg-green-50 cursor-pointer border-b group"
+			class="flex gap-x-2 px-2 sm:(gap-x-4 px-4) items-center justify-between py-2 bg-white hover:bg-green-100 cursor-pointer border-b group"
 		>
 			<div role="cell"><slot /></div>
 			<div role="cell" class="flex-1 flex flex-col items-end gap-x-2">
diff --git a/src/routes/(front)/(search)/ville/[slug]/ExplanationsText.svelte b/src/routes/(front)/(search)/ville/[slug]/ExplanationsText.svelte
index 3fbfa9d..296ff4e 100644
--- a/src/routes/(front)/(search)/ville/[slug]/ExplanationsText.svelte
+++ b/src/routes/(front)/(search)/ville/[slug]/ExplanationsText.svelte
@@ -21,7 +21,7 @@
 	$: deVille = determinant($page.data.ville.nom) + $page.data.ville.nom;
 </script>
 
-<div class="prose mt-12">
+<div class="prose mt-12 max-w-full">
 	{#if infos.pays}
 		{@html infos.pays.text}
 	{:else}
@@ -77,6 +77,23 @@
 		{/if}
 
 		<h2>Le bonus écologique de l’État</h2>
+		<!-- Callout to warn about the removal of the bonus écologique -->
+		<div
+			class="flex items-start bg-orange-50 border border-orange-100 p-4 mt-2 rounded gap-4"
+			role="alert"
+		>
+			<span class="bg-orange-100 px-2 py-1 w-min rounded-lg">⚠️</span>
+
+			<span>
+				Période transitoire jusqu'au 14 février 2025 suite à la <a
+					href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000050690951"
+					target="_blank">suppression du bonus écologique</a
+				>. Le bonus ne sera plus disponible pour tout achat passé cette date (voir
+				<a href="https://www.service-public.fr/particuliers/vosdroits/F36828" target="_blank"
+					>Bonus vélo</a
+				>).
+			</span>
+		</div>
 
 		<p>
 			Pour bénéficier du bonus écologique de l’État vous devez remplir les conditions suivantes :
@@ -101,8 +118,8 @@
 					<th colspan="2" class="text-center">Plafond de l'aide</th>
 				</tr>
 				<tr>
-					<th>Revenu : moins de 6&nbsp;358&nbsp;€/an</th>
-					<th>Revenu : moins de 14&nbsp;089&nbsp;€/an</th>
+					<th>Revenu inférieur à 7&nbsp;100&nbsp;€/an ou personne en situation de handicap</th>
+					<th>Revenu inférieur à 15&nbsp;400&nbsp;€/an</th>
 				</tr>
 			</thead>
 			<tbody>
@@ -117,12 +134,17 @@
 					<td>300 €</td>
 				</tr>
 				<tr>
-					<td>Vélo cargo</td>
+					<td>Vélo cargo (avec assistance électrique ou non)</td>
+					<td>2 000 €</td>
+					<td>1 000 €</td>
+				</tr>
+				<tr>
+					<td>Vélo pliant (avec assistance électrique ou non)</td>
 					<td>2 000 €</td>
 					<td>1 000 €</td>
 				</tr>
 				<tr>
-					<td>Vélo pliant</td>
+					<td>Vélo adapté (avec assistance électrique ou non)</td>
 					<td>2 000 €</td>
 					<td>1 000 €</td>
 				</tr>
diff --git a/src/routes/(front)/(search)/ville/[slug]/Results.svelte b/src/routes/(front)/(search)/ville/[slug]/Results.svelte
index 53296ce..0682e42 100644
--- a/src/routes/(front)/(search)/ville/[slug]/Results.svelte
+++ b/src/routes/(front)/(search)/ville/[slug]/Results.svelte
@@ -96,7 +96,7 @@
 		<p class="text-gray-600 text-md -mt-7 pl-3 italic">
 			Répondez à la question pour calculer les aides disponibles :
 		</p>
-		<Question rule={'demandeur . en situation de handicap'} />
 		<RevenuSelector />
+		<Question rule={'demandeur . en situation de handicap'} />
 	</div>
 {/if}
diff --git a/src/routes/(front)/+layout.svelte b/src/routes/(front)/+layout.svelte
index c17a407..6e30faf 100644
--- a/src/routes/(front)/+layout.svelte
+++ b/src/routes/(front)/+layout.svelte
@@ -67,7 +67,7 @@
 				href="https://mesaidesvelo.fr"
 				target="_blank"
 				class="inline-block mt-2 font-bold underline hover:text-green-800"
-				>Mes<span class="text-green-800">aides</span>velo.fr</a
+				>Mes<span class="text-green-600">aides</span>velo.fr</a
 			>
 		</p>
 	</div>
@@ -89,7 +89,7 @@
 			>
 			<div class="flex flex-col">
 				<a href="/" class="text-3xl font-bold cursor-pointer">
-					Mes<span class="text-green-800">Aides</span>Vélo
+					Mes<span class="text-green-600">Aides</span>Vélo
 				</a>
 				<p class="text-gray-800 mt-0 pt-0 w-full max-w-screen-md m-auto">
 					Trouvez les aides à l’achat d’un vélo
@@ -97,7 +97,7 @@
 			</div>
 		{:else}
 			<a href="/" class="text-3xl font-bold cursor-pointer">
-				Mes<span class="text-green-800">Aides</span>Vélo.fr
+				Mes<span class="text-green-600">Aides</span>Vélo.fr
 			</a>
 		{/if}
 	</header>
diff --git a/windi.config.js b/windi.config.js
index 26c28f5..912eac4 100644
--- a/windi.config.js
+++ b/windi.config.js
@@ -1,3 +1,25 @@
+import colors from 'windicss/colors';
+
 export default {
-	plugins: [require('windicss/plugin/typography')],
+	theme: {
+		extend: {
+			typography: {
+				DEFAULT: {
+					css: {
+						a: {
+							// color: colors.sky[600],
+							'&:hover': {
+								color: colors.green[600],
+							},
+						},
+					},
+				},
+			},
+		},
+	},
+	plugins: [
+		require('windicss/plugin/typography')({
+			modifiers: ['DEFAULT', 'sm'],
+		}),
+	],
 };