Update verbatim.css

verbatim.css

@@ -1,19 +1,21 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');
 
-/* ====== Forcer le mode clair / overrides Gradio ====== */
+/* ====== Forcer le mode clair + variables de thème EN NOIR ====== */
 :root,
 html[data-theme="dark"],
 body[data-theme="dark"],
 .dark, .theme-dark {
   color-scheme: light !important;
+
+  /* Palette */
   --vb-bg:#F8FAFC;
   --vb-card:#FFFFFF;
-  --vb-text:#0F172A;
+  --vb-text:#0F172A;        /* NOIR unique */
   --vb-primary:#7C3AED;
   --vb-primary-2:#06B6D4;
   --vb-border:#E2E8F0;
 
-  /* Tokens Gradio */
+  /* Tokens Gradio (tout en noir) */
   --body-background-fill:#F8FAFC;
   --panel-background-fill:#FFFFFF;
   --block-background-fill:#FFFFFF;
@@ -21,33 +23,56 @@ body[data-theme="dark"],
   --text-color:#0F172A;
   --secondary-text-color:#0F172A;
   --muted-text-color:#0F172A;
-  --link-text-color:#2563EB;
+  --link-text-color:#0F172A;            /* liens NOIRS */
   --input-background-fill:#FFFFFF;
   --input-text-color:#0F172A;
   --input-border-color:#E2E8F0;
   --button-primary-background-fill:#7C3AED;
-  --button-primary-text-color:#FFFFFF;
+  --button-primary-text-color:#0F172A;  /* texte bouton NOIR */
 }
 
-html, body, .gradio-container {
+/* ====== Règle coupe-feu : tout texte en noir, poids normal ====== */
+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 */
+  color: var(--vb-text) !important;
+  font-weight: 400 !important;
+}
+/* hérite aux descendants (texte), sans toucher aux backgrounds */
+.gradio-container, .gradio-container * {
+  color: var(--vb-text) !important;
+  font-weight: 400 !important;
+}
+/* liens explicitement noirs */
+.gradio-container a,
+.gradio-container a:visited,
+.gradio-container a:hover,
+.gradio-container a:active { color:#0F172A !important; text-decoration: underline; }
+
+/* Placeholders & états désactivés en noir */
+.gradio-container ::placeholder { color:#0F172A !important; opacity:1 !important; }
+.gradio-container [disabled], .gradio-container :disabled { color:#0F172A !important; opacity:1 !important; }
+
+/* Titres/markdown/label noirs */
+.gradio-container h1, .gradio-container h2, .gradio-container h3,
+.gradio-container h4, .gradio-container h5, .gradio-container h6,
+.gradio-container .prose, .gradio-container .gr-markdown,
+.gradio-container [data-testid="block-label"],
+.gradio-container .component-label, .gradio-container .label,
+.gradio-container .wrap > .label { color:#0F172A !important; font-weight:400 !important; }
+
+/* Supprimer rubans/pills automatiques */
+.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; border:none !important; box-shadow:none !important;
 }
 
-/* ====== Encart / cartes (dégradé du logo, pas de bordures noires) ====== */
-.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"],
+/* ====== Encart / cartes (fond doux, pas de bordures noires épaisses) ====== */
+.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;
   border: 1px solid transparent !important;
@@ -62,19 +87,8 @@ html, body, .gradio-container {
   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 noirs – suppression des rubans/pills auto ====== */
-.gradio-container [data-testid="block-label"],
-.gradio-container .component-label,
-.gradio-container .label,
-.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; }
+.vb-hero .vb-title{font-size:22px;color:#0F172A !important;font-weight:400 !important}
+.vb-hero .vb-sub{font-size:13px;color:#0F172A !important;font-weight:400 !important}
 
 /* ====== Inputs ====== */
 .gradio-container input[type="text"],
@@ -87,23 +101,22 @@ html, body, .gradio-container {
   border:1px solid #E2E8F0 !important; border-radius:12px !important;
   box-shadow:none !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;
 }
 
-/* ====== Checkboxes / radios : couleur bouton & déjà cochées côté Python ====== */
+/* ====== Checkboxes / radios (couleur du bouton pour l’icône) ====== */
 .gradio-container input[type="checkbox"],
-.gradio-container input[type="radio"],
-.gradio-container [data-testid="checkbox"] input[type="checkbox"]{
+.gradio-container input[type="radio"]{
   accent-color: var(--vb-primary) !important;
 }
 
-/* ====== Sliders (plus d’orange) ====== */
-.gradio-container input[type="range"]{ accent-color: var(--vb-primary) !important; }
+/* ====== Sliders (barre violet→cyan, textes noirs déjà forcés) ====== */
+.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{
@@ -111,36 +124,35 @@ html, body, .gradio-container {
   box-shadow:0 2px 10px rgba(124,58,237,.3) !important;
 }
 
-/* ====== Bouton principal ====== */
-.gradio-container .vb-cta{
+/* ====== Bouton principal (texte NOIR) ====== */
+.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; border-radius:14px !important;
-  box-shadow:0 10px 24px rgba(124,58,237,.28);
+  color:#0F172A !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);
 }
-.gradio-container .vb-cta:hover{ transform:translateY(-2px); filter:brightness(1.05) }
+.vb-cta:hover{ transform:translateY(-1px); filter:brightness(1.04) }
 
-/* ====== DataFrames ====== */
-.gradio-container .table,
-.gradio-container .table * ,
-.gradio-container .svelte-virtual-table-viewport,
-.gradio-container .table-wrap{
+/* ====== 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{
+.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:400 !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; }
+.gradio-container .header-button{
+  background:transparent !important; color:#0F172A !important; box-shadow:none !important; border:none !important;
+}
 
-/* ====== Plotly ====== */
+/* ====== Plotly : textes des axes/légendes en noir ====== */
+.js-plotly-plot text, .js-plotly-plot .legend text { fill:#0F172A !important; color:#0F172A !important; }
+.js-plotly-plot .g-xtick text, .js-plotly-plot .g-ytick text { fill:#0F172A !important; }
 .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:#0F172A;font-size:12px;text-align:center;margin:16px 0;font-weight:500}
+.vb-footer{color:#0F172A !important;font-size:12px;text-align:center;margin:16px 0;font-weight:400 !important}