/* Calculateur Verre & Volume : univers du logo, sombre (nuit, néon bleu, acier brossé). Tout est limité au bloc .vvc pour ne pas toucher au thème. */
.vvc{
  --vvc-bg:#06080C; --vvc-panel:#0D1218; --vvc-fg:#E6EDF4; --vvc-muted:#8996A6; --vvc-line:#1C2633; --vvc-soft:#121A24;
  --vvc-accent:#2EA8FF; --vvc-accent-fg:#03101C; --vvc-glow:rgba(46,168,255,.45); --vvc-bad:#FF8B6E; --vvc-ok:#5ED69B;
  --vvc-stage:#030508; --vvc-stage-fg:#7B8899;
  --vvc-display:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --vvc-body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --vvc-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
  background:radial-gradient(900px 520px at 85% -120px,rgba(46,168,255,.16),transparent 70%),var(--vvc-bg);
  color:var(--vvc-fg); font-family:var(--vvc-body); font-size:15px; line-height:1.5;
  border-radius:10px; padding:16px; margin-top:0; margin-bottom:24px; text-align:left; max-width:1180px; margin-left:auto; margin-right:auto;
}
.vvc *,.vvc *::before,.vvc *::after{box-sizing:border-box}
.vvc [hidden]{display:none!important}
.vvc p{margin:0}
.vvc a{color:var(--vvc-accent)}
.vvc h3{font-family:var(--vvc-display); font-size:1.2rem; font-weight:600; margin:0; line-height:1.15; color:var(--vvc-fg)}

.vvc-layout{display:grid; gap:16px; grid-template-columns:minmax(0,1fr); grid-template-areas:"stage" "controls" "summary"}
.vvc-colA{grid-area:stage; min-width:0}
.vvc-colB{grid-area:controls; min-width:0}
.vvc-colC{grid-area:summary; min-width:0}
@media (min-width:920px){
  .vvc-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; grid-template-areas:"stage controls" "summary controls"; align-items:start; gap:20px}
  .vvc-colC{position:sticky; top:12px}
}
.vvc-panel{background:var(--vvc-panel); border:1px solid var(--vvc-line); border-radius:8px; padding:18px}
.vvc-stack{display:grid; gap:20px}

/* Aperçu */
.vvc-stage{border-radius:8px; overflow:hidden; background:var(--vvc-stage); border:1px solid var(--vvc-line)}
.vvc-stage-top{display:flex; justify-content:space-between; gap:8px; padding:10px 14px; font-family:var(--vvc-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--vvc-stage-fg)}
.vvc-wall{position:relative; min-height:230px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:26px 16px 22px;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:28px 28px}
.vvc-signtext{display:inline-block; white-space:nowrap; line-height:1.15; letter-spacing:.02em; color:var(--vvc-sign); padding-inline:4px;
  -webkit-text-stroke:.03em var(--vvc-chant,#ccc); paint-order:stroke fill}
.vvc-lit .vvc-signtext{color:color-mix(in srgb,var(--vvc-sign) 45%,#ffffff);
  text-shadow:0 0 3px var(--vvc-sign),0 0 12px var(--vvc-sign),0 0 30px color-mix(in srgb,var(--vvc-sign) 80%,transparent),0 0 60px color-mix(in srgb,var(--vvc-sign) 55%,transparent)}
.vvc-wall:not(.vvc-lit) .vvc-signtext{text-shadow:0 2px 0 rgba(0,0,0,.5),0 8px 14px rgba(0,0,0,.55)}
.vvc-dim{position:relative; height:14px; border-top:1px solid var(--vvc-stage-fg); color:var(--vvc-stage-fg); min-width:60px; max-width:100%}
.vvc-dim::before,.vvc-dim::after{content:""; position:absolute; top:-6px; width:1px; height:11px; background:var(--vvc-stage-fg)}
.vvc-dim::before{left:0} .vvc-dim::after{right:0}
.vvc-dim span{position:absolute; left:50%; top:-.7em; transform:translateX(-50%); background:var(--vvc-stage); padding:0 8px; font-family:var(--vvc-mono); font-size:.74rem; white-space:nowrap}
#vvc-fileCanvas{display:block; max-width:100%; max-height:220px; width:auto; height:auto}
.vvc-lit #vvc-fileCanvas{filter:drop-shadow(0 0 3px var(--vvc-sign)) drop-shadow(0 0 16px var(--vvc-sign))}
.vvc-drop{display:grid; gap:6px; justify-items:start; padding:16px; border:1px dashed var(--vvc-line); border-radius:8px; background:var(--vvc-bg)}
.vvc-drop.vvc-over{border-color:var(--vvc-accent)}
.vvc-drop input[type=file]{font:inherit; font-size:.88rem; max-width:100%; color:var(--vvc-fg)}
.vvc-warns{display:grid; gap:4px; margin:0; padding:0; list-style:none}
.vvc-warns li{color:var(--vvc-bad); font-size:.85rem; margin:0}
.vvc-readout{display:flex; flex-wrap:wrap; gap:6px 18px; padding:10px 14px; border-top:1px solid rgba(255,255,255,.08); font-family:var(--vvc-mono); font-size:.76rem; color:var(--vvc-stage-fg)}

/* Champs */
.vvc fieldset{border:0; padding:0; margin:0; min-width:0; display:grid; gap:8px; background:none}
.vvc legend{padding:0; margin:0 0 8px; font-weight:600; font-size:.95rem; color:var(--vvc-fg); float:none; width:auto}
.vvc legend label{font:inherit; color:inherit; margin:0}
.vvc-hint{color:var(--vvc-muted); font-size:.82rem}
.vvc-err{color:var(--vvc-bad); font-size:.88rem}
.vvc-okmsg{color:var(--vvc-ok); font-size:.88rem}
.vvc input[type=text],.vvc input[type=number]{
  width:100%; font:inherit; font-weight:400; color:var(--vvc-fg); background:var(--vvc-bg); border:1px solid var(--vvc-line); border-radius:6px; padding:10px 12px; margin:0; box-shadow:none; height:auto; min-height:44px}
.vvc input:focus-visible,.vvc button:focus-visible,.vvc a:focus-visible{outline:2px solid var(--vvc-accent); outline-offset:2px}
.vvc-chips{display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:8px}
.vvc-chip{position:relative; display:block; margin:0; padding:0; cursor:pointer}
.vvc .vvc-chip input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; appearance:none; -webkit-appearance:none; border:0; background:none}
.vvc-chip>span{display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:6px 10px; border:1px solid var(--vvc-line); border-radius:6px; background:var(--vvc-bg); color:var(--vvc-fg); font-size:1.15rem; line-height:1.15}
.vvc-chip input:checked+span{border-color:var(--vvc-accent); box-shadow:inset 0 0 0 1px var(--vvc-accent),0 0 14px -4px var(--vvc-glow)}
.vvc-chip input:focus-visible+span{outline:2px solid var(--vvc-accent); outline-offset:2px}
.vvc-chip input:disabled{cursor:not-allowed}
.vvc-chip input:disabled+span{opacity:.3}
.vvc-seg{display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px}
.vvc-seg .vvc-chip>span{font-size:.92rem; font-weight:500; font-family:var(--vvc-body); flex-direction:column; gap:2px}
.vvc-seg .vvc-chip small{font-size:.74rem; color:var(--vvc-muted); font-weight:400}
.vvc-swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px}
.vvc-swatches .vvc-chip>span{flex-direction:column; gap:6px; min-height:72px; font-size:.78rem; font-family:var(--vvc-body); font-weight:500}
.vvc-dot{width:26px; height:26px; border-radius:50%; border:1px solid rgba(128,128,128,.45); display:block}
.vvc-range-row{display:flex; align-items:center; gap:14px}
.vvc input[type=range]{flex:1; min-width:0; accent-color:var(--vvc-accent); margin:0; padding:0; background:none; border:0}
.vvc-val{font-family:var(--vvc-mono); font-size:1.05rem; min-width:6ch; text-align:right}
.vvc input.vvc-qty{max-width:120px}

/* Prix */
.vvc-bigprice{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; margin-top:6px}
.vvc-bigprice strong{font-family:var(--vvc-display); font-size:2rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--vvc-fg)}
.vvc-lines{display:grid; gap:0; margin:12px 0 0; padding:0; list-style:none}
.vvc-lines li{display:flex; justify-content:space-between; gap:14px; padding:9px 0; margin:0; border-bottom:1px solid var(--vvc-line)}
.vvc-l{min-width:0}
.vvc-l small{display:block; color:var(--vvc-muted); font-size:.8rem}
.vvc-a{font-family:var(--vvc-mono); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
.vvc-lines li.vvc-total{border-bottom:0; padding-top:14px; font-weight:600; font-size:1.15rem}
.vvc-lines li.vvc-total .vvc-a{font-size:1.3rem}
.vvc-note{margin-top:12px!important; color:var(--vvc-muted); font-size:.82rem}
.vvc-checks{display:grid; gap:4px; margin:12px 0 0; padding:0; list-style:none; font-size:.85rem}
.vvc-checks li{display:flex; gap:8px; margin:0}
.vvc-checks li::before{content:"✓"; color:var(--vvc-ok); font-weight:700}
.vvc-checks li.vvc-bad::before{content:"!"; color:var(--vvc-bad)}
.vvc-checks li.vvc-bad{color:var(--vvc-bad)}
.vvc-checks li.vvc-info::before{content:"i"; color:var(--vvc-accent); font-weight:700}
.vvc-warnmsg{color:var(--vvc-fg); font-size:.88rem; border-left:3px solid var(--vvc-accent); padding:6px 0 6px 10px!important; margin:4px 0!important}
.vvc-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
#vvc-addMsg{margin-top:8px; min-height:1.2em}
.vvc-atelier{margin-top:16px; border:1px dashed var(--vvc-line); border-radius:8px; padding:14px; background:var(--vvc-soft)}
.vvc-atelier h3{font-size:.95rem}
.vvc-atelier .vvc-lines li{padding:6px 0; font-size:.88rem}

.vvc .vvc-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 18px; border-radius:6px; border:1px solid var(--vvc-accent); background:var(--vvc-accent); color:var(--vvc-accent-fg); font:inherit; font-weight:600; cursor:pointer; text-decoration:none; text-align:center; box-shadow:0 0 0 0 var(--vvc-glow); transition:box-shadow .2s; text-transform:none; letter-spacing:normal; line-height:1.2}
.vvc .vvc-btn:hover{box-shadow:0 0 22px var(--vvc-glow); color:var(--vvc-accent-fg); background:var(--vvc-accent)}
.vvc .vvc-btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none}
@media (prefers-reduced-motion: reduce){.vvc .vvc-btn{transition:none}}

/* Barre de total (mobile) */
.vvc-bar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--vvc-panel); border-top:1px solid var(--vvc-line); color:var(--vvc-fg);
  padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.vvc-bar small{display:block; color:var(--vvc-muted); font-size:.75rem; line-height:1.2}
.vvc-bar strong{font-family:var(--vvc-mono); font-size:1.2rem; font-variant-numeric:tabular-nums}
@media (min-width:920px){.vvc-bar{display:none}}
@media (max-width:919px){.vvc{padding-bottom:84px}}