Update app.py

app.py

@@ -16,56 +16,131 @@ import plotly.graph_objects as go
 import plotly.io as pio
 
 # ---------------- Branding Verbatify (CSS + Plotly) ----------------
-VB_CSS = r"""
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
+
+/* ---------- Palette Verbatify ---------- */
 :root{
-  --vb-bg:#F8FAFC; --vb-card:#FFFFFF; --vb-text:#0F172A; --vb-muted:#475569;
-  --vb-primary:#7C3AED; --vb-primary-2:#06B6D4; --vb-accent:#2563EB;
-  --vb-positive:#10B981; --vb-negative:#EF4444; --vb-neutral:#94A3B8;
-  --vb-border:#E2E8F0; --vb-radius:14px; --vb-shadow:0 8px 20px rgba(2,6,23,.06);
+  --vb-bg:#F8FAFC;            /* fond */
+  --vb-card:#FFFFFF;          /* cartes */
+  --vb-text:#0F172A;          /* texte */
+  --vb-muted:#475569;         /* texte secondaire */
+  --vb-primary:#7C3AED;       /* violet */
+  --vb-primary-2:#06B6D4;     /* cyan */
+  --vb-accent:#2563EB;        /* bleu */
+  --vb-positive:#10B981;      /* vert succès */
+  --vb-negative:#EF4444;      /* rouge */
+  --vb-neutral:#94A3B8;       /* neutre */
+  --vb-border:#E2E8F0;        /* bordures */
+  --vb-radius:14px;
+  --vb-shadow:0 10px 26px rgba(2,6,23,.08);
 }
-html,body,.gradio-container{background:var(--vb-bg)!important;color:var(--vb-text);
-  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
-.gradio-container{max-width:1120px!important;margin:0 auto!important;}
-.vb-hero{display:flex;align-items:center;gap:14px;padding:18px 20px;margin:8px 0 18px;
-  background:linear-gradient(90deg,rgba(124,58,237,.10),rgba(6,182,212,.10));
-  border:1px solid var(--vb-border);border-radius:var(--vb-radius);}
-.vb-hero .vb-title{font-size:20px;font-weight:800;letter-spacing:.2px;}
-.vb-hero .vb-sub{color:var(--vb-muted);font-size:13px;margin-top:-4px;}
-.gr-markdown,.gr-box,.gr-panel,.gr-article{background:var(--vb-card)!important;border:1px solid var(--vb-border)!important;border-radius:var(--vb-radius)!important;box-shadow:var(--vb-shadow);}
-.gr-markdown h2{font-size:18px;margin-top:10px;}
-button,.gr-button{border-radius:var(--vb-radius)!important;border:0!important;box-shadow:var(--vb-shadow);font-weight:700!important;}
-.gr-button-primary{background:linear-gradient(90deg,var(--vb-primary),var(--vb-primary-2))!important;color:#fff!important;}
-.gr-button-primary:hover{filter:brightness(1.06);transform:translateY(-1px);}
-.gr-button-secondary{background:#fff!important;border:1px solid var(--vb-border)!important;color:var(--vb-text)!important;}
-input,textarea,select,.gr-textbox,.gr-textbox textarea{border-radius:calc(var(--vb-radius) - 4px)!important;border:1px solid var(--vb-border)!important;background:#fff!important;}
-input[type="checkbox"]:checked{accent-color:var(--vb-primary)!important;}
-.js-plotly-plot .plotly .bg{fill:#fff!important;}
-.js-plotly-plot .plotly .xgrid,.js-plotly-plot .plotly .ygrid{stroke:#E2E8F0!important;opacity:1;}
-.vb-footer{color:var(--vb-muted);font-size:12px;text-align:center;margin:12px 0;}
-"""
 
-def apply_plotly_theme():
-    pio.templates["verbatify"] = go.layout.Template(
-        layout=go.Layout(
-            font=dict(family="Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif", size=13, color="#0F172A"),
-            paper_bgcolor="white", plot_bgcolor="white",
-            colorway=["#7C3AED","#06B6D4","#2563EB","#10B981","#EF4444","#F59E0B","#14B8A6","#F43F5E"],
-            xaxis=dict(gridcolor="#E2E8F0", zerolinecolor="#E2E8F0"),
-            yaxis=dict(gridcolor="#E2E8F0", zerolinecolor="#E2E8F0"),
-            legend=dict(borderwidth=0, bgcolor="rgba(255,255,255,0)")
-        )
-    )
-    pio.templates.default = "verbatify"
-
-LOGO_SVG = """<svg xmlns='http://www.w3.org/2000/svg' width='224' height='38' viewBox='0 0 224 38'>
-  <defs><linearGradient id='g' x1='0%' y1='0%' x2='100%'><stop offset='0%' stop-color='#7C3AED'/><stop offset='100%' stop-color='#06B6D4'/></linearGradient></defs>
-  <g fill='none' fill-rule='evenodd'>
-    <rect x='0' y='7' width='38' height='24' rx='12' fill='url(#g)'/>
-    <circle cx='13' cy='19' r='5' fill='#fff' opacity='0.95'/><circle cx='25' cy='19' r='5' fill='#fff' opacity='0.72'/>
-    <text x='46' y='25' font-family='Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif' font-size='20' font-weight='800' fill='#0F172A' letter-spacing='0.2'>Verbatify</text>
-  </g>
-</svg>"""
+/* Forcer un look clair, même si l’hôte est en dark */
+* { color-scheme: light !important; }
+
+html,body,.gradio-container{
+  background:var(--vb-bg) !important;
+  color:var(--vb-text);
+  font-family:Manrope,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
+}
+
+/* largeur contenante */
+.gradio-container{max-width:1120px !important;margin:0 auto !important}
+
+/* ---------- Hero / Header ---------- */
+.vb-hero{
+  display:flex;align-items:center;gap:16px;padding:20px 22px;margin:10px 0 20px;
+  background:linear-gradient(90deg, rgba(124,58,237,.12), rgba(6,182,212,.12));
+  border:1px solid var(--vb-border);border-radius:var(--vb-radius);
+  box-shadow:var(--vb-shadow);
+}
+.vb-hero .vb-title{font-size:22px;font-weight:800;letter-spacing:.2px}
+.vb-hero .vb-sub{color:var(--vb-muted);font-size:13px;margin-top:-2px}
+
+/* ---------- Cartes / panneaux ---------- */
+.gradio-container .gr-box,
+.gradio-container .gr-panel,
+.gradio-container .gr-accordion,
+.gradio-container .gr-group,
+.gradio-container .gr-form,
+.gradio-container .gr-article{
+  background:var(--vb-card) !important;
+  border:1px solid var(--vb-border) !important;
+  border-radius:var(--vb-radius) !important;
+  box-shadow:var(--vb-shadow);
+}
+
+/* labels et titres internes */
+.gr-markdown h1,.gr-markdown h2,.gr-markdown h3{color:var(--vb-text)}
+.gr-markdown h2{font-size:18px;margin-top:10px}
+
+/* ---------- Inputs ---------- */
+.gradio-container input[type="text"],
+.gradio-container input[type="number"],
+.gradio-container textarea,
+.gradio-container select,
+.gradio-container .gr-textbox,
+.gradio-container .gr-textbox textarea{
+  background:#fff !important;
+  border:1px solid var(--vb-border) !important;
+  border-radius:calc(var(--vb-radius) - 4px) !important;
+  box-shadow:none !important;
+}
+.gradio-container input::placeholder,
+.gradio-container textarea::placeholder{color:#9AA4B2}
+
+/* Checkboxes / radios */
+.gradio-container input[type="checkbox"],
+.gradio-container input[type="radio"]{accent-color:var(--vb-primary) !important}
+
+/* Sliders */
+.gradio-container input[type="range"]{
+  -webkit-appearance:none;height:6px;background:#EDF2F7;border-radius:999px;outline:none
+}
+.gradio-container input[type="range"]::-webkit-slider-thumb{
+  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
+  background:linear-gradient(135deg, var(--vb-primary), var(--vb-primary-2));
+  border:0;box-shadow:0 2px 8px rgba(124,58,237,.35)
+}
+
+/* ---------- Boutons ---------- */
+button,.gr-button{
+  border-radius:var(--vb-radius) !important;border:0 !important;font-weight:700 !important;
+  box-shadow:var(--vb-shadow);
+}
+.gr-button-primary{
+  background:linear-gradient(90deg, var(--vb-primary), var(--vb-primary-2)) !important;
+  color:#fff !important;
+}
+.gr-button-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
+.gr-button-secondary{
+  background:#fff !important;border:1px solid var(--vb-border) !important;color:var(--vb-text) !important
+}
+
+/* ---------- DataFrames / Tables ---------- */
+.gradio-container table{border-collapse:separate;border-spacing:0;width:100%}
+.gradio-container thead th{
+  background:linear-gradient(90deg,rgba(124,58,237,.06),rgba(6,182,212,.06));
+  color:#111827;font-weight:800;border-bottom:1px solid var(--vb-border)
+}
+.gradio-container td, .gradio-container th{
+  padding:10px;border-bottom:1px solid #F1F5F9
+}
+
+/* ---------- Graphiques (Plotly) ---------- */
+.js-plotly-plot .plotly .bg{fill:#fff !important}
+.js-plotly-plot .plotly .xgrid,.js-plotly-plot .plotly .ygrid{stroke:#E2E8F0 !important;opacity:1}
+.js-plotly-plot .plotly .legend text{font-weight:600}
+
+/* ---------- Chips sentiment (si besoin) ---------- */
+.vb-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700}
+.vb-chip.pos{background:rgba(16,185,129,.12);color:#065F46}
+.vb-chip.neu{background:rgba(148,163,184,.16);color:#334155}
+.vb-chip.neg{background:rgba(239,68,68,.12);color:#7F1D1D}
+
+/* ---------- Footer ---------- */
+.vb-footer{color:var(--vb-muted);font-size:12px;text-align:center;margin:16px 0}
+
 
 # ---------------- unidecode (fallback si paquet absent) ----------------
 try: