Update templates/philosophie.html

templates/philosophie.html

@@ -12,6 +12,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.3/sweetalert2.min.css" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        /* Styles existants */
         .collapsible {
             cursor: pointer;
             padding: 18px;
@@ -26,6 +27,90 @@
             align-items: center;
         }
 
+/* Nouveaux styles pour le Markdown responsive */
+        .prose {
+            max-width: 100% !important;
+        }
+
+        .prose p {
+            margin-top: 1.25em;
+            margin-bottom: 1.25em;
+            line-height: 1.75;
+        }
+
+        .prose ul {
+            margin-top: 1.25em;
+            margin-bottom: 1.25em;
+            padding-left: 1.625em;
+        }
+
+.prose li {
+            margin-top: 0.5em;
+            margin-bottom: 0.5em;
+            padding-left: 0.375em;
+        }
+
+        .prose h1, .prose h2, .prose h3 {
+            margin-top: 2em;
+            margin-bottom: 1em;
+            line-height: 1.3;
+        }
+
+        /* Styles spécifiques pour mobile */
+        @media (max-width: 640px) {
+            .prose {
+                font-size: 0.95rem;
+            }
+
+    .prose p {
+                margin-top: 1em;
+                margin-bottom: 1em;
+            }
+
+            .prose ul {
+                padding-left: 1.25em;
+            }
+
+            .prose li {
+                margin-top: 0.375em;
+                margin-bottom: 0.375em;
+            }
+
+            .prose h1, .prose h2, .prose h3 {
+                margin-top: 1.5em;
+                margin-bottom: 0.75em;
+            }
+        }      
+
+          /* Styles pour améliorer la lisibilité du texte */
+        #response .prose {
+            color: #374151;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+            hyphens: auto;
+        }
+
+        #response .prose > * + * {
+            margin-top: 1em;
+        }
+
+        #response .prose blockquote {
+            margin: 1.5em 0;
+            padding-left: 1em;
+            border-left: 4px solid #e5e7eb;
+            font-style: italic;
+        }
+
+              #response .prose code {
+            background-color: #f3f4f6;
+            padding: 0.2em 0.4em;
+            border-radius: 0.25em;
+            font-size: 0.875em;
+        }
+
+
+      
+
         .active, .collapsible:hover {
             background-color: #ddd;
         }