Update verbatim.css

verbatim.css

@@ -1,7 +1,19 @@
 @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{
+/* ====== Forcer le mode clair, même si l'hôte impose le dark ====== */
+: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-primary:#7C3AED;
+  --vb-primary-2:#06B6D4;
+  --vb-border:#E2E8F0;
+
+  /* override des tokens Gradio (V5) */
   --body-background-fill:#F8FAFC;
   --panel-background-fill:#FFFFFF;
   --block-background-fill:#FFFFFF;
@@ -10,60 +22,21 @@
   --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;
+  --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 ---------- */
-.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:var(--vb-shadow); 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; /* non gras par défaut */
 }
-.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) ---------- */
+/* ====== Encart / cartes ====== */
 .gradio-container .block,
 .gradio-container .gr-block,
 .gradio-container .gr-box,
@@ -76,51 +49,42 @@ html,body,.gradio-container{
 .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);
+  background: linear-gradient(180deg, rgba(124,58,237,.10), rgba(6,182,212,.10)) !important;
+  border: 1px solid transparent !important;   /* pas de bordure noire */
+  border-radius: 14px !important;
+  box-shadow: 0 10px 26px rgba(2,6,23,.08);
 }
 
-/* ---------- Labels / rubans ---------- */
+/* ====== Titre / sous-titres (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}
+
+/* ====== Labels : tout en noir, suppression des pills noires ====== */
 .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;
+  color:#0F172A !important; background:transparent !important; border:none !important;
+  box-shadow:none !important; padding:0 !important; font-weight:500 !important;
 }
-/* supprime les “pills” absolues */
 .gradio-container .wrap > div[class*="absolute"][class*="top-0"][class*="left-0"]{ display:none !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;
-}
-
-/* ---------- Inputs ---------- */
+/* ====== 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;
+  background:#fff !important; color:#0F172A !important;
+  border:1px solid #E2E8F0 !important; border-radius:12px !important;
   box-shadow:none !important;
 }
 .gradio-container input::placeholder,
@@ -131,69 +95,54 @@ html,body,.gradio-container{
   box-shadow:0 0 0 2px rgba(124,58,237,.35), 0 0 0 4px rgba(6,182,212,.25) !important;
 }
 
-/* ---------- Checkboxes / radios : couleur bouton + icon svg ---------- */
+/* ====== Checkboxes / radios ====== */
 .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;
+.gradio-container [data-testid="checkbox"] input[type="checkbox"]{
+  accent-color: var(--vb-primary) !important;     /* finit l’orange */
 }
 
-/* ---------- Sliders (noUi + fallback) ---------- */
+/* ====== Sliders (no 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;
 }
-.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);
-}
 
-/* ---------- Bouton d’action ---------- */
+/* ====== Bouton principal ====== */
 .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;
+  font-size:16px !important; padding:14px 18px !important; border-radius:14px !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)}
+.gradio-container .vb-cta:hover{ transform:translateY(-2px); filter:brightness(1.05) }
 
-/* ---------- DataFrames / Tables ---------- */
+/* ====== Tableaux / DataFrames ====== */
 .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;
+  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;
+  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;
-}
+.gradio-container .header-button{ background:transparent !important; color:#0F172A !important; box-shadow:none !important; border:none !important; }
 
-/* ---------- Plotly ---------- */
+/* ====== 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 ---------- */
+/* ====== Footer ====== */
 .vb-footer{color:#0F172A;font-size:12px;text-align:center;margin:16px 0;font-weight:500}