Update verbatim.css

verbatim.css

@@ -1,80 +1,199 @@
-/* Verbatify — brand theme for Gradio (light) */
-/* Font: Manrope for a modern, clear SaaS look */
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');
 
+/* Variables Gradio (thème clair + accents violet/cyan) */
 :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);
-}
-
-html, body, .gradio-container{
-  background: var(--vb-bg) !important;
-  color: var(--vb-text);
-  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", sans-serif;
-}
-.gradio-container { max-width: 1120px !important; margin: 0 auto !important; }
+  --body-background-fill:#F8FAFC;
+  --panel-background-fill:#FFFFFF;
+  --block-background-fill:#FFFFFF;
+  --block-border-color:#E2E8F0;
+  --text-color:#0F172A;
+  --secondary-text-color:#0F172A;
+  --muted-text-color:#0F172A;
+  --link-text-color:#2563EB;
+  --radius-lg:14px;
+  --shadow-drop: 0 10px 26px rgba(2,6,23,.08);
 
+  --color-accent:#7C3AED;
+  --color-accent-soft:#EDE9FE;
+  --button-primary-background-fill:#7C3AED;
+  --button-primary-text-color:#ffffff;
+
+  --input-background-fill:#FFFFFF;
+  --input-border-color:#E2E8F0;
+  --input-text-color:#0F172A;
+  --input-placeholder-color:#0F172A;
+
+  --table-row-background-fill:#FFFFFF;
+  --table-row-text-color:#0F172A;
+  --table-border-color:#E2E8F0;
+
+  /* Palette maison */
+  --vb-bg:#F8FAFC;
+  --vb-card:#FFFFFF;
+  --vb-text:#0F172A;
+  --vb-primary:#7C3AED;
+  --vb-primary-2:#06B6D4;
+  --vb-accent:#2563EB;
+  --vb-green:#10B981;
+  --vb-red:#EF4444;
+  --vb-border:#E2E8F0;
+  --vb-radius:14px;
+  --vb-shadow:0 10px 26px rgba(2,6,23,.08);
+}
+
+/* Toujours en clair */
+* { color-scheme: light !important; }
+html,body,.gradio-container{
+  background:var(--vb-bg) !important;
+  color:var(--vb-text) !important;
+  font-family:Manrope,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important;
+  font-weight:500 !important;
+}
+.gradio-container{max-width:1120px !important;margin:0 auto !important}
+
+/* ---------- Header ---------- */
 .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);
+  position:sticky; top:0; z-index:50;
+  display:flex;align-items:center;gap:16px;
+  padding:20px 22px;margin:10px 0 20px;
+  background:linear-gradient(90deg, rgba(124,58,237,.18), rgba(6,182,212,.18));
+  border:1px solid var(--vb-border);border-radius:var(--vb-radius);
+  box-shadow:var(--vb-shadow); backdrop-filter:blur(6px);
+}
+.vb-hero .vb-title{font-size:22px;font-weight:500;letter-spacing:.2px;color:#0F172A}
+.vb-hero .vb-sub{color:#0F172A;font-size:13px;margin-top:-2px}
+
+/* ---------- Cartes / sections (encarts colorés logo, sans bordure noire) ---------- */
+.gradio-container .block,
+.gradio-container .gr-block,
+.gradio-container .gr-box,
+.gradio-container .panel,
+.gradio-container .form,
+.gradio-container .group,
+.gradio-container .row,
+.gradio-container .column,
+.gradio-container .tabs,
+.gradio-container .tabitem,
+.gradio-container [class*="accordion"],
+.gradio-container [class*="box"]{
+  background:linear-gradient(180deg, rgba(124,58,237,.10), rgba(6,182,212,.10)) !important;
+  color:var(--vb-text) !important;
+  border:1px solid transparent !important;
+  border-radius:var(--vb-radius) !important;
+  box-shadow:var(--vb-shadow);
 }
-.vb-hero img{ filter: drop-shadow(0 2px 10px rgba(124,58,237,.25)); }
-.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);
+/* ---------- Labels / rubans ---------- */
+.gradio-container [data-testid="block-label"],
+.gradio-container .component-label,
+.gradio-container .label,
+.gradio-container .wrap > .label,
+.gradio-container .wrap [class*="label"]{
+  position:static !important;
+  background:transparent !important;
+  color:#0F172A !important;
+  box-shadow:none !important;
+  border:none !important;
+  padding:0 !important;
+  font-weight:500 !important;
 }
-.gr-markdown h1, .gr-markdown h2, .gr-markdown h3 { color: var(--vb-text); }
-.gr-markdown h2 { font-size: 18px; margin-top: 10px; }
+/* supprime les “pills” absolues */
+.gradio-container .wrap > div[class*="absolute"][class*="top-0"][class*="left-0"]{ display:none !important; }
 
-button, .gr-button{
-  border-radius: var(--vb-radius) !important;
-  border: 0 !important;
-  box-shadow: var(--vb-shadow);
-  font-weight:700 !important;
+/* ---------- Textes (tout noir, non gras) ---------- */
+.gradio-container label,
+.gradio-container .prose,
+.gradio-container .gr-markdown,
+.gradio-container .gradio-header,
+.gradio-container .gr-text,
+.gradio-container .wrap{
+  color:#0F172A !important; font-weight:500 !important;
 }
-button.primary, .gr-button-primary{
-  background: linear-gradient(90deg, var(--vb-primary), var(--vb-primary-2)) !important;
-  color: #fff !important;
+
+/* ---------- 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;
+  color:#0F172A !important;
+  border:1px solid #E2E8F0 !important;
+  border-radius:calc(var(--vb-radius) - 4px) !important;
+  box-shadow:none !important;
 }
-button.primary:hover, .gr-button-primary:hover{ filter: brightness(1.06); transform: translateY(-1px); }
-button.secondary, .gr-button-secondary{
-  background: #fff !important; border:1px solid var(--vb-border) !important; color: var(--vb-text) !important;
+.gradio-container input::placeholder,
+.gradio-container textarea::placeholder{color:#0F172A !important}
+.gradio-container input:focus,
+.gradio-container textarea:focus{
+  border-color:transparent !important;
+  box-shadow:0 0 0 2px rgba(124,58,237,.35), 0 0 0 4px rgba(6,182,212,.25) !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;
+/* ---------- Checkboxes / radios : couleur bouton + icon svg ---------- */
+.gradio-container input[type="checkbox"],
+.gradio-container input[type="radio"],
+.gradio-container [data-testid="checkbox"] input[type="checkbox"],
+.gradio-container input.svelte-1a15wmk[type="checkbox"]{
+  accent-color: var(--vb-primary) !important;
+}
+.gradio-container [class*="icon"] svg,
+.gradio-container [data-testid="checkbox"] svg{
+  fill: var(--vb-primary) !important; stroke: var(--vb-primary) !important;
 }
-input[type="range"]::-webkit-slider-thumb { background: var(--vb-primary) !important; }
-input[type="checkbox"]:checked { accent-color: var(--vb-primary) !important; }
 
-[data-testid="file"] .file-preview, .gr-file{ border-radius: var(--vb-radius) !important; border:1px solid var(--vb-border) !important;}
+/* ---------- Sliders (noUi + fallback) ---------- */
+.gradio-container .noUi-target{ background:rgba(124,58,237,.18) !important; border:0 !important; box-shadow:none !important; }
+.gradio-container .noUi-connect{ background:linear-gradient(90deg, var(--vb-primary), var(--vb-primary-2)) !important; }
+.gradio-container .noUi-handle{
+  background:#fff !important; border:2px solid var(--vb-primary) !important;
+  box-shadow:0 2px 10px rgba(124,58,237,.3) !important;
+}
+.gradio-container input[type="range"]::-webkit-slider-runnable-track{ background:rgba(124,58,237,.18) !important; height:6px; border-radius:999px; }
+.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);
+}
 
-.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; }
+/* ---------- Bouton d’action ---------- */
+.gradio-container .vb-cta{
+  background:linear-gradient(90deg, var(--vb-primary), var(--vb-primary-2)) !important;
+  color:#fff !important; border:0 !important; font-weight:600 !important;
+  font-size:16px !important; padding:14px 18px !important;
+  box-shadow:0 10px 24px rgba(124,58,237,.28);
+  border-radius:var(--vb-radius) !important;
+}
+.gradio-container .vb-cta:hover{transform:translateY(-2px);filter:brightness(1.05)}
+
+/* ---------- DataFrames / Tables ---------- */
+.gradio-container .table,
+.gradio-container .table * ,
+.gradio-container .svelte-virtual-table-viewport,
+.gradio-container .table-wrap{
+  background:#fff !important;
+  color:#0F172A !important;
+  border-color:#E2E8F0 !important;
+}
+.gradio-container .table thead,
+.gradio-container .table thead tr,
+.gradio-container .table thead th{
+  background:linear-gradient(90deg, rgba(124,58,237,.12), rgba(6,182,212,.12)) !important;
+  color:#0F172A !important; border-bottom:1px solid #E2E8F0 !important;
+  font-weight:500 !important;
+}
+.gradio-container .table thead th .header-button,
+.gradio-container .table thead th [class*="header-button"],
+.gradio-container .header-button{
+  background:transparent !important; color:#0F172A !important;
+  box-shadow:none !important; border:none !important; font-weight:500 !important;
+}
 
-.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; }
+/* ---------- 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:500 !important}
 
-.vb-footer{ color: var(--vb-muted); font-size: 12px; text-align:center; margin: 12px 0; }
+/* ---------- Footer ---------- */
+.vb-footer{color:#0F172A;font-size:12px;text-align:center;margin:16px 0;font-weight:500}