:root{
  --primary:#1E3A5F; --action:#2563EB; --action-dark:#1D4ED8;
  --success:#059669; --success-bg:#ECFDF5; --danger:#DC2626; --danger-bg:#FEF2F2;
  --warn:#92400E; --warn-bg:#FEF3C7;
  --bg:#F4F6F9; --surface:#FFFFFF; --fg:#0F172A; --muted:#64748B; --muted-2:#94A3B8;
  --border:#E2E8F0; --r:14px; --r-sm:10px;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.35);border-radius:8px}
.ic{flex-shrink:0}

/* space switcher */
.switcher{display:flex;justify-content:center;gap:0;padding:18px 16px 8px}
.seg{display:inline-flex;background:#E8EDF3;border-radius:12px;padding:4px}
.seg button{border:none;background:transparent;color:var(--muted);font-weight:600;font-size:14px;padding:9px 18px;border-radius:9px;transition:.15s;display:inline-flex;align-items:center;gap:8px}
.seg button[aria-pressed="true"]{background:#fff;color:var(--primary);box-shadow:var(--shadow)}
.stagelabel{text-align:center;color:var(--muted-2);font-size:12px;padding-bottom:10px}
.foot{text-align:center;color:var(--muted-2);font-size:12px;padding:0 20px 24px}

/* ===== layout à sidebar (admin + opticien) ===== */
.shell{max-width:1180px;margin:0 auto;display:flex;gap:0;padding:0 16px 16px;align-items:flex-start}
.side{width:230px;flex-shrink:0;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:14px;position:sticky;top:12px}
.side .org{display:flex;align-items:center;gap:10px;padding:6px 8px 14px;border-bottom:1px solid var(--border);margin-bottom:10px}
.side .org .logo{width:32px;height:32px;border-radius:9px;background:var(--primary);color:#fff;display:grid;place-items:center}
.side .org .nm{font-weight:700;font-size:14px;letter-spacing:-.2px}
.side .org .sub{font-size:11.5px;color:var(--muted)}
.navgroup{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted-2);font-weight:700;padding:12px 8px 4px}
.navitem{display:flex;align-items:center;gap:11px;width:100%;border:none;background:transparent;color:var(--muted);font-weight:600;font-size:14px;padding:10px 10px;border-radius:9px;text-align:left;transition:.13s}
.navitem:hover{background:#F1F5F9;color:var(--fg)}
.navitem[aria-current="true"]{background:#EFF4FB;color:var(--primary)}
.navitem .badge{margin-left:auto;background:#E2E8F0;color:#475569;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px}
.navitem[aria-current="true"] .badge{background:var(--action);color:#fff}
.main{flex:1;min-width:0;margin-left:18px}
@media(max-width:820px){.shell{flex-direction:column}.side{width:100%;position:static}.main{margin-left:0;margin-top:14px;width:100%}}

.pagehead{display:flex;align-items:flex-end;justify-content:space-between;margin:4px 2px 18px;gap:16px}
.pagehead h1{font-size:23px;margin:0;letter-spacing:-.4px}
.pagehead p{margin:3px 0 0;color:var(--muted);font-size:14px}
.who{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.who .av{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px}

/* cards / panels */
.card{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.card+.card{margin-top:16px}

/* stat cards */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:16px 18px}
.stat .lbl{font-size:12.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px}
.stat .lbl .ic{color:var(--action)}
.stat .val{font-size:30px;font-weight:700;letter-spacing:-1px;margin-top:6px}
.stat .delta{font-size:12px;font-weight:600;margin-top:2px}
.stat .delta.up{color:var(--success)}.stat .delta.down{color:var(--danger)}.stat .delta.flat{color:var(--muted-2)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.two{grid-template-columns:1fr}}
.card h3{margin:0 0 14px;font-size:15px;font-weight:700}

/* mini bar chart */
.bars{display:flex;flex-direction:column;gap:10px}
.barrow{display:grid;grid-template-columns:120px 1fr 44px;align-items:center;gap:10px;font-size:13px}
.barrow .nm{color:var(--fg);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bartrack{height:9px;background:#EEF2F7;border-radius:999px;overflow:hidden}
.barfill{height:100%;background:var(--action);border-radius:999px}
.barrow .vv{text-align:right;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.medal{font-size:14px}

/* tables */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.search{display:flex;align-items:center;gap:9px;border:1.5px solid var(--border);border-radius:10px;padding:0 12px;height:42px;background:#fff;flex:1;max-width:320px;color:var(--muted)}
.search input{border:none;outline:none;height:100%;width:100%;font-size:14px;background:transparent;color:var(--fg)}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:0 14px 10px;border-bottom:1.5px solid var(--border)}
.tbl td{padding:13px 14px;border-bottom:1px solid #EEF2F7;vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:#F8FAFC}
.tbl .mono{font-family:ui-monospace,Menlo,monospace;font-weight:600}
.tbl .strong{font-weight:600;color:var(--fg)}
.tbl .sub{color:var(--muted);font-size:12.5px}
.tblcount{color:var(--muted-2);font-size:12.5px;margin-top:12px}

/* badges / pills */
.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.pill.green{background:var(--success-bg);color:#065F46}
.pill.blue{background:#EFF6FF;color:#1D4ED8}
.pill.amber{background:var(--warn-bg);color:var(--warn)}
.pill.purple{background:#F3E8FF;color:#7E22CE}
.pill.gray{background:#F1F5F9;color:#475569}
.pill.red{background:var(--danger-bg);color:#991B1B}
.pill.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}

/* ===== espace opticien : flows comptoir ===== */
.head h1{font-size:24px;margin:0 0 4px;letter-spacing:-.4px}
.head p{margin:0 0 24px;color:var(--muted);font-size:15px}
.scanwrap{position:relative}
.scan{width:100%;height:84px;font-size:30px;font-weight:600;letter-spacing:4px;text-align:center;text-transform:uppercase;border:2px solid var(--border);border-radius:var(--r);background:#fff;color:var(--fg);padding:0 56px;transition:border-color .15s}
.scan::placeholder{color:var(--muted-2);letter-spacing:1px;font-weight:500;text-transform:none}
.scan:focus{border-color:var(--action)}
.scanwrap .lead{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--action);pointer-events:none}
.hint{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;color:var(--muted);font-size:13.5px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(5,150,105,.5)}70%{box-shadow:0 0 0 7px rgba(5,150,105,0)}100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.req{color:var(--danger)}
.control{width:100%;height:52px;padding:0 14px;font-size:16px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:#fff;color:var(--fg);transition:border-color .15s}
.control:focus{border-color:var(--action)}
select.control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;font-size:16px;font-weight:600;border:none;border-radius:var(--r);background:var(--action);color:#fff;transition:background .15s,transform .08s;width:100%}
.btn:hover{background:var(--action-dark)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.success{background:var(--success)}.btn.success:hover{background:#047857}
.btn.lg{min-height:64px;font-size:17px}
.reveal{animation:rise .28s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.owner{display:flex;align-items:center;gap:16px}
.owner .av{width:58px;height:58px;border-radius:16px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:700;flex-shrink:0}
.owner .meta .n{font-size:19px;font-weight:700;letter-spacing:-.3px}
.owner .meta .s{color:var(--muted);font-size:14px;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;background:#F1F5F9;color:#334155;font-size:13px;font-weight:600}
.chip .ic{color:var(--muted)}
.rgpd{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 14px;background:#F8FAFC;border:1px dashed var(--border);border-radius:var(--r-sm);color:var(--muted);font-size:13px}
.rgpd .ic{color:var(--primary)}
.banner{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-radius:var(--r);margin-top:24px}
.banner.ok{background:var(--success-bg);border:1.5px solid #A7F3D0}
.banner.err{background:var(--danger-bg);border:1.5px solid #FECACA}
.banner .ic-wrap{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.banner.ok .ic-wrap{background:var(--success);color:#fff}
.banner.err .ic-wrap{background:var(--danger);color:#fff}
.banner h3{margin:0 0 3px;font-size:16.5px}.banner.ok h3{color:#065F46}.banner.err h3{color:#991B1B}
.banner p{margin:0;font-size:14px;color:#334155}.banner.err p{color:#7F1D1D}
.code-reveal{text-align:center;padding:28px;border:2px dashed #BFDBFE;background:#EFF6FF;border-radius:var(--r);margin-top:8px}
.code-reveal .lbl{font-size:13px;font-weight:600;color:var(--action);text-transform:uppercase;letter-spacing:1px}
.code-reveal .val{font-size:42px;font-weight:700;letter-spacing:6px;margin:8px 0 4px;color:var(--primary);font-variant-numeric:tabular-nums}
.spin{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.row-actions{display:flex;gap:12px;margin-top:24px}
.muted-link{background:none;border:none;color:var(--muted);font-weight:600;font-size:14px;padding:10px;text-decoration:underline}
.seg-filter{display:inline-flex;background:#EEF2F7;border-radius:10px;padding:4px;margin-bottom:16px}
.seg-filter button{border:none;background:transparent;color:var(--muted);font-weight:600;font-size:13px;padding:8px 14px;border-radius:7px}
.seg-filter button[aria-pressed="true"]{background:#fff;color:var(--primary);box-shadow:var(--shadow)}

/* ===== espace client (phone) ===== */
.phone{max-width:412px;margin:8px auto 24px;background:var(--surface);border:1.5px solid var(--border);border-radius:28px;box-shadow:0 12px 40px rgba(15,23,42,.12);overflow:hidden}
.phone .pbar{height:38px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;letter-spacing:.3px}
.phone .pbody{padding:22px 20px 26px}
.ctabs{display:flex;gap:6px;margin:0 16px;background:#E8EDF3;border-radius:10px;padding:4px}
.ctabs button{flex:1;border:none;background:transparent;color:var(--muted);font-weight:600;font-size:12.5px;padding:8px 4px;border-radius:7px}
.ctabs button[aria-selected="true"]{background:#fff;color:var(--primary);box-shadow:var(--shadow)}
.hero-found{text-align:center;padding:8px 4px 0}
.hero-found .ic-big{width:64px;height:64px;border-radius:20px;background:var(--success-bg);color:var(--success);display:grid;place-items:center;margin:0 auto 14px}
.hero-found h2{font-size:22px;margin:0 0 4px;letter-spacing:-.4px}
.hero-found .pair{color:var(--muted);font-size:14px;margin-bottom:18px}
.where{text-align:left;border:1.5px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:14px}
.where .lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted-2);margin-bottom:8px}
.where .shop{font-weight:700;font-size:16px}
.where .addr{color:var(--muted);font-size:13.5px;margin-top:2px;line-height:1.5}
.pickup{text-align:center;border:2px dashed var(--success);background:var(--success-bg);border-radius:var(--r);padding:18px;margin-bottom:14px}
.pickup .lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--success)}
.pickup .val{font-size:34px;font-weight:700;letter-spacing:6px;color:#065F46;margin:6px 0 2px}
.pickup .sub{font-size:12.5px;color:#047857}
.glasscard{display:flex;align-items:center;gap:14px;border:1.5px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:12px}
.glasscard .gi{width:44px;height:44px;border-radius:12px;background:#F1F5F9;color:var(--primary);display:grid;place-items:center;flex-shrink:0}
.glasscard .gm{flex:1;min-width:0}
.glasscard .gm .t{font-weight:600;font-size:15px}
.glasscard .gm .st{font-size:12.5px;margin-top:4px}
.toggle{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:12px}
.sw{width:46px;height:28px;border-radius:999px;background:#CBD5E1;position:relative;transition:.2s;flex-shrink:0;border:none}
.sw[aria-checked="true"]{background:var(--success)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
.sw[aria-checked="true"]::after{left:21px}
.smallbtn{width:100%;min-height:46px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:#fff;font-weight:600;font-size:14px;color:var(--fg);margin-top:4px}
.smallbtn.warn{border-color:#FCA5A5;color:var(--danger)}
.login{max-width:380px;margin:10px auto 24px}
.login .card{padding:26px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}