@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');

/* ====== Forcer le mode clair + variables (texte NOIR partout) ====== */
: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;          /* noir unique */
  --vb-primary:#7C3AED;
  --vb-primary-2:#06B6D4;
  --vb-border:#E2E8F0;

  /* Tokens Gradio forcés en noir */
  --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:#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 en noir */
}

/* ====== 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;
}
.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 & 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/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;
}

/* 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 (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);
}

/* ====== 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 !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"],
.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:12px !important;
  box-shadow:none !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 en couleur bouton ====== */
.gradio-container 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; }
.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 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: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{
  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:400 !important;
}

/* ====== 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; }

/* ====== 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;
  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;
}