/* =====================================================================
   e-Telus Automation — Design system "Salle de contrôle UHF"
   Palette : graphite indigo + jaune marquage-sol + vert détection
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Barlow:wght@400;500;600&family=Barlow+Semi+Condensed:wght@500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* thème clair (par défaut) */
  --ink:#eef0f5; --deck:#ffffff; --deck-2:#f5f6fa; --line:#d7dbe8; --line-soft:#e6e9f1;
  --text:#171c33; --muted:#5d6788; --signal:#f5b300; --signal-ink:#9a6b00;
  --present:#0fa77a; --lost:#e0473a; --transfer:#5266e0; --sold:#c94c82; --unknown:#8a93b5;
  --floor:#f7f8fb; --floor-grid:rgba(23,28,51,.05); --rack:#d9deec; --rack-top:#c4cbe0;
  --shadow:0 18px 40px -22px rgba(23,28,51,.35);
  color-scheme:light;

  --r-lg:18px; --r-md:12px; --r-sm:8px;
  --f-display:'Chakra Petch',system-ui,sans-serif;
  --f-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-cond:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
  --f-code:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"]{
  --ink:#12172b;          /* fond */
  --deck:#1a2140;         /* surfaces */
  --deck-2:#212a4f;       /* surfaces relevées */
  --line:#2d3762;         /* traits */
  --line-soft:#232c52;
  --text:#e8ecf7;
  --muted:#8a93b5;
  --signal:#ffc23d;       /* jaune marquage sol / ondes UHF */
  --signal-ink:#ffc23d;   /* jaune utilisé comme texte */
  --present:#4be3b0;      /* détecté */
  --lost:#ff6b5a;         /* perdu / alerte */
  --transfer:#8ea2ff;     /* transféré */
  --sold:#f78fb3;         /* vendu */
  --unknown:#6c7599;
  --floor:#161c36;        /* sol du plan */
  --floor-grid:rgba(138,147,181,.07);
  --rack:#2a3463;
  --rack-top:#36417a;
  --shadow:0 18px 50px -20px rgba(0,0,0,.6);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
[hidden]{display:none!important}
body{font-family:var(--f-body);font-size:15px;line-height:1.5;background:var(--ink);color:var(--text);min-height:100%;display:flex;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}
::selection{background:var(--signal);color:#12172b}
.tnum{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ Sidebar : rail de boutons carrés */
.sidebar{width:120px;flex-shrink:0;position:fixed;inset:0 auto 0 0;z-index:100;display:flex;flex-direction:column;align-items:center;background:var(--deck);border-right:1px solid var(--line-soft);padding:18px 0 16px;overflow-y:auto;scrollbar-width:none}
.sidebar::-webkit-scrollbar{display:none}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 22px;text-decoration:none}
.sidebar .brand{padding:2px 0 16px;justify-content:center}
.sidebar .brand-text{display:none}
.brand-mark{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center}
.brand-mark svg{width:38px;height:38px;overflow:visible}
.brand-mark .core{fill:var(--signal)}
.brand-mark .wave{fill:none;stroke:var(--signal);stroke-width:2.2;stroke-linecap:round;opacity:0;animation:brandWave 2.8s var(--ease) infinite}
.brand-mark .wave.w2{animation-delay:.35s}.brand-mark .wave.w3{animation-delay:.7s}
@keyframes brandWave{0%{opacity:0}20%{opacity:1}70%,100%{opacity:0}}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-name{font-family:var(--f-display);font-weight:700;font-size:1.18rem;line-height:1.05;letter-spacing:.01em}
.brand-sub{font-family:var(--f-cond);font-size:.8rem;color:var(--muted);font-weight:500}
.nav{display:flex;flex-direction:column;align-items:center;gap:6px}
.nav-group{width:44px;height:1px;background:var(--line);margin:6px 0;overflow:hidden;color:transparent;font-size:0}
.nav-group:first-child{display:none}
.nav-link{position:relative;width:88px;height:72px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:8px 6px;border-radius:18px;text-decoration:none;color:var(--muted);background:var(--deck-2);border:1px solid var(--line-soft);font-family:var(--f-cond);font-weight:600;font-size:.78rem;line-height:1.1;text-align:center;transition:color .2s,background .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s}
.nav-link svg{width:26px;height:26px;flex-shrink:0;stroke-width:1.7;transition:transform .25s var(--ease)}
.nav-link:hover{color:var(--text);border-color:var(--line);transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(23,28,51,.45)}
.nav-link:hover svg{transform:scale(1.08)}
.nav-link.active{color:#12172b;background:var(--signal);border-color:var(--signal);box-shadow:0 12px 26px -14px color-mix(in srgb,var(--signal) 90%,transparent)}
.nav-link.active svg{color:#12172b}
.nav-link .lbl{display:block;max-width:100%}
.nav-count{position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--lost);color:#fff;font-family:var(--f-display);font-size:.76rem;font-weight:600;display:grid;place-items:center;border:2px solid var(--deck)}
.nav-count[hidden]{display:none}
.nav-count.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}
.sidebar-foot{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;align-items:center;gap:10px}
.sidebar-foot .user-meta{display:none}
.sidebar-foot .icon-btn{width:44px;height:44px;border-radius:12px}
.avatar{border:0;cursor:pointer;width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:600;background:var(--signal);color:#12172b}
.user-meta{min-width:0;flex:1}
.user-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:.8rem;color:var(--muted);text-transform:capitalize}
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:all .2s;text-decoration:none;flex-shrink:0}
.icon-btn:hover{color:var(--text);border-color:var(--muted)}
.icon-btn svg{width:18px;height:18px}
.icon-btn.danger:hover{color:var(--lost);border-color:var(--lost)}

/* ------------------------------------------------------------------ Main / Topbar */
.main{margin-left:120px;flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:14px 32px;background:color-mix(in srgb,var(--ink) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.page-title{font-family:var(--f-display);font-weight:600;font-size:1.15rem;letter-spacing:.01em}
.crumb{color:var(--muted);font-size:.9rem}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.live{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 12px;border-radius:999px;border:1px solid var(--line);font-family:var(--f-cond);font-weight:600;font-size:.88rem}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--present);position:relative}
.live-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--present);animation:ping 1.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.live.off .live-dot{background:var(--lost)}.live.off .live-dot::after{display:none}
.live .rate{color:var(--muted);font-weight:500}
.clock{font-family:var(--f-display);font-weight:500;font-size:.95rem;color:var(--muted);font-variant-numeric:tabular-nums}
.content{padding:28px 32px 48px;flex:1}
.page-head{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.page-head h1{font-family:var(--f-display);font-weight:700;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.1;letter-spacing:-.005em}
.page-head p{color:var(--muted);margin-top:6px;max-width:62ch}
.page-head .actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ------------------------------------------------------------------ Surfaces */
.panel{background:var(--deck);border:1px solid var(--line-soft);border-radius:var(--r-lg);min-width:0}
.panel-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.panel-head h2{font-family:var(--f-display);font-weight:600;font-size:1.02rem}
.panel-head .hint{color:var(--muted);font-size:.88rem}
.panel-head .right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel-body{padding:18px 20px}
.layout-dash{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px}
.layout-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}

/* ------------------------------------------------------------------ Bande de stock (dashboard) */
.stockband{padding:22px 24px}
.stockband-top{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.big-number{font-family:var(--f-display);font-weight:700;font-size:clamp(2.8rem,5vw,4.2rem);line-height:.95;font-variant-numeric:tabular-nums}
.big-label{color:var(--muted);font-size:.95rem;max-width:34ch}
.sb-value{margin-left:auto;text-align:right}
.sb-value span{display:block;color:var(--muted);font-size:.88rem}
.sb-value b{font-family:var(--f-display);font-weight:600;font-size:1.6rem;font-variant-numeric:tabular-nums}
.band{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:20px 0 16px;background:var(--line-soft);gap:2px}
.band span{display:block;height:100%;transition:flex-grow 1.2s var(--ease);flex-grow:0;flex-basis:0}
.band .b-present{background:var(--present)}
.band .b-unassigned{background:repeating-linear-gradient(-45deg,var(--signal) 0 6px,color-mix(in srgb,var(--signal) 55%,transparent) 6px 12px)}
.band .b-sold{background:var(--sold)}.band .b-transferred{background:var(--transfer)}.band .b-unknown{background:var(--unknown)}
.legend-row{display:flex;flex-wrap:wrap;gap:8px 28px}
.legend-item{display:flex;align-items:center;gap:10px}
.legend-item i{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.legend-item b{font-family:var(--f-display);font-weight:600;font-size:1.25rem;font-variant-numeric:tabular-nums}
.legend-item span{color:var(--muted);font-size:.88rem}
.legend-item i.b-unassigned{background:var(--signal)}

/* ------------------------------------------------------------------ Flux en direct */
.feed{list-style:none;max-height:560px;overflow-y:auto;padding:6px 8px 8px}
.feed::-webkit-scrollbar,.scroll::-webkit-scrollbar,.taglist::-webkit-scrollbar,.drawer-body::-webkit-scrollbar{width:8px}
.feed::-webkit-scrollbar-thumb,.scroll::-webkit-scrollbar-thumb,.taglist::-webkit-scrollbar-thumb,.drawer-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.feed-item{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border-radius:10px}
.feed-item.new{animation:feedIn .8s var(--ease)}
@keyframes feedIn{0%{opacity:0;transform:translateX(18px);background:color-mix(in srgb,var(--signal) 18%,transparent)}60%{opacity:1;transform:none}100%{background:transparent}}
.feed-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
.feed-icon svg{width:15px;height:15px}
.feed-icon.detected{background:color-mix(in srgb,var(--present) 16%,transparent);color:var(--present)}
.feed-icon.lost{background:color-mix(in srgb,var(--lost) 16%,transparent);color:var(--lost)}
.feed-icon.sold{background:color-mix(in srgb,var(--sold) 16%,transparent);color:var(--sold)}
.feed-icon.transferred{background:color-mix(in srgb,var(--transfer) 16%,transparent);color:var(--transfer)}
.feed-main{min-width:0}
.feed-title{font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-sub{color:var(--muted);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-time{color:var(--muted);font-family:var(--f-display);font-size:.84rem;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ Panneaux UHF (liste) */
.readers{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.reader{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--r-md);background:var(--deck-2);border:1px solid var(--line-soft);text-decoration:none;transition:border-color .2s}
.reader:hover{border-color:var(--signal)}
.bars{display:flex;align-items:flex-end;gap:3px;height:22px;flex-shrink:0}
.bars i{width:4px;border-radius:2px;background:var(--line)}
.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:55%}.bars i:nth-child(3){height:80%}.bars i:nth-child(4){height:100%}
.reader.on .bars i{background:var(--present);animation:bar 1.6s ease-in-out infinite}
.reader.on .bars i:nth-child(2){animation-delay:.15s}.reader.on .bars i:nth-child(3){animation-delay:.3s}.reader.on .bars i:nth-child(4){animation-delay:.45s}
@keyframes bar{50%{opacity:.35}}
.reader.off .bars i:nth-child(1){background:var(--lost)}
.reader-name{font-weight:600;font-size:.92rem}
.reader-zone{color:var(--muted);font-size:.84rem}
.reader-count{margin-left:auto;text-align:right;font-family:var(--f-display);font-weight:600;font-size:1.3rem;font-variant-numeric:tabular-nums;line-height:1}
.reader-count small{display:block;font-family:var(--f-body);font-weight:400;font-size:.76rem;color:var(--muted);margin-top:3px}

/* ------------------------------------------------------------------ Boutons / formulaires */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:10px;border:1px solid transparent;font-weight:600;font-size:.92rem;cursor:pointer;text-decoration:none;transition:transform .15s,background .2s,border-color .2s,color .2s;white-space:nowrap;background:transparent}
.btn svg{width:17px;height:17px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--signal);color:#12172b}
.btn-primary:hover{background:color-mix(in srgb,var(--signal) 85%,#fff)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-sm{padding:6px 12px;font-size:.84rem;border-radius:8px}
.btn-lg{padding:15px 22px;font-size:1.02rem;border-radius:12px}
.btn-block{width:100%}
.btn-sold{border-color:color-mix(in srgb,var(--sold) 45%,transparent);color:var(--sold)}
.btn-sold:hover{background:color-mix(in srgb,var(--sold) 14%,transparent)}
.btn-transfer{border-color:color-mix(in srgb,var(--transfer) 45%,transparent);color:var(--transfer)}
.btn-transfer:hover{background:color-mix(in srgb,var(--transfer) 14%,transparent)}
.btn-ok{border-color:color-mix(in srgb,var(--present) 45%,transparent);color:var(--present)}
.btn-ok:hover{background:color-mix(in srgb,var(--present) 14%,transparent)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn.busy svg{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-weight:600;font-size:.9rem}
.field .help{color:var(--muted);font-size:.84rem}
.input,.select{width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--deck-2);transition:border-color .2s,box-shadow .2s;font-size:.95rem}
.input::placeholder{color:var(--muted);opacity:.85}
.input:focus,.select:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 18%,transparent)}
.select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238a93b5' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.select option{background:var(--deck);color:var(--text)}
.input-sm{padding:8px 12px;font-size:.9rem}
.select.input-sm{padding-right:34px;background-position:right 12px center}
.search{position:relative}
.search svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search .input{padding-left:36px}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.86rem;margin:2px 0 14px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.segmented{display:inline-flex;padding:4px;border-radius:12px;background:var(--deck-2);border:1px solid var(--line-soft);gap:2px;flex-wrap:wrap}
.segmented button{border:0;background:transparent;padding:7px 14px;border-radius:9px;font-weight:600;font-size:.88rem;color:var(--muted);cursor:pointer;transition:all .2s}
.segmented button:hover{color:var(--text)}
.segmented button[aria-pressed="true"]{background:var(--deck);color:var(--text);box-shadow:0 1px 0 var(--line)}
.segmented .n{font-family:var(--f-display);font-weight:500;margin-left:6px;opacity:.75;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ Tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.93rem}
th{text-align:left;font-family:var(--f-cond);font-weight:600;font-size:.86rem;color:var(--muted);padding:12px 16px;background:var(--deck);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr{transition:background .15s}
tbody tr:hover td{background:color-mix(in srgb,var(--deck-2) 70%,transparent)}
tbody tr.enter{animation:rowIn .5s var(--ease) both}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}}
tr.flash td{animation:rowFlash 1.6s var(--ease)}
@keyframes rowFlash{0%{background:color-mix(in srgb,var(--signal) 25%,transparent)}}
.one-wh .col-wh{display:none}
td.epc{white-space:nowrap}
.epc{font-family:var(--f-code);font-size:.82rem;color:var(--signal-ink);letter-spacing:.02em}
.muted{color:var(--muted)}
.cell-actions{display:flex;gap:6px;justify-content:flex-end}
.empty{padding:56px 24px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--text);font-family:var(--f-display);font-weight:600;font-size:1.1rem;margin-bottom:6px}
.empty svg{width:44px;height:44px;margin-bottom:12px;color:var(--line)}
.skeleton{height:40px;margin:8px 16px;border-radius:8px;background:linear-gradient(90deg,var(--line-soft),var(--deck-2),var(--line-soft));background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.table-foot{padding:12px 20px;color:var(--muted);font-size:.86rem;border-top:1px solid var(--line-soft)}

/* Statuts */
.status{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.88rem;white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.status.present{color:var(--present)}.status.present::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--present) 25%,transparent)}
.status.sold{color:var(--sold)}.status.transferred{color:var(--transfer)}.status.unknown{color:var(--unknown)}.status.lost{color:var(--lost)}
.chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:.82rem;font-weight:600;background:var(--line-soft);color:var(--muted);white-space:nowrap;margin:2px 4px 2px 0}
.chip.zone{background:color-mix(in srgb,var(--signal) 14%,transparent);color:var(--signal-ink)}
.chip.low{background:color-mix(in srgb,var(--lost) 16%,transparent);color:var(--lost)}
.chip.ok{background:color-mix(in srgb,var(--present) 14%,transparent);color:var(--present)}

/* Jauge stock */
.gauge{display:flex;align-items:center;gap:12px;min-width:190px}
.gauge-track{display:block;flex:1;min-width:90px;height:8px;border-radius:4px;background:var(--line-soft);position:relative}
.gauge-fill{display:block;height:100%;border-radius:4px;background:var(--present);width:0;transition:width 1.1s var(--ease)}
.gauge.low .gauge-fill{background:var(--lost)}
.gauge-min{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:1px;background:var(--text);opacity:.6}
.gauge-num{font-family:var(--f-display);font-weight:600;font-size:1.15rem;width:92px;flex-shrink:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.gauge-num small{font-family:var(--f-body);font-weight:400;font-size:.8rem;color:var(--muted);margin-left:5px}

/* ------------------------------------------------------------------ Alertes */
.alerts{display:flex;flex-direction:column;gap:10px;padding:16px}
.alert{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px 14px 20px;border-radius:var(--r-md);background:var(--deck-2);border:1px solid var(--line-soft);position:relative;overflow:hidden;transition:transform .45s var(--ease),opacity .45s,max-height .45s .1s,padding .45s .1s,margin .45s .1s;max-height:220px}
.alert::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--lost)}
.alert.system::before{background:var(--signal)}
.alert-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--lost) 15%,transparent);color:var(--lost)}
.alert.system .alert-ico{background:color-mix(in srgb,var(--signal) 15%,transparent);color:var(--signal-ink)}
.alert-ico svg{width:22px;height:22px}
.alert-msg{font-weight:600}
.alert-meta{color:var(--muted);font-size:.86rem;margin-top:2px;display:flex;gap:14px;flex-wrap:wrap}
.alert.resolving{transform:translateX(60px);opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-10px;border-width:0}
.alert.new{animation:feedIn .8s var(--ease)}

/* ------------------------------------------------------------------ Réception */
.steps{display:flex;gap:6px;margin-bottom:22px;list-style:none}
.step{flex:1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--deck-2);color:var(--muted);font-weight:600;font-size:.88rem;transition:all .3s}
.step-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid currentColor;font-family:var(--f-display);font-size:.8rem;flex-shrink:0;transition:all .3s}
.step.done{color:var(--present)}.step.done .step-n{background:var(--present);border-color:var(--present);color:#12172b}
.step.current{color:var(--text);box-shadow:inset 0 0 0 1px var(--signal)}.step.current .step-n{border-color:var(--signal);color:var(--signal-ink)}
.scanzone{position:relative;border-radius:var(--r-lg);border:1.5px dashed var(--line);background:var(--deck-2);padding:26px 22px 22px;text-align:center;overflow:hidden;transition:border-color .3s,background .3s;cursor:text;margin-bottom:16px}
.scanzone.armed{border-color:var(--signal)}
.scanzone.got{border-style:solid;border-color:var(--present);background:color-mix(in srgb,var(--present) 7%,var(--deck-2))}
.scan-visual{position:relative;width:120px;height:120px;margin:0 auto 12px}
.scan-visual .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--signal);opacity:0}
.scanzone.armed .ring{animation:scanRing 2.4s var(--ease) infinite}
.scanzone.armed .ring:nth-child(2){animation-delay:.8s}.scanzone.armed .ring:nth-child(3){animation-delay:1.6s}
@keyframes scanRing{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.15);opacity:0}}
.scan-visual .chipv{position:absolute;inset:34px;border-radius:12px;background:var(--deck);border:2px solid var(--line);display:grid;place-items:center;transition:all .4s var(--ease)}
.scan-visual .chipv svg{width:30px;height:30px;color:var(--signal)}
.scanzone.got .chipv{border-color:var(--present);transform:scale(1.08)}
.scanzone.got .chipv svg{color:var(--present)}
.scan-title{font-family:var(--f-display);font-weight:600;font-size:1.1rem}
.scan-help{color:var(--muted);font-size:.9rem;margin-top:2px}
.epc-input{margin-top:16px;width:100%;text-align:center;font-family:var(--f-code);font-size:1.12rem;letter-spacing:.08em;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--deck);color:var(--signal-ink)}
.epc-input::placeholder{color:var(--muted);letter-spacing:.02em;font-family:var(--f-body);font-size:.95rem}
.epc-input:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 18%,transparent)}
.label-wrap{padding:22px;border-radius:var(--r-lg);background:repeating-linear-gradient(-45deg,var(--deck-2) 0 10px,var(--deck) 10px 20px)}
.label-preview{border-radius:10px;background:#fbfaf6;color:#1b1b1b;padding:18px 20px;box-shadow:var(--shadow);position:relative;font-family:var(--f-body)}
.label-preview.print{animation:printOut 1.1s var(--ease)}
@keyframes printOut{0%{clip-path:inset(0 0 100% 0);transform:translateY(-10px)}100%{clip-path:inset(0 0 0 0);transform:none}}
.label-ref{font-family:var(--f-display);font-weight:700;font-size:1.35rem;letter-spacing:.02em;padding-right:44px}
.label-name{font-size:.98rem;margin-top:2px;min-height:1.5em}
.label-bars{height:50px;margin:12px 0 6px;display:flex;align-items:stretch;overflow:hidden}
.label-bars i{background:#1b1b1b;display:block;flex-shrink:0}
.label-epc{font-family:var(--f-code);font-size:.8rem;letter-spacing:.06em;word-break:break-all;min-height:1.3em}
.label-badge{position:absolute;top:16px;right:16px;width:32px;height:32px;color:#1b1b1b;opacity:.7}
.label-note{color:var(--muted);font-size:.86rem;margin-top:12px;text-align:center}
.result{margin-top:14px;border-radius:12px;padding:12px 14px;display:none;gap:12px;align-items:flex-start;font-size:.93rem}
.result.show{display:flex;animation:feedIn .6s var(--ease)}
.result.ok{background:color-mix(in srgb,var(--present) 12%,transparent)}
.result.err{background:color-mix(in srgb,var(--lost) 12%,transparent)}
.result svg{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.result.ok svg{color:var(--present)}.result.err svg{color:var(--lost)}
.result small{display:block;color:var(--muted)}
.recent-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 20px;border-bottom:1px solid var(--line-soft)}
.recent-item:last-child{border-bottom:0}
.recent-item.new{animation:feedIn .8s var(--ease)}
.recent-item .name{font-weight:600}
.recent-item .when{color:var(--muted);font-size:.84rem;grid-row:span 2;align-self:center;font-family:var(--f-display);font-variant-numeric:tabular-nums}
.recent-item .epc{font-size:.78rem}

/* Sélecteur d'article (réception) */
.picker{position:relative}
.picker-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;max-height:340px;overflow-y:auto;background:var(--deck);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px}
.picker-opt{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:9px;cursor:pointer}
.picker-opt[aria-selected="true"],.picker-opt:hover{background:var(--deck-2)}
.picker-opt .art-name{-webkit-line-clamp:1}
.picker-empty{padding:14px;color:var(--muted);font-size:.9rem}
.picker-chosen{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;border:1px solid var(--signal);background:color-mix(in srgb,var(--signal) 6%,var(--deck-2));animation:feedIn .5s var(--ease)}
.picker-chosen .art-txt{display:flex;flex-direction:column}

/* Modes de sélection d'article + assistant */
.pick-modes{width:100%;margin-bottom:12px}
.pick-modes button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pick-modes svg{width:16px;height:16px}
.wiz{border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--deck-2);padding:14px}
.wiz-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:.86rem;color:var(--muted);margin-bottom:10px}
.wiz-crumbs button{border:0;background:transparent;color:var(--signal-ink);font-weight:600;cursor:pointer;padding:2px 4px;border-radius:6px}
.wiz-crumbs button:last-child{color:var(--text);cursor:default}
.wiz-title{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;font-size:1.02rem;margin-bottom:12px}
.wiz-step{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--signal);color:#12172b;font-size:.82rem}
.wiz-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.wiz-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px 12px;border-radius:14px;border:1px solid var(--line-soft);background:var(--deck);cursor:pointer;text-align:center;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;animation:rowIn .45s var(--ease) both}
.wiz-tile:hover{transform:translateY(-3px);border-color:var(--signal);box-shadow:0 12px 24px -16px rgba(23,28,51,.45)}
.wiz-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--signal) 14%,transparent);color:var(--signal-ink);transition:transform .25s var(--ease)}
.wiz-tile:hover .wiz-ico{transform:scale(1.08) rotate(-3deg)}
.wiz-ico svg{width:30px;height:30px}
.wiz-lbl{font-weight:600;font-size:.9rem;line-height:1.25}
.wiz-n{color:var(--muted);font-size:.78rem}
.wiz-brands{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.wiz-brands button{border:1px solid var(--line);background:var(--deck);border-radius:999px;padding:5px 12px;font-weight:600;font-size:.84rem;cursor:pointer;color:var(--muted)}
.wiz-brands button[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:#12172b}
.wiz-brands .n{font-family:var(--f-display);opacity:.7;margin-left:3px}
.wiz-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:420px;overflow-y:auto;padding:2px}
.wiz-prod{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px;border-radius:12px;border:1px solid var(--line-soft);background:var(--deck);cursor:pointer;transition:border-color .2s,transform .2s var(--ease);animation:rowIn .45s var(--ease) both}
.wiz-prod:hover{border-color:var(--signal);transform:translateY(-2px)}
.wiz-prod-img{height:90px;border-radius:8px;background:#fff;display:grid;place-items:center;margin-bottom:6px;overflow:hidden}
.wiz-prod-img img{width:100%;height:100%;object-fit:contain;padding:6px}
.wiz-prod-img img+.thumb{display:none}
.wiz-prod .art-name{font-size:.86rem}
.wiz-prod .price{font-size:.92rem;margin-top:4px}

/* Mapping : liste de tags sélectionnables */
.taglist{display:flex;flex-direction:column;gap:6px;padding:12px;max-height:600px;overflow-y:auto}
.tagpick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 14px;border-radius:10px;border:1px solid var(--line-soft);background:var(--deck-2);cursor:pointer;transition:border-color .2s,background .2s}
.tagpick:hover{border-color:var(--muted)}
.tagpick[aria-pressed="true"]{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 9%,var(--deck-2))}
.tagpick .dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--signal);flex-shrink:0;transition:background .2s}
.tagpick[aria-pressed="true"] .dot{background:var(--signal)}
.tagpick .epc{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tagpick small{color:var(--muted);font-family:var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.tagpick.gone{animation:leaveRow .5s var(--ease) forwards}
@keyframes leaveRow{to{opacity:0;transform:translateX(40px)}}

/* ------------------------------------------------------------------ Vignettes article */
.thumb{width:var(--s);height:var(--s);flex-shrink:0;border-radius:10px;background:#fff;border:1px solid var(--line-soft);display:inline-grid;place-items:center;overflow:hidden;vertical-align:middle}
.thumb img{width:100%;height:100%;object-fit:contain;padding:3px}
.thumb-fb{width:100%;height:100%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:calc(var(--s,40px) * .34);color:hsl(var(--h,220) 45% 32%);background:hsl(var(--h,220) 60% 92%)}
:root[data-theme="dark"] .thumb-fb{color:hsl(var(--h,220) 70% 80%);background:hsl(var(--h,220) 35% 22%)}
.art{display:flex;align-items:center;gap:12px;min-width:0}
.art-txt{min-width:0}
.art-brand{font-family:var(--f-cond);font-weight:600;font-size:.8rem;color:var(--muted);text-transform:none}
.art-name{font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{font-family:var(--f-display);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.price s{font-family:var(--f-body);font-weight:400;color:var(--muted);font-size:.85em;margin-left:6px}

/* ------------------------------------------------------------------ Toasts */
#toast-container{position:fixed;right:20px;bottom:20px;z-index:9999;display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none}
.toast{pointer-events:auto;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;width:330px;max-width:calc(100vw - 40px);padding:12px 14px;border-radius:14px;background:var(--deck-2);border:1px solid var(--line);box-shadow:var(--shadow);animation:toastIn .5s var(--ease);transition:opacity .35s,transform .35s}
.toast.out{opacity:0;transform:translateX(30px)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px) scale(.96)}}
.toast .feed-icon{width:36px;height:36px;border-radius:10px}
.toast-title{font-weight:600;font-size:.92rem}
.toast-sub{color:var(--muted);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ------------------------------------------------------------------ Plan d'entrepôt */
.map-shell{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--floor);border:1px solid var(--line-soft)}
.map-shell.full{height:calc(100vh - 200px);min-height:540px}
.map-shell.mini{height:460px}
.map-svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.map-svg.dragging{cursor:grabbing}
.map-svg text{font-family:var(--f-cond);pointer-events:none}
.m-floor{fill:var(--floor)}
.m-grid{stroke:var(--floor-grid);stroke-width:1}
.m-wall{fill:none;stroke:var(--muted);stroke-width:7;stroke-linejoin:round;opacity:.5}
.m-zone{fill:transparent;stroke:var(--line);stroke-width:1.5;stroke-dasharray:8 6;cursor:pointer;transition:fill .25s,stroke .25s}
.m-zone:hover,.m-zone.sel{fill:color-mix(in srgb,var(--signal) 5%,transparent);stroke:var(--signal)}
.m-zone-label{fill:var(--muted);font-size:15px;font-weight:600;paint-order:stroke;stroke:var(--floor);stroke-width:4px}
.m-zone-count{fill:var(--text);font-family:var(--f-display)!important;font-size:24px;font-weight:600}
.m-lane{stroke:var(--signal);stroke-width:3;opacity:.45;stroke-dasharray:22 14;fill:none}
.m-rack{fill:var(--rack);stroke:var(--rack-top);stroke-width:1}
.m-rack-bay{stroke:var(--rack-top);stroke-width:1}
.m-rack-label{fill:var(--muted);font-size:10px;font-weight:600}
.m-dock{fill:url(#hazard)}
.m-dock-label{fill:var(--muted);font-size:11px;font-weight:600}
.m-bench{fill:var(--deck-2);stroke:var(--line);stroke-width:1}
.m-pallet{fill:none;stroke:var(--line);stroke-width:1.2;stroke-dasharray:3 3}
.m-coverage{fill:url(#cov);stroke:var(--signal);stroke-opacity:.28;stroke-width:1}
.m-wave{fill:none;stroke:var(--signal);stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0;animation:mWave 3.4s var(--ease) infinite}
@keyframes mWave{0%{transform:scale(.12);opacity:.8}100%{transform:scale(1);opacity:0}}
.panel-node{cursor:pointer;outline:none}
.panel-node .pn-body{fill:var(--deck);stroke:var(--signal);stroke-width:2.5;transition:fill .2s}
.panel-node:hover .pn-body,.panel-node.sel .pn-body,.panel-node:focus-visible .pn-body{fill:var(--signal)}
.panel-node .pn-glyph{stroke:var(--signal);fill:none;stroke-width:2.2;stroke-linecap:round;transition:stroke .2s}
.panel-node:hover .pn-glyph,.panel-node.sel .pn-glyph,.panel-node:focus-visible .pn-glyph{stroke:#12172b}
.panel-node .pn-badge{fill:var(--text)}
.panel-node .pn-badge-t{fill:var(--ink);font-family:var(--f-display)!important;font-size:12px;font-weight:700}
.panel-node .pn-name{fill:var(--text);font-size:12.5px;font-weight:600;paint-order:stroke;stroke:var(--floor);stroke-width:4px;stroke-linejoin:round}
.panel-node.off .pn-body{stroke:var(--lost);stroke-dasharray:4 3}
.panel-node.off .pn-glyph{stroke:var(--lost)}
.panel-node.off .m-wave{display:none}
.panel-node.off .m-coverage{stroke:var(--lost);stroke-opacity:.5;fill:none;stroke-dasharray:4 6}
.panel-node .pn-core{transform-box:fill-box;transform-origin:center}
.panel-node.burst .pn-core{animation:pnBurst .8s var(--ease)}
@keyframes pnBurst{30%{transform:scale(1.3)}}
.burst-ring{fill:none;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:burst 1.4s var(--ease) forwards;pointer-events:none}
@keyframes burst{0%{transform:scale(.1);opacity:1}100%{transform:scale(1);opacity:0}}
.tagdot{transform-box:fill-box;transform-origin:center;transition:opacity .3s;cursor:pointer}
.tagdot.present{fill:var(--present)}
.tagdot.unassigned{fill:var(--floor);stroke:var(--signal);stroke-width:1.8}
.tagdot.unknown{fill:var(--unknown)}
.tagdot.twinkle{animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.4}}
.tagdot.arrive{animation:arrive 1s var(--ease)}
@keyframes arrive{0%{transform:scale(4);opacity:0}60%{transform:scale(.8);opacity:1}100%{transform:scale(1)}}
.tagdot.leave{animation:leave 1s var(--ease) forwards;fill:var(--lost)}
@keyframes leave{to{transform:scale(3.5);opacity:0}}
.tagdot.hit{fill:var(--signal)!important;stroke:var(--ink);stroke-width:1.5;animation:hit 1.2s ease-in-out infinite;opacity:1!important}
@keyframes hit{50%{transform:scale(1.9)}}
.map-svg.searching .tagdot:not(.hit){opacity:.12}
.beam{stroke:var(--signal);stroke-width:2;stroke-dasharray:5 5;animation:beam .6s linear infinite;pointer-events:none}
@keyframes beam{to{stroke-dashoffset:-10}}
.heat{pointer-events:none}
.map-svg.no-tags .tagdot,.map-svg.no-coverage .m-coverage,.map-svg.no-coverage .m-wave,.map-svg.no-heat .heat{display:none}
/* Entrée orchestrée (une seule fois au chargement) */
.map-svg.intro .m-zone{animation:zoneDraw 1.4s var(--ease) both}
@keyframes zoneDraw{from{stroke-dashoffset:300;opacity:0}to{stroke-dashoffset:0;opacity:1}}
.map-svg.intro .m-rack-g{animation:rackRise .7s var(--ease) both}
@keyframes rackRise{from{opacity:0;transform:translateY(12px)}}
.map-svg.intro .panel-node{animation:pnPop .8s var(--ease) both}
@keyframes pnPop{from{opacity:0;transform:scale(.3)}}
.map-svg .panel-node{transform-box:fill-box;transform-origin:center}
.map-svg.intro .tagdot{animation:arrive .9s var(--ease) both}
.sweep{pointer-events:none;opacity:0}
.map-svg.intro .sweep{animation:sweep 2.2s var(--ease) .2s both}
@keyframes sweep{0%{opacity:0;transform:translateX(-10%)}15%{opacity:1}100%{opacity:0;transform:translateX(105%)}}

.map-toolbar{position:absolute;top:14px;left:14px;right:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;pointer-events:none;z-index:3}
.map-toolbar>*{pointer-events:auto}
.map-card{background:color-mix(in srgb,var(--deck) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:12px}
.map-search{width:320px;max-width:100%}
.map-search .input{background:transparent;border:0;padding-top:10px;padding-bottom:10px}
.map-search .input:focus{box-shadow:none}
.map-search-count{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--f-display);font-size:.84rem;color:var(--signal-ink)}
.map-layers{display:flex;padding:4px;gap:2px;flex-wrap:wrap}
.map-layers button{border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:8px;font-weight:600;font-size:.86rem;cursor:pointer;display:flex;align-items:center;gap:7px}
.map-layers button i{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor}
.map-layers button[aria-pressed="true"]{color:var(--text);background:var(--line-soft)}
.map-layers button[aria-pressed="true"] i{background:var(--signal);border-color:var(--signal)}
.map-zoom{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;z-index:3;overflow:hidden}
.map-zoom button{width:40px;height:40px;border:0;background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center}
.map-zoom button:hover{background:var(--line-soft)}
.map-zoom button+button{border-top:1px solid var(--line)}
.map-zoom svg{width:18px;height:18px}
.map-legend{position:absolute;left:14px;bottom:14px;padding:10px 14px;display:flex;gap:16px;flex-wrap:wrap;font-size:.84rem;color:var(--muted);z-index:3}
.map-legend span{display:flex;align-items:center;gap:7px}
.map-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.map-legend i.u{background:transparent;border:2px solid var(--signal)}
.map-tip{position:absolute;z-index:5;pointer-events:none;padding:10px 12px;min-width:180px;max-width:290px;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.map-tip.show{opacity:1;transform:none}
.map-tip b{display:block;font-family:var(--f-display);font-weight:600}
.map-tip span{color:var(--muted);font-size:.84rem;display:block}
.map-tip .epc{display:block;font-size:.76rem;margin-top:2px}
.map-empty{position:absolute;inset:0;display:grid;place-items:center;z-index:2;text-align:center;padding:24px;color:var(--muted);pointer-events:none}
.map-empty>div{max-width:420px;padding:20px 24px;pointer-events:auto}
.map-empty strong{display:block;color:var(--text);font-family:var(--f-display);font-size:1.1rem;margin-bottom:6px}
.map-open{position:absolute;right:14px;top:14px;z-index:3}

/* Plan : murs intérieurs, textes, niveaux de rayonnage, étages */
.m-wall-line{stroke:var(--muted);stroke-width:5;stroke-linecap:round;opacity:.55}
.m-text{fill:var(--text);font-weight:600;opacity:.75;paint-order:stroke;stroke:var(--floor);stroke-width:3px}
.m-rack-lv{fill:var(--muted);font-size:9px;font-weight:600}
.m-rack-g{cursor:help}
.map-floors{display:flex;padding:4px;gap:2px;flex-wrap:wrap}
.map-floors button{border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:8px;font-weight:600;font-size:.86rem;cursor:pointer}
.map-floors button[aria-pressed="true"]{background:var(--signal);color:#12172b}
.map-floors .n{font-family:var(--f-display);opacity:.7;margin-left:6px;font-weight:500}
.map-floors.mini{position:absolute;left:10px;top:10px;z-index:3}
.map-floors.mini button{padding:4px 10px;font-size:.8rem}

/* Cotes et échelle (mètres) */
.m-dim-line{fill:none;stroke:var(--muted);stroke-width:1.2}
.m-dim-txt{fill:var(--muted);font-size:12px;font-weight:600}
.m-scale{fill:none;stroke:var(--text);stroke-width:2}
.m-scale-bg{fill:var(--deck);opacity:.85}

/* Placement d'un panneau */
.map-svg.placing{cursor:crosshair}
.map-svg.placing .panel-node{opacity:.45}
.map-svg.placing .m-zone,.map-svg.placing .panel-node,.map-svg.placing .tagdot{pointer-events:none}
.place-marker .pm-body{fill:var(--signal);stroke:#12172b;stroke-width:2}
.place-marker .pm-glyph{stroke:#12172b;fill:none;stroke-width:2.2;stroke-linecap:round}
.place-marker{transition:transform .35s var(--ease)}

/* Tiroir de détail */
.drawer{position:absolute;top:0;right:0;bottom:0;width:390px;max-width:100%;z-index:6;background:var(--deck);border-left:1px solid var(--line);transform:translateX(105%);transition:transform .5s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow)}
.drawer.open{transform:none}
.drawer-head{padding:20px 20px 16px;border-bottom:1px solid var(--line-soft);display:flex;gap:14px;align-items:flex-start}
.drawer-head h3{font-family:var(--f-display);font-weight:600;font-size:1.3rem;line-height:1.2}
.drawer-head p{color:var(--muted);font-size:.9rem;margin-top:2px}
.drawer-head .icon-btn{margin-left:auto}
.drawer-kind{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--signal) 14%,transparent);color:var(--signal-ink);flex-shrink:0}
.drawer-kind svg{width:22px;height:22px}
.drawer-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line-soft)}
.drawer-stats div{padding:14px 16px}
.drawer-stats div+div{border-left:1px solid var(--line-soft)}
.drawer-stats b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.5rem;font-variant-numeric:tabular-nums}
.drawer-stats span{color:var(--muted);font-size:.82rem}
.drawer-body{flex:1;overflow-y:auto;padding:8px 0 16px}
.drawer-body h4{font-family:var(--f-cond);font-weight:600;font-size:.9rem;color:var(--muted);padding:14px 20px 6px}
.d-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 10px;padding:9px 20px;border-bottom:1px solid var(--line-soft);cursor:pointer;background:transparent;border-left:0;border-right:0;border-top:0;width:100%;text-align:left}
.d-row:hover{background:var(--deck-2)}
.d-row .t{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-row .s{grid-column:1;font-size:.78rem}
.d-row .r{grid-row:1/span 2;grid-column:2;align-self:center;text-align:right;font-family:var(--f-display);font-size:.86rem;color:var(--muted)}
.prodbar{padding:8px 20px}
.prodbar-top{display:flex;justify-content:space-between;gap:10px;font-size:.92rem;margin-bottom:5px}
.prodbar-top span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prodbar-top b{font-family:var(--f-display);font-weight:600}
.prodbar .gauge-track{height:6px}
.prodbar .gauge-fill{background:var(--signal)}


/* ------------------------------------------------------------------ Catalogue */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pcard{display:flex;flex-direction:column;text-align:left;padding:0;border-radius:var(--r-lg);border:1px solid var(--line-soft);background:var(--deck);cursor:pointer;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s,border-color .2s;min-width:0}
.pcard:hover{transform:translateY(-3px);border-color:var(--line);box-shadow:var(--shadow)}
.pcard.enter{animation:rowIn .5s var(--ease) both}
.pcard.skel{height:330px;background:linear-gradient(90deg,var(--line-soft),var(--deck-2),var(--line-soft));background-size:200% 100%;animation:shimmer 1.2s linear infinite;cursor:default}
.pcard-img{position:relative;height:180px;background:#fff;display:grid;place-items:center;border-bottom:1px solid var(--line-soft);overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .4s var(--ease)}
.pcard:hover .pcard-img img{transform:scale(1.05)}
.pcard-img img+.thumb{display:none}
.pcard-img .thumb{border:0;border-radius:16px}
.promo{position:absolute;top:10px;left:10px;padding:3px 9px;border-radius:999px;background:var(--lost);color:#fff;font-family:var(--f-display);font-weight:600;font-size:.8rem}
.promo.static{position:static;margin-left:10px}
.pcard-body{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px;flex:1;min-width:0}
.pcard-ref{color:var(--muted);font-size:.8rem;font-family:var(--f-code)}
.pcard-foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pcard-foot .price{font-size:1.08rem}
.stockpill{font-weight:600;font-size:.8rem;padding:3px 10px;border-radius:999px;white-space:nowrap}
.stockpill.ok{background:color-mix(in srgb,var(--present) 14%,transparent);color:var(--present)}
.stockpill.low{background:color-mix(in srgb,var(--lost) 14%,transparent);color:var(--lost)}
.stockpill.zero{background:var(--line-soft);color:var(--muted)}
.stockpill.none{background:color-mix(in srgb,var(--signal) 16%,transparent);color:var(--signal-ink)}
.sheet-backdrop{position:fixed;inset:0;z-index:200;background:rgba(23,28,51,.35);opacity:0;transition:opacity .35s}
.sheet-backdrop.show{opacity:1}
.sheet{position:fixed;top:0;right:0;bottom:0;z-index:201;width:560px;max-width:100%;background:var(--deck);border-left:1px solid var(--line);box-shadow:var(--shadow);transform:translateX(105%);transition:transform .45s var(--ease);display:flex;flex-direction:column}
.sheet.open{transform:none}
.sheet-head{position:absolute;top:14px;right:14px;z-index:2}
.sheet-head .icon-btn{background:var(--deck)}
.sheet-scroll{overflow-y:auto;flex:1;min-height:0;padding-bottom:28px}
.sheet.form-sheet .sheet-scroll{padding-bottom:0}
.gallery{background:#fff;border-bottom:1px solid var(--line-soft);padding:20px}
.gallery-main{height:300px;display:grid;place-items:center}
.gallery-main img{max-width:100%;max-height:100%;object-fit:contain}
.gallery-thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto}
.gallery-thumbs button{width:58px;height:58px;flex-shrink:0;border-radius:10px;border:1.5px solid #e6e9f1;background:#fff;padding:4px;cursor:pointer}
.gallery-thumbs button[aria-pressed="true"]{border-color:var(--signal)}
.gallery-thumbs img{width:100%;height:100%;object-fit:contain}
.sheet-sec{padding:16px 0 4px}
.sheet-sec>.art-brand,.sheet-sec>.sheet-title,.sheet-sec>.sheet-ids,.sheet-sec>.sheet-price,.sheet-sec>p{padding:0 20px}
.sheet-sec h4{font-family:var(--f-cond);font-weight:600;font-size:.92rem;color:var(--muted);padding:0 20px 8px}
.sheet-title{font-family:var(--f-display);font-weight:600;font-size:1.4rem;line-height:1.2;margin-top:2px}
.sheet-ids{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;color:var(--muted);font-size:.88rem}
.sheet-ids b{color:var(--text);font-family:var(--f-code);font-weight:500;font-size:.85rem}
.sheet-price{margin-top:12px;display:flex;align-items:center;flex-wrap:wrap}
.sheet-price .price{font-size:1.7rem}
.sheet-price s{color:var(--muted);margin-left:12px}
.sheet .drawer-stats{margin-top:16px;border-top:1px solid var(--line-soft)}
.sheet .drawer-stats b{font-size:1.25rem}
.specs{display:grid;grid-template-columns:minmax(120px,40%) 1fr;margin:0 20px;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.specs dt,.specs dd{padding:9px 12px;border-bottom:1px solid var(--line-soft);font-size:.9rem}
.specs dt{color:var(--muted);background:var(--deck-2)}
.specs dt:nth-last-of-type(1),.specs dd:last-child{border-bottom:0}
.desc{white-space:pre-line;max-width:70ch;line-height:1.6}
.sheet-sec.meta{display:flex;flex-wrap:wrap;gap:6px 18px;padding:16px 20px 0;color:var(--muted);font-size:.86rem;border-top:1px solid var(--line-soft);margin-top:16px}
.sheet-sec.meta a{color:var(--signal-ink);font-weight:600}
.modal{margin:auto;border:0;padding:0;border-radius:var(--r-lg);background:var(--deck);color:var(--text);width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-shadow:var(--shadow)}
.modal::backdrop{background:rgba(23,28,51,.4)}
.modal[open]{display:flex;flex-direction:column;animation:toastIn .35s var(--ease)}
.modal-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line-soft)}
.modal-head h2{font-family:var(--f-display);font-weight:600;font-size:1.2rem}
.modal-head .icon-btn{margin-left:auto}
.modal-body{padding:20px 22px;overflow-y:auto}
.modal-foot{display:flex;align-items:center;gap:12px;padding:14px 22px;border-top:1px solid var(--line-soft)}
.modal-foot .btn{margin-left:auto}
.dropzone{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding:30px 20px;border:1.5px dashed var(--line);border-radius:var(--r-md);background:var(--deck-2);cursor:pointer;transition:border-color .2s,background .2s}
.dropzone:hover,.dropzone.over{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 7%,var(--deck-2))}
.dropzone strong{font-family:var(--f-display);font-weight:600}
.dropzone span{color:var(--muted);font-size:.86rem;max-width:60ch}
.imp-table{margin-top:16px;border:1px solid var(--line-soft);border-radius:12px}
.imp-table td{padding:8px 12px}
.howto{padding-left:22px;display:flex;flex-direction:column;gap:12px}
.howto li{line-height:1.6}
.hint{color:var(--muted);font-size:.88rem}
@media (max-width:560px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pcard-img{height:130px}.gallery-main{height:220px}}

/* ------------------------------------------------------------------ Panneaux UHF */
.pn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.pn-card{background:var(--deck);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:14px;animation:rowIn .5s var(--ease) both;position:relative;overflow:hidden}
.pn-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
.pn-card.on::before{background:var(--present)}.pn-card.error::before{background:var(--lost)}.pn-card.off::before{background:var(--unknown)}.pn-card.new::before{background:var(--signal)}
.pn-card.confirming{border-color:var(--lost);box-shadow:0 0 0 3px color-mix(in srgb,var(--lost) 15%,transparent)}
.pn-card.removing{transition:opacity .4s,transform .4s var(--ease);opacity:0;transform:scale(.96)}
.pn-top{display:flex;gap:12px;align-items:flex-start}
.pn-top h3{font-family:var(--f-display);font-weight:600;font-size:1.1rem;line-height:1.2}
.pn-code{color:var(--muted);font-size:.86rem;font-family:var(--f-code)}
.pn-ico{width:42px;height:42px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--signal) 14%,transparent);color:var(--signal-ink)}
.pn-ico svg{width:22px;height:22px}
.pn-card.on .pn-ico{background:color-mix(in srgb,var(--present) 14%,transparent);color:var(--present)}
.pn-card.on .pn-ico svg{animation:bar 1.8s ease-in-out infinite}
.pn-card.error .pn-ico{background:color-mix(in srgb,var(--lost) 14%,transparent);color:var(--lost)}
.pn-state{font-weight:600;font-size:.8rem;padding:3px 10px;border-radius:999px;white-space:nowrap;background:var(--line-soft);color:var(--muted)}
.pn-state.on{background:color-mix(in srgb,var(--present) 14%,transparent);color:var(--present)}
.pn-state.error{background:color-mix(in srgb,var(--lost) 14%,transparent);color:var(--lost)}
.pn-state.new{background:color-mix(in srgb,var(--signal) 16%,transparent);color:var(--signal-ink)}
.pn-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.9rem}
.pn-facts dt{color:var(--muted)}
.pn-facts dd b{font-family:var(--f-code);font-weight:500;font-size:.86rem}
.pn-facts dd.err{color:var(--lost)}
.pn-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.pn-actions .btn-sold{margin-left:auto}
.sheet.form-sheet .sheet-head{position:static;display:flex;justify-content:flex-end;padding:12px 14px 0;flex-shrink:0}
.form-sec{padding:16px 20px 4px;border-top:1px solid var(--line-soft);margin-top:12px}
.form-sec h4{font-family:var(--f-cond);font-weight:600;font-size:.92rem;color:var(--muted);margin-bottom:12px}
.form-actions{position:sticky;bottom:0;display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;margin-top:16px;background:var(--deck);border-top:1px solid var(--line-soft)}
.form-actions .btn-sold{margin-right:auto}
.token-row{display:flex;gap:6px}
.token-row .input{flex:1;min-width:0}
.mw-status{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--deck-2);margin-bottom:18px;font-size:.92rem}
.howto code{font-family:var(--f-code);font-size:.85em;background:var(--deck-2);padding:1px 6px;border-radius:5px}

/* ------------------------------------------------------------------ Éditeur de plan */
.ed-content{padding-top:18px;padding-bottom:18px}
.ed-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.ed-head h1{font-family:var(--f-display);font-weight:700;font-size:1.7rem;line-height:1.1}
.ed-head .actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.ed-head .icon-btn[disabled]{opacity:.35;pointer-events:none}
.editor{display:grid;grid-template-columns:96px minmax(0,1fr) 320px;gap:14px;height:calc(100vh - 190px);min-height:560px}
.ed-tools{display:flex;flex-direction:column;gap:6px;overflow-y:auto;scrollbar-width:none}
.ed-tool{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:96px;min-height:58px;padding:6px 4px;border-radius:14px;border:1px solid var(--line-soft);background:var(--deck);color:var(--muted);cursor:pointer;font-family:var(--f-cond);font-weight:600;font-size:.76rem;line-height:1.1;text-align:center;transition:all .18s}
.ed-tool svg{width:24px;height:24px}
.ed-tool kbd{position:absolute;top:5px;right:7px;font-family:var(--f-code);font-size:.62rem;opacity:.5}
.ed-tool:hover{color:var(--text);border-color:var(--line);transform:translateY(-1px)}
.ed-tool[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:#12172b}
.ed-tools-sep{height:1px;background:var(--line);margin:4px 18px}
.ed-stage{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--deck);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.ed-floors{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--line-soft);overflow-x:auto;flex-shrink:0}
.ed-floors button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid transparent;background:transparent;border-radius:10px;padding:6px 14px;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--muted);white-space:nowrap}
.ed-floors button .n{font-weight:400;font-size:.74rem}
.ed-floors button[aria-selected="true"]{background:var(--deck-2);border-color:var(--signal);color:var(--text)}
.ed-floors .ed-floor-add{flex-direction:row;align-items:center;color:var(--signal-ink);border:1px dashed var(--line)}
.ed-canvas{position:relative;flex:1;min-height:0}
#ed-svg{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;background:var(--ink)}
#ed-svg[data-tool="select"]{cursor:default}
#ed-svg.panning{cursor:grabbing}
#ed-svg text{font-family:var(--f-cond);pointer-events:none}
#ed-svg[data-tool="select"] .ee-text text{pointer-events:auto}
.ed-zoom{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;overflow:hidden}
.ed-zoom button{width:38px;height:36px;border:0;background:transparent;color:var(--text);font-size:1.1rem;cursor:pointer}
.ed-zoom button+button{border-top:1px solid var(--line)}
.ed-status{display:flex;justify-content:space-between;gap:16px;padding:8px 14px;border-top:1px solid var(--line-soft);font-size:.82rem;color:var(--muted);flex-shrink:0}
.ed-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eg-out{fill:var(--ink)}
.eg-floor{fill:var(--floor)}
.eg-minor{stroke:var(--floor-grid);stroke-width:1}
.eg-major{stroke:var(--line);stroke-width:1;opacity:.6}
.eg-outline{fill:none;stroke:var(--text);stroke-width:4;opacity:.55}
.eg-dim{fill:var(--muted);font-weight:600}
.er-tick{stroke:var(--muted);stroke-width:1}
.er-txt{fill:var(--muted);font-family:var(--f-cond);font-weight:500}
.ed-dim{fill:var(--muted);font-weight:600;paint-order:stroke;stroke:var(--floor);pointer-events:none}
.ed-dim.strong{fill:var(--signal-ink);font-weight:700}
.ed-cote{stroke:var(--signal-ink);stroke-width:1.3}
.ee{cursor:pointer}
#ed-svg:not([data-tool="select"]) .ee,#ed-svg:not([data-tool="select"]) .ep{pointer-events:none}
.es-rack{fill:var(--rack);stroke:var(--rack-top);stroke-width:1.2}
.es-bay{stroke:var(--rack-top);stroke-width:1}
.es-dock{stroke:#1d2130;stroke-width:1}
.es-bench{fill:var(--deck-2);stroke:var(--line);stroke-width:1.2}
.es-pallet{fill:transparent;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 3}
.es-lane{stroke:var(--signal);stroke-width:4;stroke-dasharray:14 9;opacity:.8}
.es-wall{stroke:var(--text);stroke-width:5;stroke-linecap:round;opacity:.7}
.es-hit{stroke:transparent;stroke-width:16}
.et-zone{fill:var(--text);font-weight:600;opacity:.7}
.et-rack{fill:var(--muted);font-weight:600}
.et-lv{fill:var(--text);font-weight:700;opacity:.6}
.et-small{fill:var(--muted);font-weight:600}
.et-free{fill:var(--text);font-weight:600}
.et-panel{fill:var(--text);font-weight:600;paint-order:stroke;stroke:var(--floor);stroke-width:3px}
.ee:hover .es-rack,.ee:hover .es-bench{stroke:var(--signal)}
.ep{cursor:move}
.ep-cov{fill:color-mix(in srgb,var(--signal) 10%,transparent);stroke:var(--signal);stroke-width:1;stroke-dasharray:5 4}
.ep-body{fill:var(--deck);stroke:var(--signal);stroke-width:2.5}
.ep-dot{fill:var(--signal)}
.ep.sel .ep-body{fill:var(--signal)}
.ep.sel .ep-dot{fill:#12172b}
.esel{fill:none;stroke:var(--signal);stroke-width:2;stroke-dasharray:6 4}
.eh{fill:#fff;stroke:var(--signal);stroke-width:2;cursor:nwse-resize}
.epv-rect{fill:color-mix(in srgb,var(--signal) 12%,transparent);stroke:var(--signal);stroke-width:2;stroke-dasharray:6 4}
.ed-inspector{overflow-y:auto;background:var(--deck);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:6px 0}
.is{padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.is:last-child{border-bottom:0}
.is h3{font-family:var(--f-display);font-weight:600;font-size:1rem;margin-bottom:12px}
.is .field{margin-bottom:10px}
.is .field label{font-size:.82rem}
.is .row2{gap:10px}
.is-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.is-panel{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.is-panel:last-child{border-bottom:0}
.is-panel.placing{background:color-mix(in srgb,var(--signal) 10%,transparent);border-radius:10px;padding:8px}
.ip-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--signal) 14%,transparent);color:var(--signal-ink);flex-shrink:0}
.ip-ico svg{width:18px;height:18px}
.ip-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.ip-txt b{font-size:.88rem}.ip-txt small{color:var(--muted);font-size:.76rem}
.ip-head{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.ip-head small{display:block}
.swatches{display:flex;gap:8px}
.swatches button{width:28px;height:28px;border-radius:50%;border:2px solid var(--deck);background:var(--c);box-shadow:0 0 0 1px var(--line);cursor:pointer}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--text)}
@media (max-width:1200px){.editor{grid-template-columns:84px minmax(0,1fr)}.ed-inspector{grid-column:1/-1;max-height:none}.editor{height:auto}.ed-stage{height:70vh}.ed-tool{width:84px}}
@media (max-width:700px){.editor{grid-template-columns:1fr}.ed-tools{flex-direction:row;overflow-x:auto}.ed-tool{min-width:76px;width:76px}}

/* ------------------------------------------------------------------ Utilisateurs et droits */
.uavatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-family:var(--f-display);font-weight:600;font-size:.86rem;background:var(--line-soft);color:var(--text)}
.role-chip{display:inline-flex;padding:3px 10px;border-radius:999px;font-weight:600;font-size:.82rem;white-space:nowrap}
.r-admin{background:color-mix(in srgb,var(--lost) 15%,transparent);color:var(--lost)}
.r-director{background:color-mix(in srgb,var(--transfer) 16%,transparent);color:var(--transfer)}
.r-manager{background:color-mix(in srgb,var(--present) 15%,transparent);color:var(--present)}
.r-receiver{background:color-mix(in srgb,var(--signal) 18%,transparent);color:var(--signal-ink)}
.row-danger td{background:color-mix(in srgb,var(--lost) 7%,transparent)!important}
.row-out td{transition:opacity .4s;opacity:0}
.perm-groups{display:flex;flex-direction:column;gap:14px}
.perm-group{border:1px solid var(--line-soft);border-radius:12px;padding:6px 12px 8px}
.perm-group legend{font-family:var(--f-cond);font-weight:600;font-size:.86rem;color:var(--muted);padding:0 6px}
.perm{display:flex;align-items:center;gap:12px;padding:7px 0;cursor:pointer;font-size:.92rem}
.perm+.perm{border-top:1px solid var(--line-soft)}
.perm input{position:absolute;opacity:0;width:1px;height:1px}
.perm .sw{width:36px;height:20px;border-radius:10px;background:var(--line);position:relative;flex-shrink:0;transition:background .2s}
.perm .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.perm input:checked+.sw{background:var(--present)}
.perm input:checked+.sw::after{transform:translateX(16px)}
.perm input:focus-visible+.sw{outline:2px solid var(--signal);outline-offset:2px}
.perm.changed span:last-child::after{content:"modifié";margin-left:8px;font-size:.72rem;font-weight:600;color:var(--signal-ink)}

/* ------------------------------------------------------------------ Connexion */
.login-page{display:block;min-height:100vh;background:var(--ink)}
.login{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(400px,.75fr);min-height:100vh}
.login-art{position:relative;overflow:hidden;background:var(--floor);border-right:1px solid var(--line-soft)}
.login-art svg{position:absolute;inset:0;width:100%;height:100%}
.login-art .caption{position:absolute;left:48px;bottom:44px;right:48px;max-width:540px}
.login-art h2{font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.04;letter-spacing:-.01em}
.login-art p{color:var(--muted);margin-top:12px;font-size:1.04rem;max-width:46ch}
.login-form{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(28px,5vw,72px);max-width:560px}
.login-form .brand{padding:0 0 44px}
.login-form h1{font-family:var(--f-display);font-weight:600;font-size:1.7rem;margin-bottom:6px}
.login-form .lead{color:var(--muted);margin-bottom:28px}
.login-error{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:10px;margin-bottom:18px;background:color-mix(in srgb,var(--lost) 13%,transparent);font-size:.93rem;animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.login-error svg{width:18px;height:18px;color:var(--lost);flex-shrink:0}
.login-error.ok{background:color-mix(in srgb,var(--present) 13%,transparent);animation:none}
.login-error.ok svg{color:var(--present)}
.login-version{margin-top:28px;color:var(--muted);font-size:.84rem}
.pw{position:relative}
.pw .input{padding-right:48px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);width:38px;height:38px;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.pw button svg{width:18px;height:18px}
.l-wave{fill:none;stroke:var(--signal);stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:0;animation:mWave 4.5s var(--ease) infinite}
.l-tag{fill:var(--present);animation:twinkle 3s ease-in-out infinite}

/* ------------------------------------------------------------------ Responsive */
@media (max-width:1240px){.layout-dash{grid-template-columns:1fr}}
@media (max-width:1000px){.layout-split{grid-template-columns:1fr}.login{grid-template-columns:1fr}.login-art{min-height:320px;border-right:0;border-bottom:1px solid var(--line-soft)}.login-art .caption{left:24px;right:24px;bottom:24px}.login-form{max-width:none}}
@media (max-width:900px){
  .sidebar{width:80px;padding:14px 0}
  .nav{gap:8px}
  .nav-link{width:58px;height:58px;border-radius:14px}
  .nav-link .lbl{display:none}
  .nav-link svg{width:24px;height:24px}
  .nav-count{min-width:20px;height:20px;font-size:.66rem;padding:0 5px;top:-5px;right:-5px}
  .main{margin-left:80px}
  .topbar{padding:12px 18px}.content{padding:20px 18px 40px}
  .clock,.crumb{display:none}
  .map-shell.mini{height:auto;aspect-ratio:1000/620}
  .drawer{width:100%}
}
@media (max-width:560px){
  .live .rate{display:none}
  .steps .step .lbl{display:none}
  .map-shell.full{height:auto;min-height:0;aspect-ratio:3/4}
  .topbar .page-title{display:none}
  .live{white-space:nowrap}
  .map-legend{display:none}
  .map-search{width:100%}
  .alert{grid-template-columns:36px minmax(0,1fr)}.alert .btn{grid-column:1/-1}
  .row2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .m-wave,.brand-mark .wave,.scanzone .ring,.l-wave,.sweep{display:none}
}