/* viewer/themes/default/theme.css */ * { box-sizing: border-box; margin:0; padding:0; } :root{ --panel-radius:16px; --panel-shadow:0 8px 28px rgba(0,0,0,.08); --panel-bg:#fff; --ui-gap:16px; --ring:#3b82f6; --ring-soft:rgba(59,130,246,.2); --border:#e6e7eb; --viewer-gray:#f3f4f6; } /* ===== Desktop layout ===== */ html, body { height: 100%; } body{ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: transparent; height: 100vh; display: grid; column-gap: var(--ui-gap); /* uniquement horizontal */ row-gap: 0; /* pas d’espace vertical */ overflow: hidden; padding: 0px; } /* ⚠️ Remplace le PHP grid-template-columns via classes sur */ body.not-shopify{ grid-template-columns: auto 1fr; } body.is-shopify{ grid-template-columns: 1fr; } .options-panel{ position: relative; background: #FFFFFFEE; border: 1px solid var(--border); border-radius: var(--panel-radius); min-width: 260px; max-width: 260px; padding: 18px; overflow: hidden; z-index: 1; } .options-scroll{ height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-right: 10px; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.28) transparent; } .options-scroll::-webkit-scrollbar{ width: 12px; } .options-scroll::-webkit-scrollbar-track{ background: transparent; margin: 12px; } .options-scroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.22); border-radius: 999px; border: 4px solid transparent; background-clip: content-box; } .options-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,.32); border-width:3px; } .options-scroll::-webkit-scrollbar-button{ display:none; width:0; height:0; } #scene-container{ background: var(--viewer-gray); border:1px solid var(--border); border-radius:var(--panel-radius); height: auto; overflow: hidden; position: relative; z-index: 0; height: 100%; border-radius: 14px; } .group{ padding:10px 4px 14px; border-bottom:1px dashed #ececf1; } .group:last-child{ border-bottom:0; } .group-header{ padding:.4rem .2rem; cursor:pointer; font-weight:600; color:#2b2f36; position:relative; user-select:none; } .group-header::after{ content:"▾"; position:absolute; right:6px; top:50%; transform:translateY(-50%); transition:transform .2s; color:#9aa1ab; font-size:.9rem; } .group-header.closed::after{ transform:translateY(-50%) rotate(-90deg); } .group-body{ overflow: visible; } .group-body.open{ max-height:none; } .swatches{ display:flex; flex-wrap:wrap; gap:.6rem; padding-top:.4rem; overflow:visible; } .swatches.is-text-list{ align-items:flex-start; gap:.6rem; } .swatches.horizontal{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:.4rem; } .swatches.horizontal::-webkit-scrollbar{ height:6px; } .swatches.horizontal::-webkit-scrollbar-track{ background: transparent; margin: 0 12px; } .swatches.horizontal::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius:999px; } .swatch-item{ width:50px; height:50px; border:2px solid transparent; border-radius:12px; background:#fafafa; transition:background .2s, border-color .2s, box-shadow .2s; display:flex; align-items:center; justify-content:center; cursor:pointer; outline:none; flex: 0 0 auto; } .swatch-item:hover{ background:#f0f0f0; } .swatch-item:focus-visible{ box-shadow:0 0 0 3px var(--ring-soft); border-color:var(--ring); } .swatch-item.selected{ border-color:var(--ring); background:#eef4ff; } .swatch-item img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; border-radius:10px;} .swatch-label{ font-size:.9rem; color:#424750; text-align:left; padding:0 .1rem; white-space:nowrap; } .swatch-item--text{ height:auto; min-height:44px; padding:.65rem .8rem; border-radius:12px; justify-content:flex-start; align-items:center; gap:.5rem; width:auto; max-width:320px; background:#f9fafb; border:1px solid #e8e9ee; } .swatch-item--text:hover{ background:#f3f5f8; } .sheet-handle{ width: 46px; height: 5px; background: rgba(0,0,0,.08); border-radius: 999px; margin: 2px auto 8px; } #debug{ position: fixed; bottom: 14px; left: 14px; background: rgba(0,0,0,.6); color:#a6ff93; padding:4px 8px; font-size:12px; z-index:9999; border-radius:6px; pointer-events:none; } iframe{ width:100%; height:auto; aspect-ratio:20/9; min-height:540px; display:block; } /* ========= QR code (desktop) ========= */ #qr-wrapper{ position: absolute; left: 12px; /* 12px depuis le scene-container */ bottom: 70px; /* idem, relatif au scene-container */ padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 10px 28px rgba(0,0,0,.18); display: none; align-items: center; gap: 10px; z-index: 50; } body.qr-open #qr-wrapper{ display: flex; } #qr-wrapper img{ width: 150px; height: 150px; } .qr-text{ font-size: 12px; line-height: 1.4; color: #374151; max-width: 150px; } .qr-title{ font-weight: 600; font-size: 13px; margin-bottom: 4px; } .qr-sub{ opacity: .75; } @media (max-width: 900px){ #qr-wrapper{ display:none; } } body.ar-active #qr-wrapper{ display:none !important; } .options-toggle-btn{ position: absolute; right: 24px; top: 24px; padding: 8px 12px; border-radius: 12px; border: 0px solid rgba(0,0,0,.12); background: rgba(255,255,255,.96); box-shadow: 0 6px 20px rgba(0,0,0,.18); display: none; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; cursor: pointer; z-index: 60; } .options-toggle-btn svg{ width: 16px; height:16px; } /* Backdrop overlay (il était utilisé mais pas défini dans ton CSS) */ #options-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 75; } body.options-open #options-backdrop{ opacity: 1; pointer-events: auto; } @media (max-width: 900px){ body{ grid-template-columns: 1fr; grid-template-rows: 1fr; } .options-panel{ display: none; min-width: 0; width: auto; height: auto; } body.options-open .options-panel{ display: block; position: fixed; right: 24px; bottom: 24px; top: max(env(safe-area-inset-top, 100px) + 20px, 70px); border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); overflow: hidden; z-index: 80; } .options-scroll{ height: calc(100% - 22px); padding-right: 6px; scrollbar-width: none; } .options-scroll::-webkit-scrollbar{ width:0; height:0; } .swatches{ gap:.5rem; } .swatch-item--text .swatch-label{ white-space:normal; } .options-toggle-btn{ display: inline-flex; } } .capture-button{ position: fixed; left: 50%; transform: translateX(-50%); bottom: max(env(safe-area-inset-bottom, 10px) + 18px, 18px); width: 70px; height: 70px; border-radius: 999px; border: 3px solid rgba(255,255,255,.9); background: rgba(0,0,0,.25); box-shadow: 0 8px 26px rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 70; cursor: pointer; -webkit-tap-highlight-color: transparent; } .capture-button::before{ content: ""; width: 72%; height: 72%; border-radius: 999px; border: 2px solid rgba(255,255,255,.95); background: rgba(255,255,255,.04); } .capture-button.capturing{ transform: translateX(-50%) scale(0.94); } .capture-button.capturing::before{ transform: scale(0.9); background: rgba(255,255,255,0.3); } @media (max-width: 900px){ body.ar-active .capture-button{ display:flex; } } body.ar-active{ padding: 0 !important; gap: 0 !important; background: transparent !important; overflow: hidden !important; } body.ar-active #scene-container{ position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.ar-active #scene-container canvas{ display:block; width:100% !important; height:100% !important; border-radius:0 !important; } /* On masque les boutons AR auto / libs externes */ #ARButton, .ar-button, .ar-cta, .ar-start, .ar-overlay, .webxr-button, .xr-button, button#start-ar, button.start-ar, button[data-ar] { display: none !important; } #capture-flash-overlay{ position: fixed; inset: 0; background: white; opacity: 0; pointer-events: none; z-index: 90; } @keyframes captureFlash { 0% { opacity: 0; } 10% { opacity: 0.9; } 100% { opacity: 0; } } body.capture-flash #capture-flash-overlay{ animation: captureFlash 260ms ease-out; } #auto-ar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 80; } #auto-ar-overlay > div { background: #fff; border-radius: 18px; padding: 18px 20px 16px; max-width: 320px; width: 88%; box-shadow: 0 18px 40px rgba(0,0,0,0.3); text-align: center; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #auto-ar-overlay h2 { font-size: 17px; margin-bottom: 6px; color: #111827; } #auto-ar-overlay p { font-size: 14px; line-height: 1.4; color: #4b5563; } #auto-ar-overlay button#auto-ar-start-btn { margin-top: 10px; padding: 8px 16px; border-radius: 999px; border: none; background: #2563eb; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; } body.ar-active #auto-ar-overlay { display: none !important; }