:root{--gold: #C9A84C;--gold-light: #E8C97A;--gold-dark: #8A6B22;--black: #080808;--dark1: #111111;--dark2: #1A1A1A;--dark3: #252525;--border: #2E2E2E;--text: #F0EDE6;--muted: #777770}.section-essayage-virtuel *,.section-essayage-virtuel *:before,.section-essayage-virtuel *:after{box-sizing:border-box;margin:0;padding:0}.section-essayage-virtuel{background:var(--black);color:var(--text);font-family:Georgia,Times New Roman,serif;min-height:100vh;display:block}.header{text-align:center;padding:36px 20px 24px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#0f0f0f 0%,var(--black) 100%)}.header-logo{font-size:11px;letter-spacing:6px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}.header-title{font-size:22px;font-weight:300;letter-spacing:2px;color:var(--text)}.header-sub{margin-top:6px;font-size:12px;color:var(--muted);letter-spacing:1px}.app{max-width:1140px;margin:0 auto;padding:28px 20px;display:grid;grid-template-columns:260px 1fr;gap:24px}@media(max-width:800px){.app{grid-template-columns:1fr}}.sidebar{display:flex;flex-direction:column;gap:16px}.panel{background:var(--dark2);border:1px solid var(--border);border-radius:12px;padding:18px}.panel-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:8px}.panel-label:after{content:"";flex:1;height:1px;background:var(--border)}.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cat-btn{padding:12px 6px 10px;border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:8px;cursor:pointer;font-size:10px;letter-spacing:1.5px;text-align:center;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:5px}.cat-btn svg{width:22px;height:22px}.cat-btn:hover{border-color:var(--gold);color:var(--gold-light)}.cat-btn.active{background:#c9a84c1f;border-color:var(--gold);color:var(--gold)}.product-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.product-item{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s ease}.product-item:hover{border-color:var(--gold);background:#c9a84c0a}.product-item.active{border-color:var(--gold);background:#c9a84c1a}.product-thumb{width:46px;height:46px;border-radius:6px;background:var(--dark3);flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.product-thumb img{width:100%;height:100%;object-fit:cover}.product-name{font-size:11px;color:var(--text);line-height:1.4}.slider-group{margin-bottom:14px}.slider-group:last-child{margin-bottom:0}.slider-label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:var(--muted);margin-bottom:8px;text-transform:uppercase}.slider-label span{color:var(--gold)}.section-essayage-virtuel input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;background:var(--dark3);border-radius:2px;outline:none}.section-essayage-virtuel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 0 6px #c9a84c80}.main-area{display:flex;flex-direction:column;gap:14px}.mode-row{display:flex;gap:8px;background:var(--dark2);border:1px solid var(--border);border-radius:10px;padding:5px}.mode-btn{flex:1;padding:10px;border:none;background:transparent;color:var(--muted);border-radius:7px;cursor:pointer;font-size:12px;letter-spacing:1px;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:7px}.mode-btn.active{background:#c9a84c1f;color:var(--gold)}.viewport{position:relative;background:var(--dark2);border:1px solid var(--border);border-radius:14px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}.viewport video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.viewport canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain}#outputCanvas{z-index:10}.upload-zone{position:relative;z-index:5;text-align:center;padding:60px 30px;cursor:pointer;width:100%}.upload-zone input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.upload-icon{width:64px;height:64px;margin:0 auto 16px;border:1.5px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:28px}.upload-title{font-size:15px;color:var(--text);margin-bottom:8px}.upload-sub{font-size:12px;color:var(--muted)}.upload-sub em{color:var(--gold);font-style:normal}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#080808e0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:40;border-radius:14px;gap:16px}.ring{width:44px;height:44px;border:3px solid var(--dark3);border-top-color:var(--gold);border-radius:50%;animation:ev-spin .75s linear infinite}@keyframes ev-spin{to{transform:rotate(360deg)}}.loading-msg{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}.badge{position:absolute;top:14px;left:14px;background:#c9a84c26;border:1px solid rgba(201,168,76,.3);border-radius:6px;padding:4px 10px;font-size:10px;letter-spacing:1px;color:var(--gold);z-index:20}.status-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--dark2);border:1px solid var(--border);border-radius:8px;font-size:12px;color:var(--muted);min-height:40px}.dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0;transition:background .3s}.dot.green{background:#4caf50;box-shadow:0 0 6px #4caf5066;animation:ev-blink 2s infinite}.dot.yellow{background:#ffc107}.dot.red{background:#f44336}@keyframes ev-blink{0%,to{opacity:1}50%{opacity:.4}}.action-row{display:flex;gap:10px}.btn-gold{flex:1;padding:13px;background:var(--gold);color:var(--black);border:none;border-radius:8px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;font-weight:700;transition:background .2s}.btn-gold:hover{background:var(--gold-light)}.btn-outline{padding:13px 18px;background:transparent;color:var(--gold);border:1px solid var(--gold);border-radius:8px;font-size:12px;cursor:pointer;transition:all .2s}.btn-outline:hover{background:#c9a84c14}
/*# sourceMappingURL=/cdn/shop/t/86/assets/essayage-virtuel.css.map */