/* LTPACK – page créateur de maquette */
.mq-hero{padding-block:56px 30px}
.mq-hero h1{font-size:clamp(42px,6vw,84px);font-weight:900;margin:14px 0 18px}
.mq-hero .lede{max-width:64ch;color:#3a3a37}
.mq-app{padding-block:10px 80px}
.mq-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:start}
.mq-preview{position:sticky;top:calc(env(safe-area-inset-top,0px) + 88px)}
.mq-stage{background:var(--white);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--green);overflow:hidden}
#mq-canvas{display:block;width:100%;height:auto;aspect-ratio:1/1;cursor:grab;touch-action:none}
#mq-canvas.grab{cursor:grabbing}
#mq-canvas:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.mq-hint{display:flex;align-items:center;gap:8px;margin-top:14px;font:600 14px var(--body);color:var(--mute)}
.mq-sides,.mq-toggle{display:inline-flex;border:2.5px solid var(--ink);border-radius:10px;overflow:hidden;margin-top:12px}
.mq-sides button,.mq-toggle button{font:800 16px/1 var(--disp);text-transform:uppercase;letter-spacing:.05em;padding:11px 18px;border:0;background:var(--white);color:var(--ink);cursor:pointer}
.mq-sides button+button,.mq-toggle button+button{border-left:2.5px solid var(--ink)}
.mq-sides button[aria-pressed="true"],.mq-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--green-l)}
.mq-panel{display:grid;gap:18px}
.mq-step{margin:0;border:2px solid var(--line);background:var(--white);padding:18px 20px 20px;min-width:0}
.mq-step legend{display:flex;align-items:center;gap:10px;font:900 22px/1 var(--disp);text-transform:uppercase;padding:0 8px;margin-left:-8px}
.mq-step legend b{display:grid;place-items:center;width:32px;height:32px;background:var(--green);color:var(--white);border-radius:8px;font-size:18px}
.mq-prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.mq-prods button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 9px;border:2px solid var(--line);background:var(--paper);border-radius:10px;cursor:pointer;font:800 14px/1.1 var(--disp);text-transform:uppercase;letter-spacing:.03em;color:var(--ink);transition:transform .15s,border-color .15s}
.mq-prods button:hover{transform:translateY(-2px);border-color:var(--ink)}
.mq-prods button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--white)}
.mq-prods button[aria-pressed="true"] svg{color:var(--green-l)}
.mq-label{font:800 13px var(--disp);text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin:10px 0 6px}
.mq-sw{display:flex;flex-wrap:wrap;gap:8px}
.sw{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border:2px solid var(--line);border-radius:999px;background:var(--white);cursor:pointer;font:700 14px var(--disp);text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.sw i{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.25);display:block}
.sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:2px 2px 0 var(--green)}
.sw-kraft{background:#c69466}.sw-blanc{background:#f4f2ee}.sw-noir{background:#232323}.sw-orange{background:#f2731f}
.sw-rouge{background:#d7262e}.sw-vert{background:#1f8f3a}.sw-bleu{background:#1e5bb8}.sw-jaune{background:#f5c400}
.mq-drop{display:flex;align-items:center;gap:14px;border:2.5px dashed var(--ink);border-radius:12px;padding:16px;margin-top:8px;cursor:pointer;background:var(--paper);transition:background .15s}
.mq-drop:hover,.mq-drop.over{background:#e6f6e6}
.mq-drop small{color:var(--mute);font-size:13px}
.mq-drop input{position:absolute;width:1px;height:1px;opacity:0}
.mq-drop:focus-within{outline:3px solid var(--green);outline-offset:2px}
.mq-msg{color:#b3261e;font-weight:600;font-size:14px;margin-top:6px}
.mq-msg:empty{display:none}
.mq-range{display:grid;gap:6px;margin-top:14px;font:800 13px var(--disp);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.mq-range input{width:100%;accent-color:var(--green)}
.mq-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px}
.mq-check{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;cursor:pointer}
.mq-check input{width:18px;height:18px;accent-color:var(--green)}
.mq-link{border:0;background:none;padding:0;font:800 14px var(--disp);text-transform:uppercase;letter-spacing:.06em;color:var(--green-d);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mq-summary{font:800 18px/1.25 var(--disp);text-transform:uppercase;background:var(--paper);border-left:5px solid var(--green);padding:10px 12px;margin:8px 0 14px}
.mq-dl{width:100%}
.mq-done{margin-top:8px;color:var(--green-d);font-weight:700;font-size:14.5px}
#mq-form{display:grid;gap:12px;margin-top:16px;border:0;box-shadow:none;padding:0;background:none}
#mq-form .btn{width:100%}
.mq-how .steps.light .step p{color:var(--mute)}
.mq-how .steps.light .step .n{color:var(--green-d)}
.mq-how .h2{margin-bottom:8px}
.mq-legal{margin-top:28px;font-size:13.5px;color:var(--mute)}
@media (max-width:1020px){
  .mq-grid{grid-template-columns:1fr}
  .mq-preview{position:static}
}
@media (max-width:640px){
  .mq-prods{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mq-prods button{font-size:12px}
  .mq-stage{box-shadow:6px 6px 0 var(--green)}
  .mq-step{padding:14px 14px 16px}
}
@media (max-width:1020px){
  .mq-preview{position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px);z-index:6;background:var(--paper);padding:10px 0 8px;margin-inline:-4px;display:flex;flex-direction:column;align-items:center}
  .mq-stage{width:min(100%,40vh);box-shadow:5px 5px 0 var(--green)}
  .mq-hint{display:none}
  .mq-sides{margin-top:8px}
  .mq-sides button{padding:8px 14px}
}