@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');
/* HPP — styles du plan */
:root{--bg:#EEF1F6;--panel:#FFFFFF;--line:#E3E7EE;--line-soft:#EDF0F5;--text:#161B26;--muted:#646C7E;--faint:#99A1B0;--brand:#0E8F81;--brand-d:#0B6E63;--brand-soft:#E3F5F2;--green:#0FA876;--amber:#E0922B;--shadow:0 1px 2px rgba(20,30,60,.04),0 6px 20px rgba(20,30,60,.06)}
  *{box-sizing:border-box}html,body{margin:0;height:100%}
  body{background:var(--bg);color:var(--text);font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  .app{display:flex;flex-direction:column;height:100vh;min-height:600px}
  h1,h2,h3,h4{font-family:"Plus Jakarta Sans",sans-serif}
  header{display:flex;align-items:center;gap:20px;padding:0 22px;height:62px;background:var(--panel);border-bottom:1px solid var(--line);z-index:20;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:11px}
  .brand .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--brand),#37C2B0);display:grid;place-items:center;color:#fff;font-family:"Plus Jakarta Sans";font-weight:800;font-size:15px}
  .brand b{font-family:"Plus Jakarta Sans";font-weight:800;letter-spacing:-.01em;font-size:16px}
  .brand .ev{color:var(--muted);font-size:11.5px;border-left:1px solid var(--line);padding-left:12px;margin-left:3px;line-height:1.3}
  .brand .ev b{font-family:"Inter";font-weight:600;color:var(--text);font-size:11.5px;letter-spacing:0}
  .seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
  .seg button{appearance:none;border:0;background:transparent;color:var(--muted);font:600 12.5px "Inter";padding:7px 14px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:7px;transition:.15s}
  .seg button svg{width:13px;height:13px}
  .seg button[aria-pressed="true"]{background:var(--panel);color:var(--brand);box-shadow:var(--shadow)}
  .seg button:not([aria-pressed="true"]):hover{color:var(--text)}
  .spacer{flex:1}
  .mode-note{font-size:11.5px;color:var(--muted)} .mode-note b{color:var(--brand);font-weight:600}
  main{display:grid;grid-template-columns:344px 1fr;flex:1;min-height:0}
  .panel{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;position:relative;overflow:hidden}
  .tabs{display:flex;border-bottom:1px solid var(--line);flex:none}
  .tabs button{flex:1;appearance:none;border:0;background:transparent;padding:15px 10px;font:600 13px "Inter";color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:.15s}
  .tabs button[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
  .tabs button:hover{color:var(--text)}
  .tabs .badge{display:inline-block;background:var(--bg);color:var(--muted);font-size:11px;padding:1px 7px;border-radius:99px;margin-left:5px;font-weight:600}
  .tabs button[aria-selected="true"] .badge{background:var(--brand-soft);color:var(--brand)}
  .panel-top{padding:14px 16px 10px;flex:none}
  .search{position:relative}
  .search input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:11px 12px 11px 36px;font:500 13px "Inter";outline:none;transition:.15s}
  .search input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(43,87,230,.12)}
  .search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint)}
  .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .chip{font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:.14s;display:flex;align-items:center;gap:6px}
  .chip .d{width:7px;height:7px;border-radius:50%}
  .chip:hover{border-color:var(--brand);color:var(--text)}
  .chip[aria-pressed="true"]{background:var(--text);color:#fff;border-color:var(--text)}
  .list{overflow:auto;flex:1;padding:6px 10px 14px}
  .row{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:11px;cursor:pointer;transition:.13s}
  .row:hover{background:var(--bg)} .row.active{background:var(--brand-soft)}
  .logo{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:#fff;font-family:"Plus Jakarta Sans";font-weight:700;font-size:14px;flex:none}
  .row .info{min-width:0;flex:1}
  .row .nm{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row .meta{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .row .booth-no{font-size:11px;font-weight:700;color:var(--muted);background:var(--bg);padding:4px 8px;border-radius:7px;flex:none}
  .list-empty{padding:40px 24px;text-align:center;color:var(--faint);font-size:13px;line-height:1.5}
  .reg{padding:16px;overflow:auto;flex:1}
  .reg h4{font:700 12px "Inter";text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:4px 0 10px}
  .reg .info{background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:18px}
  .reg .info b{color:var(--text)}
  .tagrow{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
  .tagrow input[type=color]{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;padding:0;background:none;cursor:pointer;flex:none}
  .tagrow input[type=text]{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:500 13px "Inter";outline:none}
  .tagrow input[type=text]:focus{border-color:var(--brand)}
  .tagrow .del{border:0;background:none;color:var(--faint);cursor:pointer;font-size:16px;padding:4px}
  .tagrow .del:hover{color:var(--amber)}
  .addtag{display:flex;gap:8px;margin-top:12px}
  .addtag input[type=text]{flex:1;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:500 13px "Inter";outline:none}
  .addtag input[type=color]{width:38px;height:38px;border:1px solid var(--line);border-radius:8px;padding:0;background:none;cursor:pointer}
  .addtag button{border:0;background:var(--brand);color:#fff;border-radius:8px;padding:0 14px;font:600 13px "Inter";cursor:pointer}
  .packref{display:flex;gap:8px;margin-top:8px}
  .packref .p{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}
  .packref .p .n{font:800 16px "Plus Jakarta Sans"} .packref .p .l{font-size:11px;color:var(--muted);margin-top:3px}
  .synth-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .stat{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px}
  .stat .n{font:800 26px "Plus Jakarta Sans";line-height:1}
  .stat .l{font-size:11px;color:var(--muted);margin-top:6px;font-weight:600}
  .stat.av .n{color:var(--green)} .stat.so .n{color:var(--brand)} .stat.re .n{color:var(--amber)}
  .detail{position:absolute;inset:0;background:var(--panel);transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;z-index:5}
  .detail.open{transform:none}
  .detail-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);flex:none}
  .back{appearance:none;border:1px solid var(--line);background:#fff;width:34px;height:34px;border-radius:9px;cursor:pointer;display:grid;place-items:center;color:var(--text);transition:.14s}
  .back:hover{border-color:var(--brand);color:var(--brand)}
  .detail-head .t{font:700 13px "Plus Jakarta Sans"}
  .detail-body{padding:18px 18px 24px;overflow:auto;flex:1}
  .booth-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
  .booth-code{font:800 30px "Plus Jakarta Sans";letter-spacing:-.02em}
  .pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:99px;border:1px solid}
  .pill .d{width:7px;height:7px;border-radius:50%}
  .pill.available{color:var(--green);border-color:rgba(15,168,118,.35);background:rgba(15,168,118,.07)} .pill.available .d{background:var(--green)}
  .pill.reserved{color:var(--amber);border-color:rgba(224,146,43,.4);background:rgba(224,146,43,.08)} .pill.reserved .d{background:var(--amber)}
  .pill.sold{color:var(--brand);border-color:rgba(43,87,230,.35);background:var(--brand-soft)} .pill.sold .d{background:var(--brand)}
  .kv{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
  .kv span{color:var(--muted)} .kv b{font-weight:600}
  .exh-card{display:flex;gap:13px;align-items:center;margin:20px 0 6px}
  .exh-card .logo{width:52px;height:52px;border-radius:13px;font-size:19px}
  .exh-card .nm{font:700 16px "Plus Jakarta Sans"}
  .exh-card .cat{font-size:12px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:6px}
  .exh-card .cat .d{width:8px;height:8px;border-radius:50%}
  .desc{font-size:13.5px;line-height:1.62;color:#3C4456;margin:12px 0 0}
  .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:11px;padding:14px;font:600 13.5px "Inter";cursor:pointer;margin-top:16px;transition:.15s}
  .btn svg{width:16px;height:16px}
  .btn.primary{background:var(--brand);color:#fff} .btn.primary:hover{background:var(--brand-d)}
  .btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line)} .btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
  .btn.added{background:rgba(15,168,118,.1);color:var(--green);border:1px solid rgba(15,168,118,.35)}
  .btn.danger{background:#fff;color:#D34B4B;border:1px solid rgba(211,75,75,.3)} .btn.danger:hover{background:rgba(211,75,75,.07)}
  .btn[disabled]{opacity:.5;cursor:default}
  .field{margin-top:16px}
  .field label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:7px}
  .field select,.field input{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--text);padding:12px;font:500 13.5px "Inter";outline:none;transition:.15s}
  .field select:focus,.field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(43,87,230,.12)}
  .two{display:flex;gap:10px} .two .field{flex:1}
  .check{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13px;cursor:pointer}
  .check input{width:18px;height:18px;accent-color:var(--brand)}
  .hint{font-size:11.5px;color:var(--faint);margin-top:10px;line-height:1.5}
  .saved{font-size:12px;color:var(--green);font-weight:600;text-align:center;margin-top:12px;height:16px;opacity:0;transition:.2s}
  .saved.on{opacity:1}
  .plan-area{position:relative;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
  .plan-bar{display:flex;align-items:center;gap:18px;padding:12px 20px;flex-wrap:wrap;flex:none}
  .legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .legend .lab{font-size:11px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
  .legend .it{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
  .legend .sw{width:13px;height:13px;border-radius:4px;border:1.5px solid}
  .legend .sw.dot{border-radius:50%}
  .sw.av{background:#fff;border-color:#C7CEDA} .sw.re{background:#FCF3E4;border-color:var(--amber)}
  .addbtn{margin-left:auto;border:1px solid var(--brand);background:var(--brand-soft);color:var(--brand);font:600 12.5px "Inter";padding:8px 13px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:6px}
  .addbtn:hover{background:var(--brand);color:#fff}
  .panel-action{padding:12px 14px 4px}
  .addbtn.full{margin-left:0;width:100%;justify-content:center;padding:11px}
  .field textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--text);padding:12px;font:500 13.5px/1.5 "Inter";outline:none;resize:vertical;transition:.15s}
  .field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(43,87,230,.12)}
  .stage{flex:1;min-height:0;overflow:hidden;position:relative}
  svg.plan{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
  svg.plan.dragging{cursor:grabbing}
  .floor{fill:#FBFCFE;stroke:#D7DEE9;stroke-width:1.5}
  .void{fill:#F1F4F9;stroke:#CFD7E4;stroke-width:1.3;stroke-dasharray:4 4}
  .struct{fill:#EEF2F8;stroke:#CBD4E2;stroke-width:1.3}
  .stair-line{stroke:#BCC6D6;stroke-width:1.4}
  .zone-label{font-family:"Inter";font-size:11px;font-weight:700;fill:#A6AEBC;letter-spacing:.12em}
  .dim-label{font-family:"Inter";font-size:10px;font-weight:600;fill:#B4BCC9}
  .booth{cursor:pointer}
  .booth rect,.booth path{transition:fill .14s,stroke .14s}
  .booth text{font-family:"Inter";font-size:10px;font-weight:600;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
  .booth:hover rect,.booth:hover path{filter:brightness(.95)}
  .booth.sel rect,.booth.sel path{stroke:var(--text)!important;stroke-width:2.6!important}
  .booth.sel{filter:drop-shadow(0 3px 8px rgba(20,30,60,.25))}
  .booth.dim{opacity:.2}
  body.admin svg.plan .booth{cursor:move}
  .rsz{fill:var(--brand);stroke:#fff;stroke-width:1.6;cursor:nwse-resize}
  .zoom{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:11px;overflow:hidden;box-shadow:var(--shadow)}
  .zoom button{width:40px;height:40px;border:0;background:transparent;color:var(--text);font-size:18px;cursor:pointer;display:grid;place-items:center;border-bottom:1px solid var(--line-soft);transition:.13s}
  .zoom button:last-child{border-bottom:0;font-size:14px}
  .zoom button:hover{background:var(--bg);color:var(--brand)}
  .demo-note{position:absolute;left:18px;bottom:18px;font-size:11px;color:var(--faint);background:rgba(255,255,255,.85);padding:6px 11px;border-radius:8px;border:1px solid var(--line)}
  @media (max-width:880px){main{grid-template-columns:1fr;grid-template-rows:minmax(0,46%) 1fr}.panel{border-right:0;border-bottom:1px solid var(--line)}header{height:auto;padding:12px 16px}}

  .live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
  .live .dot{width:8px;height:8px;border-radius:50%;background:#17b26a;box-shadow:0 0 0 0 rgba(23,178,106,.5);animation:pulse 1.8s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(23,178,106,.5)}70%{box-shadow:0 0 0 7px rgba(23,178,106,0)}100%{box-shadow:0 0 0 0 rgba(23,178,106,0)}}
  .req-note{font-size:12.5px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-top:10px;line-height:1.5}
  .req-actions{display:flex;gap:8px;margin-top:12px}
  .req-actions .btn{margin-top:0}
  .btn.ok{background:#0FA876;color:#fff} .btn.ok:hover{background:#0C8B61}

  .roth{fill:#fff;stroke:var(--brand);stroke-width:2;cursor:grab}
  .rot-stem{stroke:var(--brand);stroke-width:1.4}
  .booth.zone rect{fill:#EEF2F8;stroke:#CBD4E2;stroke-width:1.3}
  .booth.zone.dash rect{fill:none;stroke:#8A93A5;stroke-width:1.4;stroke-dasharray:4 4;pointer-events:all}
  .booth.zone text{fill:#8A93A5;font-weight:600;font-size:10px}
  body.admin svg.plan .booth.zone{cursor:move}
  .live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
  .live .dot{width:8px;height:8px;border-radius:50%;background:#17b26a;box-shadow:0 0 0 0 rgba(23,178,106,.5);animation:pulse 1.8s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(23,178,106,.5)}70%{box-shadow:0 0 0 7px rgba(23,178,106,0)}100%{box-shadow:0 0 0 0 rgba(23,178,106,0)}}
  .req-note{font-size:12.5px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-top:10px;line-height:1.5}
  .req-actions{display:flex;gap:8px;margin-top:12px}.req-actions .btn{margin-top:0}
  .btn.ok{background:#0FA876;color:#fff}.btn.ok:hover{background:#0C8B61}
  .addbtn.mini{margin-left:8px}

/* --- Intégration WordPress (shortcode / page admin) : plan auto-contenu --- */
.hpp-embed{position:relative;width:100%;max-width:100%;overflow:hidden;isolation:isolate;background:#EEF1F6}
#hpp-plan-root,#hpp-editor-root{height:100%;width:100%}
#hpp-plan-root .app,#hpp-editor-root .app{height:100%!important;min-height:0!important}