diff --git a/README.md b/README.md
index cb39b67..85ffdd4 100644
--- a/README.md
+++ b/README.md
@@ -59,7 +59,7 @@ Prérequis : **Node 20+** et **pnpm**.
 git clone https://github.com/csanchez-jetdev/trainquillou.git
 cd trainquillou
 pnpm install
-pnpm dev          # http://localhost:3000
+pnpm dev          # http://localhost:3001
 ```
 
 Aucune clé d'API, aucun compte, aucun fichier `.env` : l'open data SNCF est ouvert et le
@@ -170,7 +170,7 @@ format stable. Elles sont utilisables telles quelles si vous auto-hébergez.
 exigent `dateTo`.
 
 ```bash
-curl 'http://localhost:3000/api/search?origin=LYON%20(intramuros)&date=2026-08-14'
+curl 'http://localhost:3001/api/search?origin=LYON%20(intramuros)&date=2026-08-14'
 ```
 
 ## Architecture
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 0ffb543..6cb12d9 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -15,6 +15,19 @@
   /* Fond crème */
   --color-cream: #fafaf7;
 
+  /*
+   * Couleurs des deux revendeurs, relevées sur leurs propres pages (styles calculés,
+   * pas une palette de seconde main) : reconnaître la destination d'un lien sortant
+   * avant de cliquer vaut mieux que deux liens soulignés identiques.
+   *
+   * `trainline` est le vert foncé de leurs propres boutons, pas le vert clair de leur
+   * logo (#00a88f) : celui-ci ne donne que 3:1 avec du texte blanc, sous le seuil AA.
+   */
+  --color-sncf: #0c131f;
+  --color-sncf-hover: #242a3e;
+  --color-trainline: #00705f;
+  --color-trainline-hover: #00a88f;
+
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
 }
 
diff --git a/app/components/DestinationPopover.vue b/app/components/DestinationPopover.vue
index 37ffa73..b899750 100644
--- a/app/components/DestinationPopover.vue
+++ b/app/components/DestinationPopover.vue
@@ -190,25 +190,33 @@ function formatDate(iso: string): string {
       </template>
     </div>
 
-    <!-- Réservation -->
-    <div v-if="legSlugs" class="flex items-center gap-3 border-t border-slate-100 bg-slate-50/60 px-3.5 py-2.5 text-xs">
-      <a
-        :href="sncfConnectUrl(legSlugs.from, legSlugs.to)"
-        target="_blank"
-        rel="noopener"
-        data-test="popover-book-sncf"
-        class="font-semibold text-accent-strong underline decoration-accent/40 hover:decoration-accent"
-      >
-        Réserver sur SNCF Connect
-      </a>
-      <a
-        :href="trainlineUrl(legSlugs.from, legSlugs.to)"
-        target="_blank"
-        rel="noopener"
-        class="text-rail-soft underline decoration-slate-300 hover:text-rail"
-      >
-        Trainline
-      </a>
+    <!--
+      Réservation. Chaque revendeur porte sa propre couleur : on sort du site, autant
+      savoir où l'on arrive. Deux moitiés égales — `basis-1/2` et non `flex-1`, dont la
+      base `auto` répartirait selon la longueur du libellé.
+    -->
+    <div v-if="legSlugs" class="border-t border-slate-100 bg-slate-50/60 px-3.5 py-2.5">
+      <p class="text-[11px] font-medium text-rail-soft">Réserver ce trajet</p>
+      <div class="mt-1.5 flex items-stretch gap-2">
+        <a
+          :href="sncfConnectUrl(legSlugs.from, legSlugs.to)"
+          target="_blank"
+          rel="noopener"
+          data-test="popover-book-sncf"
+          class="flex basis-1/2 items-center justify-center rounded-lg bg-sncf px-3 py-2 text-xs font-semibold text-white transition hover:bg-sncf-hover"
+        >
+          SNCF Connect
+        </a>
+        <a
+          :href="trainlineUrl(legSlugs.from, legSlugs.to)"
+          target="_blank"
+          rel="noopener"
+          data-test="popover-book-trainline"
+          class="flex basis-1/2 items-center justify-center rounded-lg bg-trainline px-3 py-2 text-xs font-semibold text-white transition hover:bg-trainline-hover"
+        >
+          Trainline
+        </a>
+      </div>
     </div>
   </div>
 </template>
diff --git a/app/components/GithubLink.vue b/app/components/GithubLink.vue
new file mode 100644
index 0000000..0c7a59e
--- /dev/null
+++ b/app/components/GithubLink.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+/**
+ * Lien vers le dépôt. L'adresse est écrite ici et nulle part ailleurs : le projet étant
+ * sous AGPL-3.0, elle doit rester accessible depuis chaque écran.
+ */
+defineProps<{
+  /** Texte à côté de la marque. Absent : lien en icône seule (barre d'application). */
+  label?: string
+}>()
+
+const REPO = 'https://github.com/csanchez-jetdev/trainquillou'
+</script>
+
+<template>
+  <a
+    :href="REPO"
+    target="_blank"
+    rel="noopener"
+    :title="label ? undefined : 'Code source sur GitHub'"
+    :aria-label="label ? undefined : 'Code source sur GitHub'"
+    class="inline-flex items-center gap-1.5"
+  >
+    <svg class="h-[1.15em] w-[1.15em] shrink-0" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M12 .5C5.73.5.9 5.4.9 11.75c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56v-2.1c-3.2.7-3.87-1.55-3.87-1.55-.52-1.35-1.28-1.71-1.28-1.71-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.21 1.77 1.21 1.03 1.79 2.7 1.27 3.36.97.1-.75.4-1.27.73-1.56-2.55-.29-5.24-1.29-5.24-5.77 0-1.27.44-2.31 1.18-3.13-.12-.29-.51-1.48.11-3.08 0 0 .96-.31 3.15 1.2a10.8 10.8 0 0 1 5.74 0c2.18-1.51 3.14-1.2 3.14-1.2.62 1.6.23 2.79.11 3.08.74.82 1.18 1.86 1.18 3.13 0 4.49-2.7 5.47-5.25 5.76.41.36.78 1.08.78 2.17v3.2c0 .31.2.68.8.56 4.56-1.53 7.84-5.83 7.84-10.91C23.1 5.4 18.27.5 12 .5Z" />
+    </svg>
+    <span v-if="label">{{ label }}</span>
+  </a>
+</template>
diff --git a/app/components/HeroSearch.vue b/app/components/HeroSearch.vue
new file mode 100644
index 0000000..2aed930
--- /dev/null
+++ b/app/components/HeroSearch.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { todayISO, lastBookableISO } from '~~/shared/window'
+
+/**
+ * Accroche de la page d'accueil : la barre de recherche elle-même, plutôt qu'un bouton
+ * qui mène à elle. Un champ qui ressemble à une recherche doit chercher — un décor
+ * cliquable mais impossible à remplir se lit comme une panne.
+ *
+ * La saisie n'est pas obligatoire : sans gare, on ouvre l'application avec la date déjà
+ * posée. Le formulaire n'a donc jamais d'état invalide qui bloque le clic.
+ */
+const from = ref('')
+const date = ref('')
+const dateId = useId()
+
+const today = todayISO()
+const lastBookable = lastBookableISO()
+
+/**
+ * La date par défaut est posée au montage : calculée pendant le rendu serveur, ce serait
+ * celle du serveur (UTC en production), qui désigne encore la veille entre minuit et 2 h
+ * du matin en France — soit une divergence d'hydratation sur la valeur du champ.
+ */
+onMounted(() => (date.value = todayISO()))
+
+function submit() {
+  const origin = from.value.trim()
+  const query: Record<string, string> = {}
+  if (origin) query.origin = origin
+  query.date = date.value || todayISO()
+  return navigateTo({ path: '/app', query })
+}
+</script>
+
+<template>
+  <form
+    class="w-full max-w-lg rounded-2xl bg-white p-2 shadow-2xl shadow-rail/40"
+    @submit.prevent="submit"
+  >
+    <!-- Même objet que dans l'application : un cadre unique découpé en cellules -->
+    <div class="rounded-xl border border-slate-200">
+      <StationInput
+        v-model="from"
+        label="Depuis"
+        placeholder="Paris, Lyon, Nantes…"
+        test-id="hero-origin"
+      />
+      <div class="mx-3 h-px bg-slate-100" />
+      <div class="flex items-center gap-2 px-3 py-2.5">
+        <label :for="dateId" class="w-12 shrink-0 text-xs font-medium text-rail-soft">Date</label>
+        <input
+          :id="dateId"
+          v-model="date"
+          type="date"
+          data-test="hero-date"
+          :min="today"
+          :max="lastBookable"
+          class="min-w-0 flex-1 bg-transparent text-[15px] font-medium text-rail outline-none"
+        >
+      </div>
+    </div>
+
+    <button
+      type="submit"
+      data-test="hero-submit"
+      class="mt-2 w-full rounded-xl bg-coral px-4 py-3 text-base font-semibold text-white shadow-lg shadow-coral/30 transition hover:bg-coral-strong"
+    >
+      Voir les destinations →
+    </button>
+  </form>
+</template>
diff --git a/app/components/MapView.client.vue b/app/components/MapView.client.vue
index b8a0d9b..f49695f 100644
--- a/app/components/MapView.client.vue
+++ b/app/components/MapView.client.vue
@@ -48,6 +48,7 @@ const TINTS: Array<{ id: string; prop: string; color: string }> = [
 
 const instance = getCurrentInstance()
 let map: maplibregl.Map | null = null
+let sizeObserver: ResizeObserver | null = null
 /**
  * Le style est chargé et les couches peuvent être ajoutées. On ne peut pas se fier à
  * `map.loaded()` : il renvoie `false` pendant une animation de caméra, et un
@@ -160,7 +161,28 @@ onMounted(async () => {
       // L'attribution (OpenFreeMap, OpenMapTiles, OpenStreetMap) vient du TileJSON de
       // la source : la déclarer ici la ferait apparaître en double.
       attributionControl: { compact: true },
+      // Le suivi de taille est fait ici, voir plus bas.
+      trackResize: false,
     })
+
+    /**
+     * Suivi de la taille du conteneur, à la place de celui de MapLibre. Le sien écarte sa
+     * première notification — celle que `ResizeObserver` émet toujours à l'abonnement —
+     * pour ne pas refaire le calcul du constructeur. Mais si la mise en page bouge dans la
+     * même frame que la création de la carte, les deux tailles se fondent en une seule
+     * notification, celle-ci est écartée, et le canevas reste figé à sa taille de départ
+     * pour de bon. C'est le cas ici dès qu'une recherche aboutit : elle replie le
+     * formulaire, la ligne de la carte grandit d'autant, et la carte s'arrêtait aux deux
+     * tiers de sa ligne sur mobile.
+     */
+    let lastSize = ''
+    sizeObserver = new ResizeObserver(() => {
+      const size = `${container.clientWidth}×${container.clientHeight}`
+      if (size === lastSize) return
+      lastSize = size
+      map?.resize()
+    })
+    sizeObserver.observe(container)
     // Render initial state once map tiles are ready
     map.once('load', () => {
       styleReady = true
@@ -177,6 +199,8 @@ onMounted(async () => {
 })
 
 onBeforeUnmount(() => {
+  sizeObserver?.disconnect()
+  sizeObserver = null
   map?.remove()
   map = null
 })
@@ -192,6 +216,24 @@ function removeLayerSource(id: string) {
   if (map.getSource(id)) map.removeSource(id)
 }
 
+/**
+ * Marge du cadrage, en pixels. Elle était fixée à 400 px à gauche, du temps où la carte
+ * passait en pleine largeur sous la colonne de recherche ; celle-ci occupe désormais sa
+ * propre colonne de grille et cette marge ne faisait plus que tasser les points contre le
+ * bord droit. Sur un téléphone elle était fatale : 400 px de marge dans 393 px de large
+ * donnent une largeur utile négative, et le cadrage sortait la moitié des marqueurs du
+ * cadre — dont la gare de départ.
+ *
+ * Donc une fraction du conteneur, plafonnée : une marge doit aérer le cadrage, pas le
+ * manger, et elle ne peut jamais dépasser ce qu'elle borde.
+ */
+function fitPadding(): maplibregl.PaddingOptions {
+  const el = map?.getContainer()
+  const x = Math.min(60, Math.round((el?.clientWidth ?? 480) / 8))
+  const y = Math.min(60, Math.round((el?.clientHeight ?? 480) / 8))
+  return { top: y, bottom: y, left: x, right: x }
+}
+
 /** Crée un élément DOM de marqueur (pastille colorée). */
 function dot(color: string, size: number): HTMLDivElement {
   const el = document.createElement('div')
@@ -245,7 +287,7 @@ function renderRoute(route: RouteResult, selected: number) {
   if (pts.length > 1) {
     const bounds = new maplibregl.LngLatBounds()
     pts.forEach((p) => bounds.extend([p[1], p[0]]))
-    map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: 400, right: 60 }, maxZoom: 8, duration: 800 })
+    map.fitBounds(bounds, { padding: fitPadding(), maxZoom: 8, duration: 800 })
   }
 }
 
@@ -328,7 +370,7 @@ function render(result: SearchResult | null | undefined) {
   if (pts.length > 1) {
     const b = new maplibregl.LngLatBounds()
     pts.forEach((p) => b.extend([p[1], p[0]]))
-    map.fitBounds(b, { padding: { top: 60, bottom: 60, left: 400, right: 60 }, maxZoom: 8, duration: 800 })
+    map.fitBounds(b, { padding: fitPadding(), maxZoom: 8, duration: 800 })
   }
 }
 
diff --git a/app/components/ResultsRail.vue b/app/components/ResultsRail.vue
index 4dc187c..8fa8a70 100644
--- a/app/components/ResultsRail.vue
+++ b/app/components/ResultsRail.vue
@@ -201,8 +201,11 @@ const CHIP_OFF = 'border-slate-200 bg-white text-rail-soft hover:border-slate-30
       </div>
 
       <!-- Pleine largeur, séparées par des filets : 74 rectangles bordés faisaient une
-           échelle. La marge négative annule le padding de la colonne. -->
-      <ul v-if="visible.length" class="-mx-3 divide-y divide-slate-100 overflow-auto border-t border-slate-100">
+           échelle. La marge négative annule le padding de la colonne.
+           `pb-14` sur mobile : de quoi faire défiler la dernière destination au-dessus de
+           la bascule carte / liste, qui flotte par-dessus le bas de la liste. Du défilement
+           en plus, pas de la hauteur utile en moins. -->
+      <ul v-if="visible.length" class="-mx-3 divide-y divide-slate-100 overflow-auto border-t border-slate-100 pb-14 md:pb-0">
         <DestinationCard
           v-for="d in visible"
           :key="d.label"
diff --git a/app/components/RoutePanel.vue b/app/components/RoutePanel.vue
index fd5f99f..fd0340f 100644
--- a/app/components/RoutePanel.vue
+++ b/app/components/RoutePanel.vue
@@ -44,7 +44,9 @@ function fmtDay(iso: string): string {
         Exploration partielle (budget d'appels atteint) : d'autres trajets à 2 correspondances peuvent exister.
       </p>
 
-      <ul v-if="route.itineraries.length" class="flex flex-col gap-2 overflow-auto pr-1">
+      <!-- `pb-14` sur mobile : de quoi faire défiler le dernier itinéraire au-dessus de la
+           bascule carte / liste, qui flotte par-dessus le bas de la liste. -->
+      <ul v-if="route.itineraries.length" class="flex flex-col gap-2 overflow-auto pr-1 pb-14 md:pb-0">
         <li
           v-for="(it, i) in route.itineraries"
           :key="i"
diff --git a/app/components/SearchBar.vue b/app/components/SearchBar.vue
index 0d810e9..1c62bc0 100644
--- a/app/components/SearchBar.vue
+++ b/app/components/SearchBar.vue
@@ -181,32 +181,53 @@ function submit() {
 </script>
 
 <template>
-  <form class="w-full" @submit.prevent="submit">
+  <!--
+    Deux dispositions. En colonne sur mobile, comme un formulaire. En barre horizontale à
+    partir de `md` : empilés dans une colonne de 384 px, ces quatre contrôles prenaient
+    309 px de haut, soit plus que la liste de résultats qu'ils produisent.
+
+    `flex-wrap` plutôt qu'un troisième palier de largeur : la barre se plie d'elle-même en
+    deux rangées là où elle ne tient plus, entre 768 et 1 000 px, et la mise en page reste
+    binaire — colonne ou barre.
+
+    L'ordre suit la disposition, via `order` : le bouton vient après les champs sur la
+    barre, mais reste sous le texte qui annonce ce qu'il va faire en colonne.
+  -->
+  <form class="flex w-full flex-col gap-2 md:flex-row md:flex-wrap" @submit.prevent="submit">
     <!-- Le trajet : un seul objet, pas deux champs juxtaposés. Le bouton d'inversion se
-         pose sur le séparateur qu'il fait pivoter, à l'intérieur du cadre — dehors, il
-         créait une troisième marge droite dans la colonne. -->
-    <div class="relative rounded-xl border border-slate-200 bg-white">
+         pose sur le séparateur qu'il fait pivoter — sur le bord droit du cadre en colonne,
+         entre les deux champs sur la barre. -->
+    <!-- `md:min-w-[24rem]` : le plancher sous lequel la barre se plie plutôt que de
+         comprimer les champs davantage. En dessous de 1 100 px et dans les modes à trois
+         cellules de date, un long libellé s'y tronque encore — « LYON (intr » — et c'est
+         assumé : la gare est réécrite en entier dans l'en-tête des résultats juste dessous,
+         et la hauteur rendue à la liste est ce qu'on est venu chercher. -->
+    <div class="relative order-1 rounded-xl border border-slate-200 bg-white md:flex md:min-w-[24rem] md:flex-1 md:items-stretch">
       <StationInput
         v-model="from"
         label="Depuis"
         placeholder="Paris, Lyon, Nantes…"
         test-id="input-from"
         :exclude="to"
+        class="md:min-w-0 md:flex-1"
       />
-      <div class="mx-3 h-px bg-slate-100" />
+      <div class="mx-3 h-px bg-slate-100 md:mx-0 md:h-auto md:w-px md:shrink-0" />
+      <!-- `md:pl-4` : de quoi dégager le libellé du bouton d'inversion, qui se centre sur
+           le séparateur et empiète de 16 px de chaque côté. -->
       <StationInput
         v-model="to"
         label="Vers"
         placeholder="N'importe où"
         test-id="input-to"
         :exclude="from"
+        class="md:min-w-0 md:flex-1 md:pl-4"
       />
       <button
         type="button"
         data-test="swap"
         title="Inverser le sens"
         aria-label="Inverser le sens de la recherche"
-        class="absolute right-2.5 top-1/2 z-10 grid h-8 w-8 -translate-y-1/2 place-items-center rounded-full border border-slate-200 bg-white text-rail-soft shadow-sm transition hover:border-accent hover:text-accent-strong"
+        class="absolute right-2.5 top-1/2 z-10 grid h-8 w-8 -translate-y-1/2 place-items-center rounded-full border border-slate-200 bg-white text-rail-soft shadow-sm transition hover:border-accent hover:text-accent-strong md:left-1/2 md:right-auto md:-translate-x-1/2 md:rotate-90"
         @click="swap"
       >
         <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -215,10 +236,18 @@ function submit() {
       </button>
     </div>
 
-    <!-- Quand : même traitement, un cadre unique découpé en cellules -->
-    <div class="mt-2 rounded-xl border border-slate-200 bg-white">
-      <div class="grid grid-cols-2">
-        <div class="px-3 py-2">
+    <!-- Quand : même traitement, un cadre unique découpé en cellules.
+         `md:contents` sur les rangées : sur la barre elles s'effacent et leurs cellules
+         deviennent directement celles du cadre, sans dupliquer le balisage ni maintenir
+         deux arborescences. Leur `border-t`, qui séparait les rangées empilées, disparaît
+         avec elles. -->
+    <!-- `md:flex-none` : ce cadre est dimensionné par son contenu, jamais comprimé. Il
+         compte deux cellules, trois en aller-retour ou en itinéraire ; avec un ratio de
+         croissance, la troisième débordait sous le bouton de recherche en dessous de
+         1 100 px. Seul le cadre du trajet s'étire, ses champs en ont l'usage. -->
+    <div class="order-2 rounded-xl border border-slate-200 bg-white md:flex md:flex-none md:items-stretch">
+      <div class="grid grid-cols-2 md:contents">
+        <div class="px-3 py-2 md:min-w-[8.5rem] md:flex-1">
           <span class="block text-xs font-medium text-rail-soft">{{ firstDateLabel }}</span>
           <input
             v-model="date"
@@ -228,7 +257,7 @@ function submit() {
             class="mt-0.5 w-full bg-transparent text-[15px] font-medium text-rail outline-none"
           >
         </div>
-        <div class="relative border-l border-slate-100 px-3 py-2">
+        <div class="relative border-l border-slate-100 px-3 py-2 md:min-w-[9rem] md:flex-1">
           <label for="tq-date-kind" class="block text-xs font-medium text-rail-soft">Voyage</label>
           <select
             id="tq-date-kind"
@@ -247,11 +276,13 @@ function submit() {
         </div>
       </div>
 
-      <!-- Ces lignes n'ont qu'une cellule, mais gardent la grille à deux colonnes : sinon
-           leur champ s'étire sur toute la largeur et son icône de calendrier ne tombe plus
-           en face de celle de la ligne du dessus. -->
-      <div v-if="hasSecondDate" class="grid grid-cols-2 border-t border-slate-100">
-        <div class="px-3 py-2">
+      <!-- Ces lignes n'ont qu'une cellule, mais gardent la grille à deux colonnes en
+           colonne : sinon leur champ s'étire sur toute la largeur et son icône de
+           calendrier ne tombe plus en face de celle de la ligne du dessus.
+           Les deux sont exclusives — une plage de dates suppose une arrivée libre, un
+           itinéraire suppose une arrivée fixée — donc jamais plus d'une cellule ici. -->
+      <div v-if="hasSecondDate" class="grid grid-cols-2 border-t border-slate-100 md:contents">
+        <div class="px-3 py-2 md:min-w-[8.5rem] md:flex-1 md:border-l md:border-slate-100">
           <span class="block text-xs font-medium text-rail-soft">
             {{ dateKind === 'roundtrip' ? 'Retour' : 'Au' }}
           </span>
@@ -266,8 +297,8 @@ function submit() {
         </div>
       </div>
 
-      <div v-if="mode === 'route'" class="grid grid-cols-2 border-t border-slate-100">
-        <div class="relative px-3 py-2">
+      <div v-if="mode === 'route'" class="grid grid-cols-2 border-t border-slate-100 md:contents">
+        <div class="relative px-3 py-2 md:min-w-[9rem] md:flex-1 md:border-l md:border-slate-100">
           <label for="tq-stops" class="block text-xs font-medium text-rail-soft">Correspondances</label>
           <select
             id="tq-stops"
@@ -287,27 +318,36 @@ function submit() {
       </div>
     </div>
 
-    <!-- Ce que la recherche va faire, en clair : le mode n'est plus nommé, il doit être dit. -->
-    <p
-      v-if="sameStation"
-      data-test="same-station"
-      class="mt-2 px-0.5 text-xs leading-snug font-medium text-amber-600"
-    >
-      Départ et arrivée sont la même ville : choisissez-en une autre, ou videz « Vers » pour
-      voir toutes les destinations.
-    </p>
-    <p v-else data-test="search-hint" class="mt-2 px-0.5 text-xs leading-snug text-rail-soft">
-      {{ hint }}
-    </p>
+    <!--
+      Les deux textes d'aide. Empilés en colonne, sur une seule ligne sur la barre : ils y
+      tiennent côte à côte et coûtent alors 18 px au lieu de 63. Aucun des deux n'est
+      supprimé pour autant — le premier est le seul endroit où le mode de recherche est
+      dit, puisqu'il n'est plus nommé nulle part, et le second explique pourquoi le
+      sélecteur de date s'arrête.
+    -->
+    <div class="order-3 flex flex-col gap-1 px-0.5 md:order-4 md:w-full md:flex-row md:flex-wrap md:items-baseline md:gap-x-2">
+      <!-- Ce que la recherche va faire, en clair. -->
+      <p
+        v-if="sameStation"
+        data-test="same-station"
+        class="text-xs leading-snug font-medium text-amber-600"
+      >
+        Départ et arrivée sont la même ville : choisissez-en une autre, ou videz « Vers » pour
+        voir toutes les destinations.
+      </p>
+      <p v-else data-test="search-hint" class="text-xs leading-snug text-rail-soft">
+        {{ hint }}
+      </p>
 
-    <!-- La règle des 30 jours vient de l'abonnement, pas de l'application : sans elle, un
-         champ date qui refuse le mois prochain passe pour un bug. -->
-    <p class="mt-1 px-0.5 text-[11px] leading-snug text-rail-soft/80">
-      Les places à 0 € ouvrent {{ BOOKING_WINDOW_DAYS }} jours avant le départ : réservable
-      jusqu'au {{ humanDate(lastBookable) }}.
-    </p>
+      <!-- La règle des 30 jours vient de l'abonnement, pas de l'application : sans elle, un
+           champ date qui refuse le mois prochain passe pour un bug. -->
+      <p class="text-[11px] leading-snug text-rail-soft/80">
+        Les places à 0 € ouvrent {{ BOOKING_WINDOW_DAYS }} jours avant le départ : réservable
+        jusqu'au {{ humanDate(lastBookable) }}.
+      </p>
+    </div>
 
-    <p v-if="error" class="mt-2 px-0.5 text-sm text-red-600">{{ error }}</p>
+    <p v-if="error" class="order-4 px-0.5 text-sm text-red-600 md:order-5 md:w-full">{{ error }}</p>
 
     <!-- Le bouton se désactive sur deux gares identiques : l'explication est juste
          au-dessus, inutile de laisser cliquer pour la répéter en rouge. La validation
@@ -317,7 +357,7 @@ function submit() {
       type="submit"
       :disabled="loading || sameStation"
       :class="[
-        'mt-2.5 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-2.5 font-semibold text-white transition',
+        'order-5 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-2.5 font-semibold text-white transition md:order-3 md:w-auto md:shrink-0',
         // Grisé sur une saisie invalide, mais toujours accent pendant le chargement :
         // une recherche en cours n'est pas une erreur.
         sameStation ? 'cursor-not-allowed bg-slate-300' : 'bg-accent hover:bg-accent-strong disabled:opacity-70',
diff --git a/app/pages/app.vue b/app/pages/app.vue
index ea12357..57bdec2 100644
--- a/app/pages/app.vue
+++ b/app/pages/app.vue
@@ -2,7 +2,7 @@
 import type { ReturnDatesResult } from '~~/shared/types'
 import { prettyLabel } from '~~/shared/stations'
 
-const { origin, date, dateTo, mode, result, pending, error, search, refresh } = useSearch()
+const { origin, date, dateTo, mode, hasQuery, result, pending, error, search, refresh } = useSearch()
 const itinerary = useItinerary()
 const { cache: returnsCache, loading: returnsLoading, load: loadReturns } = useReturns()
 const hovered = ref<string | null>(null)
@@ -47,17 +47,66 @@ const returnsByDest = computed(() => {
  */
 const isNarrow = ref(false)
 const formOpen = ref(true)
+
+/**
+ * Sur un écran étroit, carte et liste ne tiennent pas ensemble : la carte réduite au
+ * tiers de la hauteur ne séparait pas les marqueurs franciliens, et les trois
+ * destinations qui restaient visibles ne faisaient pas une liste. On en montre donc
+ * une seule à la fois, au choix.
+ */
+const mobileView = ref<'map' | 'list'>('list')
+const MOBILE_VIEWS = [
+  { key: 'map', label: 'Carte', icon: 'M12 21c4-4.6 6-7.8 6-10.5a6 6 0 1 0-12 0C6 13.2 8 16.4 12 21Zm0-9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z' },
+  { key: 'list', label: 'Liste', icon: 'M4 6h16M4 12h16M4 18h16' },
+] as const
+
 onMounted(() => {
   const mq = window.matchMedia('(max-width: 767px)')
   isNarrow.value = mq.matches
   mq.addEventListener('change', (e) => (isNarrow.value = e.matches))
+  // Sans recherche en cours, la liste n'a qu'une phrase à afficher : la carte fait un
+  // meilleur écran d'accueil. Avec une recherche — lien partagé, retour navigateur —
+  // les résultats arrivent, autant ouvrir là où ils vont s'afficher.
+  mobileView.value = hasQuery.value ? 'list' : 'map'
 })
-watch([result, () => itinerary.route.value], () => {
-  if (isNarrow.value) formOpen.value = false
+// Ne replier que sur une recherche qui a effectivement abouti : `useItinerary` étant
+// `server: false`, son résultat passe de `undefined` à `null` au montage, et ce seul
+// changement suffisait à replier un formulaire qui n'avait encore rien à résumer.
+watch([result, () => itinerary.route.value], ([found, foundRoute]) => {
+  if (isNarrow.value && (found || foundRoute)) formOpen.value = false
 })
 function onSearch(params: Parameters<typeof search>[0]) {
   search(params)
-  if (isNarrow.value) formOpen.value = false
+  if (!isNarrow.value) return
+  formOpen.value = false
+  // Vers la liste : c'est elle qui porte le squelette de chargement, le message d'erreur
+  // et son bouton de reprise, le décompte, le tri et les filtres. Rester sur la carte
+  // laisserait la recherche sans retour visible pendant qu'elle tourne.
+  mobileView.value = 'list'
+}
+
+/** Sur desktop les deux affichages cohabitent ; sur écran étroit la bascule tranche. */
+const showList = computed(() => !isNarrow.value || mobileView.value === 'list')
+/**
+ * Carte recouverte par la liste : elle reste dimensionnée mais sort du parcours clavier
+ * et de l'arbre d'accessibilité, sinon ses marqueurs — qui sont des boutons — restent
+ * atteignables derrière la liste qui les cache.
+ */
+const mapCovered = computed(() => isNarrow.value && showList.value)
+
+/**
+ * Ouvrir une fiche depuis la liste, sur écran étroit, suppose de passer sur la carte :
+ * c'est là qu'elle s'ancre, et un appui sans effet visible se lit comme une panne.
+ * Et toujours sélectionner, jamais désélectionner — le second appui d'une bascule n'a
+ * pas de sens quand on n'a pas vu le résultat du premier.
+ */
+function onSelectDestination(label: string) {
+  if (isNarrow.value && mobileView.value === 'list') {
+    selectedDestination.value = label
+    mobileView.value = 'map'
+    return
+  }
+  selectedDestination.value = selectedDestination.value === label ? null : label
 }
 
 /** Résumé de la recherche en cours, affiché à la place du formulaire replié. */
@@ -75,6 +124,12 @@ const summary = computed(() => {
   return `${where} · ${when}`
 })
 
+/**
+ * État replié, dérivé plutôt que déclaré : il exige un résumé à afficher, ce qui garantit
+ * qu'un des deux affichages est toujours visible et jamais une colonne de recherche vide.
+ */
+const collapsed = computed(() => isNarrow.value && !formOpen.value && Boolean(summary.value))
+
 async function onShowReturns(destLabel: string) {
   if (!result.value) return
   await loadReturns(destLabel, result.value.origin.label, result.value.date)
@@ -119,12 +174,66 @@ useHead({
         <img src="/logo-mark.png" alt="Trainquillou" class="h-8 w-8 object-contain">
         Trainquillou
       </NuxtLink>
+      <GithubLink class="text-rail-soft transition hover:text-rail" />
     </header>
 
-    <!-- Corps : sidebar + carte (empilés sur mobile, côte à côte sur desktop) -->
-    <div class="flex min-h-0 flex-1 flex-col md:flex-row">
-      <!-- Carte : en haut sur mobile, à droite sur desktop -->
-      <div class="relative order-1 h-[38vh] shrink-0 md:order-2 md:h-auto md:flex-1">
+    <!--
+      Trois blocs, deux dispositions. Sur écran étroit, la recherche en haut puis carte et
+      liste dans une seule et même cellule, superposées, la bascule flottante du bas
+      décidant laquelle est devant. Superposées et non alternées : la carte reste toujours
+      dimensionnée, ce qui compte parce que son cadrage se calcule sur la taille du
+      conteneur — masquée en `display:none` pendant qu'une recherche aboutit, elle
+      cadrerait sur 0 × 0 et reviendrait sur une vue fausse.
+      Sur desktop : la recherche en barre au-dessus des deux colonnes, résultats à gauche,
+      carte à droite. Elle traversait avant la seule colonne de gauche, où elle occupait
+      309 px de haut — davantage que la liste sous elle.
+
+      Les trois blocs portent un `col-start-1` explicite. Sans lui, deux éléments qui
+      demandent la même ligne sans préciser leur colonne ne se superposent pas : le
+      placement automatique crée une colonne implicite pour le second, et carte et liste
+      se retrouvaient côte à côte, chacune sur la moitié d'un écran de téléphone.
+
+      Et un empilement explicite, puisque ces blocs se recouvrent : carte à 0, résultats
+      à 1, suggestions de gare à 10. Le `z-0` de la carte n'est pas décoratif, il lui donne
+      un contexte d'empilement : sans lui ses propres calques — l'attribution MapLibre monte
+      à 2, la fiche de destination à 20 — remontent dans le contexte parent et repassent
+      par-dessus la liste censée les cacher.
+    -->
+    <div class="grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)] md:grid-cols-[24rem_minmax(0,1fr)]">
+      <!-- Recherche. `relative z-10` : les suggestions de gare doivent passer par-dessus
+           la carte et la liste, ses voisines immédiates. -->
+      <div class="relative z-10 col-start-1 row-start-1 border-b border-slate-100 bg-white p-3 md:col-span-2 md:border-slate-200">
+        <!-- Formulaire replié : résumé cliquable, écran étroit uniquement -->
+        <button
+          v-if="collapsed"
+          type="button"
+          data-test="expand-search"
+          class="flex w-full items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-left transition hover:border-accent"
+          @click="formOpen = true"
+        >
+          <span class="min-w-0 flex-1 truncate text-sm font-semibold text-rail">{{ summary }}</span>
+          <span class="shrink-0 text-xs font-medium text-accent-strong">Modifier</span>
+        </button>
+
+        <SearchBar
+          v-show="!collapsed"
+          :initial-origin="origin"
+          :initial-destination="itinerary.to.value"
+          :initial-date="date"
+          :initial-date-to="dateTo"
+          :initial-stops="itinerary.stops.value"
+          :initial-mode="mode"
+          :loading="searchLoading"
+          @search="onSearch"
+        />
+      </div>
+
+      <!-- Carte. Toujours montée et dimensionnée ; sur mobile la liste passe par-dessus. -->
+      <div
+        class="relative z-0 col-start-1 row-start-2 md:col-start-2"
+        :aria-hidden="mapCovered || undefined"
+        :inert="mapCovered || undefined"
+      >
         <MapView
           class="absolute inset-0"
           :result="isRoute ? null : result"
@@ -140,35 +249,19 @@ useHead({
         />
       </div>
 
-      <!-- Panneau latéral : recherche + résultats -->
-      <aside class="order-2 flex min-h-0 flex-1 flex-col bg-white md:order-1 md:w-[24rem] md:flex-none md:border-r md:border-slate-200">
-        <div class="shrink-0 border-b border-slate-100 p-3">
-          <!-- Formulaire replié : résumé cliquable, écran étroit uniquement -->
-          <button
-            v-if="isNarrow && !formOpen && summary"
-            type="button"
-            data-test="expand-search"
-            class="flex w-full items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-left transition hover:border-accent"
-            @click="formOpen = true"
-          >
-            <span class="min-w-0 flex-1 truncate text-sm font-semibold text-rail">{{ summary }}</span>
-            <span class="shrink-0 text-xs font-medium text-accent-strong">Modifier</span>
-          </button>
-
-          <SearchBar
-            v-show="formOpen || !isNarrow"
-            :initial-origin="origin"
-            :initial-destination="itinerary.to.value"
-            :initial-date="date"
-            :initial-date-to="dateTo"
-            :initial-stops="itinerary.stops.value"
-            :initial-mode="mode"
-            :loading="searchLoading"
-            @search="onSearch"
-          />
-        </div>
+      <!--
+        Résultats. Même cellule que la carte sur mobile, donc positionnés eux aussi : un
+        bloc resté dans le flux passe sous n'importe quel frère positionné, quel que soit
+        l'ordre du DOM.
 
-        <div class="min-h-0 flex-1 overflow-hidden px-3 py-2">
+        En vue carte il ne reste que la ligne d'attribution, et le reste laisse passer les
+        gestes vers la carte.
+      -->
+      <aside
+        class="relative z-[1] col-start-1 row-start-2 flex min-h-0 flex-col md:border-r md:border-slate-200"
+        :class="showList ? 'bg-white' : 'pointer-events-none justify-end'"
+      >
+        <div v-show="showList" class="pointer-events-auto min-h-0 flex-1 overflow-hidden px-3 py-2">
           <ClientOnly v-if="isRoute">
             <RoutePanel
               :route="itinerary.route.value"
@@ -189,18 +282,54 @@ useHead({
             :pending="pending"
             :error="error"
             :selected="selectedDestination"
-            @select="selectedDestination = selectedDestination === $event ? null : $event"
+            @select="onSelectDestination"
             @update:visible="visibleLabels = $event"
             @hover="hovered = $event"
             @retry="refresh"
           />
         </div>
 
-        <p class="shrink-0 border-t border-slate-100 px-3 py-2 text-[11px] text-rail-soft/80">
-          Données <a class="underline" href="https://data.sncf.com/explore/dataset/tgvmax/" target="_blank" rel="noopener">open data SNCF</a> ·
-          fond de carte <a class="underline" href="https://openfreemap.org" target="_blank" rel="noopener">OpenFreeMap</a>, données
-          <a class="underline" href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a>
-        </p>
+        <!-- Pile du bas : la bascule flotte, l'attribution reste dans le flux. Le `relative`
+             est là pour que la première s'ancre sur la seconde. -->
+        <div class="relative shrink-0">
+          <!--
+            Bascule carte / liste, écran étroit uniquement. Flottante, donc sans coût sur la
+            hauteur utile — ce que la remontée de la recherche cherchait justement à gagner —
+            et au pouce plutôt qu'en haut de l'écran. `bottom-full` la cale juste au-dessus
+            de l'attribution au lieu de la lui faire recouvrir.
+          -->
+          <div class="pointer-events-auto absolute bottom-full left-1/2 mb-3 -translate-x-1/2 md:hidden">
+            <div
+              class="flex rounded-full border border-slate-200 bg-white/95 p-1 shadow-lg backdrop-blur-sm"
+              role="group"
+              aria-label="Affichage des résultats"
+            >
+              <button
+                v-for="v in MOBILE_VIEWS"
+                :key="v.key"
+                type="button"
+                :data-test="`view-${v.key}`"
+                :aria-pressed="mobileView === v.key"
+                class="flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition"
+                :class="mobileView === v.key ? 'bg-rail text-white' : 'text-rail-soft'"
+                @click="mobileView = v.key"
+              >
+                <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path :d="v.icon" />
+                </svg>
+                {{ v.label }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Visible dans les deux affichages, en filet translucide au-dessus de la carte
+               quand c'est elle qui est devant : elle utilise les mêmes données. -->
+          <p class="pointer-events-auto border-t border-slate-100 bg-white/90 px-3 py-2 text-[11px] text-rail-soft/80 backdrop-blur-sm md:bg-white">
+            Données <a class="underline" href="https://data.sncf.com/explore/dataset/tgvmax/" target="_blank" rel="noopener">open data SNCF</a> ·
+            fond de carte <a class="underline" href="https://openfreemap.org" target="_blank" rel="noopener">OpenFreeMap</a>, données
+            <a class="underline" href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a>
+          </p>
+        </div>
       </aside>
     </div>
   </div>
diff --git a/app/pages/depuis/[slug].vue b/app/pages/depuis/[slug].vue
index 70658ca..d03585c 100644
--- a/app/pages/depuis/[slug].vue
+++ b/app/pages/depuis/[slug].vue
@@ -67,9 +67,12 @@ useHead(() => ({
           <img src="/logo-mark.png" alt="Trainquillou" class="h-8 w-8 object-contain">
           Trainquillou
         </NuxtLink>
-        <NuxtLink to="/app" class="text-sm font-medium text-accent-strong hover:underline">
-          Ouvrir l'application →
-        </NuxtLink>
+        <div class="flex items-center gap-4">
+          <GithubLink class="text-rail-soft transition hover:text-rail" />
+          <NuxtLink to="/app" class="text-sm font-medium text-accent-strong hover:underline">
+            Ouvrir l'application →
+          </NuxtLink>
+        </div>
       </div>
     </header>
 
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 96e1267..3e5fc3d 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -114,8 +114,12 @@ useHead({
 
 <template>
   <div class="min-h-[100dvh] bg-cream text-rail">
-    <!-- HERO -->
-    <section class="relative h-[88vh] min-h-[34rem] w-full overflow-hidden">
+    <!--
+      HERO. Hauteur plancher plutôt que fixe, et pas de `overflow-hidden` : la bannière doit
+      grandir avec son contenu — sur un petit écran le formulaire dépassait, et la liste de
+      suggestions du champ gare se faisait couper au bord du bloc.
+    -->
+    <section class="relative flex min-h-[88dvh] w-full flex-col">
       <!-- Image de fond -->
       <img
         src="/hero.jpg"
@@ -135,18 +139,21 @@ useHead({
           <img src="/logo-mark-white.png" alt="Trainquillou" class="h-9 w-9 object-contain">
           Trainquillou
         </span>
-        <a
-          href="https://data.sncf.com/explore/dataset/tgvmax/"
-          target="_blank"
-          rel="noopener"
-          class="hidden text-sm font-medium text-white/80 transition hover:text-white sm:block"
-        >
-          Open data SNCF
-        </a>
+        <div class="flex items-center gap-5 text-sm font-medium text-white/80">
+          <a
+            href="https://data.sncf.com/explore/dataset/tgvmax/"
+            target="_blank"
+            rel="noopener"
+            class="hidden transition hover:text-white sm:block"
+          >
+            Open data SNCF
+          </a>
+          <GithubLink label="GitHub" class="transition hover:text-white" />
+        </div>
       </header>
 
       <!-- Pitch + CTA -->
-      <div class="relative z-10 flex h-[calc(100%-4rem)] items-center px-5 sm:px-8">
+      <div class="relative z-10 flex flex-1 items-center px-5 pb-12 sm:px-8">
         <div class="max-w-xl">
           <p class="mb-4 inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white ring-1 ring-white/25 backdrop-blur">
             <span class="h-1.5 w-1.5 rounded-full bg-coral" />
@@ -160,20 +167,17 @@ useHead({
             Trouvez où partir avec votre abonnement TGVmax depuis n'importe quelle gare,
             à n'importe quelle date. Open data, open source, sans pub.
           </p>
-          <div class="mt-7 flex flex-wrap items-center gap-3">
-            <NuxtLink
-              to="/app"
-              class="rounded-xl bg-coral px-6 py-3 text-base font-semibold text-white shadow-lg shadow-coral/40 transition hover:-translate-y-0.5 hover:bg-coral-strong"
-            >
-              Ouvrir l'application →
-            </NuxtLink>
-            <NuxtLink
-              to="/app?mode=route"
-              class="rounded-xl bg-white/10 px-6 py-3 text-base font-semibold text-white ring-1 ring-white/30 backdrop-blur transition hover:bg-white/20"
-            >
-              Composer un itinéraire
-            </NuxtLink>
-          </div>
+          <!-- La recherche elle-même sert d'accroche : on part d'une gare et d'une date,
+               pas d'un bouton qui promet un formulaire. Les autres modes restent atteignables
+               en dessous, ce qui préserve le maillage vers /app. -->
+          <HeroSearch class="mt-7" />
+          <p class="mt-3 text-sm text-white/75">
+            Ou
+            <NuxtLink to="/app?mode=to" class="font-medium text-white underline decoration-white/40 underline-offset-2 transition hover:decoration-white">chercher à l'envers</NuxtLink>,
+            <NuxtLink to="/app?mode=roundtrip" class="font-medium text-white underline decoration-white/40 underline-offset-2 transition hover:decoration-white">un aller-retour</NuxtLink>,
+            ou
+            <NuxtLink to="/app?mode=route" class="font-medium text-white underline decoration-white/40 underline-offset-2 transition hover:decoration-white">composer un itinéraire</NuxtLink>.
+          </p>
         </div>
       </div>
     </section>
@@ -236,7 +240,10 @@ useHead({
         </div>
         <div class="rounded-2xl border border-slate-200 bg-white p-6 border-t-4 border-t-sun">
           <h3 class="font-semibold text-rail">Open source</h3>
-          <p class="mt-1 text-sm text-rail-soft">Code ouvert sous licence AGPL-3.0, sans tracking ni publicité.</p>
+          <p class="mt-1 text-sm text-rail-soft">
+            Code ouvert sous licence AGPL-3.0, sans tracking ni publicité.
+            <GithubLink label="Voir le dépôt" class="font-medium text-accent-strong hover:underline" />
+          </p>
         </div>
       </div>
 
@@ -296,6 +303,7 @@ useHead({
           · licence AGPL-3.0
         </p>
         <p class="text-rail-soft/70">Non affilié à la SNCF. La réservation des places TGVmax se fait sur SNCF Connect.</p>
+        <GithubLink label="Code source sur GitHub" class="mt-1 font-medium text-rail transition hover:text-accent-strong" />
       </div>
     </footer>
   </div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6ae31d8..ab9fbe7 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -32,6 +32,13 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
   css: ['~/assets/css/main.css'],
+
+  // 3000 est le port par défaut de trop de choses — dont Langfuse, qui tourne en
+  // conteneur sur la machine de développement. Sans port fixe, Nuxt en choisit un
+  // libre au hasard et les URL de test changent d'une session à l'autre.
+  // Surchargeable par `PORT` ou `pnpm dev --port`. Ne concerne pas la production,
+  // dont le port est fixé par infra/compose.yml.
+  devServer: { port: 3001 },
   vite: {
     plugins: [tailwindcss()],
     optimizeDeps: {