/* JUSTEVIVO — interface claire inspirée d'une bibliothèque numérique moderne.
   Couche visuelle additive : ne remplace pas les feuilles de style du studio. */
:root{
 --jv-bg:#f5f7fb;--jv-surface:#fff;--jv-surface-2:#f8faff;--jv-text:#17243b;
 --jv-muted:#6b7890;--jv-line:#e5eaf2;--jv-primary:#315fe8;--jv-primary-soft:#edf2ff;
 --jv-shadow:0 12px 34px rgba(25,45,80,.07);--jv-radius:18px;
}
html{scroll-behavior:smooth;background:var(--jv-bg)}
body{background:var(--jv-bg)!important;color:var(--jv-text)!important;font-family:"DM Sans",Inter,system-ui,sans-serif!important}
.topbar{position:sticky;top:0;z-index:50;min-height:72px;padding:12px clamp(18px,4vw,56px)!important;
 background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--jv-line)!important;
 box-shadow:0 3px 18px rgba(30,50,90,.035);backdrop-filter:blur(14px)}
.brand{color:#17243b!important;font-weight:800;letter-spacing:-.04em}
.brand span:last-child{color:var(--jv-primary)!important}
.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;
 background:var(--jv-primary)!important;color:#fff!important;box-shadow:0 5px 12px #315fe833}
.topbar nav a,.site-footer a{color:var(--jv-muted)!important}
.top-cta,.button.primary{background:var(--jv-primary)!important;color:white!important;border:1px solid var(--jv-primary)!important;
 box-shadow:0 7px 16px #315fe82a}
.button.ghost,.button:not(.primary){background:#fff!important;color:#263753!important;border:1px solid var(--jv-line)!important}
.hero{max-width:1440px;margin:0 auto;padding:64px clamp(20px,5vw,76px)!important;gap:48px}
.hero-copy h1{color:#17243b!important;letter-spacing:-.055em}
.hero-copy h1 span,.section-heading h2 span,.how-section h2 span,.plans-heading h2 span{color:var(--jv-primary)!important}
.hero-copy p,.section-heading p,.plans-heading p{color:var(--jv-muted)!important}
.eyebrow{color:var(--jv-primary)!important;letter-spacing:.13em}
.hero-art .video-card{background:#fff!important;border:1px solid var(--jv-line)!important;box-shadow:var(--jv-shadow)!important}
.video-top{color:var(--jv-muted)!important}
.video-controls{color:var(--jv-muted)!important}
.feature-strip{max-width:1320px;margin:0 auto 38px!important;padding:18px!important;background:#fff!important;
 border:1px solid var(--jv-line)!important;border-radius:var(--jv-radius)!important;box-shadow:var(--jv-shadow)}
.feature-strip>div{color:var(--jv-text)!important}
.feature-strip small{color:var(--jv-muted)!important}
.studio-section{max-width:1480px;margin:0 auto;padding:40px clamp(16px,3vw,42px) 72px!important}
.section-heading{margin-bottom:24px}
.section-heading h2,.how-section h2,.plans-heading h2{color:var(--jv-text)!important;letter-spacing:-.04em}
.studio{display:grid!important;grid-template-columns:230px minmax(0,1fr)!important;gap:0!important;
 background:#fff!important;border:1px solid var(--jv-line)!important;border-radius:22px!important;overflow:hidden!important;
 box-shadow:var(--jv-shadow)!important}
.sidebar{background:#fbfcff!important;border-right:1px solid var(--jv-line)!important;color:var(--jv-text)!important;padding:24px 16px!important}
.mini-brand{color:var(--jv-text)!important;font-weight:800;margin-bottom:26px}
.side-link{color:#63718a!important;border-radius:11px!important;padding:12px 13px!important;margin:4px 0!important}
.side-link.active,.side-link:hover{background:var(--jv-primary-soft)!important;color:var(--jv-primary)!important}
.side-bottom{color:var(--jv-muted)!important;border-top:1px solid var(--jv-line)!important;padding-top:18px!important}
.workspace{background:#fff!important;padding:clamp(18px,3vw,34px)!important;min-width:0}
.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.workspace-head h3{color:var(--jv-text)!important;font-size:1.45rem!important}
.workspace-head p,.preview-note,.demo-warning{color:var(--jv-muted)!important}
.status{background:var(--jv-primary-soft)!important;color:var(--jv-primary)!important;border-radius:999px;padding:8px 12px;font-weight:700}
.upload-zone{background:#f8faff!important;border:1.5px dashed #bdc9df!important;border-radius:16px!important;color:var(--jv-text)!important}
.upload-zone:hover{border-color:var(--jv-primary)!important;background:#f1f5ff!important}
.upload-icon{background:var(--jv-primary-soft)!important;color:var(--jv-primary)!important}
.editor-grid{gap:22px!important}
.preview-panel,.controls-panel{background:#fff!important;border:1px solid var(--jv-line)!important;border-radius:16px!important;padding:18px!important;box-shadow:0 5px 20px rgba(30,50,90,.035)}
.panel-label,.field-label{color:#4d5d78!important}
.controls-panel input:not([type=color]),.controls-panel select,.controls-panel textarea,
.workspace input:not([type=file]),.workspace select,.workspace textarea{
 background:#fff!important;color:var(--jv-text)!important;border:1px solid #dce3ef!important;border-radius:10px!important}
.controls-panel input:focus,.controls-panel select:focus,.controls-panel textarea:focus{outline:3px solid #315fe81a!important;border-color:var(--jv-primary)!important}
.style-option{background:#fff!important;color:#34435d!important;border:1px solid var(--jv-line)!important;border-radius:10px!important}
.style-option.selected{background:var(--jv-primary-soft)!important;color:var(--jv-primary)!important;border-color:#b8c8ff!important}
#subtitleLanguagePanel{background:#f8faff!important;border-color:var(--jv-line)!important;color:var(--jv-text)!important}
#subtitleLanguagePanel select{background:#fff!important;color:var(--jv-text)!important;border-color:#dce3ef!important}
.how-section,.plans-section{max-width:1320px;margin:0 auto;padding:64px clamp(20px,4vw,52px)!important}
.steps article,.plan-card{background:#fff!important;border:1px solid var(--jv-line)!important;border-radius:18px!important;box-shadow:var(--jv-shadow)!important}
.steps article h3,.plan-card h3,.plan-card .plan-price{color:var(--jv-text)!important}
.steps article p,.plan-description,.plans-note,.plan-card li{color:var(--jv-muted)!important}
.plan-card.featured-plan{border:1.5px solid #9fb4ff!important;box-shadow:0 12px 34px rgba(49,95,232,.10)!important}
.site-footer{background:#fff!important;border-top:1px solid var(--jv-line)!important;color:var(--jv-muted)!important}
.toast{box-shadow:var(--jv-shadow)}
@media(max-width:900px){
 .topbar nav{display:none!important}
 .studio{grid-template-columns:1fr!important}
 .sidebar{display:flex!important;flex-wrap:wrap;gap:6px;border-right:0!important;border-bottom:1px solid var(--jv-line)!important}
 .mini-brand{width:100%;margin-bottom:8px}
 .side-bottom{display:none}
 .editor-grid{grid-template-columns:1fr!important}
}
@media(max-width:600px){
 .hero{padding-top:38px!important}
 .feature-strip{margin-left:14px!important;margin-right:14px!important;grid-template-columns:1fr 1fr!important}
 .workspace{padding:14px!important}
 .workspace-head{align-items:flex-start;flex-direction:column}
 .studio-section{padding-left:10px!important;padding-right:10px!important}
}


/* ===== V3 : correction du panneau de réglages injecté par app.js ===== */
.controls-panel{
  color:#18243a!important;
  background:#fff!important;
}
.controls-panel details{
  display:block!important;
  margin:14px 0!important;
  padding:12px 14px!important;
  background:#f7f9fd!important;
  border:1px solid #e1e7f0!important;
  border-radius:12px!important;
  color:#18243a!important;
}
.controls-panel details summary{
  color:#243a63!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
  cursor:pointer!important;
  padding:4px 0!important;
}
.controls-panel details[open] summary{margin-bottom:12px!important}
.controls-panel .field-label,
.controls-panel label{
  color:#42516b!important;
  font-size:12px!important;
  font-weight:650!important;
}
.controls-panel input[type="range"]{
  display:block!important;
  width:100%!important;
  accent-color:#315fe8!important;
  cursor:pointer!important;
  margin:8px 0 14px!important;
}
.controls-panel input[type="checkbox"]{
  accent-color:#315fe8!important;
  width:16px!important;height:16px!important;
}
.controls-panel input[type="color"]{
  width:54px!important;height:38px!important;
  padding:3px!important;background:#fff!important;
  border:1px solid #dce3ef!important;border-radius:8px!important;
}
.controls-panel input[type="text"],
.controls-panel input[type="number"],
.controls-panel select,
.controls-panel textarea{
  background:#fff!important;color:#17243b!important;
  border:1px solid #d7dfeb!important;border-radius:9px!important;
  min-height:38px!important;padding:9px 11px!important;
}
.controls-panel option{background:#fff!important;color:#17243b!important}
.controls-panel small,
.controls-panel .note,
.controls-panel details div{
  color:#64728a!important;
}
.controls-panel button{
  cursor:pointer!important;
}
.editor-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr)!important;
  align-items:start!important;
}
.preview-frame{
  background:#101827!important;
  border:1px solid #dce3ef!important;
  border-radius:14px!important;
  overflow:hidden!important;
}
.preview-caption{
  max-width:92%!important;
  line-height:1.18!important;
  overflow-wrap:anywhere!important;
}
@media(max-width:900px){
  .editor-grid{grid-template-columns:1fr!important}
  .controls-panel{min-width:0!important}
  .controls-panel details{padding:10px!important}
}


/* JUSTEVIVO V4 — studio premium, contrôles texte */
:root{
 --jv-ink:#111827;--jv-muted:#64748b;--jv-line:#e2e8f0;
 --jv-surface:#ffffff;--jv-soft:#f1f5f9;--jv-violet:#6d5dfb;
 --jv-teal:#16b8a6;--jv-amber:#f59e0b;
}
.controls-panel{
 background:var(--jv-surface)!important;color:var(--jv-ink)!important;
 border:1px solid var(--jv-line)!important;border-radius:18px!important;
 box-shadow:0 12px 36px rgba(15,23,42,.07)!important;
 padding:18px!important;
}
.controls-panel .panel-label{
 color:#475569!important;font-size:11px!important;letter-spacing:.12em!important;
}
.controls-panel details{
 background:#f8fafc!important;border:1px solid #e2e8f0!important;
 border-radius:14px!important;padding:14px!important;margin:12px 0!important;
}
.controls-panel details summary{
 color:#312e81!important;font-size:13px!important;font-weight:800!important;
}
.controls-panel .field-label{
 color:#334155!important;font-size:12px!important;font-weight:700!important;
 margin:10px 0 6px!important;
}
.controls-panel select,.controls-panel input[type="text"],
.controls-panel input[type="number"],.controls-panel textarea{
 width:100%!important;box-sizing:border-box!important;background:#fff!important;
 color:#0f172a!important;border:1px solid #cbd5e1!important;
 border-radius:10px!important;padding:10px 12px!important;
}
.controls-panel input[type="range"]{width:100%!important;accent-color:var(--jv-violet)!important}
.controls-panel input[type="checkbox"]{accent-color:var(--jv-violet)!important}
.controls-panel input[type="color"]{
 width:52px!important;height:38px!important;padding:3px!important;
 background:#fff!important;border:1px solid #cbd5e1!important;border-radius:9px!important;
}
.controls-panel .jv-color-control{
 display:flex!important;align-items:center!important;justify-content:space-between!important;
 gap:12px!important;padding:8px 0!important;border-bottom:1px solid #edf2f7!important;
}
.controls-panel .jv-color-control .field-label{margin:0!important}
.controls-panel .jv-color-control input{flex:0 0 52px!important}
.editor-grid{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr)!important;gap:20px!important}
.preview-panel,.controls-panel{min-width:0!important}
.preview-frame{background:#0b1220!important;border-radius:18px!important;overflow:hidden!important}
@media(max-width:900px){
 .editor-grid{grid-template-columns:minmax(0,1fr)!important}
 .controls-panel{padding:13px!important}
 .preview-frame{max-height:65vh!important}
}