Update verbatim.css

verbatim.css

@@ -1,38 +1,42 @@
-/* ====== Verbatify branding (feuille externe) ====== */
-@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');
 
-:root{
+/* ====== Forcer le mode clair / overrides Gradio ====== */
+:root,
+html[data-theme="dark"],
+body[data-theme="dark"],
+.dark, .theme-dark {
+  color-scheme: light !important;
   --vb-bg:#F8FAFC;
+  --vb-card:#FFFFFF;
   --vb-text:#0F172A;
-  --vb-muted:#475569;
+  --vb-primary:#7C3AED;
+  --vb-primary-2:#06B6D4;
   --vb-border:#E2E8F0;
-  --vb-primary:#7C3AED;     /* violet du logo */
-  --vb-primary-2:#06B6D4;   /* cyan du logo */
-  --vb-radius:14px;
-}
 
-* { 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;
+  /* Tokens Gradio */
+  --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;
+  --input-background-fill:#FFFFFF;
+  --input-text-color:#0F172A;
+  --input-border-color:#E2E8F0;
+  --button-primary-background-fill:#7C3AED;
+  --button-primary-text-color:#FFFFFF;
 }
-.gradio-container{ max-width:1120px !important; margin:0 auto !important; }
 
-/* ====== Header (hero) ====== */
-.vb-hero{
-  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:0 10px 26px rgba(2,6,23,.08);
-  backdrop-filter:blur(6px);
+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; /* tout en noir, non gras */
 }
-.vb-hero .vb-title{ font-size:22px; font-weight:800; color:#0F172A }
-.vb-hero .vb-sub{ color:var(--vb-muted); font-size:13px; margin-top:-2px }
 
-/* ====== Cartes / sections (pas de bordures noires) ====== */
+/* ====== Encart / cartes (dégradé du logo, pas de bordures noires) ====== */
 .gradio-container .block,
 .gradio-container .gr-block,
 .gradio-container .gr-box,
@@ -40,97 +44,83 @@ html,body,.gradio-container{
 .gradio-container .form,
 .gradio-container .group,
 .gradio-container .row,
-.gradio-container .column{
-  background:#FFFFFF !important;
-  border:1px solid var(--vb-border) !important;
-  border-radius:var(--vb-radius) !important;
-  box-shadow:0 10px 26px rgba(2,6,23,.08);
+.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;
+  border: 1px solid transparent !important;
+  border-radius: 14px !important;
+  box-shadow: 0 10px 26px rgba(2,6,23,.08);
 }
 
-/* ====== Textes en noir et non gras ====== */
-.gradio-container label,
-.gradio-container .prose,
-.gradio-container .gr-markdown,
-.gradio-container .gradio-header,
-.gradio-container .wrap,
-.gradio-container .gr-text{
-  color:#0F172A !important;
-  font-weight:400 !important;
+/* ====== 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,.18), rgba(6,182,212,.18));
+  border:1px solid var(--vb-border);border-radius:14px;box-shadow:0 10px 26px rgba(2,6,23,.08);
 }
+.vb-hero .vb-title{font-size:22px;color:#0F172A;font-weight:500}
+.vb-hero .vb-sub{font-size:13px;color:#0F172A}
 
-/* ====== Supprimer les rubans/“encarts” sombres auto ====== */
+/* ====== Labels noirs – suppression des rubans/pills auto ====== */
 .gradio-container [data-testid="block-label"],
 .gradio-container .component-label,
 .gradio-container .label,
-.gradio-container .wrap > .label{
-  position:static !important;
-  background:transparent !important;
-  color:#0F172A !important;
-  border:none !important;
-  box-shadow:none !important;
-  padding:0 !important;
-}
-.gradio-container .wrap > div[class*="absolute"][class*="top-0"][class*="left-0"],
-.gradio-container [class*="absolute"][class*="top-0"][class*="left-0"][class*="rounded-b"],
-.gradio-container [class*="absolute"][class*="top-0"][class*="left-0"][class*="rounded-br"]{
-  background:transparent !important;
-  color:#0F172A !important;
-  border:none !important;
-  box-shadow:none !important;
+.gradio-container .wrap > .label,
+.gradio-container .wrap [class*="label"]{
+  color:#0F172A !important; background:transparent !important; border:none !important;
+  box-shadow:none !important; padding:0 !important; font-weight:500 !important;
 }
+.gradio-container .wrap > div[class*="absolute"][class*="top-0"][class*="left-0"]{ display:none !important; }
 
 /* ====== Inputs ====== */
 .gradio-container input[type="text"],
 .gradio-container input[type="number"],
 .gradio-container textarea,
-.gradio-container select{
+.gradio-container select,
+.gradio-container .gr-textbox,
+.gradio-container .gr-textbox textarea{
   background:#fff !important; color:#0F172A !important;
-  border:1px solid var(--vb-border) !important; border-radius:12px !important;
+  border:1px solid #E2E8F0 !important; border-radius:12px !important;
+  box-shadow:none !important;
 }
 .gradio-container input::placeholder,
-.gradio-container textarea::placeholder{ color:#6B7280 !important }
-
-/* ====== Checkboxes (icône couleur du bouton, déjà stylée) ====== */
-.gradio-container input[type="checkbox"]{
-  accent-color: var(--vb-primary) !important; /* fallback solide */
-}
-.gradio-container input[type="checkbox"]:checked{
-  background:linear-gradient(90deg, var(--vb-primary), var(--vb-primary-2)) !important;
-  background-image:none !important;
-  border-color:var(--vb-primary) !important;
+.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;
 }
 
-/* ====== Sliders (barre en dégradé, pouce violet) ====== */
-.gradio-container input[type="range"]{
-  height:8px !important; border-radius:999px !important; outline:none !important; appearance:none;
-  background:
-    linear-gradient(90deg, var(--vb-primary), var(--vb-primary-2)) 0 0 / var(--range_progress) 100% no-repeat,
-    linear-gradient(#E5E7EB, #E5E7EB) 0 0 / 100% 100% no-repeat !important;
+/* ====== Checkboxes / radios : couleur bouton & déjà cochées côté Python ====== */
+.gradio-container input[type="checkbox"],
+.gradio-container input[type="radio"],
+.gradio-container [data-testid="checkbox"] input[type="checkbox"]{
+  accent-color: var(--vb-primary) !important;
 }
-.gradio-container input[type="range"]::-webkit-slider-thumb{
-  -webkit-appearance:none; width:18px;height:18px;border-radius:50%;
-  background:#fff;border:2px solid var(--vb-primary);
-  box-shadow:0 2px 10px rgba(124,58,237,.25);
-}
-.gradio-container input[type="range"]::-moz-range-thumb{
-  width:18px;height:18px;border-radius:50%;
-  background:#fff;border:2px solid var(--vb-primary);
-  box-shadow:0 2px 10px rgba(124,58,237,.25);
-}
-.gradio-container .head, .gradio-container .min_value, .gradio-container .max_value{
-  color:#0F172A !important; font-weight:400 !important;
+
+/* ====== Sliders (plus d’orange) ====== */
+.gradio-container input[type="range"]{ accent-color: var(--vb-primary) !important; }
+.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;
 }
 
-/* ====== Bouton d’action (gros + dégradé) ====== */
-.vb-cta{
+/* ====== Bouton principal ====== */
+.gradio-container .vb-cta{
   background:linear-gradient(90deg, var(--vb-primary), var(--vb-primary-2)) !important;
-  color:#fff !important; border:0 !important; border-radius:14px !important;
-  padding:14px 22px !important; font-weight:800 !important;
-  box-shadow:0 12px 26px rgba(124,58,237,.28);
+  color:#fff !important; border:0 !important; font-weight:600 !important;
+  font-size:16px !important; padding:14px 18px !important; border-radius:14px !important;
+  box-shadow:0 10px 24px rgba(124,58,237,.28);
 }
-.vb-cta:hover{ transform:translateY(-1px); filter:brightness(1.05); }
+.gradio-container .vb-cta:hover{ transform:translateY(-2px); filter:brightness(1.05) }
 
-/* ====== Tables claires (anti-bandes noires) ====== */
+/* ====== DataFrames ====== */
 .gradio-container .table,
 .gradio-container .table * ,
 .gradio-container .svelte-virtual-table-viewport,
@@ -141,8 +131,16 @@ html,body,.gradio-container{
 .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;
+  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; }
+
+/* ====== 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}
 
 /* ====== Footer ====== */
-.vb-footer{ color:#475569; font-size:12px; text-align:center; margin:16px 0 }
+.vb-footer{color:#0F172A;font-size:12px;text-align:center;margin:16px 0;font-weight:500}