Update verbatim.css

verbatim.css

@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');
 
-/* ====== Forcer le mode clair + variables de thème EN NOIR ====== */
+/* ====== Forcer le mode clair + variables (texte NOIR partout) ====== */
 :root,
 html[data-theme="dark"],
 body[data-theme="dark"],
@@ -10,12 +10,12 @@ body[data-theme="dark"],
   /* Palette */
   --vb-bg:#F8FAFC;
   --vb-card:#FFFFFF;
-  --vb-text:#0F172A;        /* NOIR unique */
+  --vb-text:#0F172A;          /* noir unique */
   --vb-primary:#7C3AED;
   --vb-primary-2:#06B6D4;
   --vb-border:#E2E8F0;
 
-  /* Tokens Gradio (tout en noir) */
+  /* Tokens Gradio forcés en noir */
   --body-background-fill:#F8FAFC;
   --panel-background-fill:#FFFFFF;
   --block-background-fill:#FFFFFF;
@@ -23,61 +23,79 @@ body[data-theme="dark"],
   --text-color:#0F172A;
   --secondary-text-color:#0F172A;
   --muted-text-color:#0F172A;
-  --link-text-color:#0F172A;            /* liens NOIRS */
+  --link-text-color:#0F172A;
   --input-background-fill:#FFFFFF;
   --input-text-color:#0F172A;
   --input-border-color:#E2E8F0;
+
   --button-primary-background-fill:#7C3AED;
-  --button-primary-text-color:#0F172A;  /* texte bouton NOIR */
+  --button-primary-text-color:#0F172A; /* texte bouton en noir */
 }
 
-/* ====== Règle coupe-feu : tout texte en noir, poids normal ====== */
-html, body, .gradio-container { 
-  background: var(--vb-bg) !important;
-  font-family: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
-  color: var(--vb-text) !important;
-  font-weight: 400 !important;
+/* ====== 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:400 !important;
 }
-/* hérite aux descendants (texte), sans toucher aux backgrounds */
-.gradio-container, .gradio-container * {
-  color: var(--vb-text) !important;
-  font-weight: 400 !important;
+.gradio-container, .gradio-container *{
+  color:var(--vb-text) !important;
+  font-weight:400 !important;
 }
-/* liens explicitement noirs */
+
+/* Liens explicitement noirs */
 .gradio-container a,
 .gradio-container a:visited,
 .gradio-container a:hover,
-.gradio-container a:active { color:#0F172A !important; text-decoration: underline; }
+.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; }
+/* Placeholders & disabled 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,
+/* Titres/labels 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; }
+.gradio-container .component-label,.gradio-container .label,
+.gradio-container .wrap > .label{
+  color:#0F172A !important;
+  font-weight:400 !important;
+}
 
-/* Supprimer rubans/pills automatiques */
+/* Retirer les rubans/pills automatiques et entêtes sombres */
 .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;
 }
+.gradio-container [data-testid="block-info"],
+.gradio-container [data-testid="block-label"],
+.gradio-container .block .label,
+.gradio-container .wrap > .label,
+.gradio-container [class*="header-button"],
+.gradio-container .table caption{
+  background:transparent !important;
+  color:#0F172A !important;
+  border:0 !important;
+  box-shadow:none !important;
+}
 
-/* ====== 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"],
+/* ====== Encart / cartes (dégradé doux, sans 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"],
 .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);
+  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);
 }
 
 /* ====== Header ====== */
@@ -87,8 +105,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 !important;font-weight:400 !important}
-.vb-hero .vb-sub{font-size:13px;color:#0F172A !important;font-weight:400 !important}
+.vb-hero .vb-title{font-size:22px !important; font-weight:400 !important; color:#0F172A !important}
+.vb-hero .vb-sub{font-size:13px !important; font-weight:400 !important; color:#0F172A !important}
 
 /* ====== Inputs ====== */
 .gradio-container input[type="text"],
@@ -107,16 +125,14 @@ 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 du bouton pour l’icône) ====== */
+/* ====== Checkboxes / radios en couleur bouton ====== */
 .gradio-container input[type="checkbox"],
 .gradio-container input[type="radio"]{
-  accent-color: var(--vb-primary) !important;
+  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;
-}
+/* ====== 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{
@@ -124,115 +140,56 @@ html, body, .gradio-container {
   box-shadow:0 2px 10px rgba(124,58,237,.3) !important;
 }
 
-/* ====== Bouton principal (texte NOIR) ====== */
+/* ====== Bouton principal (texte noir, non gras) ====== */
 .vb-cta{
   background:linear-gradient(90deg, var(--vb-primary), var(--vb-primary-2)) !important;
-  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);
+  color:#0F172A !important;
+  border:0 !important;
+  font-weight:400 !important;            /* pas en gras */
+  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.04) }
 
 /* ====== DataFrames / Tables ====== */
-.gradio-container .table, .gradio-container .table * ,
-.gradio-container .svelte-virtual-table-viewport, .gradio-container .table-wrap{
+.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: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;
-}
 
-/* ====== 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}
+/* ====== Plotly (textes 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; }
 
-/* ====== Footer ====== */
-.vb-footer{color:#0F172A !important;font-size:12px;text-align:center;margin:16px 0;font-weight:400 !important}
-
-/* Center the main CTA button */
-.gradio-container .vb-cta{
-  width: fit-content !important;   /* no more full-width button */
-  display: block !important;
-  margin: 0 auto !important;       /* centers it */
-  padding: 14px 22px !important;   /* keeps the nice size */
-}
-
-/* Couleur de fond des blocs "empty … unpadded_box" = dégradé du logo */
-:root{
-  /* (optionnel) variable de confort pour réutiliser ailleurs */
-  --vb-secondary-bg: linear-gradient(180deg, rgba(124,58,237,.14), rgba(6,182,212,.14));
-}
-
-/* Cible robuste (la classe svelte hashée peut changer) */
+/* ====== Couleur des blocs "empty … unpadded_box" ====== */
+:root{ --vb-secondary-bg: linear-gradient(180deg, rgba(124,58,237,.14), rgba(6,182,212,.14)); }
 .gradio-container .empty[class*="unpadded_box"],
 .gradio-container [aria-label="Empty value"]{
   --background-fill-secondary: var(--vb-secondary-bg) !important;
   background: var(--background-fill-secondary) !important;
   border-color: transparent !important;
-  color:#0F172A !important;               /* texte bien noir */
-  box-shadow: 0 10px 26px rgba(2,6,23,.08);
-}
-
-/* ---- Retire les rubans/étiquettes noirs en haut-gauche des blocs ---- */
-.gradio-container [data-testid="block-info"],
-.gradio-container [data-testid="block-label"],
-.gradio-container .block .label,
-.gradio-container .wrap > .label,
-.gradio-container .wrap [class*="label"],
-.gradio-container [class*="header-button"],   /* boutons d'entêtes de tables */
-.gradio-container .table caption {
-  color: #0F172A !important;     /* texte noir */
-  background: transparent !important;
-  border: 0 !important;
-  box-shadow: none !important;
-}
-
-/* Sécurité : si un style inline met quand même un fond sombre, on neutralise */
-.gradio-container span[data-testid="block-info"],
-.gradio-container .block .label::before,
-.gradio-container .block .label::after {
-  color: #0F172A !important;     /* texte noir */
-  background: transparent !important;
-  border: 0 !important;
-}
-
-/* Centrer le bouton "Lancer l'analyse" dans sa carte */
-.gradio-container .wrap:has(.vb-cta) {
-  display: flex !important;
-  align-items: center !important;   /* centrage vertical */
-  justify-content: center !important; /* centrage horizontal */
-  min-height: 140px;                 /* donne de la hauteur pour bien centrer */
-  padding: 12px 16px !important;
-}
-
-/* Le bouton lui-même : pas de marge parasite */
-.gradio-container button.vb-cta {
-  margin: 0 !important;
-}
-
-/* Centrage parfait du bouton dans son bloc de droite */
-#vb-cta-cell {
-  display: flex !important;
-  align-items: center !important;      /* centre verticalement */
-  justify-content: center !important;  /* centre horizontalement */
-  min-height: 160px;                   /* donne de la hauteur au bloc */
-  padding: 12px 16px !important;
-}
-
-#vb-cta-cell > .wrap {                 /* le wrapper Gradio du bouton */
-  width: 100% !important;
-}
-
-#vb-cta-cell button.vb-cta {
-  margin: 0 auto !important;           /* centre le bouton */
-  max-width: 380px;                    /* optionnel : limite la largeur */
-  display: inline-flex !important;
+  color:#0F172A !important;
+  box-shadow:0 10px 26px rgba(2,6,23,.08);
+}
+
+/* ====== Centrage parfait du bouton dans sa colonne #vb-cta-cell ====== */
+#vb-cta-cell{
+  display:flex !important;
+  align-items:center !important;      /* vertical */
+  justify-content:center !important;  /* horizontal */
+  min-height:160px;                   /* hauteur pour bien centrer */
+  padding:12px 16px !important;
+}
+#vb-cta-cell > .wrap{ width:100% !important; }
+#vb-cta-cell button.vb-cta{
+  display:inline-flex !important;
+  margin:0 auto !important;
+  max-width:380px;
 }