feat(taff): layout colonne + modal positionné + chatbot flottant

- Grille : 3 colonnes → 1 colonne centrée 720px (respire, 16 fiches)
- Modal : top fixe 72px au lieu de top-1/2 (ne mord plus le header)
- Chatbot FAB : bouton fixe bas-droite + panel slide-in avec Mistral
- /api/chatbot-taff : endpoint dédié lisant plateformes-taff.json
- Cartes : layout restructuré tag/nom/axes/desc-3-lignes/footer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

pages/trouver-du-taf.vue

@@ -135,6 +135,104 @@
       </div>
     </div>
 
+    <!-- ── Chatbot FAB ───────────────────────────────────────────── -->
+    <Teleport to="body">
+      <!-- Bouton flottant -->
+      <button
+        v-if="!chatOpen"
+        class="taff-fab"
+        @click="chatOpen = true"
+        aria-label="Ouvrir le guide IA — Quel plateforme me convient ?"
+        title="Guide IA — Je t'aide à choisir"
+      >
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+        </svg>
+        <span class="taff-fab-label">Guide IA</span>
+      </button>
+
+      <!-- Panel chatbot -->
+      <Transition name="taff-chat">
+        <div v-if="chatOpen" class="taff-chat-panel" role="dialog" aria-modal="true" aria-label="Guide IA — Choisir sa plateforme">
+
+          <!-- Header panel -->
+          <div class="taff-chat-header">
+            <div class="flex items-center gap-2">
+              <div class="taff-chat-avatar">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-on-primary);">
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                </svg>
+              </div>
+              <div>
+                <div class="text-sm font-semibold" style="color: var(--nav-text);">Guide AEP</div>
+                <div class="text-xs" style="color: var(--nav-text-muted);">Je t'aide à choisir ta plateforme</div>
+              </div>
+            </div>
+            <button @click="chatOpen = false" class="taff-chat-close" aria-label="Fermer">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            </button>
+          </div>
+
+          <!-- Messages -->
+          <div class="taff-chat-messages" ref="chatMessagesEl">
+            <!-- Message d'accueil -->
+            <div class="taff-msg taff-msg--bot">
+              <p>Dis-moi ta situation : ton secteur, ta zone, ce qui te bloque. Je t'oriente parmi les {{ allPlateformes.length }} plateformes de l'annuaire.</p>
+              <p class="text-xs mt-1.5 opacity-60">Ex : "Je suis en rénovation à Lyon, je cherche des leads sans commission."</p>
+            </div>
+
+            <!-- Messages de la conversation -->
+            <template v-for="(msg, i) in chatMessages" :key="i">
+              <div :class="['taff-msg', msg.role === 'user' ? 'taff-msg--user' : 'taff-msg--bot']">
+                <p>{{ msg.content }}</p>
+              </div>
+              <!-- Plateformes recommandées -->
+              <div v-if="msg.role === 'bot' && msg.recommandations?.length" class="taff-chat-recos">
+                <button
+                  v-for="r in msg.recommandations"
+                  :key="r.id"
+                  class="taff-reco-chip"
+                  @click="openModalById(r.id); chatOpen = false"
+                >
+                  {{ r.nom }}
+                  <span class="taff-reco-arrow">→</span>
+                </button>
+              </div>
+            </template>
+
+            <!-- Loader -->
+            <div v-if="chatLoading" class="taff-msg taff-msg--bot">
+              <span class="taff-typing"><span/><span/><span/></span>
+            </div>
+          </div>
+
+          <!-- Input -->
+          <div class="taff-chat-input-wrap">
+            <textarea
+              v-model="chatInput"
+              class="taff-chat-input"
+              placeholder="Décris ta situation..."
+              rows="2"
+              @keydown.enter.exact.prevent="sendChat"
+            />
+            <button
+              class="taff-chat-send"
+              :disabled="chatLoading || !chatInput.trim()"
+              @click="sendChat"
+              aria-label="Envoyer"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+              </svg>
+            </button>
+          </div>
+          <p class="taff-chat-footer-note">Propulsé par Mistral · 20 questions/jour</p>
+        </div>
+      </Transition>
+    </Teleport>
+
     <!-- ── Note juridique ────────────────────────────────────────── -->
     <div class="taff-disclaimer">
       <p>
@@ -157,8 +255,8 @@
       <Transition name="taff-modal">
         <div
           v-if="modalPlateforme"
-          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;"
+          class="fixed z-[10001] left-1/2 -translate-x-1/2 flex flex-col"
+          style="width: min(760px, 92vw); top: 72px; max-height: calc(100vh - 88px); 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"
           :aria-label="modalPlateforme.nom"
@@ -389,6 +487,50 @@ function axeScoreText(score: string) {
 const modalPlateforme = ref<PlateformeTaff | null>(null)
 function openModal(p: PlateformeTaff) { modalPlateforme.value = p }
 function closeModal()                  { modalPlateforme.value = null }
+function openModalById(id: string) {
+  const p = allPlateformes.value.find(p => p.id === id)
+  if (p) modalPlateforme.value = p
+}
+
+// Chatbot
+interface ChatMessage {
+  role: 'user' | 'bot'
+  content: string
+  recommandations?: { id: string; nom: string; raison: string }[]
+}
+
+const chatOpen    = ref(false)
+const chatInput   = ref('')
+const chatLoading = ref(false)
+const chatMessages = ref<ChatMessage[]>([])
+const chatMessagesEl = ref<HTMLElement | null>(null)
+
+async function sendChat() {
+  const q = chatInput.value.trim()
+  if (!q || chatLoading.value) return
+  chatMessages.value.push({ role: 'user', content: q })
+  chatInput.value = ''
+  chatLoading.value = true
+  await nextTick()
+  chatMessagesEl.value?.scrollTo({ top: chatMessagesEl.value.scrollHeight, behavior: 'smooth' })
+  try {
+    const res = await $fetch<{ reponse_texte: string; plateformes_recommandees: { id: string; nom: string; raison: string }[] }>(
+      '/api/chatbot-taff',
+      { method: 'POST', body: { question: q } }
+    )
+    chatMessages.value.push({
+      role: 'bot',
+      content: res.reponse_texte,
+      recommandations: res.plateformes_recommandees ?? [],
+    })
+  } catch (e: any) {
+    chatMessages.value.push({ role: 'bot', content: e?.data?.statusMessage ?? 'Erreur — réessaie dans un instant.' })
+  } finally {
+    chatLoading.value = false
+    await nextTick()
+    chatMessagesEl.value?.scrollTo({ top: chatMessagesEl.value.scrollHeight, behavior: 'smooth' })
+  }
+}
 
 const TAG_CONFIG: Record<string, { emoji: string; label: string; bg: string; text: string }> = {
   'recommande':   { emoji: '✅', label: 'Recommandé AEP', bg: 'rgba(90,122,74,0.12)',    text: '#3d5534' },
@@ -448,7 +590,7 @@ const parsedDescription = computed(() => {
 .taff-search-clear { color: var(--nav-text-muted); background: none; border: none; cursor: pointer; padding: 0; display: flex; }
 
 .taff-grid-wrap { padding: 1.5rem; }
-.taff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
+.taff-grid { display: flex; flex-direction: column; gap: 0.75rem; max-width: 720px; margin: 0 auto; }
 .taff-empty { text-align: center; padding: 3rem; }
 .taff-reset-btn { margin-top: 0.75rem; padding: 0.5rem 1.25rem; border-radius: 8px; background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; border: none; cursor: pointer; }
 .taff-reset-btn:hover { opacity: 0.7; }
@@ -464,9 +606,195 @@ const parsedDescription = computed(() => {
 .modal-meta-key { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--nav-text-muted); }
 .modal-meta-val { font-size: 0.875rem; font-weight: 500; color: var(--nav-text); }
 
-/* Transitions */
+/* Transitions modal */
 .taff-backdrop-enter-active, .taff-backdrop-leave-active { transition: opacity 0.2s; }
 .taff-backdrop-enter-from, .taff-backdrop-leave-to { opacity: 0; }
 .taff-modal-enter-active, .taff-modal-leave-active { transition: opacity 0.2s, transform 0.2s; }
-.taff-modal-enter-from, .taff-modal-leave-to { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
+.taff-modal-enter-from, .taff-modal-leave-to { opacity: 0; transform: translateX(-50%) translateY(-12px); }
+
+/* ── Chatbot FAB ──────────────────────────────────────────────────── */
+.taff-fab {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 9998;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.125rem;
+  border-radius: 9999px;
+  background: var(--nav-primary-solid);
+  color: var(--nav-text-on-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 4px 20px rgba(26,34,56,0.3);
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+.taff-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,34,56,0.35); }
+.taff-fab-label { white-space: nowrap; }
+
+/* Panel chatbot */
+.taff-chat-panel {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 9999;
+  width: min(380px, calc(100vw - 2rem));
+  max-height: calc(100vh - 4rem);
+  background: var(--nav-surface);
+  border-radius: 16px;
+  box-shadow: 0 8px 40px rgba(26,34,56,0.25);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--nav-bg-alt);
+}
+
+.taff-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid var(--nav-bg-alt);
+  background: var(--nav-surface);
+  flex-shrink: 0;
+}
+.taff-chat-avatar {
+  width: 32px; height: 32px;
+  border-radius: 50%;
+  background: var(--nav-primary-solid);
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.taff-chat-close {
+  width: 28px; height: 28px;
+  border-radius: 8px;
+  background: var(--nav-bg-alt);
+  color: var(--nav-text-muted);
+  border: none; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: opacity 0.15s;
+}
+.taff-chat-close:hover { opacity: 0.7; }
+
+.taff-chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.taff-msg {
+  padding: 0.625rem 0.875rem;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  max-width: 92%;
+}
+.taff-msg--bot {
+  background: var(--nav-bg-alt);
+  color: var(--nav-text);
+  align-self: flex-start;
+  border-bottom-left-radius: 4px;
+}
+.taff-msg--user {
+  background: var(--nav-primary-solid);
+  color: var(--nav-text-on-primary);
+  align-self: flex-end;
+  border-bottom-right-radius: 4px;
+}
+
+.taff-chat-recos {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  align-self: flex-start;
+  max-width: 92%;
+}
+.taff-reco-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.3rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  background: var(--nav-bg);
+  color: var(--nav-text);
+  border: 1px solid var(--nav-bg-alt);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.taff-reco-chip:hover { background: var(--nav-bg-alt); }
+.taff-reco-arrow { opacity: 0.5; }
+
+/* Typing indicator */
+.taff-typing { display: inline-flex; gap: 4px; align-items: center; }
+.taff-typing span {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--nav-text-muted);
+  animation: taff-bounce 1.2s infinite;
+}
+.taff-typing span:nth-child(2) { animation-delay: 0.2s; }
+.taff-typing span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes taff-bounce {
+  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
+  40% { transform: translateY(-5px); opacity: 1; }
+}
+
+.taff-chat-input-wrap {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-top: 1px solid var(--nav-bg-alt);
+  background: var(--nav-surface);
+  flex-shrink: 0;
+}
+.taff-chat-input {
+  flex: 1;
+  resize: none;
+  border: 1px solid var(--nav-bg-alt);
+  border-radius: 10px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  background: var(--nav-bg);
+  color: var(--nav-text);
+  font-family: var(--nav-font);
+  outline: none;
+  line-height: 1.5;
+}
+.taff-chat-input::placeholder { color: var(--nav-text-muted); }
+.taff-chat-input:focus { border-color: var(--nav-primary); }
+
+.taff-chat-send {
+  width: 36px; height: 36px;
+  border-radius: 10px;
+  background: var(--nav-primary-solid);
+  color: var(--nav-text-on-primary);
+  border: none; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+  transition: opacity 0.15s;
+}
+.taff-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
+.taff-chat-send:not(:disabled):hover { opacity: 0.85; }
+
+.taff-chat-footer-note {
+  text-align: center;
+  font-size: 0.6875rem;
+  color: var(--nav-text-muted);
+  padding: 0.375rem;
+  background: var(--nav-surface);
+  flex-shrink: 0;
+}
+
+/* Transition panel chatbot */
+.taff-chat-enter-active, .taff-chat-leave-active { transition: opacity 0.2s, transform 0.2s; }
+.taff-chat-enter-from, .taff-chat-leave-to { opacity: 0; transform: translateY(12px) scale(0.97); }
 </style>