:root{--ink:#242720;--muted:#81847b;--line:#e4e6df;--accent:#c6f17b;--green:#447435;--paper:#fbfcf8;--soft:#f1f3ed}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:13px/1.5 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;background:transparent;color:inherit;padding:8px 10px;transition:background .15s,border .15s}button:hover{background:#eaf0e3}button:disabled{opacity:.4;cursor:not-allowed}button.selected{background:#e9f2dd;border-color:#a9c58a;color:#2d4b23}input[type=number],select{width:100%;border:1px solid var(--line);border-radius:5px;background:white;padding:7px;color:var(--ink)}input[type=range]{accent-color:#537e39;width:100%;height:4px;margin:8px 0}input[type=checkbox]{accent-color:#537e39;width:15px;height:15px}input[type=color]{width:26px;height:26px;padding:2px;border:1px solid var(--line);background:white;border-radius:5px}header{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#fff}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-size:24px;font-weight:650;letter-spacing:-1px}.brand-icon{width:40px;height:40px;background:var(--ink);color:var(--accent);font-size:34px;line-height:36px;text-align:center;border-radius:10px}.brand-icon span{font-size:16px}.brand-sub{display:block;font-size:8px;letter-spacing:2.4px;font-weight:500;margin-top:-3px}.header-center{font-size:11px;color:var(--muted)}.status-dot{display:inline-block;width:6px;height:6px;background:#75a651;border-radius:50%;margin-right:7px}.primary{background:var(--accent);border-color:var(--accent);padding:12px 18px;font-weight:600}.primary:hover{background:#b5e767;border-color:#a8d65c}.workspace{display:grid;grid-template-columns:280px minmax(340px,1fr) 280px;height:calc(100dvh - 78px);min-height:650px}.left-panel,.right-panel{overflow:auto;scrollbar-width:thin;scrollbar-color:#d9ddcf transparent;background:#fff}.left-panel{border-right:1px solid var(--line)}.right-panel{border-left:1px solid var(--line)}.panel-intro{padding:25px 24px 20px}.eyebrow{font-size:9px;letter-spacing:1.8px;color:var(--muted);font-weight:600}h1{font-size:32px;line-height:1.13;letter-spacing:-1.4px;font-weight:500;margin:13px 0}.panel-intro p{color:var(--muted);margin:12px 0 0}section{padding:21px 22px;border-top:1px solid var(--line)}.right-panel section:first-child{border-top:0}.section-title{display:flex;gap:10px;align-items:center;margin-bottom:17px}.step{font:10px monospace;color:#81916d;border:1px solid #dce4d2;padding:3px 5px;border-radius:4px}h2{font-size:14px;font-weight:600;margin:0}.devices{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.devices button{height:80px;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.device-icon{display:block;border:1.5px solid currentColor;border-radius:3px}.phone{width:15px;height:27px}.tablet{width:21px;height:27px}.desktop{width:30px;height:21px;position:relative}.desktop:after{content:'';position:absolute;width:10px;height:5px;border-bottom:1.5px solid;bottom:-6px;left:8px}.line{display:flex;justify-content:space-between;align-items:center;margin:12px 0;font-size:11px}.pill{font-size:9px;background:var(--soft);padding:1px 6px;border-radius:4px}label{display:block;font-size:11px;font-weight:500;margin:14px 0 7px}.finishes{display:flex;gap:9px}.finishes button{width:25px;height:25px;padding:0;background:var(--swatch);border:3px solid white;box-shadow:0 0 0 1px #d6d9d0;border-radius:50%}.finishes button.selected{box-shadow:0 0 0 2px #658a43}.small{font-size:10px;line-height:1.6;color:var(--muted);margin:12px 0}.image-recommend{background:var(--soft);padding:10px;border-radius:6px;font-size:10px;color:#6b7462;margin-bottom:12px}.image-recommend div{display:flex;justify-content:space-between}.image-recommend strong{font-weight:500;color:#394431}.image-recommend>span{display:block;margin-top:5px;font-size:9px}.dropzone{border:1px dashed #bac5ac;border-radius:8px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:17px 6px;gap:4px;background:#fafcf6;cursor:pointer}.dropzone.dragover{background:#e2f4cc}.upload-symbol{font-size:24px;line-height:1.2;color:#607e47}.dropzone strong{font-size:11px}.dropzone span:not(.upload-symbol){font-size:10px;color:var(--muted)}.dropzone small{font-size:8px;color:var(--muted);margin-top:4px}.segmented{display:flex;margin:10px 0;gap:3px;background:var(--soft);padding:3px;border-radius:7px}.segmented button{flex:1;font-size:11px;padding:6px 2px;border-color:transparent}.segmented button.selected{background:white;border-color:#dae0d1;box-shadow:0 1px 2px #00000005}.control{margin:15px 0}.control-top{display:flex;align-items:center;justify-content:space-between;gap:5px}.control-top label{margin:0;color:#62695a;font-size:10px}.control-top input{width:67px;text-align:right;font-size:10px;padding:3px 4px}.control-top .unit{font-size:9px;color:var(--muted)}.control-values{display:flex;align-items:center;gap:4px}.text-button{border:0;font-size:10px;color:#6e7c5d;padding:4px 0}.views{display:flex;flex-wrap:wrap;gap:5px}.views button{font-size:10px;padding:6px 8px}.button-row{display:flex;gap:7px;margin-top:15px}.button-row button{flex:1;font-size:10px}.check{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:400}details{border-top:1px solid var(--line);padding-top:12px;margin-top:15px}summary{cursor:pointer;font-size:11px;color:#62695a}.ambiences{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.ambiences button{padding:5px;font-size:9px;text-align:left}.ambiences span{display:block;height:30px;border-radius:4px;margin-bottom:5px}.formats{display:flex;gap:5px}.formats button{flex:1;font-size:21px;padding:5px}.formats span{display:block;font-size:9px}.dimensions{display:flex;align-items:end;gap:9px}.dimensions label{margin:0;flex:1;font-size:10px}.dimensions span{margin-bottom:6px;color:var(--muted)}.dimensions input{margin-top:5px;font-size:11px}.full{width:100%}.export-summary{background:var(--soft);padding:12px;border-radius:7px;margin:15px 0;font-size:10px}.export-summary span{display:block}.export-summary span+span{color:var(--muted);font-size:9px;margin-top:3px}.privacy-note{margin:0 22px 22px;padding:14px;background:#f6f8f1;border-radius:7px;color:#6a7759;font-size:10px}.privacy-note>span{display:block;font-size:22px;margin-bottom:6px}.privacy-note p{font-size:9px;margin-bottom:0}.warning{color:#916026;background:#fff3df;border:1px solid #eed6b0;border-radius:5px;padding:9px;font-size:10px}.preview-toolbar{padding:19px 25px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:1.1px;color:#7d8473}.backgrounds{display:flex;align-items:center;gap:4px}.backgrounds button{padding:5px;border-radius:50%;border-color:transparent}.backgrounds button span{display:block;width:18px;height:18px;border-radius:50%;border:1px solid #d6dbce}.checker-dot{background:conic-gradient(#eeeeee 25%,#ffffff 0 50%,#eeeeee 0 75%,#ffffff 0);background-size:8px 8px}.solid-dot{background:#d9d7d2}.gradient-dot{background:linear-gradient(135deg,#dcdeec,#f9e7d8)}main{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#f4f5ef}.stage{flex:1;min-height:260px;display:flex;align-items:center;justify-content:center;padding:10px 35px 24px;position:relative}.frame{position:relative;box-shadow:0 5px 40px #26351508;background:#e8e6e1;overflow:hidden;width:100%;height:100%;max-width:100%}.frame.checker{background-color:#ffffff;background-image:conic-gradient(#eeeeee 25%,#ffffff 0 50%,#eeeeee 0 75%,#ffffff 0);background-size:20px 20px}.frame.gradient{background:linear-gradient(140deg,#dde1ea,#f0e7dc)}canvas{width:100%;height:100%;display:block;touch-action:none}.frame-label{position:absolute;bottom:12px;left:16px;font-size:8px;letter-spacing:1.1px;color:#858b7a;pointer-events:none}.frame-label span{margin-left:8px;letter-spacing:0}.corner{position:absolute;width:11px;height:11px;border-color:#a8b39a;border-style:solid;pointer-events:none}.tl{top:0;left:0;border-width:1px 0 0 1px}.tr{top:0;right:0;border-width:1px 1px 0 0}.bl{bottom:0;left:0;border-width:0 0 1px 1px}.br{bottom:0;right:0;border-width:0 1px 1px 0}.preview-footer{margin:0 25px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-top:1px solid #e0e3d8}.manipulation{display:flex;gap:3px;flex-wrap:wrap;flex:0 0 auto}.manipulation button{font-size:10px;padding:7px 8px}.preview-footer>span{font-size:9px;color:var(--muted);max-width:none;flex:1 1 auto;text-align:center;white-space:nowrap}.preview-footer>button{border-radius:50%;width:24px;height:24px;padding:0;flex:0 0 24px}.composition-status{display:flex;justify-content:space-between;gap:10px;padding:0 25px 20px;font-size:9px;color:#8a927d}.composition-status .clipped{color:#aa692d}progress{width:100%;height:5px;accent-color:#658a43}#progress{font-size:10px;color:#6d805a;margin-top:10px}dialog{border:1px solid var(--line);border-radius:12px;padding:28px;max-width:520px;box-shadow:0 20px 90px #0002;color:var(--ink)}dialog::backdrop{background:#18221166;backdrop-filter:blur(3px)}dialog h2{font-size:25px;margin:10px 0}dialog p{font-size:13px;color:#666e5e}.close{float:right;border:0;font-size:22px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#283421;color:white;border-radius:8px;padding:12px 18px;font-size:12px;display:none;z-index:5}.error-overlay{position:absolute;inset:20%;padding:25px;background:white;border:1px solid #e9cba7;border-radius:12px;font-size:14px}[hidden]{display:none!important}:focus-visible{outline:2px solid #649337;outline-offset:3px}@media(min-width:1500px){.workspace{grid-template-columns:300px minmax(340px,1fr) 300px}.stage{padding:20px 70px 40px}.preview-toolbar{padding:25px 40px}}@media(max-width:1150px){.workspace{grid-template-columns:240px minmax(260px,1fr) 250px}section{padding:18px 16px}.stage{padding:10px 15px 20px}.preview-footer>span{display:none}.header-center{display:none}.panel-intro{padding:22px 18px}.preview-toolbar{padding:16px 15px}}@media(max-width:850px){.workspace{height:auto;display:grid;grid-template-columns:1fr 1fr;min-height:0}main{grid-column:1/-1;grid-row:1;height:65vh;min-height:480px}.left-panel,.right-panel{overflow:visible}.panel-intro{display:none}.left-panel{border-top:1px solid var(--line)}header{padding:0 16px;height:68px}.brand{font-size:22px}header .primary{font-size:11px;padding:10px}.composition-status{font-size:8px}}@media(max-width:500px){.workspace{grid-template-columns:1fr}main{height:58vh;min-height:390px}.right-panel{border-top:1px solid var(--line);border-left:0}.left-panel{border-right:0}.stage{padding:5px 25px 15px}.ambiences{grid-template-columns:repeat(6,1fr)}.composition-status span:last-child{display:none}}
/* Creabuzz — palette du site : nuit #0D102C, cyan #37D0EB, violet #6069D5. */
:root{color-scheme:dark;--ink:#FAFAFC;--muted:#b6b4d0;--line:rgba(255,255,255,.12);--accent:#37D0EB;--green:#37D0EB;--paper:#0D102C;--soft:#1a214f}
body{font-family:"museo-sans","Azo Sans",system-ui,-apple-system,"Segoe UI",sans-serif;background:#0D102C;color:var(--ink)}
header{background:#0D102C;border-color:var(--line);box-shadow:0 5px 30px #0002}
.brand{font-size:24px;letter-spacing:-.8px;color:#FAFAFC}.brand-logo{width:44px;height:44px;object-fit:contain;flex-shrink:0}.brand-sub{color:#37D0EB;font-size:9px;letter-spacing:2.1px;margin-top:0}.header-center{color:#D4D0EB}.status-dot{background:#37D0EB;box-shadow:0 0 9px #37d0eb55}
h1{background:linear-gradient(110deg,#fff 20%,#b8bdff 70%,#37D0EB);background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:650;font-size:33px}.eyebrow{color:#aaa6e0}.left-panel,.right-panel{background:#10163a;scrollbar-color:#3d4274 transparent}.panel-intro{background:radial-gradient(ellipse at 0 0,#482ca522,transparent 80%)}
button{color:#e7e5f5;border-radius:8px}button:hover{background:#252e62;border-color:#6069D5}button.selected{color:#e2faff;border-color:#37D0EB66;background:linear-gradient(135deg,#304bae66,#482ca555)}.primary{background:linear-gradient(135deg,#375BCF 0%,#6069D5 48%,#9C43D9 100%);border:1px solid #929bff55;color:white;box-shadow:0 6px 22px #375bcf25}.primary:hover{background:linear-gradient(135deg,#4267e2,#767ff1 48%,#b757ef);border-color:#b3b9ff}.step{color:#37D0EB;border-color:#37d0eb44;background:#37d0eb08}
input[type=number],select{background:#0D102C;border-color:#ffffff22;color:#f3f2fa}input[type=range],input[type=checkbox],progress{accent-color:#37D0EB}input[type=color]{background:#171d43;border-color:#ffffff33}.control-top label{color:#c6c3dd}.pill{background:#293465;color:#a5e6f4}.finishes button{border-color:#10163a;box-shadow:0 0 0 1px #ffffff33}.finishes button.selected{box-shadow:0 0 0 2px #37D0EB}
.image-recommend{background:#1a214f;color:#b9b5d4}.image-recommend strong{color:#d6f5fa}.dropzone{background:#151d45;border-color:#6874b3}.dropzone.dragover{background:#304bae66;border-color:#37D0EB}.upload-symbol{color:#37D0EB}.segmented{background:#0D102C}.segmented button.selected{background:#2a3568;color:#e7faff;border-color:#6378b1;box-shadow:none}.text-button{color:#93dcec}.views button{color:#c5c5e0}
main{background:radial-gradient(ellipse at 50% 35%,#24295c,#0D102C 75%)}.preview-toolbar{color:#bab7d6}.preview-footer{border-color:#ffffff1c}.preview-footer>span,.composition-status{color:#aeabc5}.composition-status .clipped{color:#ffbd7b}.frame{box-shadow:0 15px 60px #0004;border-radius:4px}.frame.checker{background-color:#ffffff;background-image:conic-gradient(#eeeeee 25%,#ffffff 0 50%,#eeeeee 0 75%,#ffffff 0);background-size:20px 20px}.frame-label{color:#aab1ca;text-shadow:0 1px 2px #0005}.corner{border-color:#aab9ed99}
.export-summary,.privacy-note{background:#1a214f;color:#d1cdec}.privacy-note>span{color:#37D0EB}.privacy-note p{color:#b7b3d1}.warning{color:#ffd0a0;background:#61381944;border-color:#ad773a77}#progress{color:#b6e8f1}dialog{background:#10163a;color:#fafafc;box-shadow:0 25px 100px #0009}dialog p{color:#c8c4df}.error-overlay{background:#171d43;border-color:#c888ff66;color:#fff}#toast{background:#243263;border:1px solid #37D0EB55;color:#fff}.storage-panel{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.storage-heading{display:flex;align-items:center;justify-content:space-between}.storage-heading strong{font-size:12px}.retention-badge{color:#37D0EB;font-size:8px;letter-spacing:1px;border:1px solid #37d0eb44;padding:2px 5px;border-radius:4px}.upload-gallery{display:flex;flex-direction:column;gap:10px;margin-top:12px;max-height:390px;overflow:auto}.upload-card{display:grid;grid-template-columns:45px minmax(0,1fr);gap:8px;padding:8px;background:#0d102c88;border:1px solid var(--line);border-radius:7px}.upload-card img{width:45px;height:55px;object-fit:contain;background:#242b4a;border-radius:3px}.upload-card strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-card span{display:block;font-size:9px;color:#c5c0dd}.upload-card small{display:block;font-size:8px;color:#a9c9dc}.upload-actions{grid-column:1/-1;display:flex;gap:5px}.upload-actions button{font-size:9px;padding:4px 7px}.delete-upload{color:#dfb4d0}.storage-error{color:#ffc08a!important}#storageUsage{font-size:9px}#refreshUploads{flex:0 0 28px}.storage-panel .button-row{margin-top:8px}.privacy-note strong{color:#e8e4fa}:focus-visible{outline-color:#37D0EB}

/* Damier neutre et discret ; le modèle 3D conserve toute son opacité. */
.frame.checker .frame-label{color:#777777;text-shadow:none}.frame.checker .corner{border-color:#adb3be}

/* Typographies du site Creabuzz : mêmes sources et même répartition. */
@font-face{font-family:Outfit;src:url('/assets/fonts/outfit-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url('/assets/fonts/outfit-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{--font-site:"museo-sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--font-title:Outfit,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--font-kicker:"aktiv-grotesk-condensed",system-ui,sans-serif}
body{font-family:var(--font-site);font-weight:300}
p,label,input,textarea,select,.line,.small,.frame-label,.header-center,.control-top label{font-family:var(--font-site);font-weight:300}
h1,h2,h3,h4,h5,h6,.brand,.export-summary strong{font-family:var(--font-title);font-weight:700}
button,.primary,.devices button,.segmented button,.views button,.ambiences button,.formats button,.manipulation button,.upload-actions button,.text-button{font-family:var(--font-title);font-weight:700}
.eyebrow,.brand-sub,.retention-badge,.preview-toolbar>span{font-family:var(--font-kicker);font-weight:700}
strong,b,.dropzone strong,.storage-heading strong,.upload-card strong{font-weight:700}
.step{font-family:var(--font-title);font-weight:700}

/* Signature identique à Creabuzz : CRÉA blanc, BUZZ cyan, Outfit Bold. */
header .brand{gap:10px;flex-shrink:0;letter-spacing:normal}
header .brand-logo{display:block;width:48px;height:48px;object-fit:contain;flex-shrink:0}
header .brand-wordmark{display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:left;font-family:var(--font-title)}
header .brand-wordmark>strong{display:block;margin:0;font-family:var(--font-title);font-size:30px;font-weight:700;line-height:1.05;letter-spacing:.02em;color:#FAFAFC}
header .brand-wordmark>strong>span{color:#37D0EB}
header .brand-wordmark>small{display:block;margin:0;font-family:var(--font-title);font-size:14px;font-weight:400;line-height:1.1;letter-spacing:normal;text-transform:none;color:#D4D0EB}
@media(max-width:500px){header{padding-left:12px;padding-right:12px}header .brand{gap:8px}header .brand-logo{width:36px;height:36px}header .brand-wordmark>strong{font-size:22px}header .brand-wordmark>small{font-size:12px}header .primary{padding:9px 8px;font-size:10px}}
/* Partage : consultation sans modification de la composition enregistrée. */
.header-actions{display:flex;align-items:center;gap:8px}.home-link{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border:1px solid var(--line);border-radius:7px;color:#b8eff9;text-decoration:none;font:700 12px var(--font-title)}#shareURL{width:100%;padding:10px;background:#0d102c;color:#e8faff;border:1px solid #37d0eb55;border-radius:6px;font-size:11px}.shared-banner{margin:15px 25px 0;padding:12px 15px;border:1px solid #37d0eb33;border-radius:7px;background:#19234b;color:#bdebf2;font-size:12px}.shared-view .left-panel,.shared-view .right-panel>section:not(#exportSection),.shared-view .privacy-note,.shared-view .preview-footer,.shared-view #backgrounds,.shared-view #shareButton{display:none!important}.shared-view .workspace{grid-template-columns:minmax(320px,1fr) 280px}.shared-view .frame canvas{pointer-events:none;visibility:hidden}.shared-view.shared-ready .frame canvas{visibility:visible}.shared-view .right-panel{grid-column:2}.shared-view #exportSection{border-top:0}.shared-view .header-center{display:none}@media(max-width:850px){.shared-view .workspace{grid-template-columns:1fr}.shared-view .right-panel{grid-column:1}}@media(max-width:500px){.header-actions{flex-direction:column;gap:3px}.header-actions button,.header-actions .home-link{padding:5px 8px;font-size:10px}}

/* Signature discrète, hors du cadre exporté. */
.composition-status{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px 12px}
.composition-status>span{min-width:0}
.composition-status>span:last-child{text-align:right}
.studio-signature{text-align:center;line-height:1.6;color:#aeabc5}
.studio-signature a{color:#c8d4ee;text-decoration:none;text-underline-offset:3px}
.studio-signature a:hover{color:#37d0eb;text-decoration:underline}
.studio-signature a:focus-visible{outline:2px solid #37d0eb;outline-offset:3px;border-radius:2px}
@media(max-width:1200px){.composition-status{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.studio-signature{grid-column:1/-1;grid-row:2}.composition-status>span:last-child{grid-column:2;grid-row:1}}
@media(max-width:500px){.composition-status{grid-template-columns:1fr}.studio-signature{font-size:10px}.composition-status>span:first-child{text-align:center}}

/* Desktop keeps three columns; mobile has a persistent preview and one scrollable settings area. */
.settings-panels{display:contents}
.workspace>main{grid-column:2;grid-row:1}
.shared-view .workspace>main{grid-column:1}
.left-panel{grid-column:1;grid-row:1}
.right-panel{grid-column:3;grid-row:1}
.section-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:0;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:default}
.section-toggle:hover{background:transparent}
.section-chevron{display:none;margin-left:auto;width:28px;height:28px;flex:0 0 28px;align-items:center;justify-content:center;border:1px solid #8e99d52e;border-radius:50%;background:#6069d514;color:#b4bce3;transition:color .2s,background .2s,border-color .2s}.section-chevron svg{display:block;transition:transform .2s ease}
.section-body[hidden]{display:none!important}
@media(max-width:1100px),(hover:none) and (pointer:coarse){
 html{height:100%;overflow:hidden}
 body{height:100vh;height:100dvh;overflow:hidden;display:grid;grid-template-rows:64px minmax(0,1fr)}
 header{height:auto;min-height:0;padding:0 12px}
 .header-center{display:none}
 header .brand{gap:7px}
 header .brand-logo{width:36px;height:36px}
 header .brand-wordmark>strong{font-size:22px}
 header .brand-wordmark>small{font-size:11px}
 .header-actions{flex-direction:row;gap:5px}
 .header-actions button,.header-actions .home-link{min-height:36px;padding:7px 9px;font-size:10px}
 .workspace,.shared-view .workspace{height:100%;min-height:0;min-width:0;grid-template-columns:minmax(0,1fr);grid-template-rows:50vh minmax(0,1fr);grid-template-rows:50dvh minmax(0,1fr);overflow:hidden}
 .workspace>main{grid-column:1;grid-row:1;height:auto;min-height:0;min-width:0;border-bottom:1px solid var(--line)}
 .settings-panels{display:block;grid-column:1;grid-row:2;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scroll-padding:8px;-webkit-overflow-scrolling:touch;background:#10163a;padding-bottom:max(16px,env(safe-area-inset-bottom));scrollbar-width:thin;scrollbar-color:#6069d5 #10163a}
 .left-panel,.right-panel,.shared-view .right-panel{display:block;overflow:visible;border:0;min-width:0}
 .panel-intro{display:none}
 .settings-section{padding:0;border-top:0;border-bottom:1px solid var(--line)}
 .section-title{margin:0}
 .section-toggle{min-height:54px;padding:12px 18px;cursor:pointer;font-size:14px}
 .section-toggle:hover{background:#1a214f}
 .section-chevron{display:inline-flex}
 .section-toggle[aria-expanded=true] .section-chevron{background:#37d0eb12;border-color:#37d0eb55;color:#70dff1}.section-toggle[aria-expanded=true] .section-chevron svg{transform:rotate(180deg)}
 .section-body{padding:0 18px 20px}
 .settings-section .section-body>label:first-child{margin-top:0}
 .privacy-note{margin:16px 18px 0}
 .preview-toolbar{flex-shrink:0;padding:5px 12px;min-height:34px;font-size:8px}
 .backgrounds{gap:2px}
 .backgrounds button{padding:4px}
 .stage{min-height:0;min-width:0;padding:4px 14px 8px}
 .frame-label{bottom:5px;left:7px;font-size:6px;letter-spacing:.4px}
 .frame-label span{margin-left:4px}
 .preview-footer{flex-shrink:0;margin:0 12px;padding:5px 0;gap:5px}
 .manipulation{gap:4px}
 .manipulation button{min-height:34px;padding:7px 9px;font-size:10px}
 .preview-footer>span{display:none}
 .preview-footer>button{min-height:30px;min-width:30px;flex-basis:30px}
 .composition-status{display:flex;flex-wrap:wrap;justify-content:center;flex-shrink:0;padding:0 12px 5px;gap:2px 8px;font-size:8px}
 .composition-status>span:first-child,.composition-status>span:last-child{display:none}
 .composition-status .studio-signature{font-size:8px;line-height:1.4}
 .control-top label{font-size:12px}
 .control-top input{font-size:16px;min-height:36px;width:80px}
 input[type=number],select{font-size:16px;min-height:40px}
 input[type=range]{height:24px;margin:3px 0;cursor:pointer}
 input[type=checkbox]{width:20px;height:20px;flex-shrink:0}
 .section-body button{min-height:40px}
 .section-body .finishes button{width:32px;height:32px;min-height:32px}
 .section-body .devices button{height:72px}
 .section-body .text-button{padding:8px 0}
 .section-body .ambiences{grid-template-columns:repeat(3,minmax(0,1fr))}
 .control{margin:12px 0}
 .check{min-height:36px}
 .dimensions label{min-width:0}
 .dropzone{padding:14px 8px}
 .upload-gallery{max-height:none}
 .shared-banner{margin:4px 12px 0;padding:5px 8px;font-size:10px;max-height:48px;overflow:auto;flex-shrink:0}
 dialog{max-width:calc(100vw - 24px);max-height:85dvh;overflow:auto;padding:22px}
 dialog input{font-size:16px}
 #toast{width:max-content;max-width:calc(100vw - 24px);bottom:12px;font-size:12px}
}
@media(max-width:1100px) and (orientation:landscape) and (min-width:600px),(hover:none) and (pointer:coarse) and (orientation:landscape) and (min-width:600px){
 body{grid-template-rows:56px minmax(0,1fr)}
 .workspace,.shared-view .workspace{grid-template-columns:minmax(0,55fr) minmax(280px,45fr);grid-template-rows:minmax(0,1fr)}
 .workspace>main{grid-column:1;grid-row:1;border-bottom:0;border-right:1px solid var(--line)}
 .settings-panels{grid-column:2;grid-row:1}
}
@media(max-width:380px){
 header .brand-logo{width:28px;height:28px}
 header .brand-wordmark>strong{font-size:18px}
 header .brand-wordmark>small{font-size:10px}
 .header-actions button,.header-actions .home-link{padding:6px;font-size:9px}
}

@media(prefers-reduced-motion:reduce){.section-chevron,.section-chevron svg{transition:none}}

/* Visite guidée : la scène reste visible, les interactions accidentelles sont bloquées par le dialogue natif. */
#tourDialog{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;overflow:hidden;background:transparent;box-shadow:none;color:#fafafc;overscroll-behavior:contain}
#tourDialog::backdrop{background:transparent;backdrop-filter:none}
.tour-spotlight{position:fixed;box-sizing:border-box;border:2px solid #70dff1;border-radius:10px;box-shadow:0 0 0 9999px #050719c9,0 0 24px #37d0eb44;pointer-events:none}
.tour-card{position:fixed;z-index:1;width:340px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:22px;border:1px solid #858ed355;border-radius:16px;background:linear-gradient(145deg,#22294f,#121838);box-shadow:0 18px 70px #0008;overflow-y:auto;overscroll-behavior:contain}
.tour-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tour-topline .eyebrow{font-size:9px;letter-spacing:1.2px;color:#aab7e4}
#tourSkip{padding:5px 0 5px 5px;border:0;border-radius:4px;font:400 11px var(--font-site);color:#c2c5dc;white-space:nowrap;background:transparent}
#tourSkip span{font-size:16px;margin-left:5px}
#tourSkip:hover{color:#fff}
#tourDialog .tour-step{margin:16px 0 7px;color:#70dff1;font:700 11px var(--font-title)}
#tourTitle{margin:0 0 10px;color:#fff;font:700 22px/1.2 var(--font-title);letter-spacing:-.4px}
#tourText{margin:0;color:#d1d2e5;font:300 13px/1.65 var(--font-site)}
.tour-dots{display:flex;gap:5px;margin:18px 0}
.tour-dots span{width:6px;height:6px;border-radius:50%;background:#69729b66;transition:width .2s}
.tour-dots .current{width:22px;border-radius:4px;background:#37d0eb}
.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tour-actions button{min-height:42px;padding:10px 16px;font-size:12px}
#tourDialog .tour-note{margin:14px 0 0;font:300 10px/1.4 var(--font-site);color:#aaafcd;text-align:center}
#launchTour{margin:6px 0 14px;min-height:44px}
@media(max-width:500px){.tour-card{padding:18px}#tourTitle{font-size:20px}.tour-topline{gap:6px}.tour-actions button{min-height:44px}.tour-topline .eyebrow{font-size:8px}}
@media(prefers-reduced-motion:reduce){.tour-dots span{transition:none}}