From a9befb25ab964202bff4db7faafc6c3c9eeece1c Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Sat, 3 Oct 2026 09:20:16 +0200
Subject: [PATCH] =?UTF-8?q?fix(vue-fiches):=20passe=20/autofeedback=20?=
 =?UTF-8?q?=E2=80=94=20=C3=89chap=20dans=20un=20champ=20garde=20le=20broui?=
 =?UTF-8?q?llon,=20titre=20d'onglet=20=3D=20fiche=20ouverte,=20contrastes?=
 =?UTF-8?q?=20et=20mini-carte=20d=C3=A9corative=20de=20FicheDetail?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AGNSEFZdoKvbdsGyfSnu5S
---
 components/FicheDetail.vue | 27 ++++++++++++++-------------
 components/VueFiches.vue   | 13 ++++++++++---
 pages/agences.vue          |  3 ++-
 pages/index.vue            |  3 ++-
 4 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/components/FicheDetail.vue b/components/FicheDetail.vue
index d88007f..32f33ed 100644
--- a/components/FicheDetail.vue
+++ b/components/FicheDetail.vue
@@ -35,14 +35,14 @@
         </div>
 
         <!-- Méta : échelle + ville -->
-        <div class="flex flex-wrap items-center gap-2 text-sm mb-3" style="color: var(--nav-text-muted);">
+        <div class="flex flex-wrap items-center gap-2 text-sm mb-3" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">
           <span
             v-if="org.echelle"
             class="px-2 py-0.5 rounded-full text-xs font-medium"
-            style="background: var(--nav-primary); color: var(--nav-text-on-primary);"
+            style="background: var(--nav-primary-solid); color: var(--nav-text-on-primary);"
           >{{ org.echelle }}</span>
-          <span v-if="org.territoire && org.territoire !== 'Métropole'" class="text-xs" style="color: var(--nav-text-muted);">{{ org.territoire }}</span>
-          <span v-if="org.localisation_ville" style="color: var(--nav-text-muted);">{{ org.localisation_ville }}</span>
+          <span v-if="org.territoire && org.territoire !== 'Métropole'" class="text-xs" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">{{ org.territoire }}</span>
+          <span v-if="org.localisation_ville" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">{{ org.localisation_ville }}</span>
         </div>
 
         <!-- Tags fonction -->
@@ -73,7 +73,7 @@
         <div class="flex-1 min-w-0">
           <!-- Description soumise par le contributeur -->
           <div v-if="descriptionUser" class="mb-4">
-            <p class="text-sm leading-relaxed" style="color: var(--nav-text-muted);">Description communauté</p>
+            <p class="text-sm leading-relaxed" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">Description communauté</p>
             <p class="mt-1 leading-relaxed" style="color: var(--nav-text);">{{ descriptionUser }}</p>
           </div>
 
@@ -82,7 +82,7 @@
 
           <!-- Description enrichie IA -->
           <div v-if="descriptionEnrichie" class="mb-4">
-            <p class="text-sm leading-relaxed flex items-center gap-1.5" style="color: var(--nav-text-muted);">
+            <p class="text-sm leading-relaxed flex items-center gap-1.5" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">
               <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                 <path d="M12 2L2 7l10 5 10-5-10-5z"/>
                 <path d="M2 17l10 5 10-5"/>
@@ -100,7 +100,7 @@
 
           <!-- Points clés -->
           <div v-if="pointsCles.length" class="mt-4">
-            <p class="text-sm font-medium mb-2" style="color: var(--nav-text-muted);">Points clés</p>
+            <p class="text-sm font-medium mb-2" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">Points clés</p>
             <ul class="space-y-1">
               <li
                 v-for="(point, i) in pointsCles"
@@ -123,11 +123,11 @@
           style="height: 180px; border: 1px solid var(--nav-bg-alt);"
         >
           <ClientOnly>
-            <div ref="mapContainer" class="w-full h-full"></div>
+            <div ref="mapContainer" class="w-full h-full" role="img" :aria-label="`Carte : ${org.nom}${org.localisation_ville ? `, ${org.localisation_ville}` : ''}`"></div>
             <template #fallback>
               <div
                 class="w-full h-full flex items-center justify-center text-xs"
-                style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
+                style="background: var(--nav-bg-alt); color: color-mix(in srgb, var(--nav-text) 78%, transparent);"
               >Carte…</div>
             </template>
           </ClientOnly>
@@ -153,7 +153,7 @@
 
       <Transition name="report-form">
         <div v-if="reportOpen" class="report-panel">
-          <p class="text-xs mb-3" style="color: var(--nav-text-muted);">
+          <p class="text-xs mb-3" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent);">
             Tes suggestions seront transmises à l'équipe AEP par email.
           </p>
           <div class="flex flex-col gap-3">
@@ -184,7 +184,7 @@
             </div>
             <p v-if="reportError" class="text-xs" style="color: #e53e3e;">{{ reportError }}</p>
             <p v-if="reportSuccess" class="text-xs" style="color: #38a169;">{{ reportSuccess }}</p>
-            <p class="text-xs" style="color: var(--nav-text-muted); opacity: 0.6;">
+            <p class="text-xs" style="color: color-mix(in srgb, var(--nav-text) 78%, transparent); opacity: 0.6;">
               {{ reportMessage.length }}/500
             </p>
           </div>
@@ -331,7 +331,8 @@ async function initMap(el: HTMLElement) {
     iconAnchor: [7, 7],
   })
 
-  L.marker([lat, lng], { icon }).addTo(map)
+  // Épingle décorative : ni clic ni clavier (la mini-carte est une image, nommée par son conteneur)
+  L.marker([lat, lng], { icon, interactive: false, keyboard: false }).addTo(map)
 }
 </script>
 
@@ -342,7 +343,7 @@ async function initMap(el: HTMLElement) {
   align-items: center;
   gap: 6px;
   font-size: 0.78rem;
-  color: var(--nav-text-muted);
+  color: color-mix(in srgb, var(--nav-text) 78%, transparent);
   background: none;
   border: none;
   cursor: pointer;
diff --git a/components/VueFiches.vue b/components/VueFiches.vue
index e07f55c..fc6cf51 100644
--- a/components/VueFiches.vue
+++ b/components/VueFiches.vue
@@ -459,11 +459,18 @@ watch(() => props.vf.ficheId, (id, avant) => {
 })
 
 function clavierDetail(e: KeyboardEvent) {
-  if (e.key === 'Escape') { e.preventDefault(); props.vf.fermerFiche(); return }
+  const t = e.target as HTMLElement
+  const champ = !!t.closest('input, textarea, select, [contenteditable="true"]')
+  if (e.key === 'Escape') {
+    e.preventDefault()
+    // Échap dans un champ (commentaire, signalement) le quitte d'abord : un brouillon ne se perd pas d'une touche
+    if (champ) { detail.value?.focus({ preventScroll: true }); return }
+    props.vf.fermerFiche()
+    return
+  }
   if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return
   if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return
-  const t = e.target as HTMLElement
-  if (t.closest('input, textarea, select, [contenteditable="true"]')) return
+  if (champ) return
   e.preventDefault()
   if (e.key === 'ArrowLeft') props.vf.fichePrecedente()
   else props.vf.ficheSuivante()
diff --git a/pages/agences.vue b/pages/agences.vue
index e807ec6..bfc83e3 100644
--- a/pages/agences.vue
+++ b/pages/agences.vue
@@ -250,7 +250,8 @@ onMounted(() => {
   } catch {}
 })
 
-useHead({ title: "AEP - Réseaux de bifurcation architecturale" })
+// Une fiche ouverte donne son nom à l'onglet (les données arrivent après le rendu serveur ici)
+useHead({ title: computed(() => (vf.ficheOuverte ? `${vf.ficheOuverte.nom} — AEP` : 'AEP - Réseaux de bifurcation architecturale')) })
 </script>
 
 <style scoped>
diff --git a/pages/index.vue b/pages/index.vue
index 0236663..adcc1d1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -249,7 +249,8 @@ onMounted(() => {
   } catch {}
 })
 
-useHead({ title: 'AEP — Cartographie de l\'écologie politique architecturale' })
+// Un lien partagé avec fiche= porte le nom de la fiche (onglet, aperçu de lien), dès le rendu serveur
+useHead({ title: computed(() => (vf.ficheOuverte ? `${vf.ficheOuverte.nom} — AEP` : 'AEP — Cartographie de l\'écologie politique architecturale')) })
 </script>
 
 <style scoped>