:root{--brand:#0ea5e9;--brand-600:#0284c7;--ink:#0f172a;--line:#e2e8f0;--bg:#fff;--shadow:0 10px 30px rgba(2,132,199,.12)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,Segoe UI,Inter,Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
.hdr{display:flex;align-items:center;gap:16px;max-width:1200px;margin:28px auto 8px;padding:0 16px}
.brand{width:60px;height:60px;flex:0 0 auto}
.twrap h1{margin:0;font-size:clamp(28px,4vw,44px)}.subtitle{margin:2px 0 0;color:#475569}
.shine{background:linear-gradient(90deg,var(--ink),var(--brand) 35%,var(--ink));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 6s linear infinite}
@keyframes shine{0%{background-position:-100% 0}12%,100%{background-position:120% 0}}
.wrap{max-width:1200px;margin:12px auto;padding:0 16px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:22px}
.controls{display:grid;grid-template-columns:minmax(260px,1fr) minmax(260px,1fr);gap:14px}
.full{grid-column:1/-1}.row-2{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-size:14px}
input,select,button{padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}
input:focus,select:focus,button:focus{outline:2px solid var(--brand-600);outline-offset:1px;border-color:transparent}
small{color:#64748b;margin-top:4px}
.bar{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
button{cursor:pointer}
.primary{background:var(--brand);color:#fff;border-color:transparent}
.primary:hover{background:var(--brand-600)}
.TypesPreview_tabsBoxContainer__dGPh3{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.tabs{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.tab{padding:8px 12px;border:1px solid var(--line);border-radius:9999px;background:#f8fafc}
.tab.active{background:var(--brand);color:#fff;border-color:transparent}
.tabpanes .pane{display:none}.tabpanes .pane.active{display:block}

/* grilles */
.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:10px}
.link-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}
.link-item img{width:18px;height:18px}

/* preview centré + zones actions */
.preview{position:relative;display:flex;align-items:stretch;justify-content:center;border:1px dashed var(--line);border-radius:12px;
  background:linear-gradient(180deg,#fafafa,transparent);min-height:340px;overflow:hidden}
.preview-center{display:flex;flex:1;align-items:center;justify-content:center;padding:72px 96px 92px 72px;width:100%}
#qrc{width:100%;max-width:min(92vw,540px);aspect-ratio:1;min-height:220px}

.round-group{display:flex;flex-direction:column;align-items:center;gap:4px}
.round{width:42px;height:42px;border-radius:9999px;border:1px solid var(--line);background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;padding:0;line-height:0}
.round .dl{width:22px;height:22px;fill:var(--brand);display:block}
.badge{font-size:11px;font-weight:500;color:#475569;background:#fff;border:1px solid var(--line);border-radius:6px;padding:1px 6px;line-height:1.2}

.round.expand{position:absolute;top:12px;left:12px}
.expand-ic{width:22px;height:22px;color:#0f172a}

.preview-actions{position:absolute;top:12px;right:12px;display:flex;gap:12px}
.preview-bottom{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;flex-wrap:wrap}
.cta{padding:10px 14px;border-radius:10px;border:1px solid transparent;background:var(--brand);color:#fff}
.cta:hover{background:var(--brand-600)}
.cta.outline{background:#fff;color:#0f172a;border-color:var(--line)}
.cta.outline:hover{border-color:var(--brand-600)}

/* modal zoom */
.modal{position:fixed;inset:0;display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal-body{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
.zoom-qrc{max-width:min(95vw,95vh);aspect-ratio:1}
.round.close{position:absolute;top:16px;right:16px;width:40px;height:40px}

.ft{max-width:1200px;margin:18px auto;padding:10px 16px;color:#64748b;border-top:1px solid var(--line)}
.ft a{color:inherit;text-decoration:none}

/* Mobile */
@media (max-width:980px){.grid{grid-template-columns:1fr}.controls{grid-template-columns:1fr}.row-2{grid-template-columns:1fr}}
@media (max-width:480px){
  .link-grid{grid-template-columns:1fr 1fr;max-height:230px;overflow:auto;scrollbar-gutter:stable}
  .preview-center{padding:64px 78px 88px 62px}
}
@media (prefers-reduced-motion:reduce){.shine{animation:none}}