/**
 * LOOKITSGRAPHIC — Image Filter Studio (styles)
 * Structure de l'interface + thème acid/purple LOOKITSGRAPHIC.
 */

/* ========== STRUCTURE & COMPOSANTS (base) ========== */

:root{
  --paper:#E2E6E3;
  --paper-2:#F4F6F4;
  --ink:#121A16;
  --ink-soft:#5B6862;
  --line:#C3CBC6;
  --cyan:#0E7C93;
  --magenta:#BE2467;
  --amber:#D89A18;
  --radius:3px;
  --pad:clamp(12px,1.8vw,22px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{height:100%}
body{
  height:100dvh;overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:"Bricolage Grotesque",system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

.shell{display:flex;flex-direction:column;height:100%;min-height:0}
header{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;flex:none;
  padding:10px var(--pad);border-bottom:1px solid var(--line);background:var(--paper-2);
}
.wordmark{font-weight:800;font-size:19px;letter-spacing:-.04em}
.wordmark span{color:var(--magenta)}
.tagline{color:var(--ink-soft);font-size:12.5px;max-width:46ch}
.head-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

main{
  flex:1;min-height:0;display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
}
.stage{
  padding:var(--pad);display:flex;flex-direction:column;gap:10px;
  min-width:0;min-height:0;overflow:hidden;
}
.rack{
  border-left:1px solid var(--line);background:var(--paper-2);
  overflow-y:auto;overflow-x:hidden;min-height:0;padding-bottom:24px;
}

.viewer{
  flex:1 1 auto;min-height:0;position:relative;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background-image:
    linear-gradient(45deg,#d9ded9 25%,transparent 25%,transparent 75%,#d9ded9 75%),
    linear-gradient(45deg,#d9ded9 25%,transparent 25%,transparent 75%,#d9ded9 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;
  background-color:var(--paper-2);
}
.viewer canvas{max-width:100%;max-height:100%;display:block;object-fit:contain}
.viewer.drag{outline:2px dashed var(--magenta);outline-offset:-8px}

.dropzone{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;
  background:var(--paper-2);
}
.dropzone h2{font-size:clamp(20px,2.8vw,34px);font-weight:800;letter-spacing:-.045em;line-height:1.05;max-width:16ch}
.dropzone p{color:var(--ink-soft);max-width:46ch;font-size:13.5px}

button,.btn{
  font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  padding:7px 13px;border-radius:var(--radius);transition:.14s;letter-spacing:-.01em;
}
button:hover,.btn:hover{background:var(--ink);color:var(--paper-2)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.btn-solid{background:var(--ink);color:var(--paper-2)}
.btn-solid:hover{background:var(--magenta);border-color:var(--magenta)}
button[disabled]{opacity:.35;cursor:not-allowed}
button[disabled]:hover{background:transparent;color:var(--ink)}
.btn-solid[disabled]:hover{background:var(--ink);color:var(--paper-2)}

.stagebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;flex:none}
.stagebar .dims{color:var(--ink-soft)}
.compare{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare button{border:0;border-radius:0;padding:5px 11px;background:transparent;font-size:12px}
.compare button[aria-pressed="true"]{background:var(--ink);color:var(--paper-2)}

.strip{
  flex:none;border:1px solid var(--line);background:var(--paper-2);padding:8px;
  display:none;gap:7px;overflow-x:auto;overflow-y:hidden;align-items:flex-start;scrollbar-width:thin;
}
.strip.on{display:flex}
.thumb{
  position:relative;flex:none;width:58px;height:58px;padding:0;border-radius:var(--radius);
  border:1px solid var(--line);background:#cfd6d1;overflow:hidden;cursor:pointer;
}
.thumb:hover{border-color:var(--ink);background:#cfd6d1}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb[aria-current="true"]{border:2px solid var(--magenta)}
.thumb .n{
  position:absolute;left:0;bottom:0;background:var(--ink);color:var(--paper-2);
  font-family:"IBM Plex Mono",monospace;font-size:9px;padding:1px 4px;border-top-right-radius:3px;
}
.thumb .x{
  position:absolute;top:2px;right:2px;width:16px;height:16px;padding:0;line-height:1;
  border-radius:50%;border:0;background:rgba(18,26,22,.72);color:#fff;font-size:11px;
  display:flex;align-items:center;justify-content:center;opacity:0;
}
.thumb:hover .x,.thumb:focus-within .x{opacity:1}
.thumb .x:hover{background:var(--magenta);color:#fff}
.thumb.add{
  background:transparent;border:1px dashed var(--line);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:400;
}
.thumb.add:hover{border-color:var(--magenta);color:var(--magenta);background:transparent}

.gauge{
  flex:none;border:1px solid var(--ink);background:var(--paper-2);
  padding:9px 13px;display:grid;grid-template-columns:1fr auto;gap:1px 16px;align-items:center;
}
.gauge .lbl{grid-column:1;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.gauge .val{grid-column:2;grid-row:1/3;font-size:28px;font-weight:600;line-height:.9;letter-spacing:-.05em;white-space:nowrap}
.gauge .val small{font-size:12px;color:var(--ink-soft);font-weight:400}
.gauge .desc{grid-column:1;font-size:12.5px;color:var(--ink-soft)}
.bits{grid-column:1/-1;display:flex;gap:2px;margin-top:7px}
.bits i{flex:1;height:9px;background:var(--line);border-radius:1px;transition:background .2s}
.bits i.on{background:var(--magenta)}

.group{border-bottom:1px solid var(--line);padding:13px var(--pad)}
.group h3,.export h3{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:11px;display:flex;align-items:center;gap:8px;
}
.group h3::after{content:"";flex:1;height:1px;background:var(--line)}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;margin-bottom:10px}
.row:last-child{margin-bottom:0}
.row label{font-size:13px}
.row output{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--cyan);font-weight:500}
.row input[type=range]{grid-column:1/-1;width:100%}

input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:16px}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line)}
input[type=range]::-moz-range-track{height:2px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;margin-top:-5px;
  background:var(--ink);border-radius:50%;border:0;cursor:grab;
}
input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--ink);border:0;border-radius:50%;cursor:grab}
input[type=range]:hover::-webkit-slider-thumb{background:var(--magenta)}

.toggles{display:flex;gap:7px;flex-wrap:wrap}
.toggle{
  border:1px solid var(--line);border-radius:var(--radius);padding:8px 11px;
  display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer;background:var(--paper-2);
  transition:.14s;user-select:none;
}
.toggle:hover{border-color:var(--ink)}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle .mark{width:24px;height:15px;border:1px solid var(--ink);border-radius:9px;position:relative;flex:none}
.toggle .mark::after{content:"";position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:var(--ink);transition:.16s}
.toggle:has(input:checked){border-color:var(--magenta);color:var(--magenta)}
.toggle:has(input:checked) .mark{border-color:var(--magenta);background:var(--magenta)}
.toggle:has(input:checked) .mark::after{left:11px;background:var(--paper-2)}
.toggle:has(input:focus-visible){outline:2px solid var(--magenta);outline-offset:2px}

.presets{display:flex;gap:6px;flex-wrap:wrap}
.presets button{padding:6px 11px;font-size:12px;border-color:var(--line)}

.export{padding:13px var(--pad);display:flex;flex-direction:column;gap:9px}
.export .line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
select{
  font-family:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper-2);color:var(--ink);max-width:100%;
}
.hint{font-size:11.5px;color:var(--ink-soft);line-height:1.45}
.hint strong{color:var(--ink);font-weight:600}
.queue{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--ink-soft);flex-wrap:wrap}
.progress{flex:1 1 100%;height:6px;background:var(--line);border-radius:3px;overflow:hidden;display:none}
.progress.on{display:block}
.progress i{display:block;height:100%;width:0;background:var(--magenta);transition:width .1s linear}

footer{
  flex:none;border-top:1px solid var(--line);padding:8px var(--pad);
  font-size:11.5px;color:var(--ink-soft);background:var(--paper-2);
  display:flex;gap:16px;flex-wrap:wrap;
}
footer b{color:var(--ink);font-weight:600}

@media (max-width:900px){
  body{height:auto;overflow:auto}
  .shell{height:auto}
  main{grid-template-columns:1fr}
  .viewer{min-height:44vh}
  .rack{border-left:0;border-top:1px solid var(--line);overflow:visible}
  .tagline{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


/* ========== THÈME LOOKITSGRAPHIC (surcharges visuelles) ========== */

:root{
  --paper:#f2efe8;
  --paper-2:#fffef9;
  --ink:#11110f;
  --ink-soft:#625f58;
  --line:#11110f;
  --acid:#d7ff2f;
  --purple:#7457ff;
  --orange:#ff5c35;
  --blue:#56b8ff;
  --pink:#ff6fa8;
  --cyan:#42d6df;
  --yellow:#ffd84d;
  --magenta:#7457ff;
  --radius:0;
  --pad:clamp(14px,1.8vw,24px);
}

*{border-radius:0!important}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Space Grotesk",Arial,sans-serif;
  font-size:14px;
}
.mono,.row output,.thumb .n{font-family:"Space Mono",monospace}

header{
  height:80px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  flex-wrap:nowrap;
  padding:0 28px;
  border-bottom:2px solid var(--ink);
  background:rgba(242,239,232,.98);
  position:relative;
  z-index:50;
}
.brand{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none;width:max-content}
.logo-box{
  width:53px;height:53px;display:grid;place-items:center;overflow:hidden;
  background:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--acid);
}
.logo-box img{width:100%;height:100%;object-fit:contain;display:block}
.brand>b{font-size:18px;font-weight:700;line-height:1;letter-spacing:-.045em;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:166px}
.brand>b small{font:700 10px/1.6 "Space Mono",monospace;letter-spacing:.19em;text-align:center}
.tool-id{display:flex;align-items:center;gap:10px;font:700 10px/1 "Space Mono",monospace;letter-spacing:.12em;white-space:nowrap}
.tool-id i{width:8px;height:8px;border:1px solid;border-radius:50%!important;background:var(--acid)}
.tool-id em{opacity:.3;font-style:normal}
.head-actions{margin:0;display:flex;justify-content:flex-end;gap:8px;flex-wrap:nowrap}
.head-actions button,.site-link{
  height:40px;padding:0 12px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;
  font:700 9px/1 "Space Mono",monospace;white-space:nowrap;box-shadow:none;
}
.head-actions .btn-solid,.site-link{background:var(--ink);color:#fff}
.head-actions button:hover,.site-link:hover{background:var(--acid);color:var(--ink);border-color:var(--ink);transform:none}
.head-actions button[disabled]{opacity:.3}

main{grid-template-columns:minmax(0,1fr) 382px;background:var(--paper);min-height:0}
.stage{
  padding:var(--pad);gap:12px;background-color:#cfcfc8;
  background-image:radial-gradient(#1113 1px,transparent 1px);background-size:16px 16px;
}
.viewer{
  border:2px solid var(--ink);background-color:#d3d3cc;
  background-image:linear-gradient(45deg,#c7c7c0 25%,transparent 25%,transparent 75%,#c7c7c0 75%),linear-gradient(45deg,#c7c7c0 25%,transparent 25%,transparent 75%,#c7c7c0 75%);
  box-shadow:7px 7px 0 var(--ink);
}
.viewer canvas{background:#fff;box-shadow:0 18px 45px #1114}
.viewer.drag{outline:4px solid var(--acid);outline-offset:-12px}
.dropzone{
  background:var(--purple);color:#fff;display:grid;grid-template-columns:minmax(180px,.75fr) minmax(300px,1.25fr);
  gap:clamp(24px,4vw,70px);align-content:center;padding:clamp(42px,6vw,92px);text-align:left;
}
.dropzone:before{content:"";position:absolute;inset:22px;border:2px dashed #ffffffa8;pointer-events:none}
.drop-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.eyebrow{background:var(--acid);color:var(--ink);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:8px 10px;font:700 9px/1 "Space Mono",monospace}
.dropzone h2{max-width:none;font-size:clamp(42px,5vw,78px);line-height:.83;letter-spacing:-.075em;margin:27px 0 21px}
.dropzone h2 strong{color:var(--purple);-webkit-text-stroke:2px #fff;text-shadow:5px 5px 0 var(--ink)}
.dropzone p{color:#fff;opacity:.82;max-width:49ch;font-size:14px;line-height:1.55;margin:0 0 20px}
.dropzone .btn-solid{min-height:52px;padding:0 22px;background:var(--acid);color:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font:700 10px/1 "Space Mono",monospace}
.dropzone .btn-solid:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink);background:#fff;color:var(--ink)}
.dropzone small{margin-top:20px;font:700 8px/1.5 "Space Mono",monospace;opacity:.72}
.stagebar{min-height:46px;background:var(--ink);color:#fff;padding:6px 8px;gap:9px;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--purple)}
.compare{border:1px solid #fff4;overflow:hidden}
.compare button{height:32px;color:#fff;padding:0 13px;font:700 9px/1 "Space Mono",monospace}
.compare button:hover,.compare button[aria-pressed="true"]{background:var(--acid);color:var(--ink)}
.stagebar .dims{color:#fff;opacity:.68;font-size:10px}
.strip{border:2px solid var(--ink);background:var(--paper);padding:10px;box-shadow:4px 4px 0 var(--ink)}
.thumb{width:64px;height:64px;border:1.5px solid var(--ink);background:#cfcfc8}
.thumb[aria-current="true"]{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--purple)}
.thumb .n{background:var(--ink);color:#fff}
.thumb.add{border:1.5px dashed var(--ink);color:var(--ink)}
.gauge{border:2px solid var(--ink);background:var(--paper-2);padding:11px 14px;box-shadow:5px 5px 0 var(--acid)}
.gauge .lbl{color:var(--ink);font:700 9px/1 "Space Mono",monospace;letter-spacing:.13em}
.gauge .val{color:var(--purple);font-size:30px;font-weight:700}
.gauge .desc{color:var(--ink-soft);font-size:11px}
.bits{gap:3px}
.bits i{height:8px;background:#d7d3cb}
.bits i.on{background:var(--purple)}

.rack{border-left:2px solid var(--ink);background:var(--paper);padding:0}
.group,.export{border-bottom:2px solid var(--ink);padding:17px 18px}
.group:nth-child(1){background:#dcd5ff}
.group:nth-child(2){background:#d8efff}
.group:nth-child(3){background:#fffef9}
.group:nth-child(4){background:#f2efe8}
.export{background:#fff0aa}
.group h3,.export h3{margin-bottom:14px;color:var(--ink);font:700 9px/1 "Space Mono",monospace;letter-spacing:.15em}
.group h3::after{background:var(--ink)}
.row{gap:4px 10px;margin-bottom:13px}
.row label{font-size:12px;font-weight:600}
.row output{font-size:10px;color:var(--purple);font-weight:700;background:#fff;padding:3px 5px;border:1px solid var(--ink)}
input[type=range]{height:18px}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--ink)}
input[type=range]::-moz-range-track{height:4px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;background:var(--acid);border:2px solid var(--ink);border-radius:50%!important}
input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--acid);border:2px solid var(--ink);border-radius:50%!important}
.presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.presets button{min-height:39px;border:1.5px solid var(--ink);background:var(--paper-2);font:700 9px/1 "Space Mono",monospace;box-shadow:3px 3px 0 var(--ink)}
.presets button:hover{background:var(--acid);color:var(--ink);transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.toggle{border:1.5px solid var(--ink);background:var(--paper-2);font-size:11px;padding:8px 9px}
.toggle:hover{background:var(--acid)}
.toggle .mark{width:25px;height:16px;border:1.5px solid var(--ink);border-radius:10px!important}
.toggle .mark::after{border-radius:50%!important}
.toggle:has(input:checked){border-color:var(--ink);color:var(--ink);background:var(--acid)}
.toggle:has(input:checked) .mark{border-color:var(--ink);background:var(--purple)}
select{height:39px;border:1.5px solid var(--ink);background:var(--paper-2);font:700 9px/1 "Space Mono",monospace}
button,.btn{border:1.5px solid var(--ink);background:var(--paper-2);font-family:"Space Grotesk",sans-serif;font-weight:700}
button:hover,.btn:hover{background:var(--acid);color:var(--ink)}
.export .btn-solid{background:var(--ink);color:#fff;min-height:48px;font:700 9px/1.4 "Space Mono",monospace;box-shadow:5px 5px 0 var(--purple)}
.export .btn-solid:hover{background:var(--purple);color:#fff;transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.hint,.queue{font:400 10px/1.55 "Space Mono",monospace;color:var(--ink-soft)}
.progress{height:8px;background:#fff;border:1px solid var(--ink)}
.progress i{background:var(--purple)}
footer{min-height:58px;border-top:2px solid var(--ink);padding:9px 18px;background:var(--ink);color:#fff;align-items:center;font:400 9px/1.45 "Space Mono",monospace}
footer span:last-child{margin-left:auto;color:var(--acid);white-space:nowrap}
footer b{color:var(--acid)}

@media(max-width:1180px){
  header{grid-template-columns:1fr auto}.tool-id{display:none}.site-link{display:none}
  main{grid-template-columns:minmax(0,1fr) 350px}.dropzone{padding:52px 42px;gap:30px}.image-art{transform:scale(.82)}
}
@media(max-width:900px){
  body{height:auto;overflow:auto}.shell{height:auto}header{height:auto;min-height:72px;padding:10px 14px}.head-actions button:not(:first-child){display:none}
  main{grid-template-columns:1fr}.stage{min-height:720px}.viewer{min-height:520px}.rack{border-left:0;border-top:2px solid var(--ink);overflow:visible}.dropzone{grid-template-columns:1fr;text-align:center}.drop-copy{align-items:center}.dropzone p{text-align:center}.image-art{display:none}footer span:last-child{margin-left:0}
}
@media(max-width:620px){
  header{min-height:68px;grid-template-columns:1fr auto}.logo-box{width:45px;height:45px;box-shadow:4px 4px 0 var(--acid)}.brand{gap:10px}.brand>b{font-size:16px;min-width:132px}.brand>b small{font-size:8px;letter-spacing:.14em}.head-actions .btn-solid{width:42px;font-size:0;padding:0}.head-actions .btn-solid span{font-size:15px}.stage{padding:12px;min-height:650px}.viewer{min-height:450px}.dropzone{padding:62px 26px}.dropzone:before{inset:14px}.dropzone h2{font-size:48px}.dropzone p{font-size:12px}.gauge{grid-template-columns:1fr auto}.group,.export{padding:16px 14px}.presets{grid-template-columns:repeat(2,1fr)}footer{flex-direction:column;align-items:flex-start}
}