From 0378f2bd728587a20bf1909bf367463512fbd7f4 Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Thu, 7 May 2026 00:48:56 +0200
Subject: [PATCH] =?UTF-8?q?fix(taff):=203=20corrections=20UI=20=E2=80=94?=
 =?UTF-8?q?=20modal=20z-index,=20axes=20flex,=20cards=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Modal z-index 1501→10001 (au-dessus du header 9999)
- Axes modal: grid→flex avec flex-basis 130px (plus de wrap PRATIQUES PRO)
- Cartes: layout restructuré — tag / nom / axes / desc 3 lignes / footer séparé

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/PlatformeTaffCard.vue | 264 +++++++++++++++++++++----------
 pages/trouver-du-taf.vue         |   8 +-
 2 files changed, 181 insertions(+), 91 deletions(-)

diff --git a/components/PlatformeTaffCard.vue b/components/PlatformeTaffCard.vue
index cefc94a..88c0f10 100644
--- a/components/PlatformeTaffCard.vue
+++ b/components/PlatformeTaffCard.vue
@@ -1,41 +1,26 @@
 <template>
   <button
     type="button"
-    class="w-full text-left rounded-xl border transition-all duration-200 hover:shadow-md focus-visible:outline-none"
-    :style="`
-      background: var(--nav-surface);
-      border-color: ${tagBorderColor};
-      border-left: 4px solid ${tagAccentColor};
-    `"
+    class="taff-card"
+    :style="`border-left-color: ${tagConfig.accent};`"
     @click="$emit('open', plateforme)"
   >
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-2 px-4 pt-4 pb-2">
-      <div class="flex-1 min-w-0">
-        <div class="flex items-center gap-2 flex-wrap mb-0.5">
-          <span
-            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold shrink-0"
-            :style="`background: ${tagBgColor}; color: ${tagTextColor};`"
-          >
-            <span>{{ tagEmoji }}</span>
-            <span>{{ tagLabel }}</span>
-          </span>
-          <span
-            v-if="plateforme.type === 'appel-offre-public'"
-            class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium shrink-0"
-            style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
-          >AO public</span>
-        </div>
-        <h3 class="font-semibold text-base leading-snug" style="color: var(--nav-text);">
-          {{ plateforme.nom }}
-        </h3>
+    <!-- Ligne 1 : tag + badge AO + lien -->
+    <div class="taff-card-top">
+      <div class="flex items-center gap-2 flex-wrap">
+        <span class="taff-tag" :style="`background: ${tagConfig.bg}; color: ${tagConfig.text};`">
+          {{ tagConfig.emoji }} {{ tagConfig.label }}
+        </span>
+        <span
+          v-if="plateforme.type === 'appel-offre-public'"
+          class="taff-badge-ao"
+        >AO public</span>
       </div>
       <a
         :href="plateforme.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="shrink-0 flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-opacity hover:opacity-70"
-        style="background: var(--nav-bg-alt); color: var(--nav-text);"
+        class="taff-visit-btn"
         @click.stop
         title="Visiter le site"
       >
@@ -48,42 +33,35 @@
       </a>
     </div>
 
-    <!-- Description courte -->
-    <p class="px-4 pb-3 text-sm leading-relaxed line-clamp-2" style="color: var(--nav-text-muted);">
-      {{ plateforme.description_courte }}
-    </p>
+    <!-- Ligne 2 : nom -->
+    <div class="taff-card-name">{{ plateforme.nom }}</div>
 
-    <!-- Scoring axes -->
-    <div class="px-4 pb-3 flex items-center gap-2 flex-wrap">
-      <template v-for="axe in axes" :key="axe.id">
+    <!-- Ligne 3 : axes (icône + score, compacts) -->
+    <div class="taff-card-axes">
+      <template v-for="axe in AXES" :key="axe.id">
         <span
           v-if="plateforme.scoring[axe.id] !== null"
-          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium"
+          class="taff-axe-chip"
           :style="`background: ${axeScoreBg(plateforme.scoring[axe.id])}; color: ${axeScoreText(plateforme.scoring[axe.id])};`"
           :title="axe.label"
-        >
-          <span>{{ axe.icon }}</span>
-          <span>{{ plateforme.scoring[axe.id] }}</span>
-        </span>
+        >{{ axe.icon }} {{ plateforme.scoring[axe.id] }}</span>
       </template>
     </div>
 
-    <!-- Footer: secteurs + coût -->
-    <div class="px-4 pb-3 flex items-center gap-2 flex-wrap">
-      <span
-        v-for="s in plateforme.secteurs_servis.slice(0, 3)"
-        :key="s"
-        class="inline-block px-2 py-0.5 rounded-full text-xs"
-        style="background: var(--nav-bg); color: var(--nav-text-muted); border: 1px solid var(--nav-bg-alt);"
-      >{{ secteurLabel(s) }}</span>
-      <span
-        v-if="plateforme.secteurs_servis.length > 3"
-        class="text-xs"
-        style="color: var(--nav-text-muted);"
-      >+{{ plateforme.secteurs_servis.length - 3 }}</span>
-      <span class="ml-auto text-xs font-medium" style="color: var(--nav-text-muted);">
-        {{ coutLabel(plateforme.cout_entree) }}
-      </span>
+    <!-- Ligne 4 : description (3 lignes max, lisible) -->
+    <p class="taff-card-desc">{{ plateforme.description_courte }}</p>
+
+    <!-- Ligne 5 : secteurs + coût -->
+    <div class="taff-card-footer">
+      <div class="flex items-center gap-1.5 flex-wrap">
+        <span
+          v-for="s in plateforme.secteurs_servis.slice(0, 3)"
+          :key="s"
+          class="taff-secteur-chip"
+        >{{ SECTEUR_LABELS[s] ?? s }}</span>
+        <span v-if="plateforme.secteurs_servis.length > 3" class="taff-more">+{{ plateforme.secteurs_servis.length - 3 }}</span>
+      </div>
+      <span class="taff-cout">{{ COUT_LABELS[plateforme.cout_entree] ?? plateforme.cout_entree }}</span>
     </div>
   </button>
 </template>
@@ -94,27 +72,21 @@ import type { PlateformeTaff } from '~/types/plateforme-taff'
 const props = defineProps<{ plateforme: PlateformeTaff }>()
 defineEmits<{ open: [p: PlateformeTaff] }>()
 
-const axes = [
+const AXES = [
   { id: 'remuneration' as const, icon: '🪙', label: 'Rémunération' },
   { id: 'transparence' as const, icon: '🔍', label: 'Transparence' },
-  { id: 'pratiques' as const, icon: '⚖️', label: 'Pratiques pro' },
-  { id: 'ecologie' as const, icon: '🌿', label: 'Écologie' },
-  { id: 'matching' as const, icon: '🎯', label: 'Matching' },
+  { id: 'pratiques'    as const, icon: '⚖️', label: 'Pratiques pro' },
+  { id: 'ecologie'     as const, icon: '🌿', label: 'Écologie' },
+  { id: 'matching'     as const, icon: '🎯', label: 'Matching' },
 ]
 
 const TAG_CONFIG = {
-  'recommande':   { emoji: '✅', label: 'Recommandé AEP', accent: '#5a7a4a', bg: 'rgba(90,122,74,0.12)', text: '#3d5534', border: 'rgba(90,122,74,0.25)' },
-  'sous-reserve': { emoji: '⚠️', label: 'Sous réserve',   accent: '#c4a472', bg: 'rgba(196,164,114,0.15)', text: '#7a5f2a', border: 'rgba(196,164,114,0.35)' },
-  'a-eviter':     { emoji: '❌', label: 'À éviter',       accent: '#a85d3e', bg: 'rgba(168,93,62,0.12)', text: '#7a3322', border: 'rgba(168,93,62,0.25)' },
+  'recommande':   { emoji: '✅', label: 'Recommandé AEP', accent: '#5a7a4a', bg: 'rgba(90,122,74,0.12)',    text: '#3d5534' },
+  'sous-reserve': { emoji: '⚠️', label: 'Sous réserve',   accent: '#c4a472', bg: 'rgba(196,164,114,0.15)', text: '#7a5f2a' },
+  'a-eviter':     { emoji: '❌', label: 'À éviter',       accent: '#a85d3e', bg: 'rgba(168,93,62,0.12)',    text: '#7a3322' },
 }
 
 const tagConfig = computed(() => TAG_CONFIG[props.plateforme.scoring.tag_global] ?? TAG_CONFIG['sous-reserve'])
-const tagEmoji = computed(() => tagConfig.value.emoji)
-const tagLabel = computed(() => tagConfig.value.label)
-const tagAccentColor = computed(() => tagConfig.value.accent)
-const tagBgColor = computed(() => tagConfig.value.bg)
-const tagTextColor = computed(() => tagConfig.value.text)
-const tagBorderColor = computed(() => tagConfig.value.border)
 
 function axeScoreBg(score: string | null) {
   if (score === '✅') return 'rgba(90,122,74,0.12)'
@@ -122,7 +94,6 @@ function axeScoreBg(score: string | null) {
   if (score === '❌') return 'rgba(168,93,62,0.12)'
   return 'var(--nav-bg-alt)'
 }
-
 function axeScoreText(score: string | null) {
   if (score === '✅') return '#3d5534'
   if (score === '⚠️') return '#7a5f2a'
@@ -131,24 +102,143 @@ function axeScoreText(score: string | null) {
 }
 
 const SECTEUR_LABELS: Record<string, string> = {
-  'renovation': 'Rénovation',
-  'construction-neuve': 'Neuf',
-  'urbanisme': 'Urbanisme',
-  'architecture-interieure': 'Archi intérieure',
-  'paysage': 'Paysage',
-  'mar-conseil': 'MAR/Conseil',
-  'transversal': 'Transversal',
+  'renovation': 'Rénovation', 'construction-neuve': 'Neuf', 'urbanisme': 'Urbanisme',
+  'architecture-interieure': 'Archi intérieure', 'paysage': 'Paysage',
+  'mar-conseil': 'MAR/Conseil', 'transversal': 'Transversal',
 }
-
-function secteurLabel(s: string) { return SECTEUR_LABELS[s] ?? s }
-
 const COUT_LABELS: Record<string, string> = {
-  'gratuit': 'Gratuit',
-  'freemium': 'Freemium',
-  'abonnement': 'Abonnement',
-  'lead-paye': 'Lead payant',
-  'commission': 'Commission',
+  'gratuit': 'Gratuit', 'freemium': 'Freemium', 'abonnement': 'Abonnement',
+  'lead-paye': 'Lead payant', 'commission': 'Commission',
+}
+</script>
+
+<style scoped>
+.taff-card {
+  width: 100%;
+  text-align: left;
+  border-radius: 12px;
+  border: 1px solid var(--nav-bg-alt);
+  border-left: 4px solid;
+  background: var(--nav-surface);
+  display: flex;
+  flex-direction: column;
+  transition: box-shadow 0.2s;
+  cursor: pointer;
+}
+.taff-card:hover { box-shadow: 0 4px 16px rgba(26,34,56,0.1); }
+.taff-card:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; }
+
+.taff-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 1rem 1rem 0.5rem;
 }
 
-function coutLabel(c: string) { return COUT_LABELS[c] ?? c }
-</script>
+.taff-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.taff-badge-ao {
+  display: inline-flex;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  background: var(--nav-bg-alt);
+  color: var(--nav-text-muted);
+}
+
+.taff-visit-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 8px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: var(--nav-bg-alt);
+  color: var(--nav-text);
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: opacity 0.15s;
+}
+.taff-visit-btn:hover { opacity: 0.7; }
+
+.taff-card-name {
+  padding: 0.25rem 1rem 0.75rem;
+  font-size: 1.0625rem;
+  font-weight: 700;
+  color: var(--nav-text);
+  line-height: 1.3;
+}
+
+.taff-card-axes {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0 1rem 0.875rem;
+  flex-wrap: wrap;
+}
+
+.taff-axe-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 9999px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.taff-card-desc {
+  padding: 0 1rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--nav-text-muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  flex: 1;
+}
+
+.taff-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--nav-bg-alt);
+  flex-wrap: wrap;
+}
+
+.taff-secteur-chip {
+  display: inline-block;
+  padding: 0.2rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  background: var(--nav-bg);
+  color: var(--nav-text-muted);
+  border: 1px solid var(--nav-bg-alt);
+}
+
+.taff-more {
+  font-size: 0.75rem;
+  color: var(--nav-text-muted);
+}
+
+.taff-cout {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--nav-text-muted);
+  white-space: nowrap;
+}
+</style>
diff --git a/pages/trouver-du-taf.vue b/pages/trouver-du-taf.vue
index 8ab196f..1c231b2 100644
--- a/pages/trouver-du-taf.vue
+++ b/pages/trouver-du-taf.vue
@@ -148,7 +148,7 @@
       <Transition name="taff-backdrop">
         <div
           v-if="modalPlateforme"
-          class="fixed inset-0 z-[1500]"
+          class="fixed inset-0 z-[10000]"
           style="background: rgba(26,34,56,0.55);"
           @click="closeModal"
           aria-hidden="true"
@@ -157,7 +157,7 @@
       <Transition name="taff-modal">
         <div
           v-if="modalPlateforme"
-          class="fixed z-[1501] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
+          class="fixed z-[10001] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
           style="width: min(760px, 92vw); max-height: 90vh; background: var(--nav-bg); border-radius: 16px; box-shadow: 0 16px 64px rgba(26,34,56,0.28); overflow: hidden;"
           role="dialog"
           aria-modal="true"
@@ -457,8 +457,8 @@ const parsedDescription = computed(() => {
 
 /* Modal body helpers */
 .modal-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nav-text-muted); margin-bottom: 0.75rem; }
-.modal-axes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; }
-.modal-axe { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 8px; }
+.modal-axes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.modal-axe { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 8px; flex: 1 1 130px; min-width: 130px; }
 .modal-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
 .modal-meta-item { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.875rem; border-radius: 8px; background: var(--nav-bg-alt); }
 .modal-meta-key { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--nav-text-muted); }