From f7b01c33e67446e7fbf5c8dd9cec78330878d4d3 Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Thu, 7 May 2026 02:07:28 +0200
Subject: [PATCH] fix(chatbot): markdown :deep() + onboarding v-if/v-else
 propre
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CSS: :deep(.md-content) perce le scoped — résout l'écrasement par .assistant-bubble p
- Template: <template v-if> / <template v-else> au lieu de <p v-if /> + v-else
  (tag void + v-else = pairing HTML instable)
- Carte 1 retrouve son onboarding d'origine (v-else sur props.onboarding absent)
- Carte 2 garde son onboarding 120 structures via prop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/ChatbotSheet.vue | 36 ++++++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/components/ChatbotSheet.vue b/components/ChatbotSheet.vue
index 065e706..94ea6a1 100644
--- a/components/ChatbotSheet.vue
+++ b/components/ChatbotSheet.vue
@@ -69,20 +69,18 @@
         <div ref="messagesContainer" class="flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-3">
           <!-- Message onboarding (avant la première question) -->
           <div v-if="messages.length === 0" class="onboarding-bubble">
-            <p v-if="props.onboarding" v-html="renderMd(props.onboarding)" />
+            <template v-if="props.onboarding">
+              <div class="md-content" v-html="renderMd(props.onboarding)" />
+            </template>
             <template v-else>
-            <p>Ce chatbot fonctionne sur un serveur européen souverain
-(Mistral FR, zéro rétention), conçu sobre en énergie.</p>
-            <p>Pour m'aider à te répondre efficacement,
-formule ta requête ainsi :</p>
-            <ul>
-              <li>• Besoin : [ce que tu cherches]</li>
-              <li>• Thématique : [juridique / technique / économique / ...]</li>
-              <li>• Lieu : [région ou ville]</li>
-            </ul>
-            <p class="example">Exemple : "Je suis salarié d'agence, litige avec mon
-employeur, besoin conseil juridique droit du travail,
-Île-de-France."</p>
+              <p>Ce chatbot fonctionne sur un serveur européen souverain (Mistral FR, zéro rétention), conçu sobre en énergie.</p>
+              <p>Pour m'aider à te répondre efficacement, formule ta requête ainsi :</p>
+              <ul>
+                <li>• Besoin : [ce que tu cherches]</li>
+                <li>• Thématique : [juridique / technique / économique / ...]</li>
+                <li>• Lieu : [région ou ville]</li>
+              </ul>
+              <p class="example">Exemple : "Je suis salarié d'agence, litige avec mon employeur, besoin conseil juridique droit du travail, Île-de-France."</p>
             </template>
           </div>
 
@@ -329,7 +327,17 @@ function scrollToBottom() {
   line-height: 1.6;
   color: var(--nav-text);
 }
-.assistant-bubble p { margin: 0; }
+.assistant-bubble > p { margin: 0; }
+
+/* Markdown rendu via v-html — :deep() perce le scoped */
+:deep(.md-content) { font-size: inherit; line-height: 1.6; }
+:deep(.md-content p) { margin: 0 0 0.4em; }
+:deep(.md-content p:last-child) { margin-bottom: 0; }
+:deep(.md-content strong) { font-weight: 700; }
+:deep(.md-content em) { font-style: italic; }
+:deep(.md-content ul) { margin: 0.3em 0 0.3em 1.1em; list-style: disc; padding: 0; }
+:deep(.md-content li) { margin-bottom: 0.15em; }
+:deep(.md-content a) { text-decoration: underline; opacity: 0.8; }
 
 /* Fiches recommandées */
 .fiches-list {