redesign: Doctrine.fr-inspired theme — navy blue palette, Inter font, clean layout

app.py

@@ -45,31 +45,29 @@ if DATASETS.get("circulaires"):
 # ---------------------------------------------------------------------------
 def run_search(query: str, source_filter: str, date_from: int, date_to: int,
                jurisdiction: str, code_name: str, ministere: str):
-    # Empty query guard
     if not query.strip():
         return (
-            gr.update(value="<p style='color:#9ca3af;font-style:italic'>Veuillez entrer une question juridique.</p>"),
+            gr.update(value='<p style="color:#94a3b8;font-style:italic;padding:12px 0">Veuillez entrer une question juridique.</p>'),
             gr.update(value=""),
         )
 
-    # Query length guard
     warning_note = ""
     if len(query) > 500:
         query = query[:500]
-        warning_note = "\n\n⚠️ *Requête tronquée à 500 caractères.*"
+        warning_note = "\n\n*Requete tronquee a 500 caracteres.*"
 
     try:
         embedding = embed_query(query, HF_TOKEN)
     except ValueError as e:
         return (
-            gr.update(value=f"<p style='color:#ef4444'>{e}</p>"),
+            gr.update(value=f'<p style="color:#dc2626;padding:12px 0">{e}</p>'),
             gr.update(value=""),
         )
 
     filters = {}
-    if date_from and int(date_from) > 2000:   # 2000 is slider minimum = "no lower bound"
+    if date_from and int(date_from) > 2000:
         filters["date_from"] = int(date_from)
-    if date_to and int(date_to) < 2026:       # 2026 is slider maximum = "no upper bound"
+    if date_to and int(date_to) < 2026:
         filters["date_to"] = int(date_to)
     if jurisdiction and jurisdiction != "Tous":
         filters["jurisdiction"] = jurisdiction
@@ -80,82 +78,181 @@ def run_search(query: str, source_filter: str, date_from: int, date_to: int,
 
     results = search_all(embedding, DATASETS, source_filter=source_filter, filters=filters)
 
-    # Cross-references: enrich article results with related decisions
     enriched_articles = []
     for r in results.get("articles", []):
         lf_id = r.get("id_legifrance", "")
         related = find_related_decisions(lf_id, DATASETS.get("jurisprudence"))
         enriched_articles.append((r, related))
 
-    # Build synthesis
     synthesis_text = synthesize(query, results, HF_TOKEN) + warning_note
 
-    # Build article cards with cross-references
     article_html = "".join(
         build_article_card(r, related) for r, related in enriched_articles
     )
-    # Temporarily replace articles list for tab builder (pass raw results for tab counts)
     tabs_html = build_tabs_html(results, LOADING_STATUS)
 
-    # Inject enriched article cards into the Articles tab
     if article_html and enriched_articles:
         plain_article_html = "".join(build_article_card(r) for r, _ in enriched_articles)
         tabs_html = tabs_html.replace(plain_article_html, article_html)
 
     synthesis_html = f"""
-    <div style="font-family:system-ui,sans-serif;background:#f8fafc;border-radius:8px;
-                padding:16px 20px;border-left:4px solid #2563eb;margin-bottom:16px">
-      <p style="font-size:13px;font-weight:700;color:#2563eb;margin:0 0 10px">Synthèse juridique</p>
-      <div style="font-size:14px;line-height:1.7;color:#1e293b;white-space:pre-wrap">{synthesis_text}</div>
+    <div style="background:#ffffff;border-radius:12px;padding:20px 24px;
+                border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,0.04);margin-bottom:20px">
+      <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
+        <div style="width:4px;height:20px;background:#1e3a5f;border-radius:2px"></div>
+        <p style="font-size:14px;font-weight:700;color:#1e3a5f;margin:0;letter-spacing:-0.2px">Synthese juridique</p>
+      </div>
+      <div style="font-size:14px;line-height:1.75;color:#334155;white-space:pre-wrap">{synthesis_text}</div>
     </div>"""
 
     return gr.update(value=synthesis_html), gr.update(value=tabs_html)
 
 
 # ---------------------------------------------------------------------------
-# Gradio layout
+# Theme & CSS — Doctrine.fr-inspired design
 # ---------------------------------------------------------------------------
-LOADING_MSG = "Chargement des sources juridiques… (peut prendre jusqu'à 90 secondes)" \
+CUSTOM_CSS = """
+/* ── Global theme overrides ── */
+:root {
+  --color-accent: #1e3a5f !important;
+  --color-accent-soft: #e8f0fe !important;
+  --button-primary-background-fill: #1e3a5f !important;
+  --button-primary-background-fill-hover: #2c5282 !important;
+  --button-primary-text-color: #ffffff !important;
+  --block-border-color: #e2e8f0 !important;
+  --block-background-fill: #ffffff !important;
+  --body-background-fill: #f8fafc !important;
+  --input-background-fill: #ffffff !important;
+  --block-label-text-color: #475569 !important;
+  --slider-color: #1e3a5f !important;
+}
+
+.gradio-container {
+  max-width: 960px !important;
+  margin: 0 auto !important;
+  width: 100% !important;
+  padding: 0 24px !important;
+  box-sizing: border-box !important;
+  background: #f8fafc !important;
+}
+
+/* ── Typography ── */
+.gradio-container, .gradio-container * {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
+}
+
+/* ── Search input ── */
+.gradio-container textarea {
+  border: 1.5px solid #cbd5e1 !important;
+  border-radius: 10px !important;
+  font-size: 15px !important;
+  padding: 12px 16px !important;
+  transition: border-color 0.2s, box-shadow 0.2s !important;
+}
+.gradio-container textarea:focus {
+  border-color: #1e3a5f !important;
+  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08) !important;
+  outline: none !important;
+}
+
+/* ── Primary button ── */
+.gradio-container button.primary {
+  background: #1e3a5f !important;
+  border: none !important;
+  border-radius: 10px !important;
+  font-weight: 600 !important;
+  font-size: 15px !important;
+  padding: 10px 24px !important;
+  letter-spacing: 0.2px !important;
+  transition: background 0.2s, transform 0.1s !important;
+}
+.gradio-container button.primary:hover {
+  background: #2c5282 !important;
+  transform: translateY(-1px) !important;
+}
+
+/* ── Dropdowns ── */
+.gradio-container select,
+.gradio-container .wrap input {
+  border: 1.5px solid #cbd5e1 !important;
+  border-radius: 8px !important;
+}
+
+/* ── Slider: override orange track ── */
+.gradio-container input[type="range"] {
+  accent-color: #1e3a5f !important;
+}
+.gradio-container .range-slider {
+  accent-color: #1e3a5f !important;
+}
+
+/* ── Accordion ── */
+.gradio-container .accordion {
+  border: 1px solid #e2e8f0 !important;
+  border-radius: 10px !important;
+  background: #ffffff !important;
+}
+
+/* ── Block panels ── */
+.gradio-container .block {
+  border-radius: 10px !important;
+  border: 1px solid #e2e8f0 !important;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
+}
+
+/* ── Hide footer ── */
+footer { display: none !important; }
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .gradio-container { max-width: 100% !important; padding: 0 12px !important; }
+}
+"""
+
+LOADING_MSG = "Chargement des index FAISS… (peut prendre jusqu'a 90 secondes)" \
     if not all(LOADING_STATUS.values()) else ""
 
-with gr.Blocks(
-    title="enirtcod.fr — Recherche juridique française",
-    css="""
-    .gradio-container {
-      max-width: 1100px !important;
-      margin: 0 auto !important;
-      width: 100% !important;
-      padding: 0 16px !important;
-      box-sizing: border-box !important;
-    }
-    footer { display: none !important; }
-    @media (max-width: 768px) {
-      .gradio-container { max-width: 100% !important; padding: 0 12px !important; }
-    }
-    """,
-) as demo:
 
+# ---------------------------------------------------------------------------
+# Gradio layout
+# ---------------------------------------------------------------------------
+theme = gr.themes.Soft(
+    primary_hue=gr.themes.colors.blue,
+    secondary_hue=gr.themes.colors.slate,
+    neutral_hue=gr.themes.colors.slate,
+    font=gr.themes.GoogleFont("Inter"),
+)
+
+with gr.Blocks(title="enirtcod.fr — Recherche juridique francaise", css=CUSTOM_CSS, theme=theme) as demo:
+
+    # ── Header ──
     gr.HTML("""
-    <div style="text-align:center;padding:24px 0 12px;font-family:system-ui,sans-serif">
-      <h1 style="font-size:28px;font-weight:800;color:#1e293b;margin:0">⚖️ enirtcod.fr</h1>
-      <p style="color:#64748b;font-size:14px;margin:6px 0 0">
-        Alternative open-source à Doctrine.fr · Recherche dans 4 sources juridiques françaises
+    <div style="text-align:center;padding:32px 0 8px">
+      <h1 style="font-size:32px;font-weight:800;color:#1e293b;margin:0;letter-spacing:-0.5px">
+        enirtcod<span style="color:#1e3a5f">.fr</span>
+      </h1>
+      <p style="color:#64748b;font-size:15px;margin:8px 0 0;font-weight:400">
+        Recherche semantique dans le droit francais &middot; Open source
       </p>
     </div>""")
 
     if LOADING_MSG:
         gr.HTML(f"""
-        <div style="background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;
-                    padding:10px 16px;font-size:13px;color:#92400e;text-align:center">
-          ⏳ {LOADING_MSG}
+        <div style="background:#f0f4ff;border:1px solid #bfdbfe;border-radius:10px;
+                    padding:12px 20px;font-size:13px;color:#1e40af;text-align:center;margin:8px 0">
+          {LOADING_MSG}
         </div>""")
 
+    # ── Search bar ──
+    gr.HTML('<div style="height:8px"></div>')
+
     with gr.Row():
         query_box = gr.Textbox(
-            placeholder="Ex : Quelles sont les conditions de la responsabilité civile délictuelle ?",
-            label="Question juridique",
+            placeholder="Posez votre question juridique, comme si vous parliez a un confrere…",
+            label="",
             lines=2,
             scale=5,
+            show_label=False,
         )
         source_selector = gr.Dropdown(
             choices=["Tous", "Articles", "Jurisprudence", "Circulaires", "Q&R"],
@@ -164,12 +261,13 @@ with gr.Blocks(
             scale=1,
         )
 
-    search_btn = gr.Button("🔍 Rechercher", variant="primary")
+    search_btn = gr.Button("Rechercher", variant="primary", size="lg")
 
-    with gr.Accordion("Filtres avancés", open=False):
+    # ── Filters ──
+    with gr.Accordion("Filtres avances", open=False):
         with gr.Row():
-            date_from = gr.Slider(minimum=2000, maximum=2026, step=1, value=2000, label="Année depuis")
-            date_to   = gr.Slider(minimum=2000, maximum=2026, step=1, value=2026, label="Année jusqu'à")
+            date_from = gr.Slider(minimum=2000, maximum=2026, step=1, value=2000, label="Annee depuis")
+            date_to   = gr.Slider(minimum=2000, maximum=2026, step=1, value=2026, label="Annee jusqu'a")
         with gr.Row():
             juris_filter = gr.Dropdown(
                 choices=["Tous", "Cour de cassation", "Cour d'appel"],
@@ -184,12 +282,15 @@ with gr.Blocks(
             min_filter = gr.Dropdown(
                 choices=["Tous"] + _ministeres,
                 value="Tous",
-                label="Ministère",
+                label="Ministere",
             )
 
-    synthesis_out = gr.HTML(label="Synthèse")
-    results_out   = gr.HTML(label="Résultats")
+    # ── Results ──
+    gr.HTML('<div style="height:8px"></div>')
+    synthesis_out = gr.HTML(label="Synthese")
+    results_out   = gr.HTML(label="Resultats")
 
+    # ── Event handlers ──
     search_btn.click(
         fn=run_search,
         inputs=[query_box, source_selector, date_from, date_to,