:root{--bg:#0c0b10;--panel:#17141d;--panel-hi:#201c27;--line:#342e3b;--text:#f8f6ff;--muted:#aaa3bb;--accent:#f1921f;--violet:#8b5cf6;--radius:18px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-size:14px;line-height:1.45}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:inherit}a:hover{color:var(--accent)}[hidden]{display:none!important}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.app{max-width:1600px;margin:auto;padding:28px clamp(18px,3vw,48px) 64px}.app-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}.breadcrumb{display:flex;align-items:center;gap:10px;color:#898296;font-size:12px;font-weight:600;letter-spacing:.03em}.breadcrumb a{text-decoration:none}.title-line{display:flex;align-items:center;gap:12px;margin:9px 0 4px}.title-line h1{font-size:clamp(32px,4vw,50px);line-height:1;letter-spacing:-.055em;margin:0;font-weight:730}.title-mark{display:grid;grid-template-columns:repeat(2,12px);gap:3px;transform:rotate(-12deg);margin-right:5px}.title-mark i{width:12px;height:12px;border-radius:4px;background:var(--violet)}.title-mark i:nth-child(2){background:var(--accent)}.title-mark i:nth-child(3){background:#f472b6}.title-mark i:nth-child(4){background:#4f83a9}.version{align-self:end;margin-bottom:2px;color:#8f8899;font-size:10px;font-weight:750;letter-spacing:.14em}.title-group p{margin:0;color:var(--muted);font-size:14px}.header-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:39px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel-hi);color:var(--text);font-size:13px;font-weight:650;white-space:nowrap;transition:background .18s,border-color .18s,transform .18s}.button:not(:disabled):hover{background:#2c2635;border-color:#66586d;transform:translateY(-1px)}.button-primary{background:var(--accent);border-color:var(--accent);color:#1b1106}.button-primary:not(:disabled):hover{background:#ffb23e;border-color:#ffb23e}.button-quiet{background:transparent;border-color:transparent;color:var(--muted)}.button-quiet:not(:disabled):hover{color:var(--text)}.button-secondary{background:#26202e}.button.wide{width:100%;justify-content:space-between}.button-stack{display:grid;gap:9px;margin-top:19px}.export-wrap{position:relative}.export-menu{position:absolute;top:calc(100% + 7px);right:0;z-index:20;min-width:245px;max-height:min(560px,80vh);overflow:auto;padding:7px;background:#221d29;border:1px solid #4b4054;border-radius:13px;box-shadow:0 24px 60px #0009}.export-menu button{display:block;width:100%;padding:8px 10px;text-align:left;color:var(--text);background:transparent;border:0;border-radius:7px;font-size:13px}.export-menu button:hover{background:#37303e}.menu-heading{display:block;padding:9px 10px 4px;color:#9d94a8;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.workspace-tabs{display:flex;gap:5px;width:max-content;max-width:100%;padding:5px;margin-bottom:17px;border:1px solid var(--line);background:var(--panel);border-radius:12px}.workspace-tabs button{min-width:125px;padding:10px 15px;background:none;border:0;border-radius:8px;color:var(--muted);font-weight:650;transition:background .2s,color .2s}.workspace-tabs button:hover{color:var(--text)}.workspace-tabs button.active{color:var(--text);background:#35303d;box-shadow:0 2px 6px #0005}.tab-icon{font-size:16px;margin-right:4px;color:var(--accent)}.workspace{display:grid;grid-template-columns:305px minmax(0,1fr);align-items:start;gap:17px}.sidebar,.main-column{min-width:0}.control-panel,.canvas-panel,.detail-card,.preview-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}.control-panel{padding:23px;min-height:680px}.panel-head,.card-heading,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.panel-head{justify-content:flex-start;margin-bottom:24px}.panel-head h2,.card-heading h2,.section-heading h2{margin:0;font-size:20px;letter-spacing:-.035em;line-height:1.2}.field-label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 8px;font-size:12px;font-weight:700;color:#e8e2ed}.field-label:first-of-type{margin-top:0}.field-label output,.adjust-control output,.gradient-angle output,.image-tools output{color:var(--accent);font-variant-numeric:tabular-nums}.field-help{margin:6px 0 0;color:#8f879c;font-size:11px;line-height:1.45}.panel-intro{margin:0 0 22px;color:var(--muted);font-size:12px}textarea,input[type=url],input[type=text],select{width:100%;min-width:0;padding:11px 12px;border:1px solid #494150;border-radius:9px;background:#211d28;color:var(--text);outline:none}textarea:focus,select:focus,input[type=url]:focus,input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 2px #f1921f28}textarea{resize:vertical;min-height:80px}textarea::placeholder,input::placeholder{color:#80788c}.prompt-presets{display:flex;flex-wrap:wrap;gap:6px;margin:17px 0 22px}.prompt-presets button{border:1px solid #413847;border-radius:100px;background:#26212d;color:#c7bfce;padding:6px 10px;font-size:11px}.prompt-presets button:hover{border-color:var(--accent);color:var(--text)}input[type=range]{width:100%;height:5px;margin:10px 0 2px;accent-color:var(--accent);cursor:pointer}.range-ends{display:flex;justify-content:space-between;color:#82798d;font-size:10px}.panel-divider{display:flex;align-items:center;gap:12px;margin:24px 0;color:#867d8e;font-size:10px;font-weight:800;letter-spacing:.12em}.panel-divider:before,.panel-divider:after{content:"";height:1px;flex:1;background:var(--line)}.file-choice,.file-drop{display:flex;align-items:center;gap:11px;padding:14px;border:1px dashed #62566c;border-radius:11px;background:#211c29;cursor:pointer;color:#ddd6e4;font-size:12px}.file-choice:hover,.file-drop:hover,.file-drop.dragging{border-color:var(--accent);background:#2d2430}.file-choice>span:first-child{display:grid;place-items:center;width:29px;height:29px;border-radius:7px;background:#382c24;color:var(--accent);font-size:20px}.file-choice small{display:block;margin-top:2px;color:#8f879c;font-size:10px}.inspiration-list{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}.inspiration-list img{width:47px;height:47px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}.inspiration-list span{display:block;color:var(--muted);font-size:11px}.file-drop{flex-direction:column;text-align:center;gap:3px;min-height:152px;justify-content:center}.file-drop strong{font-size:13px}.file-drop small,.file-drop>span:not(.drop-icon){font-size:11px;color:var(--muted)}.drop-icon{display:grid;place-items:center;width:34px;height:34px;margin-bottom:4px;border-radius:10px;background:#392b24;color:var(--accent);font-size:23px}.url-row{display:flex;gap:6px}.url-row .button{min-height:auto}.image-tools{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.image-tools label{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}.image-tools input{grid-column:2;margin:0}.image-tools button{grid-row:1/3;padding-inline:8px}.image-tools button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.adjust-control{margin:17px 0}.adjust-control label,.gradient-angle{display:flex;justify-content:space-between;font-size:12px;font-weight:650;color:#e6dfeb}.adjust-control input{margin-top:10px}.adjust-actions{display:flex;gap:7px;margin-top:23px}.adjust-actions .button{flex:1;padding-inline:7px;font-size:11px}.harmony-preview{display:flex;gap:4px;min-height:47px;margin:14px 0}.harmony-preview i{flex:1;border-radius:6px;border:1px solid #ffffff20;transition:transform .2s}.harmony-preview i:hover{transform:translateY(-3px)}
.main-column{display:grid;gap:16px}.canvas-panel{padding:24px}.eyebrow{display:block;margin-bottom:6px;color:#91889d;font-size:10px;line-height:1.2;font-weight:800;letter-spacing:.14em}.section-heading{margin-bottom:20px}.section-heading h2{font-size:26px}.color-count{color:#a69eaf;font-size:12px}.palette-strip{display:flex;min-height:270px;gap:8px}.swatch{position:relative;flex:1 1 0;min-width:0;min-height:270px;padding:0;border:1px solid #ffffff21;border-radius:12px;overflow:hidden;text-align:left;color:var(--swatch-ink,#fff);background:var(--swatch-color);transition:flex .28s,transform .22s,box-shadow .22s;border-color:var(--swatch-outline,#ffffff20)}.swatch:hover{flex-grow:1.18;transform:translateY(-4px)}.swatch.selected{box-shadow:0 0 0 2px var(--accent),0 15px 30px #0007;z-index:1}.swatch-main{position:absolute;left:15px;right:10px;bottom:16px;display:grid;gap:2px}.swatch-hex{font-size:clamp(13px,1.5vw,19px);font-weight:780;letter-spacing:-.03em;white-space:nowrap}.swatch-name{font-size:11px;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.swatch-index{position:absolute;top:13px;left:15px;font-size:10px;font-weight:750;opacity:.65}.swatch-lock{position:absolute;top:8px;right:8px;border:0;border-radius:7px;background:#0000;color:inherit;opacity:.7;padding:6px;line-height:1}.swatch-lock:hover{background:#ffffff38;opacity:1}.swatch-lock.locked{opacity:1}.swatch-copy{position:absolute;bottom:54px;left:15px;font-size:10px;opacity:0;transition:opacity .2s}.swatch:hover .swatch-copy,.swatch:focus-visible .swatch-copy{opacity:.8}.palette-tip{display:flex;justify-content:space-between;gap:15px;margin-top:12px;color:#8e8598;font-size:11px}.image-stage{margin-bottom:24px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#101016}.image-stage-head{display:flex;justify-content:space-between;gap:15px;padding:10px 14px;background:#211d28;color:#bdb4c6;font-size:11px}.image-stage-head span:first-child{font-weight:700;color:var(--text);white-space:nowrap;max-width:40%;overflow:hidden;text-overflow:ellipsis}.image-viewport{position:relative;display:flex;align-items:center;justify-content:center;min-height:270px;max-height:490px;padding:16px;overflow:auto;background:repeating-conic-gradient(#27252b 0 25%,#222027 0 50%) 0 0/18px 18px}.image-inner{position:relative;flex:none;line-height:0;box-shadow:0 16px 34px #0008}.image-inner canvas{display:block;width:100%;height:100%}.image-markers{position:absolute;inset:0;pointer-events:none}.marker{position:absolute;width:25px;height:25px;margin:-12.5px 0 0 -12.5px;padding:0;border:3px solid white;border-radius:50%;background:var(--marker-color);box-shadow:0 1px 1px #000,0 0 0 2px #0009;pointer-events:auto;touch-action:none;cursor:grab;z-index:2}.marker:active{cursor:grabbing}.marker.selected{width:31px;height:31px;margin:-15.5px 0 0 -15.5px;box-shadow:0 0 0 3px var(--accent),0 2px 8px #000a}.marker span{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);padding:4px 5px;background:#15111fe8;border-radius:4px;color:#fff;font-size:10px;line-height:1;white-space:nowrap;opacity:0}.marker:hover span,.marker.selected span{opacity:1}.loupe{position:absolute;z-index:5;display:grid;gap:2px;padding:5px;border:1px solid #ffffff70;border-radius:7px;background:#17141d;box-shadow:0 10px 25px #000a;pointer-events:none;text-align:center}.loupe canvas{display:block;width:90px;height:90px;image-rendering:pixelated}.loupe span{font-size:10px;font-weight:700;color:#fff}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.detail-card,.preview-card{padding:22px;min-width:0}.card-heading{margin-bottom:18px}.card-heading h2{font-size:19px}.selected-indicator{width:24px;height:24px;border:2px solid #fff5;border-radius:50%;background:var(--selected-color)}.color-editor{display:flex;gap:8px;align-items:end;margin-bottom:17px}.color-editor input[type=color]{width:46px;height:41px;padding:0;border:1px solid var(--line);border-radius:7px;background:transparent;cursor:pointer}.color-editor label{flex:1;color:#9a90a5;font-size:10px;font-weight:700;letter-spacing:.1em}.color-editor label input{margin-top:4px;height:41px;font-size:14px;font-weight:700;letter-spacing:.04em}.color-editor .button{height:41px}.value-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.value-row{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;padding:9px 10px;border:1px solid var(--line);background:#211c27;border-radius:8px;text-align:left;color:var(--text)}.value-row:hover{border-color:#8b5cf6}.value-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-variant-numeric:tabular-nums}.value-row b{display:block;margin-bottom:2px;color:#9e94a8;font-size:9px;letter-spacing:.1em}.value-row i{font-style:normal;color:#8f8499}.detail-note{margin:10px 0 0;color:#80788b;font-size:10px;line-height:1.4}.gradient-preview{height:94px;border:1px solid #ffffff25;border-radius:10px;background:#555}.gradient-angle{margin-top:16px;display:flex;flex-wrap:wrap}.gradient-angle input{flex:0 0 100%;margin-top:10px}.gradient-actions{display:flex;gap:7px;margin-top:13px}.gradient-actions button{font-size:11px}#gradient-code{display:block;margin-top:14px;padding:8px 10px;border-radius:7px;background:#211c27;color:#bcb3c5;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px}.preview-card{min-height:280px}.mini-tabs{display:flex;gap:2px;padding:3px;background:#25202d;border:1px solid var(--line);border-radius:8px}.mini-tabs button{padding:6px 10px;color:var(--muted);background:none;border:0;border-radius:6px;font-size:11px}.mini-tabs button.active{background:#3a3241;color:#fff}.ui-demo{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;min-height:202px}.ui-window{border-radius:11px;overflow:hidden;border:1px solid #ffffff24;background:var(--ui-bg);color:var(--ui-ink)}.ui-topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid color-mix(in srgb,var(--ui-ink) 14%,transparent);font-size:10px}.ui-topbar strong{font-size:13px;letter-spacing:-.03em}.ui-topbar nav{display:flex;gap:10px;opacity:.6}.ui-content{padding:18px;display:grid;gap:9px}.ui-content h3{margin:0;font-size:18px;line-height:1.1;letter-spacing:-.04em}.ui-content p{margin:0;max-width:280px;opacity:.62;font-size:10px}.ui-button{display:inline-block;width:max-content;margin-top:4px;padding:7px 11px;border-radius:6px;background:var(--ui-accent);color:var(--ui-accent-ink);font-weight:700;font-size:10px}.ui-sidebar{display:grid;grid-template-rows:1fr 1fr;gap:9px}.ui-demo-card{display:flex;flex-direction:column;justify-content:space-between;min-height:90px;padding:13px;border-radius:10px;background:var(--ui-card);color:var(--ui-card-ink);font-size:10px}.ui-demo-card b{font-size:22px;line-height:1}.ui-demo-card:last-child{background:var(--ui-side);color:var(--ui-side-ink)}.brand-demo{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:205px}.brand-logo{display:flex;flex-direction:column;justify-content:space-between;padding:22px;border-radius:11px;background:var(--brand-bg);color:var(--brand-ink)}.brand-logo b{font-size:clamp(25px,3vw,42px);font-weight:760;letter-spacing:-.07em}.brand-logo small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}.brand-side{display:grid;grid-template-rows:auto 1fr;gap:10px}.brand-type{padding:16px;border:1px solid var(--line);border-radius:10px;background:#211c27}.brand-type span{display:block;color:var(--muted);font-size:9px;letter-spacing:.1em}.brand-type strong{display:block;margin-top:5px;font-size:23px;letter-spacing:-.05em}.brand-samples{display:flex;gap:6px}.brand-samples i{flex:1;border-radius:7px}
.toast{position:fixed;z-index:30;left:50%;bottom:20px;transform:translate(-50%,15px);opacity:0;pointer-events:none;padding:10px 15px;border:1px solid #6d5360;border-radius:9px;background:#2e2430;color:#fff;font-size:12px;box-shadow:0 10px 35px #000a;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1100px){.workspace{grid-template-columns:270px minmax(0,1fr)}.control-panel{padding:19px}.palette-strip,.swatch{min-height:220px}.swatch-main{left:10px;bottom:11px}.swatch-index{left:10px}.swatch-hex{font-size:13px}.swatch-name{font-size:10px}.swatch-copy{display:none}.detail-grid{grid-template-columns:1fr}}
@media(max-width:760px){.app{padding:20px 12px 40px}.app-header{align-items:flex-start;flex-direction:column;gap:17px}.header-actions{width:100%}.header-actions .button{padding-inline:10px}.export-wrap{margin-left:auto}.workspace-tabs{width:100%}.workspace-tabs button{min-width:0;flex:1;padding-inline:6px}.workspace{grid-template-columns:1fr}.control-panel{min-height:0}.palette-strip{min-height:180px;gap:4px}.swatch{min-height:180px;border-radius:7px}.swatch-main{left:6px;right:3px;bottom:9px;transform-origin:left bottom;transform:rotate(-90deg) translateY(100%);width:155px;display:grid;gap:1px}.swatch-hex{font-size:13px}.swatch-name{display:block;font-size:10px}.swatch-index{top:6px;left:6px}.swatch-lock{top:3px;right:3px}.palette-tip .keyboard-tip{display:none}.canvas-panel,.detail-card,.preview-card{padding:16px}.section-heading h2{font-size:22px}.image-stage-head span:last-child{display:none}.ui-demo,.brand-demo{gap:8px}}
@media(max-width:440px){.header-actions{gap:2px}.header-actions .button{font-size:11px}.title-line h1{font-size:35px}.version{font-size:8px}.value-list{grid-template-columns:1fr}.color-editor{flex-wrap:wrap}.color-editor label{min-width:calc(100% - 55px)}.color-editor .button{width:100%}.palette-strip,.swatch{min-height:155px}.ui-demo{grid-template-columns:1fr}.ui-sidebar{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.ui-topbar nav{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Atelier : source, palette et roue partagent le même espace. */
.app{max-width:1800px;padding:22px clamp(12px,1.5vw,26px) 40px}.app-header{margin-bottom:22px}.title-line h1{font-size:38px}.title-group p{font-size:12px}.workspace-tabs{margin-bottom:13px}.workspace-tabs button{padding:8px 14px}
.harmony-bar{display:flex;align-items:center;gap:20px;padding:14px 18px;margin-bottom:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.harmony-bar>div:first-child{flex:0 0 160px}.harmony-bar strong{font-size:14px}.harmony-buttons{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:7px;flex:1;min-width:0}.harmony-buttons button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:8px 5px 7px;min-width:0;border:1px solid transparent;border-radius:10px;background:#211d28;color:#a99eb6;transition:border-color .18s,background .18s,color .18s}.harmony-buttons button:hover{color:#fff;border-color:#6b5c77;background:#2e2737}.harmony-buttons button[aria-pressed=true]{color:#ffb253;border-color:var(--accent);background:#34271d}.harmony-buttons svg{width:34px;height:34px;flex:none}.harmony-buttons span{font-size:10px;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.workspace{grid-template-columns:246px minmax(0,1fr) 310px;gap:14px}.control-panel{min-height:0;padding:18px}.panel-head{margin-bottom:19px;gap:10px}.panel-head h2{font-size:18px}.field-label{margin-top:17px;font-size:11px}.prompt-presets{margin:12px 0 19px;gap:5px}.prompt-presets button{padding:5px 8px}.button-stack{margin-top:14px}.button.wide{font-size:11px;gap:6px;padding-inline:10px}.panel-divider{margin:18px 0}.file-choice{padding:11px;font-size:11px;gap:8px}.file-choice>span:first-child{flex:none;width:24px;height:24px}.file-drop{min-height:132px;padding:10px}.url-row{flex-wrap:wrap}.url-row input{flex:1;min-width:110px;font-size:11px}.url-row button{padding:8px;font-size:11px}#extract-button{margin-top:14px}.method-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.method-buttons button{display:flex;align-items:center;gap:7px;padding:9px 7px;border:1px solid var(--line);border-radius:8px;background:#211d28;color:#b5abbe;text-align:left;font-size:10px}.method-buttons button:hover{border-color:#8a7297;color:#fff}.method-buttons button[aria-pressed=true]{border-color:var(--accent);color:#ffb253;background:#34271d}.method-buttons svg{width:23px;height:23px;flex:none}
.canvas-panel{padding:18px}.main-column{gap:14px}.section-heading{margin-bottom:16px}.section-heading h2{font-size:23px}.color-count{font-size:10px;white-space:nowrap}.palette-strip{gap:6px;min-height:215px}.swatch{min-height:215px;border-radius:9px;transition:transform .18s,box-shadow .18s}.swatch:hover{flex-grow:1;transform:translateY(-2px)}.swatch-main{left:10px;right:7px;bottom:13px;transform:none;width:auto}.swatch-hex{font-size:clamp(12px,1.1vw,17px)}.swatch-name{white-space:normal;font-size:10px;line-height:1.35;overflow:visible;opacity:.9}.swatch-index{top:10px;left:10px}.swatch-lock{top:5px;right:4px;padding:5px}.swatch-copy{display:none}.palette-tip{gap:8px;font-size:10px}.keyboard-tip{display:none}.detail-grid{grid-template-columns:1fr;gap:14px}.detail-card{padding:17px}.card-heading{margin-bottom:13px}.card-heading h2{font-size:17px}.color-editor{margin-bottom:12px}.color-editor input[type=color],.color-editor label input,.color-editor .button{height:36px}.color-editor .button{font-size:11px}.value-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.value-row{padding:7px 8px}.value-row>span{font-size:10px}.gradient-preview{height:57px}.gradient-angle{margin-top:12px;font-size:11px}.gradient-actions{margin-top:12px}#gradient-code{margin-top:10px}.detail-note{font-size:9px}
.wheel-panel{padding:18px 19px}.wheel-panel .card-heading{margin-bottom:3px}.color-wheel{position:relative;aspect-ratio:1;width:100%;max-width:300px;margin:0 auto;isolation:isolate;touch-action:none;user-select:none}.color-wheel canvas,.color-wheel>svg,#wheel-markers{position:absolute;inset:0;width:100%;height:100%}.color-wheel>svg{pointer-events:none}#wheel-markers{pointer-events:none}.wheel-marker{position:absolute;display:grid;place-items:center;width:24px;height:24px;margin:-12px 0 0 -12px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0008,0 2px 7px #0009;font-size:9px;font-weight:800;line-height:1;pointer-events:auto;touch-action:none;cursor:grab;transition:box-shadow .15s}.wheel-marker.selected{z-index:3;box-shadow:0 0 0 3px #17141d,0 0 0 5px #f1921f,0 2px 8px #000a}.wheel-marker.locked{cursor:default}.wheel-marker:active,.dragging .wheel-marker:not(.locked){cursor:grabbing}.wheel-marker:focus-visible{outline:2px solid #fff;outline-offset:5px;z-index:4}.wheel-caption{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:3px 0 8px;font-size:10px;color:#bfb4cb;font-variant-numeric:tabular-nums}.wheel-caption label{display:flex;align-items:center;gap:3px;font-size:10px;white-space:nowrap}.wheel-caption input{margin:0;accent-color:var(--accent)}.wheel-panel>.field-help{font-size:10px;line-height:1.4}.adjust-scope{display:flex;gap:3px;padding:3px;margin:17px 0 16px;border:1px solid var(--line);border-radius:8px;background:#110f16}.adjust-scope button{flex:1;padding:7px 4px;border:0;border-radius:5px;background:none;color:#92879f;font-size:10px;line-height:1.3}.adjust-scope button[aria-pressed=true]{background:#342c3c;color:#fff}.adjust-control{margin:14px 0}.adjust-control label{font-size:11px}.adjust-control output{font-size:10px}.adjust-actions{margin-top:18px}
input[type=range]{-webkit-appearance:none;appearance:none;display:block;height:4px;margin:13px 0 9px;border:0;border-radius:4px;background:#4a3e55;outline:none;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;border:0;border-radius:4px;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;margin-top:-5.5px;border:2px solid #f5f0fa;border-radius:50%;background:#f3a73f;box-shadow:0 1px 5px #000a;transition:box-shadow .15s,transform .15s}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px #f1921f22,0 1px 5px #000a}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.13)}input[type=range]::-moz-range-track{height:4px;border:0;border-radius:4px;background:transparent}input[type=range]::-moz-range-thumb{width:11px;height:11px;border:2px solid #f5f0fa;border-radius:50%;background:#f3a73f;box-shadow:0 1px 5px #000a}input[type=range]:focus-visible{outline:1px solid #f1921f;outline-offset:7px}#adjust-hue{background:linear-gradient(90deg,#53c7cc,#6859dc,#cf55ad,#d45e5e,#d6b557,#81c75f,#53c7cc)}#adjust-saturation{background:linear-gradient(90deg,#78717d,#9367d3)}#adjust-lightness{background:linear-gradient(90deg,#211a2a,#e8dff1)}#adjust-temperature{background:linear-gradient(90deg,#528ad8,#a195a8,#eda55c)}#adjust-vibrance{background:linear-gradient(90deg,#77767c,#6e87be,#c75aab)}.range-ends{margin-top:6px}
.image-stage{margin-bottom:16px}.image-tools{display:flex;align-items:center;gap:12px;padding:7px 12px;margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#1d1923}.image-tools button{padding:6px 9px;min-height:29px;font-size:11px}.image-tools label{gap:6px;white-space:nowrap;margin-left:auto;font-size:10px}.image-tools input{flex:0 1 120px;min-width:55px;width:120px;margin:9px 0}.image-viewport{min-height:200px;max-height:350px;padding:12px}.image-stage-head{padding:9px 12px;font-size:10px}.image-stage-head span:first-child{max-width:65%}.image-stage-head span:last-child{display:none}.marker.locked{cursor:default}.preview-card{margin-top:16px;padding:22px}.preview-card>.card-heading{margin-bottom:18px}.preview-card .mini-tabs button{padding:8px 13px}.preview-card .eyebrow{margin-bottom:7px}
.image-viewport{align-items:safe center;justify-content:safe center}
@media(max-width:620px){.workspace>.sidebar{order:1}.workspace>.main-column{display:contents}.workspace .canvas-panel{order:2;width:100%}.workspace>.wheel-panel{order:3}.workspace>.main-column>.detail-grid{order:4;width:100%}}
@media(min-width:1550px){.workspace{grid-template-columns:260px minmax(0,1fr) 328px}.detail-grid{grid-template-columns:1.1fr .9fr}.value-list{grid-template-columns:repeat(2,minmax(0,1fr))}.palette-strip,.swatch{min-height:260px}.gradient-preview{height:94px}.color-wheel{max-width:290px}.wheel-panel{padding:20px}}
@media(max-width:1200px) and (min-width:901px){.workspace{grid-template-columns:212px minmax(0,1fr) 270px;gap:10px}.control-panel,.canvas-panel,.detail-card{padding:14px}.harmony-bar{gap:12px;padding:12px}.harmony-bar>div:first-child{flex-basis:128px}.harmony-buttons{gap:4px}.harmony-buttons span{font-size:9px}.harmony-buttons svg{width:29px;height:29px}.value-list{grid-template-columns:repeat(2,minmax(0,1fr))}.swatch-main{left:7px;right:4px}.swatch-hex{font-size:11px}.swatch-name{font-size:9px}.swatch-index{left:7px}.swatch-lock{right:2px}.wheel-caption{font-size:9px}.wheel-caption label{font-size:9px}.button.wide{font-size:10px}.section-heading h2{font-size:20px}}
@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr) 290px}.sidebar{grid-column:1/-1}.control-panel{padding:17px}.sidebar .control-panel{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}.sidebar .panel-head{grid-column:1/-1}.sidebar .panel-divider{grid-column:1/-1;margin:12px 0}.sidebar .field-help,.sidebar .range-ends,.sidebar .inspiration-list{grid-column:1/-1}.sidebar .prompt-presets{align-self:start;margin:0}.sidebar .button-stack{margin:0}.sidebar textarea{min-height:70px}.sidebar .file-drop{grid-column:1/-1;min-height:110px}.sidebar .field-label{align-self:center;margin:10px 0}.sidebar .url-row{grid-column:1/-1}.sidebar .method-buttons{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}.harmony-bar{align-items:stretch;flex-direction:column;gap:10px;padding:13px}.harmony-bar>div:first-child{display:flex;align-items:center;gap:10px;flex-basis:auto}.harmony-bar .eyebrow{margin:0}.harmony-bar strong{font-size:12px}.harmony-buttons{gap:4px}.harmony-buttons span{font-size:9px}.harmony-buttons svg{width:29px;height:29px}.harmony-buttons button{padding:7px 3px}.value-list{grid-template-columns:repeat(2,minmax(0,1fr))}.palette-strip,.swatch{min-height:205px}.swatch-hex{font-size:12px}.swatch-name{font-size:10px}.wheel-panel{grid-column:2;grid-row:2}.main-column{grid-column:1;grid-row:2}.preview-card>.card-heading{align-items:flex-start;gap:14px;flex-wrap:wrap}}
@media(min-width:621px) and (max-width:900px){
 .sidebar .control-panel{grid-template-columns:1fr 1fr;gap:8px 24px}.sidebar .panel-head{grid-row:1}.sidebar .panel-divider{display:none}.sidebar .field-label{margin:4px 0}.sidebar .range-ends{align-self:start;margin-top:26px}.sidebar .field-help{margin:0}
 #panel-generate label[for=prompt]{grid-column:1;grid-row:2}#prompt{grid-column:1;grid-row:3}#prompt+.field-help{grid-column:1;grid-row:4}.sidebar .prompt-presets{grid-column:1;grid-row:5}.sidebar label[for=generate-count]{grid-column:2;grid-row:2}#generate-count{grid-column:2;grid-row:3;align-self:start}#generate-count+.range-ends{grid-column:2;grid-row:3}.sidebar .button-stack{grid-column:2;grid-row:4/6;align-self:start}.sidebar label.field-label[for=inspiration-files]{grid-column:1;grid-row:6;margin-top:10px}.sidebar .file-choice{grid-column:1;grid-row:7}.sidebar #generate-images{grid-column:2;grid-row:7;align-self:center}.sidebar .inspiration-list{grid-column:1/-1;grid-row:8;margin:0}
 .sidebar .file-drop{grid-column:1;grid-row:2/5}.sidebar label[for=image-url]{grid-column:2;grid-row:2}.sidebar .url-row{grid-column:2;grid-row:3;align-self:start}.sidebar .url-row+.field-help{grid-column:2;grid-row:4}.sidebar #panel-extract>span.field-label{grid-column:1/-1;grid-row:5;margin-top:8px}.sidebar .method-buttons{grid-row:6}.sidebar #extract-mode-help{grid-row:7}.sidebar label[for=extract-count]{grid-column:1;grid-row:8}#extract-count{grid-column:1;grid-row:9}#extract-count+.range-ends{grid-column:1;grid-row:9}.sidebar #extract-button{grid-column:2;grid-row:8/10;align-self:center;margin:0}
}
@media(max-width:620px){.app{padding:17px 10px 30px}.app-header{gap:14px;margin-bottom:17px}.title-line h1{font-size:34px}.title-group p{font-size:11px}.workspace{display:flex;flex-direction:column;gap:12px}.sidebar,.main-column,.wheel-panel{width:100%}.sidebar .control-panel{display:block}.sidebar .field-label{margin:15px 0 8px}.sidebar .panel-head{margin-bottom:16px}.sidebar .prompt-presets{margin:12px 0 16px}.sidebar .button-stack{margin-top:13px}.sidebar .method-buttons{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.method-buttons button{flex-direction:column;gap:4px;text-align:center;padding:8px 3px;font-size:9px}.sidebar .panel-divider{margin:16px 0}.harmony-buttons{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.harmony-buttons button{min-height:64px}.harmony-buttons span{font-size:9px}.harmony-bar>div:first-child{justify-content:space-between}.harmony-bar{padding:11px}.harmony-bar .eyebrow{font-size:9px}.palette-strip,.swatch{min-height:205px}.swatch-main{left:8px;right:4px;bottom:10px;transform:rotate(-90deg) translateY(100%);transform-origin:left bottom;width:170px;gap:3px}.swatch-name{font-size:10px;white-space:nowrap}.swatch-hex{font-size:14px}.swatch-index{top:8px;left:6px}.swatch-lock{top:3px;right:2px}.canvas-panel,.detail-card{padding:14px}.section-heading h2{font-size:22px}.wheel-panel{padding:18px}.color-wheel{max-width:290px}.wheel-caption{max-width:340px;margin:4px auto 9px;font-size:11px}.wheel-caption label{font-size:11px}.wheel-panel>.field-help{text-align:center}.adjust-control{margin:18px 0}.adjust-control label{font-size:12px}.adjust-scope{margin-top:19px}.adjust-scope button{font-size:11px;padding:9px}.adjust-actions .button{font-size:12px;padding:10px}.value-list{grid-template-columns:repeat(2,minmax(0,1fr))}.color-editor{flex-wrap:nowrap}.color-editor label{min-width:0}.color-editor .button{width:auto}.preview-card{padding:14px}.preview-card .mini-tabs{width:100%;justify-content:space-between}.preview-card .mini-tabs button{font-size:10px;padding:8px}.preview-card .card-heading h2{font-size:18px}.image-viewport{min-height:160px;max-height:330px}.image-tools{gap:8px;padding:6px 8px}.image-tools input{flex-basis:90px}.image-tools button{padding-inline:5px}}

/* Modes et harmonies partagent la ligne au-dessus des colonnes. */
.app{--source-width:246px;--workspace-gap:14px}
.workspace-toolbar{display:grid;grid-template-columns:var(--source-width) minmax(0,1fr);align-items:center;gap:var(--workspace-gap);margin-bottom:14px}
.workspace-toolbar>.workspace-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin:0;padding:5px;gap:3px}
.workspace-toolbar>.workspace-tabs button{min-width:0;padding:10px 5px;font-size:12px}
.workspace-toolbar .tab-icon{font-size:14px;margin-right:2px}
.workspace-toolbar>.harmony-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;min-width:0;margin:0;padding:10px 12px}
.workspace-toolbar .harmony-bar>div:first-child{display:flex;align-items:center;justify-content:flex-start;flex:none;gap:9px;min-width:0}
.workspace-toolbar .harmony-bar .eyebrow{margin:0;font-size:9px;letter-spacing:.11em}
.workspace-toolbar .harmony-bar strong{font-size:11px;line-height:1.2}
.workspace-toolbar .harmony-buttons{gap:5px}
.workspace-toolbar .harmony-buttons button{gap:3px;min-height:58px;padding:5px 3px}
.workspace-toolbar .harmony-buttons svg{width:28px;height:28px}
.workspace-toolbar .harmony-buttons span{font-size:9px;line-height:1.2}
@media(min-width:1550px){.app{--source-width:260px}}
@media(min-width:901px) and (max-width:1200px){.app{--source-width:212px;--workspace-gap:10px}}
@media(min-width:901px) and (max-width:1100px){.workspace-toolbar .harmony-buttons span{font-size:8px;overflow-wrap:normal}}
@media(max-width:900px){
 .workspace-toolbar{grid-template-columns:minmax(0,1fr);gap:10px}
 .workspace-toolbar>.workspace-tabs{width:246px;max-width:100%}
}
@media(max-width:620px){
 .workspace-toolbar{margin-bottom:12px}
 .workspace-toolbar>.workspace-tabs{width:100%}
 .workspace-toolbar>.harmony-bar{padding:10px}
 .workspace-toolbar .harmony-bar>div:first-child{justify-content:space-between}
 .workspace-toolbar .harmony-buttons{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .workspace-toolbar .harmony-buttons span{overflow-wrap:normal}
}
@media(max-width:360px){.workspace-toolbar .harmony-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}}