/* NevSpot admin — "Hotspot Control" (Obsidian Signal), no-JS server-rendered. */
:root{
  --bg: #0a0d10;
  --bg-panel: #10151a;
  --bg-panel-raised: #141b21;
  --line: #202a31;
  --line-soft: #182127;
  --signal: #4de8c8;
  --signal-dim: #2a5f56;
  --signal-glow: rgba(77,232,200,.35);
  --amber: #e8b14d;
  --red: #e86a4d;
  --text: #e8edf0;
  --text-dim: #8b9aa3;
  --text-faint: #52626c;
  --radius-s: 3px;
  --radius-m: 6px;
  color-scheme: dark;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow-x:hidden; max-width:100%;}
html{ scroll-padding-top: env(safe-area-inset-top,0px); }
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body::before{
  content:""; position:fixed; inset:0 0 auto;
  height: env(safe-area-inset-top,0px); z-index: 50; background: var(--bg);
}
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
a{ color:inherit; }
.muted{ color: var(--text-faint); }

.grid-field{
  position: fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.35;
  mask-image: radial-gradient(ellipse 80% 60% at 30% 0%, black 10%, transparent 70%);
}

.shell{ position:relative; z-index:1; display:flex; min-height:100vh; max-width:100%; overflow-x:hidden; }

/* ===== Sidebar ===== */
.nav{
  width:248px; flex-shrink:0;
  background: var(--bg-panel);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  position:sticky; top: env(safe-area-inset-top,0px); height:100vh;
}
.nav-brand{
  display:flex; align-items:center; gap:10px;
  padding:22px 20px; border-bottom:1px solid var(--line);
}
.brand-mark{
  width:30px; height:30px; border-radius:var(--radius-s);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  overflow:hidden;
}
.brand-mark img{ width:30px; height:30px; object-fit:contain; display:block; }
.brand-name{ font-weight:600; font-size:15px; letter-spacing:.01em; }
.brand-sub{ font-size:10.5px; color: var(--text-faint); font-family:'IBM Plex Mono', monospace; letter-spacing:.04em; margin-top:1px; }

.nav-status{
  margin:14px 16px; padding:10px 12px;
  background: var(--bg-panel-raised); border:1px solid var(--line); border-radius:var(--radius-m);
  display:flex; align-items:center; gap:9px;
}
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background: var(--signal);
  animation: pulse 2.4s ease-out infinite; flex-shrink:0;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(77,232,200,.5); }
  70%{ box-shadow: 0 0 0 7px rgba(77,232,200,0); }
  100%{ box-shadow: 0 0 0 0 rgba(77,232,200,0); }
}
@media (prefers-reduced-motion: reduce){ .pulse-dot{ animation:none; } }
.nav-status-text{ font-size:12px; color:var(--text-dim); line-height:1.3; }
.nav-status-text b{ color:var(--text); font-weight:600; }

.nav-list{ flex:1; overflow-y:auto; padding:6px 10px; }
.nav-section-label{
  font-size:10px; text-transform:uppercase; letter-spacing:.09em; color: var(--text-faint);
  padding:16px 10px 6px; font-family:'IBM Plex Mono', monospace;
}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--radius-m);
  color: var(--text-dim); text-decoration:none; font-size:13.5px; cursor:pointer; position:relative;
  transition: background .12s, color .12s; border:none; background:none; width:100%; text-align:left;
  font-family:'Space Grotesk', sans-serif;
}
.nav-item svg{ width:16px; height:16px; flex-shrink:0; opacity:.85; }
.nav-item:hover{ background: var(--bg-panel-raised); color: var(--text); }
.nav-item.active{ background: var(--bg-panel-raised); color: var(--text); }
.nav-item.active::before{
  content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:2px;
  background: var(--signal); border-radius:2px;
}
.nav-item .count{
  margin-left:auto; font-family:'IBM Plex Mono', monospace; font-size:10.5px; color: var(--text-faint);
  background: var(--bg); border:1px solid var(--line); padding:1px 6px; border-radius:20px;
}

.nav-footer{ padding:14px 16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.avatar{
  width:30px; height:30px; border-radius:50%; background: var(--bg-panel-raised); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600;
  font-family:'IBM Plex Mono', monospace; color: var(--signal); flex-shrink:0;
}
.nav-footer-name{ font-size:13px; font-weight:500; }
.nav-footer-role{ font-size:11px; color:var(--text-faint); font-family:'IBM Plex Mono', monospace; }
.logout-btn{
  margin-left:auto; background:none; border:1px solid var(--line); color: var(--text-faint);
  width:28px; height:28px; border-radius:var(--radius-s); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: border-color .12s, color .12s;
}
.logout-btn:hover{ border-color: var(--red); color: var(--red); }
.logout-btn svg{ width:14px; height:14px; }

/* ===== Mobile nav (no-JS: checkbox drawer) ===== */
.nav-toggle{ position:absolute; opacity:0; pointer-events:none; }
.mobile-topbar{ display:none; }
.nav-scrim{ display:none; }

/* ===== Main ===== */
.main{ flex:1; min-width:0; max-width:100%; display:flex; flex-direction:column; overflow-x:hidden; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; border-bottom:1px solid var(--line); gap:20px; flex-wrap:wrap;
}
.topbar-title{ font-size:clamp(18px, 1.4vw + 14px, 22px); font-weight:600; letter-spacing:-.01em; overflow-wrap:anywhere; }
.topbar-sub{ font-size:12.5px; color: var(--text-faint); margin-top:3px; font-family:'IBM Plex Mono', monospace; overflow-wrap:anywhere; }
.topbar-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.mobile-title{ min-width:0; flex:1; }
.mobile-sub{ font-size:11px; color:var(--text-faint); font-family:'IBM Plex Mono', monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.btn{
  font-family:'Space Grotesk', sans-serif; font-size:13px; font-weight:500; padding:9px 16px;
  border-radius:var(--radius-m); border:1px solid var(--line); background: var(--bg-panel-raised); color: var(--text);
  cursor:pointer; transition: border-color .12s, background .12s, transform .08s;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; text-decoration:none;
}
.btn:hover{ border-color:#2d3a42; background:#171f25; }
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--signal); border-color: var(--signal); color: #06201a; font-weight:600; }
.btn-primary:hover{ background:#5ff0d4; border-color:#5ff0d4; }
.btn-danger{ color: var(--red); }
.btn-danger:hover{ border-color: var(--red); }
.btn-sm{ padding:6px 11px; font-size:12px; }
.btn svg{ width:14px; height:14px; }

.content{ padding:28px 32px 60px; flex:1; }

/* flash (server-side, replaces JS toasts) */
.flash{ padding:12px 16px; border-radius:var(--radius-m); margin-bottom:16px; font-size:13px; border:1px solid var(--line); }
.flash.ok{ background: rgba(77,232,200,.08); border-color: rgba(77,232,200,.3); color: var(--signal); }
.flash.err{ background: rgba(232,106,77,.08); border-color: rgba(232,106,77,.3); color: var(--red); }

/* ===== Metric cards ===== */
.metrics{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1px; background: var(--line);
  border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; margin-bottom:24px;
}
.metrics.cols-3{ grid-template-columns: repeat(3,1fr); }
.metrics.cols-2{ grid-template-columns: repeat(2,1fr); }
.metric{ background: var(--bg-panel); padding:20px 22px; position:relative; }
.metric-label{
  font-size:11px; color: var(--text-faint); font-family:'IBM Plex Mono', monospace; letter-spacing:.03em;
  display:flex; align-items:center; gap:6px; margin-bottom:12px;
}
.metric-label .dot{ width:5px; height:5px; border-radius:50%; background: var(--signal); flex-shrink:0; }
.metric-value{ font-size:clamp(22px, 2.4vw + 14px, 28px); font-weight:600; letter-spacing:-.01em; display:flex; align-items:baseline; gap:6px; overflow-wrap:anywhere; min-width:0; }
.metric-value .unit{ font-size:14px; color: var(--text-faint); font-weight:400; }
.metric-delta{ margin-top:8px; font-size:11.5px; font-family:'IBM Plex Mono', monospace; color: var(--signal); }
.metric-delta.flat{ color: var(--text-faint); }
.metric-delta.warn{ color: var(--amber); }

/* (Les paliers tablette sont gérés dans le bloc Responsive ci-dessous.) */

/* ===== Panels ===== */
.panel{ background: var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-m); margin-bottom:20px; overflow:hidden; }
.panel-head{
  display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
  border-bottom:1px solid var(--line); gap:12px; flex-wrap:wrap;
}
.panel-title{ font-size:14.5px; font-weight:600; }
.panel-head-meta{ font-size:11.5px; color: var(--text-faint); font-family:'IBM Plex Mono', monospace; }
.panel-body{ padding:20px; }
.panel-head-actions{ display:flex; gap:8px; align-items:center; }

table{ width:100%; border-collapse:collapse; }
thead th{
  text-align:left; font-size:10.5px; font-weight:500; color: var(--text-faint); text-transform:uppercase;
  letter-spacing:.07em; font-family:'IBM Plex Mono', monospace; padding:10px 20px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{ padding:13px 20px; font-size:13px; border-bottom:1px solid var(--line-soft); color: var(--text); white-space:nowrap; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr{ transition: background .1s; }
tbody tr:hover{ background: var(--bg-panel-raised); }
.mono-cell{ font-family:'IBM Plex Mono', monospace; color: var(--text-dim); font-size:12.5px; }
.table-scroll{ overflow-x:auto; }
.empty-row td{ color: var(--text-faint); text-align:center; padding:28px; font-size:12.5px; white-space:normal; }
.inline-row{ display:inline-flex; gap:8px; align-items:center; margin-right:8px; }
.inline-row input[type="text"]{
  background: var(--bg); border:1px solid var(--line); color: var(--text);
  padding:6px 10px; border-radius:var(--radius-m); font-size:12px; font-family:'Space Grotesk', sans-serif;
  max-width: 200px;
}

.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-family:'IBM Plex Mono', monospace;
  padding:3px 8px; border-radius:20px; background: rgba(77,232,200,.1); color: var(--signal); border:1px solid rgba(77,232,200,.25);
}
.badge svg{ width:10px; height:10px; }
.badge.b-neutral{ background: rgba(139,154,163,.08); color: var(--text-dim); border-color: var(--line); }
.badge.b-amber{ background: rgba(232,177,77,.1); color: var(--amber); border-color: rgba(232,177,77,.25); }
.badge.b-red{ background: rgba(232,106,77,.1); color: var(--red); border-color: rgba(232,106,77,.25); }
.badge.b-signal{ background: rgba(77,232,200,.1); color: var(--signal); border-color: rgba(77,232,200,.25); }

.empty-state{ padding:56px 24px; text-align:center; }
.empty-state svg{ width:34px; height:34px; color: var(--text-faint); margin-bottom:14px; }
.empty-state-title{ font-size:14px; font-weight:600; margin-bottom:4px; }
.empty-state-sub{ font-size:12.5px; color: var(--text-faint); max-width:320px; margin:0 auto; }

/* tabs (server links, replaces JS tabs) */
.tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tabs a{
  font-size:12.5px; padding:7px 14px; border-radius:20px; text-decoration:none;
  border:1px solid var(--line); background: var(--bg-panel); color: var(--text-dim);
}
.tabs a.on{ border-color: var(--signal); color: var(--signal); background: rgba(77,232,200,.08); }

/* forms */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12px; color: var(--text-dim); margin-bottom:6px; font-weight:500; }
.field input, .field select, .field textarea{
  width:100%; background: var(--bg); border:1px solid var(--line); color: var(--text);
  padding:9px 12px; border-radius:var(--radius-m); font-size:13px; font-family:'Space Grotesk', sans-serif;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--signal); outline-offset:1px; border-color: var(--signal); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }
.check-row{ display:flex; align-items:center; gap:9px; font-size:13px; color: var(--text-dim); margin-bottom:16px; }
.check-row input{ width:16px; height:16px; accent-color: var(--signal); }

.toggle{ position:relative; display:inline-block; width:38px; height:21px; flex-shrink:0; }
.toggle input{ opacity:0; width:0; height:0; }
.toggle-track{
  position:absolute; inset:0; background: var(--line); border-radius:20px; cursor:pointer; transition:.15s;
}
.toggle-track::before{
  content:""; position:absolute; width:15px; height:15px; left:3px; top:3px; background: var(--text-dim);
  border-radius:50%; transition:.15s;
}
.toggle input:checked + .toggle-track{ background: var(--signal-dim); }
.toggle input:checked + .toggle-track::before{ transform:translateX(17px); background: var(--signal); }
.toggle input:focus-visible + .toggle-track{ outline:2px solid var(--signal); outline-offset:2px; }

.row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.settings-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 20px; border-bottom:1px solid var(--line-soft);
}
.settings-row:last-child{ border-bottom:none; }
.settings-row-label{ font-size:13.5px; font-weight:500; }
.settings-row-sub{ font-size:12px; color: var(--text-faint); margin-top:2px; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-size:12px; font-family:'IBM Plex Mono', monospace; padding:6px 12px; border-radius:20px;
  border:1px solid var(--line); background: var(--bg-panel-raised); color: var(--text-dim); cursor:pointer;
}
.chip.active{ border-color: var(--signal); color: var(--signal); background: rgba(77,232,200,.08); }

.page-grid-2{ display:grid; grid-template-columns: 1.3fr .8fr; gap:20px; align-items:start; }
@media (max-width: 980px){ .page-grid-2{ grid-template-columns:1fr; } }

.stat-list{ list-style:none; }
.stat-list li{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line-soft); font-size:13px; }
.stat-list li:last-child{ border-bottom:none; }
.stat-list .k{ color: var(--text-dim); }
.stat-list .v{ font-family:'IBM Plex Mono', monospace; font-weight:600; }

.receipt-mono{
  background: var(--bg); border:1px dashed var(--line); border-radius:var(--radius-m);
  padding:18px; font-family:'IBM Plex Mono', monospace; font-size:12px; line-height:1.7; color: var(--text-dim);
}
.receipt-mono .line{ display:flex; justify-content:space-between; }
.receipt-mono .divider{ border-top:1px dashed var(--line); margin:8px 0; }
.receipt-mono .total{ color: var(--text); font-weight:600; }

/* bar viz for reports (server-rendered heights) */
.bars{ display:flex; align-items:flex-end; gap:6px; height:140px; padding:10px 4px 0; }
.bar{ flex:1; background: linear-gradient(180deg, var(--signal), var(--signal-dim)); border-radius:3px 3px 0 0; min-width:4px; opacity:.85; }
.bars-labels{ display:flex; gap:6px; padding:0 4px; margin-top:8px; }
.bars-labels span{ flex:1; text-align:center; font-size:10px; color:var(--text-faint); font-family:'IBM Plex Mono', monospace; }

/* print documents (standalone pages) */
.print-doc{ max-width: 720px; margin: 32px auto; padding: 26px; background: #fff; color: #101014; border-radius: 6px; }
.print-doc h1{ font-size: 1.3rem; margin-bottom: 6px; }
.print-doc p{ font-size: .9rem; color: #333; }
.print-actions{ margin-top: 22px; display: flex; gap: 10px; }
.print-actions .btn{ border-color: #101014; color: #101014; background: #fff; }
.code-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.code-box{ border: 1.5px solid #101014; border-radius: 10px; padding: 10px 14px; text-align: center; }
.code-box .code{ font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 1.15rem; letter-spacing: 0.06em; font-weight: 700; }
.receipt-table{ width: 100%; border-collapse: collapse; margin: 14px 0; }
.receipt-table th, .receipt-table td{ border-bottom: 1px solid #cfcfcf; padding: 6px 4px; text-align: left; font-size: 0.9rem; color: #101014; }
.receipt-table .num{ text-align: right; }
@media print{
  body{ background: #fff; }
  .grid-field, .shell{ display: none; }
  .print-doc{ margin: 0; box-shadow: none; max-width: none; }
  .print-actions{ display: none; }
}

/* login */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; z-index:1; }
.login-card{ width:100%; max-width:380px; background: var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius-m); padding:32px 28px; }
.login-logo{ display:block; width:220px; max-width:100%; height:auto; margin-bottom:16px; }
.login-title{ font-size:20px; font-weight:600; margin-bottom:4px; }
.login-sub{ font-size:12.5px; color: var(--text-faint); margin-bottom:24px; font-family:'IBM Plex Mono', monospace; }

/* inline filter/row forms */
.form-inline{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.form-inline .field{ margin-bottom:0; min-width:170px; }
.back-link{ display:inline-block; margin-bottom:16px; font-size:13px; color:var(--text-dim); text-decoration:none; }
.back-link:hover{ color:var(--signal); }
input:disabled, select:disabled{ opacity:.45; cursor:not-allowed; }
.pager{ display:flex; gap:10px; align-items:center; margin-top:4px; margin-bottom:20px; }
.qty-input{ width:70px; background:var(--bg); border:1px solid var(--line); color:var(--text); padding:6px 8px; border-radius:var(--radius-m); font-size:13px; }
.metric-value--sm{ font-size:19px; word-break:break-all; }
.mb{ margin-bottom:14px; }
.mt{ margin-top:14px; }
.panel-ghost{ border-style:dashed; }
.btn-block{ width:100%; justify-content:center; }
.self-end{ align-self:end; }

/* ===== Responsive : ultra-mobile first, 100 % sans JS =====
   Paliers : ≤1100 tablette paysage · ≤760 mobile · ≤480 petit mobile ·
   ≤360 très petit · paysage bas (clavier ouvert / landscape). */
@media (max-width: 1100px){
  .content{ padding:24px 22px 50px; }
  .metrics{ grid-template-columns: repeat(2, 1fr); }
  .metrics.cols-3{ grid-template-columns: repeat(2, 1fr); }
  .topbar{ padding:18px 22px; }
}
@media (max-width: 760px){
  .shell{ flex-direction:column; }
  .main{ width:100%; }
  .nav{
    position:fixed; left:0; top:0; bottom:0; z-index:40; transform:translateX(-100%);
    transition: transform .2s ease; padding-top: env(safe-area-inset-top,0px);
    padding-bottom: env(safe-area-inset-bottom,0px);
    width:min(84vw, 300px);
  }
  #navToggle:checked ~ .shell .nav{ transform:translateX(0); }
  #navToggle:focus-visible ~ .shell .menu-btn{ outline:2px solid var(--signal); outline-offset:2px; }
  .nav-scrim{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:35; cursor:pointer;
  }
  #navToggle:checked ~ .shell .nav-scrim{ display:block; }
  .nav-list{ -webkit-overflow-scrolling:touch; }
  .nav-item{ min-height:44px; font-size:14px; }
  .mobile-topbar{
    display:flex; align-items:center; gap:12px; padding:12px 14px; width:100%;
    padding-top:calc(12px + env(safe-area-inset-top,0px));
    border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:20;
  }
  .mobile-topbar .brand-name{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .menu-btn{
    background:var(--bg-panel-raised); border:1px solid var(--line); color:var(--text);
    width:44px; height:44px; border-radius:var(--radius-m); display:flex; align-items:center; justify-content:center; flex-shrink:0;
    cursor:pointer;
  }
  .menu-btn svg{ width:18px; height:18px; }
  .topbar{ display:none; }
  .content{ padding:16px 14px calc(40px + env(safe-area-inset-bottom,0px)); }
  .field-row{ grid-template-columns:1fr; }
  .metric{ padding:16px; min-width:0; }
  /* Les tableaux passent en lecture fluide : plus de scroll forcé. */
  table{ min-width:0; }
  thead th{ padding:9px 12px; font-size:10px; white-space:normal; }
  tbody td{ padding:11px 12px; font-size:12.5px; white-space:normal; overflow-wrap:anywhere; }
  .mono-cell{ font-size:12px; word-break:break-all; }
  /* Indice visuel de scroll horizontal (ombre quand ça déborde). */
  .table-scroll{ -webkit-overflow-scrolling:touch; scrollbar-width:thin; background-image:linear-gradient(to right, var(--bg-panel) 30%, transparent), linear-gradient(to right, rgba(0,0,0,.45), transparent); background-position:left center, right center; background-size:40px 100%, 14px 100%; background-repeat:no-repeat; background-attachment:local, scroll; }
  .panel-head{ padding:14px 16px; }
  .panel-body{ padding:16px; }
  .panel-title{ font-size:13.5px; }
  /* Cibles tactiles + anti-zoom iOS (texte ≥ 16px dans les champs). */
  .btn{ min-height:44px; padding:10px 16px; }
  .btn-sm{ min-height:40px; }
  .tabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .tabs a{ flex-shrink:0; min-height:40px; display:inline-flex; align-items:center; }
  .field input, .field select, .field textarea{ font-size:16px; min-height:44px; }
  .inline-row input[type="text"]{ max-width:none; width:100%; font-size:16px; min-height:44px; }
  .qty-input{ width:76px; min-height:44px; font-size:16px; }
  select.field, .field select{ max-width:100%; }
  .form-inline{ flex-direction:column; align-items:stretch; }
  .form-inline .field{ min-width:0; width:100%; }
  .form-inline .btn{ width:100%; justify-content:center; }
  .chip{ min-height:40px; display:inline-flex; align-items:center; }
  .badge{ max-width:100%; overflow-wrap:anywhere; }
  /* Impressions : une colonne lisible, pas de coupure. */
  .code-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
  .bars{ height:120px; overflow-x:auto; }
  .receipt-mono{ overflow-wrap:anywhere; word-break:break-word; }
  .receipt-mono .line{ gap:10px; }
  .login-wrap{ padding:16px; }
  .flash{ overflow-wrap:anywhere; }
}

@media (max-width: 480px){
  .mobile-topbar{ padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top,0px)); gap:10px; }
  .content{ padding:14px 10px calc(32px + env(safe-area-inset-bottom,0px)); }
  .metrics{ grid-template-columns: repeat(2, 1fr) !important; gap:1px; }
  .metric{ padding:12px 14px; }
  .metric-value{ font-size:clamp(19px, 6vw, 24px); white-space:nowrap; }
  .metric-label{ font-size:10px; }
  .btn{ padding:10px 13px; font-size:13px; width:100%; justify-content:center; }
  .panel-head{ flex-direction:column; align-items:stretch; gap:10px; }
  .panel-head-actions{ width:100%; flex-direction:column; align-items:stretch; }
  .panel-head-actions .btn{ width:100%; justify-content:center; }
  .panel-body{ padding:14px 12px; }
  thead th{ padding:8px 10px; }
  tbody td{ padding:10px; }
  .bars{ height:110px; }
  .bars-labels span{ font-size:9px; }
  .row-between{ flex-direction:column; align-items:stretch; }
  .settings-row{ flex-direction:column; align-items:stretch; gap:10px; }
  .login-card{ padding:24px 20px; }
  .pager{ flex-wrap:wrap; }
  .stat-list li{ flex-direction:column; gap:2px; }
}

@media (max-width: 360px){
  .metrics{ grid-template-columns: 1fr !important; }
  .brand-name{ font-size:13px; }
  .topbar-title{ font-size:19px; }
  .code-grid{ grid-template-columns: 1fr; }
}

/* Paysage bas : téléphone couché ou clavier ouvert — compacter verticalement. */
@media (max-height: 500px) and (orientation: landscape){
  .content{ padding-top:12px; }
  .metric{ padding:12px 16px; }
  .login-wrap{ padding:12px; align-items:flex-start; }
  .login-card{ padding:20px; }
  .mobile-topbar{ padding:8px 12px; }
}

/* respect reduced motion globally */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .nav-item:focus-visible, .chip:focus-visible{
  outline:2px solid var(--signal); outline-offset:2px; border-radius:var(--radius-s);
}