/* BoutiquePro — styles. Aucune ressource externe : tout fonctionne hors-ligne. */
:root {
  --bg: #f4f7fb; --surface: #ffffff; --ink: #141c2b; --muted: #5c687c; --line: #e6ebf2;
  --brand: #1763b8; --brand-hover: #0f4f97; --on-brand: #ffffff; --brand-soft: #e7f0fb;
  --accent: #e8a317; --danger: #b93a2d; --danger-soft: #fbe9e6; --ok: #1b7f55; --ok-soft: #e0f3e8;
  --warn: #8a5a00; --warn-soft: #fdf1d3; --side-bg: #0f58a8; --side-ink: #dbe8f8;
  --radius: 16px; --shadow: 0 1px 2px rgba(14, 26, 41, .06), 0 6px 18px rgba(14, 26, 41, .06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c111b; --surface: #151c29; --ink: #e6ecf6; --muted: #91a0b8; --line: #243047;
    --brand: #5b95ff; --brand-hover: #7aaaff; --on-brand: #06142e; --brand-soft: #172a4d;
    --danger: #ef7a6c; --danger-soft: #3a1f1c; --ok: #5fd39b; --ok-soft: #14352a; --warn: #f0c35a; --warn-soft: #3a2e12;
    --side-bg: #0b1d3d; --side-ink: #b4c6e4; --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 20px; } h3 { font-size: 16px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ----- Boutons & champs ----- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600; transition: background .12s, border-color .12s; }
.btn:hover { border-color: var(--brand); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-hover); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.btn.big { min-height: 52px; font-size: 17px; width: 100%; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; color: var(--muted); }
.icon-btn:hover { background: var(--brand-soft); color: var(--brand); }
input, select, textarea { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .icon-btn:focus-visible, .pcard:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
input[type=checkbox] { width: 18px; min-height: 18px; height: 18px; accent-color: var(--brand); }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field .lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.field .hint { font-size: 12px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; cursor: pointer; }
.check input { width: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); } .small { font-size: 13px; } .right { text-align: right; } .nowrap { white-space: nowrap; }

/* ----- Cartes, badges ----- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px; }
.card > h3 { margin-bottom: 12px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--brand-soft); color: var(--brand); }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.bad { background: var(--danger-soft); color: var(--danger); }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.kpi .k-l { font-size: 13px; color: var(--muted); font-weight: 600; }
.kpi .k-v { font-size: 22px; font-weight: 800; margin-top: 2px; letter-spacing: -.01em; }
.kpi .k-s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi.pos .k-v { color: var(--ok); } .kpi.neg .k-v { color: var(--danger); }

/* ----- Tableaux ----- */
.table-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr[onclick], .tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr:hover { background: var(--brand-soft); }
.tbl .num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.low td { background: var(--warn-soft); } tr.out td { background: var(--danger-soft); } tr.refunded td { color: var(--muted); text-decoration: line-through; }

/* ----- Mise en page ----- */
.app { display: grid; grid-template-columns: 228px 1fr; min-height: 100vh; }
.side { background: var(--side-bg); color: var(--side-ink); display: flex; flex-direction: column; padding: 16px 12px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: #fff; font-weight: 800; font-size: 17px; }
.brand .logo { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: #2b1d00; display: grid; place-items: center; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--side-ink); text-decoration: none; font-weight: 600; }
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a.on { background: rgba(255, 255, 255, .14); color: #fff; }
.side .foot { margin-top: auto; font-size: 12px; opacity: .7; padding: 8px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.top h1 { font-size: 18px; margin-right: auto; }
.top select { width: auto; min-height: 36px; max-width: 200px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--ok-soft); color: var(--ok); }
.pill.off { background: var(--warn-soft); color: var(--warn); }
.me { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.view { padding: 20px; max-width: 1280px; width: 100%; }
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tab { border: 0; background: none; padding: 10px 14px; font-weight: 700; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.tab.on { color: var(--brand); border-color: var(--brand); }
.period { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.period select, .period input { width: auto; }
.custom-range { display: inline-flex; gap: 6px; align-items: center; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar input[type=search] { max-width: 280px; }

/* ----- Caisse ----- */
.pos-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.pos-wrap > * { min-width: 0; }
.pos-left .toolbar { position: sticky; top: 61px; background: var(--bg); padding: 4px 0 8px; z-index: 5; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; }
.chip { border: 1px solid var(--line); background: var(--surface); padding: 6px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; white-space: nowrap; }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pcard { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; min-height: 96px; box-shadow: var(--shadow); }
.pcard:hover { border-color: var(--brand); }
.pcard:active { transform: scale(.98); }
.pcard .pname { font-weight: 700; line-height: 1.25; }
.pcard .pprice { margin-top: auto; font-weight: 800; color: var(--brand); }
.pcard .pstock { font-size: 12px; color: var(--muted); }
.pcard .pstock.low { color: var(--warn); font-weight: 700; } .pcard .pstock.out { color: var(--danger); font-weight: 700; }
.cart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; top: 76px; display: flex; flex-direction: column; max-height: calc(100vh - 96px); }
.cart-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.cart-lines { overflow-y: auto; padding: 4px 14px; min-height: 80px; }
.cline { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.cline:last-child { border-bottom: 0; }
.cline .n { font-weight: 700; } .cline .t { font-weight: 800; text-align: right; }
.qty { display: inline-flex; align-items: center; gap: 4px; }
.qty button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; display: grid; place-items: center; }
.qty input { width: 52px; min-height: 30px; padding: 2px 4px; text-align: center; }
.cart-foot { padding: 12px 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.cart-close { display: none; }
.sum { display: flex; justify-content: space-between; } .sum.total { font-size: 22px; font-weight: 800; }
.cart-fab { display: none; }
.pay-grid { display: grid; gap: 8px; }
.pay-row { display: grid; grid-template-columns: 1fr 140px auto; gap: 8px; align-items: center; }
.pay-sum { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--brand-soft); display: grid; gap: 4px; }
.pay-sum .big { font-size: 20px; font-weight: 800; }
.pay-sum .bad { color: var(--danger); font-weight: 700; } .pay-sum .good { color: var(--ok); font-weight: 700; }

/* ----- Modales ----- */
.modal-layer { position: fixed; inset: 0; background: rgba(8, 13, 20, .55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100; }
.modal { background: var(--surface); border-radius: 16px; width: min(480px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.modal.wide { width: min(760px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; }
.modal-body { padding: 8px 16px 12px; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
#toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; align-items: center; pointer-events: none; }
.toast { background: #171c23; color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); font-weight: 600; transition: opacity .3s; max-width: 90vw; }
.toast.error { background: var(--danger); } .toast.ok { background: var(--ok); color: #fff; }

/* ----- Ticket ----- */
.receipt { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; max-width: 340px; margin: 0 auto; padding: 8px; position: relative; }
.receipt hr { border: 0; border-top: 1px dashed var(--muted); margin: 8px 0; }
.r-head { text-align: center; } .r-head strong { font-size: 16px; }
.r-meta { margin-top: 8px; color: var(--muted); }
.r-row { display: flex; justify-content: space-between; gap: 8px; } .r-row.big { font-size: 15px; font-weight: 800; }
.r-item { margin-bottom: 4px; } .r-foot { text-align: center; margin-top: 12px; }
.r-stamp { text-align: center; color: var(--danger); font-weight: 800; border: 2px solid var(--danger); padding: 4px; margin-top: 8px; transform: rotate(-4deg); }

/* ----- Graphique ----- */
.chart svg { width: 100%; height: auto; display: block; }
.chart .bar { fill: var(--brand); } .chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 11px; }
.hbar { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 14px; }
.hbar .track { height: 10px; background: var(--brand-soft); border-radius: 999px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--brand); border-radius: 999px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ----- Connexion & installation ----- */
.center-screen { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(160deg, var(--side-bg), #123563 60%, var(--bg) 60%); }
.auth { width: min(440px, 100%); background: var(--surface); border-radius: 18px; padding: 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.auth h2 { margin-bottom: 4px; } .auth .sub { color: var(--muted); margin-bottom: 18px; }
.users { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 8px; }
.ucard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; font-weight: 700; }
.ucard:hover { border-color: var(--brand); background: var(--brand-soft); }
.avatar { --h: 168; width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--h) 55% 42%); color: #fff; font-weight: 800; font-size: 17px; letter-spacing: .02em; }
.avatar[style*="width: 3"], .avatar[style*="width: 2"] { font-size: 12px; }
.pin { text-align: center; font-size: 26px; letter-spacing: .5em; }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.err { color: var(--danger); font-weight: 700; min-height: 22px; margin: 4px 0; }

/* ----- Mobile ----- */
/* Caisse sur tablette en portrait et téléphone : le panier devient un tiroir qui monte du bas */
@media (max-width: 900px) {
  .pos-wrap { grid-template-columns: minmax(0, 1fr); padding-bottom: 76px; }
  .cart { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 86vh; border-radius: 18px 18px 0 0; z-index: 60; transform: translateY(110%); transition: transform .22s; }
  .pos-wrap.cart-open .cart { transform: none; }
  .cart-fab { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; justify-content: space-between; align-items: center; background: var(--brand); color: var(--on-brand); border: 0; border-radius: 14px; padding: 14px 18px; font-weight: 800; font-size: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); cursor: pointer; }
  .cart-close { display: inline-flex; }
  .pos-wrap.cart-open .cart-fab { display: none; }
  .pos-wrap.cart-open .cart { bottom: 0; z-index: 70; }
}

/* ===== Animations & bonne humeur ===== */
:root { --ease-spring: cubic-bezier(.2, .9, .3, 1.3); --ease-out: cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.86) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(18px); background: var(--brand-soft); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(32px, -26px) scale(1.12); } }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes sheen { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(380%) skewX(-20deg); } }
@keyframes blink { 50% { opacity: .5; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  30% { transform: translate(var(--dx), var(--up)) rotate(calc(var(--r) * .4)); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.3), var(--down)) rotate(var(--r)); opacity: 0; }
}

/* Entrée des écrans : fondus joués en JavaScript (UI.motion), voir app.js */
.kpi { transition: transform .2s var(--ease-spring), box-shadow .2s; }
.kpi:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(14, 26, 41, .12); }

/* Boutons */
.btn { transition: transform .15s var(--ease-spring), box-shadow .15s, background .15s, border-color .15s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(13, 48, 94, .32); }
.btn.big.primary { position: relative; overflow: hidden; }
.btn.big.primary:not(:disabled)::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); animation: sheen 3.4s ease-in-out 1s infinite; pointer-events: none; }
.icon-btn { transition: transform .18s var(--ease-spring), background .15s, color .15s; }
.icon-btn:hover { transform: rotate(8deg) scale(1.1); }
.tbl tbody tr { transition: background .15s; }
.badge { transition: transform .15s var(--ease-spring); }

/* Navigation */
.nav a { position: relative; transition: background .15s, color .15s, transform .18s var(--ease-spring); }
.nav a svg { transition: transform .25s var(--ease-spring); }
.nav a:hover svg { transform: rotate(-10deg) scale(1.2); }
.nav a.on::before { content: ''; position: absolute; left: -12px; top: 22%; bottom: 22%; width: 4px; border-radius: 4px; background: var(--accent); animation: grow .35s var(--ease-spring); }
.brand .logo { animation: float 3.6s ease-in-out infinite; }
@media (hover: hover) { .nav a:hover { transform: translateX(3px); } }

/* Caisse : cartes colorées par catégorie */
.pcard { --h: 214; background: linear-gradient(180deg, hsl(var(--h) 90% 95%) 0%, var(--surface) 72%); border-top: 4px solid hsl(var(--h) 68% 50%); transition: transform .18s var(--ease-spring), box-shadow .18s, border-color .18s; }
.pcard:hover { transform: translateY(-3px) rotate(-.4deg); border-color: hsl(var(--h) 68% 50%); box-shadow: 0 10px 22px hsl(var(--h) 60% 38% / .25); }
.pcard:active { transform: scale(.95); }
.pcard .pprice { color: hsl(var(--h) 70% 28%); }
@media (prefers-color-scheme: dark) {
  .pcard { background: linear-gradient(180deg, hsl(var(--h) 38% 21%) 0%, var(--surface) 72%); }
  .pcard .pprice { color: hsl(var(--h) 65% 68%); }
}
.pcard .pstock.out { animation: blink 1.8s ease-in-out infinite; }
.bump { animation: bump .35s var(--ease-spring); }
.chip { transition: transform .15s var(--ease-spring), background .15s, border-color .15s; }
.chip .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.chip:hover { transform: translateY(-2px); }
.chip.on { animation: bump .32s var(--ease-spring); }
.cline.new { animation: slide-in .35s var(--ease-out); }
.bob { display: inline-block; color: var(--brand); opacity: .75; animation: float 2.6s ease-in-out infinite; }
.qty button { transition: transform .12s var(--ease-spring), background .12s; }
.qty button:hover { background: var(--brand-soft); }
.qty button:active { transform: scale(.85); }

/* Fenêtres et notifications (ouverture / fermeture animées en JavaScript, voir UI.motion) */
@media (max-width: 600px) {
  .modal-layer { align-items: flex-end; padding: 0; }
  .modal, .modal.wide { width: 100%; border-radius: 18px 18px 0 0; max-height: 92vh; }
}

/* Onde au clic */
.ripple-box { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; }

/* Graphiques */
.chart .bar { transform-box: fill-box; transform-origin: 50% 100%; transition: filter .15s; animation: grow .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
.chart .bar:hover { filter: brightness(1.18); }
.hbar .fill { transform-origin: left center; animation: grow-x .8s var(--ease-out) backwards; }

/* Installation et connexion */
.center-screen { position: relative; overflow: hidden; }
.center-screen::before, .center-screen::after { content: ''; position: absolute; border-radius: 50%; opacity: .4; pointer-events: none; animation: drift 9s ease-in-out infinite; }
.center-screen::before { width: 340px; height: 340px; left: -80px; top: -60px; background: radial-gradient(circle at 30% 30%, #ffd166, transparent 70%); }
.center-screen::after { width: 440px; height: 440px; right: -110px; bottom: -130px; background: radial-gradient(circle at 60% 40%, #3981df, transparent 70%); animation-delay: -4s; }
.auth { position: relative; z-index: 1; animation: pop .5s var(--ease-spring); }
.wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.4s ease-in-out .6s 2; }
.ucard { animation: pop .45s var(--ease-spring) backwards; transition: transform .18s var(--ease-spring), background .15s, border-color .15s; }
.ucard:nth-child(2) { animation-delay: 70ms; } .ucard:nth-child(3) { animation-delay: 140ms; } .ucard:nth-child(4) { animation-delay: 210ms; } .ucard:nth-child(n+5) { animation-delay: 280ms; }
.ucard:hover { transform: translateY(-3px); }
.avatar { transition: transform .22s var(--ease-spring); }
.ucard:hover .avatar { transform: scale(1.12) rotate(-6deg); }

/* Vente réussie : coche dessinée + confettis */
.sale-ok { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0 10px; color: var(--ok); }
.sale-ok svg { width: 64px; height: 64px; }
.sale-ok circle { fill: none; stroke: currentColor; stroke-width: 3; stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw .6s var(--ease-out) forwards; }
.sale-ok path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s .45s var(--ease-out) forwards; }
.sale-ok strong { animation: rise .4s .5s backwards; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.confetti i { position: absolute; left: 50%; top: 36%; width: 9px; height: 14px; border-radius: 2px; animation: confetti 1.6s var(--ease-out) forwards; }

/* Écran de bienvenue (connexion / création de compte) */
.welcome { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 20px; cursor: pointer;
  background: radial-gradient(circle at 50% 38%, #19447c 0%, var(--side-bg) 62%); color: #fff; animation: fade .35s ease-out; }
.welcome.out { animation: w-out .38s ease-in forwards; }
.w-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 520px; }
.w-logo { width: 84px; height: 84px; border-radius: 24px; background: var(--accent); color: #2b1d00; display: grid; place-items: center; margin-bottom: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35); animation: w-logo .7s var(--ease-spring) backwards; }
.w-hello { font-size: clamp(26px, 6vw, 40px); font-weight: 800; letter-spacing: -.01em; animation: rise .5s .25s var(--ease-out) backwards; }
.w-dots i { font-style: normal; display: inline-block; animation: w-dot 1.2s ease-in-out infinite; animation-delay: calc(.5s + var(--d, 0s)); }
.w-dots i:nth-child(2) { --d: .15s; } .w-dots i:nth-child(3) { --d: .3s; }
.w-app { font-size: clamp(34px, 9vw, 60px); font-weight: 900; letter-spacing: -.02em; line-height: 1.05;
  background: linear-gradient(90deg, #ffd166, #fff 45%, #6ca6f3); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: w-app .7s 1.05s var(--ease-spring) backwards; }
.w-sub { font-size: 18px; color: #d4dfed; margin-top: 8px; animation: rise .5s 1.5s var(--ease-out) backwards; }
.w-note { font-size: 15px; color: #fff; background: rgba(255, 255, 255, .12); border-radius: 12px; padding: 10px 14px; margin-top: 10px; animation: rise .5s 1.9s var(--ease-out) backwards; }
.w-bar { width: 160px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); margin-top: 22px; overflow: hidden; }
.w-bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: grow-x var(--w-ms, 2600ms) linear forwards; }
.welcome.party .w-logo { animation: w-logo .7s var(--ease-spring) backwards, float 2.4s 1s ease-in-out infinite; }
@keyframes w-logo { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes w-app { from { opacity: 0; transform: translateY(18px) scale(.9); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes w-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-6px); } }
@keyframes w-out { to { opacity: 0; transform: scale(1.04); } }

/* Respect des personnes sensibles au mouvement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .confetti:not(.soft) { display: none; }
  /* L'écran de bienvenue reste visible, en version douce : fondus, pas de rebond ni de rotation */
  .welcome.soft { animation: fade .4s ease-out !important; }
  .welcome.soft.out { animation: w-out .38s ease-in forwards !important; }
  .welcome.soft .w-logo, .welcome.soft .w-hello, .welcome.soft .w-app, .welcome.soft .w-sub, .welcome.soft .w-note {
    animation: fade .7s ease-out both !important; }
  .welcome.soft .w-hello { animation-delay: .25s !important; }
  .welcome.soft .w-app { animation-delay: .9s !important; }
  .welcome.soft .w-sub { animation-delay: 1.4s !important; }
  .welcome.soft .w-note { animation-delay: 1.9s !important; }
  .welcome.soft .w-dots i { animation: w-dot-soft 1.6s ease-in-out infinite !important; animation-delay: var(--d, 0s) !important; animation-iteration-count: infinite !important; }
  .welcome.soft .w-bar span { animation: grow-x var(--w-ms, 2600ms) linear forwards !important; }
  .confetti.soft i { animation: confetti-soft var(--dur, 3s) linear var(--dl, 0s) both !important; }
}
@keyframes confetti-soft { from { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } to { transform: translate(var(--sway, 0), 105vh); opacity: .8; } }
@keyframes w-dot-soft { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ----- Connexion par e-mail ----- */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 84px; }
.pw-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--brand); font-weight: 700; font-size: 13px; padding: 6px 8px; cursor: pointer; border-radius: 8px; }
.pw-eye:hover { background: var(--brand-soft); }
.linkish { display: block; margin: 14px auto 0; border: 0; background: none; color: var(--brand); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.brand-mini { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--brand); margin-bottom: 14px; }
.brand-mini .logo { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); color: #2b1d00; display: grid; place-items: center; }
.auth .btn.big { width: 100%; }
.auth-alt { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-alt .muted { white-space: nowrap; }
.pw-meter { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; margin-top: 6px; }
.pw-meter span { display: block; height: 100%; width: 0; border-radius: 5px; transition: width .25s var(--ease-out), background .25s; }
.pw-meter[data-s="1"] span { width: 33%; background: var(--danger); }
.pw-meter[data-s="2"] span { width: 66%; background: var(--accent); }
.pw-meter[data-s="3"] span { width: 100%; background: var(--ok); }

/* ----- Mode test (compte pas encore validé) ----- */
.test-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 20px; font-size: 14px; color: #3d2a00;
  background: repeating-linear-gradient(-45deg, #ffd166 0 14px, #ffc94a 14px 28px); border-bottom: 2px solid #e8a317; }
.test-bar .tb-tag { background: #2b1d00; color: #ffd166; font-weight: 900; letter-spacing: .08em; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.test-bar .tb-txt { flex: 1 1 320px; }
.test-bar .tb-txt em { font-style: normal; font-weight: 700; }
.test-bar .tb-cta { background: #2b1d00; color: #fff; border-color: #2b1d00; font-weight: 800; }
.test-bar .tb-cta:hover { background: #000; }
.test-bar .tb-short { display: none; }
@media (max-width: 600px) {
  .test-bar { padding: 8px 12px; gap: 8px; font-size: 13px; }
  .test-bar .tb-txt { flex-basis: 100%; order: 3; }
  .test-bar .tb-long { display: none; } .test-bar .tb-short { display: inline; }
  .test-bar .tb-cta { margin-left: auto; }
}
.confetti.out { opacity: 0; transition: opacity .35s; }
.pending-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 20px; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--line); }
.contact-list { display: grid; gap: 8px; margin: 12px 0; }
.contact-opt { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; }
.contact-opt:hover { border-color: var(--brand); background: var(--brand-soft); }
.contact-opt > span:last-child { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.co-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--brand); color: var(--on-brand); flex: none; }

/* ----- Assistant de configuration du commerce ----- */
.center-screen { grid-template-columns: minmax(0, 1fr); } /* la colonne ne s'élargit jamais au-delà de l'écran */
.onb-screen { align-items: start; padding-top: 32px; padding-bottom: 32px; }
.auth.onb { width: min(680px, 100%); padding: 22px 26px 26px; }
.onb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.onb-top .brand-mini { margin: 0; }
.onb-top .linkish { margin: 0; }
.onb-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: s; }
.onb-steps li button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); text-align: left; font-size: 12px; font-weight: 700; }
.onb-steps li button:disabled { cursor: default; }
.onb-steps .bar { display: block; width: 100%; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.onb-steps .fill { display: block; height: 100%; border-radius: 4px; background: var(--brand); transform-origin: left center; opacity: 0; }
.onb-steps li.done .fill, .onb-steps li.on .fill { opacity: 1; }
.onb-stage { will-change: opacity, transform; }
.onb-steps li.on button { color: var(--brand); }
.onb-steps li.done button { color: var(--ink); }
.onb-head { margin-bottom: 16px; }
.onb-kicker { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.onb-head h2 { margin: 2px 0 4px; }
.onb-head .sub { margin-bottom: 0; }
.onb-nav { margin-top: 8px; }
.onb-nav .btn { min-height: 46px; }
.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.act { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; font-weight: 600; font-size: 14px; transition: border-color .15s, background .15s, transform .15s var(--ease-spring); }
.act:hover { border-color: var(--brand); }
.act.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.act .e { font-size: 22px; line-height: 1; }
.onb-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.onb-ticket { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; background: #fffdf7; color: #222; border: 1px dashed #c9c2ae; border-radius: 6px; padding: 12px; text-align: center; margin-top: 4px; box-shadow: var(--shadow); }
.onb-ticket strong { font-size: 14px; display: block; }
.onb-ticket hr { border: 0; border-top: 1px dashed #aaa; margin: 8px 0; }
.onb-ticket .r-row { text-align: left; }
.pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pay-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pay-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pay-opt > span { display: flex; flex-direction: column; }
.onb-sum { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.sum-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.sum-row:last-child { border-bottom: 0; }
.sum-row .linkish { margin: 0; }
.r-stamp.test { color: #8a5a00; border-color: #e8a317; }
.tenant-sel { width: auto; max-width: 240px; min-height: 34px; padding: 4px 10px; font-weight: 700; }
@media (max-width: 600px) {
  .auth.onb { padding: 18px 16px 20px; }
  .onb-split { grid-template-columns: 1fr; }
  .sum-row { grid-template-columns: 1fr auto; } .sum-row > span:first-child { grid-column: 1 / -1; font-size: 12px; }
  .tenant-sel { max-width: 140px; }
}

/* ----- Console admin ----- */
.imp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 20px; background: var(--warn-soft); color: var(--warn); font-size: 14px; border-bottom: 1px solid var(--line); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: var(--muted); font-weight: 600; font-size: 13px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
code, .json-edit { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.json-line { color: var(--muted); overflow-wrap: anywhere; }
.json-edit { width: 100%; min-height: 320px; resize: vertical; line-height: 1.5; white-space: pre; }
.checks { display: grid; gap: 10px; margin-top: 14px; }
.check-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.check-row ul { margin: 6px 0 0 18px; padding: 0; }
@media (max-width: 600px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: 6px; } }

/* ===== Appareil de caisse : profils et code PIN ===== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.auth.lock { width: min(560px, 100%); text-align: center; }
.auth.lock .brand-mini { justify-content: center; }
.auth.lock .sub { margin-bottom: 16px; }
.lock-clock { font-size: 13px; color: var(--muted); text-transform: capitalize; margin: -6px 0 10px; }
.auth.lock .users { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
.auth.lock .ucard { flex: 0 1 140px; min-width: 120px; }
.ucard .u-name { line-height: 1.2; }
.ucard .badge { font-size: 11px; }
.lock-back { display: inline-block; margin: 0 0 8px; text-decoration: none; }
.pin-who { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; }
.pin-who strong { font-size: 18px; }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin: 6px 0 6px; min-height: 18px; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); transition: background .15s, border-color .15s, transform .15s; }
.pin-dots i.on { background: var(--brand); border-color: var(--brand); transform: scale(1.1); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(300px, 100%); margin: 6px auto 0; }
.pin-key { height: 62px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-size: 24px; font-weight: 700; color: var(--ink); cursor: pointer; display: grid; place-items: center; position: relative; touch-action: manipulation; }
.pin-key:hover { border-color: var(--brand); background: var(--brand-soft); }
.pin-key:active { transform: scale(.94); }
.pin-key.ghost { background: transparent; color: var(--muted); }
.pin-key.go { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* ===== Ouverture / clôture de caisse ===== */
.auth.cash-screen { width: min(620px, 100%); }
.cash-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cash-head h2 { margin: 2px 0; }
.cash-head .sub { margin: 0; text-transform: none; }
.cash-amount-wrap { position: relative; }
.cash-amount { font-size: 28px; font-weight: 800; min-height: 60px; padding-right: 76px; font-variant-numeric: tabular-nums; }
.cash-amount[readonly] { background: var(--brand-soft); }
.cash-amount-wrap .cur { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; }
.den-toggle { margin: -4px 0 10px; display: inline-block; }
.denoms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.den-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.den-row { display: grid; grid-template-columns: 62px 34px minmax(44px, 1fr) 34px; gap: 6px; align-items: center; margin-bottom: 6px; }
.den-row input { min-height: 34px; padding: 4px 6px; text-align: center; }
.den-v { font-weight: 800; font-size: 13px; text-align: center; padding: 6px 4px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.den-v.note { background: #e3e9f1; color: #11325e; border: 1px solid #b8c8dd; }
.den-v.coin { background: #fbf0d6; color: #7a5300; border: 1px solid #ecd398; border-radius: 999px; }
.den-btn { height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 18px; font-weight: 700; cursor: pointer; position: relative; }
.den-sub { grid-column: 1 / -1; font-size: 11px; color: var(--muted); text-align: right; margin-top: -4px; }
.den-sub:empty { display: none; }
.den-total { grid-column: 1 / -1; text-align: right; padding-top: 8px; border-top: 1px dashed var(--line); }
.cash-gap { padding: 10px 12px; border-radius: 10px; font-weight: 700; margin: 0 0 12px; background: var(--brand-soft); color: var(--brand); }
.cash-gap.big { font-size: 16px; text-align: center; padding: 12px; }
.cash-gap.ok { background: var(--ok-soft); color: var(--ok); }
.cash-gap.neg { background: var(--danger-soft); color: var(--danger); }
.cash-gap.pos { background: var(--warn-soft); color: var(--warn); }
.z-block { border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; margin-bottom: 12px; }
.z-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.z-row:last-child { border-bottom: 0; }
.z-row.total { font-weight: 800; font-size: 16px; border-top: 2px solid var(--ink); border-bottom: 0; margin-top: 2px; }
.z-row > span:last-child { white-space: nowrap; }
.r-sign { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; font-size: 11px; }
.r-sign span { border-top: 1px solid currentColor; padding-top: 4px; flex: 1; text-align: center; }
.cash-closed { max-width: 520px; margin: 24px auto; text-align: center; padding: 28px 22px; }
.cash-closed .cc-ic { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 12px; display: grid; place-items: center; background: var(--warn-soft); color: var(--warn); }
.cash-closed h2 { margin-bottom: 6px; }
.cash-closed .btn { margin-top: 10px; }

/* Bouton d'état de la caisse (en-tête) */
.cash-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 700; color: var(--warn); cursor: pointer; white-space: nowrap; position: relative; }
.cash-pill i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.cash-pill.open { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.cash-pill:hover { border-color: currentColor; }

/* Profils employés */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.staff { display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; position: relative; color: var(--ink); }
.staff:hover { border-color: var(--brand); }
.staff.off { opacity: .6; }
.staff-top { display: flex; align-items: center; gap: 12px; }
.staff-id { display: flex; flex-direction: column; min-width: 0; }
.staff-id strong { font-size: 16px; }
.staff-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.sub-box { border-left: 3px solid var(--brand-soft); padding-left: 12px; margin: 0 0 12px; }
.pin-input { letter-spacing: .4em; font-size: 18px; text-align: center; }

/* Bienvenue courte (changement d'employé) */
.welcome.quick .w-hello { animation-delay: .05s; }
.welcome.quick .w-app { animation-delay: .3s; animation-duration: .5s; }
.welcome.quick .w-sub { animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
  .welcome.soft.quick .w-hello { animation-delay: 0s !important; }
  .welcome.soft.quick .w-app { animation-delay: .25s !important; }
  .welcome.soft.quick .w-sub { animation-delay: .45s !important; }
}

/* ===== Objectifs, alertes, fonctionnalités ===== */
.goal { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; display: grid; gap: 6px; }
.goal.mini { border: 0; padding: 0; margin: 0; min-width: 140px; gap: 2px; }
.goal-bar { height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.goal-bar span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--brand), #3981df); }
.alert-owner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); }
.alert-owner p { margin: 0; flex: 1 1 200px; }
.bell { position: relative; }
.bell-count { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; }
.bell-count:empty { display: none; }
.bell.has svg { color: var(--danger); }
.alert-list { display: grid; gap: 10px; }
.alert-item { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 12px; }
.alert-item.gap { border-left-color: var(--danger); }
.alert-item.approval { border-left-color: var(--brand); }
.ai-txt { display: flex; flex-direction: column; min-width: 0; }
.ai-act { grid-column: 1 / -1; justify-content: flex-end; }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.feat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.feat.locked { cursor: default; opacity: .65; }
.feat-txt { display: flex; flex-direction: column; }
input.switch { appearance: none; -webkit-appearance: none; flex: none; width: 44px; min-height: 0; height: 26px; padding: 0; border-radius: 26px; border: 0; background: var(--line); position: relative; cursor: pointer; transition: background .2s; }
input.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
input.switch:checked { background: var(--ok); }
input.switch:checked::after { transform: translateX(18px); }
input.switch:disabled { cursor: not-allowed; }
.tbl th.day, .tbl td.day { font-size: 12px; color: var(--muted); }

/* ===== Restaurant ===== */
.room-bar { margin-bottom: 12px; }
.chip-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 6px; border-radius: 10px; background: var(--accent); color: #2b1d00; font-size: 11px; font-weight: 800; }
.chip.on .chip-count { background: #fff; color: var(--brand); }
.floor { position: relative; aspect-ratio: 3 / 2; max-height: 70vh; border-radius: 16px; background-color: var(--surface); border: 1px solid var(--line);
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1.5px); background-size: calc(100% / 12) calc(100% / 8); margin-bottom: 16px; touch-action: none; overflow: hidden; }
.floor.editing { outline: 2px dashed var(--accent); outline-offset: 3px; }
.floor-empty { position: absolute; inset: 0; display: grid; place-items: center; }
.rtable { position: absolute; padding: 6px; margin: 0; border: 2px solid var(--line); background: var(--bg); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; color: var(--ink); font: inherit; text-align: center; box-sizing: border-box; transition: border-color .15s, background .15s, box-shadow .15s; container-type: size; }
.rtable { inset: auto; transform: scale(.9); transform-origin: center; }
.rtable.round { border-radius: 50%; }
.rtable:hover { border-color: var(--brand); box-shadow: 0 8px 18px rgba(14, 26, 41, .12); }
.rtable.busy { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.rtable.partial { background: var(--warn-soft); border-color: var(--accent); color: var(--warn); }
.rtable.dragging { box-shadow: 0 14px 30px rgba(0, 0, 0, .25); z-index: 5; cursor: grabbing; opacity: .9; }
.floor.editing .rtable { cursor: grab; border-style: dashed; }
.rt-name { font-weight: 900; font-size: clamp(14px, 1.8vw, 22px); line-height: 1; }
.rt-info { font-size: 11px; opacity: .85; white-space: nowrap; }
.rt-amount { font-weight: 800; font-size: 12px; white-space: nowrap; }
.rt-server { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .25); font-size: 9px; font-weight: 800; display: grid; place-items: center; }
.rt-pending { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.rt-flag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.floor-tools { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.quick-orders { display: flex; gap: 8px; align-items: center; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.qo-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
.qo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 12px; background: var(--warn-soft); color: var(--warn); cursor: pointer; white-space: nowrap; font: inherit; position: relative; }
.qo span { font-size: 12px; }
.type-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.tp { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; cursor: pointer; color: var(--ink); font: inherit; position: relative; }
.tp.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.stepper { display: inline-flex; align-items: center; gap: 10px; }
.stepper .btn { width: 44px; padding: 0; font-size: 20px; }
.stepper.sm .btn { width: 34px; min-height: 34px; font-size: 16px; }
.stepper.sm .btn.ghost { width: auto; padding: 0 10px; font-size: 13px; }
.stepper-v { min-width: 30px; text-align: center; font-size: 20px; }
.stepper.sm .stepper-v { font-size: 16px; min-width: 22px; }
.order-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.oh-title { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.oh-title strong { font-size: 18px; }
.oh-actions { gap: 6px; }
.btn.danger-ghost { color: var(--danger); }
.pcard .pin-count { position: absolute; top: 8px; right: 8px; background: var(--brand); color: var(--on-brand); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 800; }
.pcard { position: relative; }
.rticket .cart-lines { flex: 1; overflow-y: auto; padding: 0 14px; }
.rgroup { padding: 6px 0; }
.rg-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 0 2px; }
.rgroup.pending .rg-title { color: var(--danger); }
.rline { grid-template-columns: 1fr auto; }
.rline .cl-name { display: flex; flex-direction: column; min-width: 0; }
.rline.sent .cl-name strong::before { content: '✓ '; color: var(--ok); }
.rline.cancelled { opacity: .55; }
.rline.cancelled .cl-name strong, .rline.cancelled .cl-price { text-decoration: line-through; }
.r-note { font-size: 12px; color: var(--warn); font-style: italic; }
.ok-text { color: var(--ok); font-weight: 700; }
.note-btn { margin-left: 4px; }
.total-row { font-size: 18px; }
.split-box { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.pick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.pick-row:last-child { border-bottom: 0; }
.pick-row.done { opacity: .6; }
.pay-split .btn.big { width: 100%; margin-top: 10px; }
.receipt.kitchen .k-line { font-size: 16px; padding: 4px 0; border-bottom: 1px dashed #bbb; }
.receipt.kitchen .k-note { font-size: 13px; font-style: italic; padding-left: 10px; }
.timeline { list-style: none; margin: 10px 0 14px; padding: 0 0 0 4px; border-left: 2px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 6px 0 6px 12px; position: relative; }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); }
.timeline li.tl-paiement::before, .timeline li.tl-fermeture::before { background: var(--ok); }
.timeline li.tl-article::before, .timeline li.tl-commande::before { background: var(--danger); }
.timeline li.tl-envoi::before { background: var(--accent); }
.tl-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; padding-top: 1px; }
@media (max-width: 600px) {
  /* Téléphone : le plan devient une grille de tables, plus facile à toucher */
  .floor { aspect-ratio: auto; max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; padding: 10px; background-image: none; overflow: visible; }
  .rtable { position: relative; left: auto !important; top: auto !important; width: auto !important; height: 104px !important; transform: none; }
  .floor-tools { position: static; grid-column: 1 / -1; }
  .floor-empty { position: static; }
  .type-pick { grid-template-columns: 1fr; }
  .resto-kpis .kpi:nth-child(n+3) { display: none; }
  .oh-actions .btn { flex: 1 1 auto; }
}

/* ===== Imprimante ===== */
.printer-status { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.ps-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--line); color: var(--muted); flex: none; }
.ps-ic.idle { background: var(--warn-soft); color: var(--warn); }
.ps-ic.on { background: var(--ok-soft); color: var(--ok); }
.ps-txt { display: flex; flex-direction: column; min-width: 0; }
.feat-list { margin-top: 10px; }

/* ===== Mise en page adaptative ===== */
.kpi .k-v { overflow-wrap: anywhere; }
.menu-btn, .side-close, .side-user { display: none; }
.scrim { display: none; }
.pill.net i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.me .avatar { width: 30px; height: 30px; font-size: 12px; }
body.no-scroll { overflow: hidden; }

/* Tablette et téléphone : menu hamburger (tiroir à gauche) */
@media (max-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .menu-btn { display: inline-flex; margin-left: -6px; color: var(--ink); }
  .side { display: none; position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); height: 100%; z-index: 95; overflow-y: auto; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); box-shadow: 8px 0 32px rgba(0, 0, 0, .3); }
  .app.nav-open .side { display: flex; }
  .scrim { position: fixed; inset: 0; background: rgba(8, 13, 20, .5); z-index: 90; }
  .app.nav-open .scrim { display: block; }
  .brand { padding-right: 0; }
  .side-close { display: inline-flex; margin-left: auto; color: var(--side-ink); }
  .side-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  .nav a { padding: 12px; font-size: 15px; }
  .side-user { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
  .side-user > .row { padding: 0 8px 8px; color: #fff; }
  .su-txt { display: flex; flex-direction: column; min-width: 0; }
  .su-txt span { font-size: 12px; opacity: .75; }
  .side-act { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--side-ink); font: inherit; font-weight: 600; cursor: pointer; text-align: left; position: relative; }
  .side-act:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  .side .foot { margin-top: 12px; }
  .top { padding: 10px 14px; gap: 10px; }
  .top h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .me .nm { display: none; }
  .view { padding: 16px 14px 28px; }
  .view-head h2 { display: none; }        /* le titre est déjà dans l'en-tête */
  .view-head:not(:has(> :not(h2))) { display: none; }
}

/* Téléphone */
@media (max-width: 600px) {
  body { font-size: 15px; }
  .top { padding: 8px 10px; gap: 6px; }
  .top h1 { font-size: 16px; }
  .hide-sm, .shop-name, .me .avatar { display: none !important; }
  .pill.net { padding: 6px; } .pill.net span { display: none; }
  .top select { max-width: 120px; min-height: 34px; font-size: 13px; padding: 4px 8px; }
  .tenant-sel { max-width: 110px; }
  .cash-pill { padding: 6px 10px; font-size: 12px; }
  .view { padding: 12px 12px 24px; }
  .grid2, .cols2 { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi .k-v { font-size: 18px; }
  .card { padding: 12px; border-radius: 12px; }
  .toolbar > input[type=search], .toolbar > select { flex: 1 1 100%; max-width: none; }
  .tabs { margin: 0 -12px 14px; padding: 0 12px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .row.between > .muted { flex: 1 1 100%; }
  .auth { padding: 20px 16px; border-radius: 16px; }
  .auth-alt { flex-wrap: wrap; }
  .auth-alt .btn { white-space: nowrap; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pcard { min-height: 88px; padding: 10px; }
  .staff-grid { grid-template-columns: minmax(0, 1fr); }
  .denoms { grid-template-columns: minmax(0, 1fr); }
  .pin-key { height: 58px; }
  .hbar { grid-template-columns: 96px 1fr auto; }
  .pay-row { grid-template-columns: 1fr 120px auto; }
  /* Tableaux : chaque ligne devient une carte lisible */
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { padding: 10px 2px; border-bottom: 1px solid var(--line); }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .tbl td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; flex: none; max-width: 45%; }
  .tbl td[data-label=""]::before { display: none; }
  .tbl td[data-label=""] { justify-content: flex-end; padding-top: 6px; }
  .tbl td:first-child { font-size: 15px; }
  .tbl .num { text-align: right; }
}

/* ----- Impression (ticket 80 mm) ----- */
@media print {
  body { background: #fff; color: #000; }
  #app, .app, #toasts, .no-print, .confetti { display: none !important; }
  .modal-layer { position: static; background: none; padding: 0; display: block; }
  .modal { box-shadow: none; width: 80mm; max-height: none; background: #fff; }
  .modal-body { overflow: visible; padding: 0; }
  .receipt { color: #000; max-width: none; font-size: 12px; }
  .r-meta { color: #000; }
}

/* ===== Application Android (APK) : barres système =====
   Android 15+ affiche l'app sous la barre d'état et la barre de navigation. env(safe-area-inset-*) donne leur hauteur
   (0 dans un navigateur classique, donc aucun effet sur le site). */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); }
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: var(--sat); background: var(--side-bg); z-index: 300; pointer-events: none; }
.main { padding-top: var(--sat); }
.top { top: var(--sat); }
.side { padding-top: calc(16px + var(--sat)); }
.pos-left .toolbar { top: calc(61px + var(--sat)); }
.center-screen { padding-top: calc(20px + var(--sat)); padding-bottom: calc(20px + var(--sab)); }
.modal-layer { padding-top: calc(16px + var(--sat)); }
.welcome { padding-top: calc(20px + var(--sat)); padding-bottom: calc(20px + var(--sab)); }
.view { padding-bottom: calc(28px + var(--sab)); }
@media (max-width: 1024px) { .side { padding-top: calc(14px + var(--sat)); } }
@media (max-width: 900px) { .cart { padding-bottom: var(--sab); } }
@media (max-width: 600px) { .modal-layer { padding-top: var(--sat); } .modal, .modal.wide { padding-bottom: var(--sab); } .view { padding-bottom: calc(24px + var(--sab)); } }

/* ===== Thème 1.1 : menu en dégradé bleu, en-tête avec recherche, tableau de bord ===== */
:root {
  --g-blue: linear-gradient(135deg, #1e6fc6, #0e4c92); --g-green: linear-gradient(135deg, #12b981, #0a9467);
  --g-orange: linear-gradient(135deg, #ff9318, #f35b0c); --g-purple: linear-gradient(135deg, #a259ff, #7c2ff0);
  --g-red: linear-gradient(135deg, #ff4b4b, #e1262f);
  --c-blue: #1763b8; --c-green: #0f9f6e; --c-orange: #f2760c; --c-purple: #8a3ff5; --c-red: #e1262f;
  --s-blue: #e7f0fb; --s-green: #e3f7ee; --s-orange: #fff1e3; --s-purple: #f2e9ff; --s-red: #ffe8e8;
  --side-grad: linear-gradient(180deg, #1a6cc2 0%, #0f58a8 55%, #0c4a8f 100%);
  --field: #f1f4f8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-blue: #6ea6ff; --c-green: #4fd3a0; --c-orange: #ffa45c; --c-purple: #b98bff; --c-red: #ff7b7b;
    --s-blue: #16284a; --s-green: #123326; --s-orange: #3a2614; --s-purple: #2a1e45; --s-red: #3d1a1d;
    --side-grad: linear-gradient(180deg, #11305f 0%, #0b2149 60%, #091a3a 100%);
    --field: #101826;
  }
}

/* Menu latéral */
.side { background: var(--side-grad); padding: 0 12px 0; padding-top: var(--sat); }
.brand { margin: 0 -12px 10px; padding: 18px 20px 16px; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 18px; }
.brand .logo { background: #fff; color: #1763b8; animation: none; }
.brand .b-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand .b-sub { font-size: 11px; font-weight: 500; opacity: .75; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.nav-group { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--side-ink); opacity: .6; padding: 14px 12px 6px; }
.nav-group:first-child { padding-top: 6px; }
.nav a { font-weight: 500; font-size: 14px; padding: 9px 12px; }
.nav a.on, .nav a.on:hover { background: rgba(255, 255, 255, .2); color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 20, 60, .22); }
.nav a.on::before { display: none; }
.side-me { margin: auto -12px 0; padding: 14px 18px calc(14px + var(--sab)); border-top: 1px solid rgba(255, 255, 255, .14); display: flex; gap: 10px; align-items: center; color: var(--side-ink); }
.side-me .avatar { width: 36px; height: 36px; font-size: 13px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.side-me .sm-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.side-me strong { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-me span { font-size: 11px; opacity: .8; }
.side-me .icon-btn { color: var(--side-ink); }
.side-me .icon-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.side .foot { display: none; }

/* En-tête : titre, sous-titre et recherche */
.top { padding: 12px 24px; gap: 12px; }
.top-titles { margin-right: auto; min-width: 0; flex: 1 1 auto; }
.top .me .nm { display: none; }               /* le nom est en bas du menu */
.top .shop-name, .top .pill, .cash-pill { white-space: nowrap; }
.top-titles h1 { font-size: 20px; margin: 0; }
.top-sub { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch { position: relative; width: 260px; }
.gsearch > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.gsearch input { min-height: 38px; padding-left: 34px; background: var(--field); border-color: var(--line); font-size: 13px; }
.gs-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 300px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(10, 30, 60, .18); padding: 6px; z-index: 50; max-height: 420px; overflow-y: auto; }
.gs-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 4px; }
.gs-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; }
.gs-item:hover, .gs-item.on { background: var(--brand-soft); }
.gs-item .gs-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--s-blue); color: var(--c-blue); overflow: hidden; }
.gs-item .gs-ic img { width: 100%; height: 100%; object-fit: cover; }
.gs-item .gs-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gs-item .gs-t strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item .gs-t span, .gs-item .gs-r { font-size: 12px; color: var(--muted); }
.gs-empty { padding: 14px 10px; color: var(--muted); font-size: 13px; }
.view { padding: 24px; max-width: 1340px; }

/* Un seul titre par écran : celui de l'en-tête */
.view-head h2 { display: none; }
.view-head:not(:has(> :not(h2))) { display: none; }

/* Cartes et boutons */
.card, .kpi, .cart { border-color: var(--line); }
.kpi { padding: 16px 18px; }
.btn.primary { background: var(--g-blue); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(23, 99, 184, .25); }
.btn.primary:hover { background: var(--brand-hover); }
.btn.primary:disabled { box-shadow: none; }
.tbl th { background: var(--field); }
.tbl th:first-child { border-top-left-radius: 10px; } .tbl th:last-child { border-top-right-radius: 10px; }
.brand-mini .logo { background: var(--g-blue); color: #fff; }

/* Images des articles */
.pthumb { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: none; background: var(--field); display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); }
.pcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pcard .pimg { display: block; width: calc(100% + 24px); margin: -12px -12px 6px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; background: var(--field); }
.pcard.has-img { overflow: hidden; }
.pcard .pimg.ph { display: grid; place-items: center; background: hsl(var(--h) 70% 92%); color: hsl(var(--h) 55% 38%); font-size: 26px; font-weight: 800; letter-spacing: .02em; }
@media (prefers-color-scheme: dark) { .pcard .pimg.ph { background: hsl(var(--h) 35% 22%); color: hsl(var(--h) 70% 75%); } }
.img-pick { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.img-pick .ip-prev { width: 96px; height: 96px; border-radius: 14px; border: 2px dashed var(--line); background: var(--field); display: grid; place-items: center; color: var(--muted); overflow: hidden; flex: none; }
.img-pick .ip-prev img { width: 100%; height: 100%; object-fit: cover; }
.img-pick .ip-act { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* ===== Tableau de bord ===== */
.dash { display: grid; gap: 20px; }
.dash-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 26px 28px; color: #fff; background: linear-gradient(120deg, #1a6cc2, #0d4d93); box-shadow: 0 12px 30px rgba(13, 77, 147, .28); }
.dash-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.dash-hero h2 { font-size: 28px; font-weight: 800; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dash-hero .dh-date { font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .18); padding: 4px 12px; border-radius: 999px; }
.dash-hero p { margin: 6px 0 22px; opacity: .85; }
.dash-hero .dh-acts { position: absolute; right: 24px; top: 24px; display: flex; gap: 8px; z-index: 1; }
.dash-hero .dh-acts button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); color: #fff; border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dash-hero .dh-acts button:hover { background: rgba(255, 255, 255, .2); }
.glass { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 1; }
.glass > div { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.glass .gl-t { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.glass .gl-t i { width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; flex: none; }
.glass .gl-v { font-size: 26px; font-weight: 800; margin-top: 10px; overflow-wrap: anywhere; }
.glass .gl-s { font-size: 11px; opacity: .8; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dk { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); min-width: 0; }
.dk-hd { display: flex; justify-content: space-between; align-items: center; }
.dic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.dic.blue { background: var(--s-blue); color: var(--c-blue); } .dic.green { background: var(--s-green); color: var(--c-green); }
.dic.orange { background: var(--s-orange); color: var(--c-orange); } .dic.purple { background: var(--s-purple); color: var(--c-purple); } .dic.red { background: var(--s-red); color: var(--c-red); }
.trend { font-size: 11px; font-weight: 700; color: var(--c-green); background: var(--s-green); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.trend.down { color: var(--c-red); background: var(--s-red); } .trend.flat { color: var(--muted); background: var(--field); }
.dk-v { font-size: 26px; font-weight: 800; margin-top: 14px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dk-l { font-size: 13px; } .dk-l2 { font-size: 12px; color: var(--muted); }
.dk-p { margin-top: 14px; font-size: 12px; color: var(--muted); }
.dk-p .r { display: flex; justify-content: space-between; gap: 8px; } .dk-p .r b { color: var(--ink); } .dk-p .r > :last-child { white-space: nowrap; }
.meter { height: 7px; border-radius: 9px; background: var(--field); margin: 6px 0; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 9px; transition: width .8s var(--ease-out); }
.dash-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dash-row.half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); min-width: 0; }
.dc-hd { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; gap: 10px; }
.dc-hd h3 { font-size: 17px; } .dc-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.mrow { margin-bottom: 14px; }
.mrow .r { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.mrow .r small { color: var(--muted); } .mrow .r .trend { margin-left: auto; } .mrow .r .amt { min-width: 110px; text-align: right; font-weight: 700; }
.mbar { height: 34px; border-radius: 10px; background: var(--field); overflow: hidden; }
.mbar i { display: flex; justify-content: flex-end; align-items: center; padding-right: 12px; height: 100%; min-width: 4px; border-radius: 10px; background: var(--g-blue); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; transition: width .8s var(--ease-out); }
.minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.minis > div { border-radius: 12px; padding: 14px 8px; text-align: center; min-width: 0; }
.minis b { display: block; font-size: 18px; margin-top: 4px; color: var(--ink); overflow-wrap: anywhere; } .minis small { font-size: 11px; color: var(--muted); }
.minis .blue { background: var(--s-blue); color: var(--c-blue); } .minis .green { background: var(--s-green); color: var(--c-green); }
.minis .purple { background: var(--s-purple); color: var(--c-purple); } .minis .orange { background: var(--s-orange); color: var(--c-orange); }
.live { font-size: 11px; font-weight: 700; color: var(--c-green); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.8s ease-in-out infinite; }
.feed-it { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.feed-it:last-of-type { border-bottom: 0; }
.feed-it .dic { width: 32px; height: 32px; border-radius: 9px; }
.feed-it small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.feed-it .amt { color: var(--c-green); font-weight: 700; } .feed-it .amt.neg { color: var(--c-red); }
.dc-link { display: block; width: 100%; text-align: center; color: var(--brand); font-weight: 600; font-size: 13px; padding: 10px 0 0; margin-top: 4px; border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer; }
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.qa button { position: relative; overflow: hidden; border: 0; border-radius: 14px; color: #fff; padding: 22px 12px; text-align: center; font-weight: 700; font-size: 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .18s var(--ease-spring), box-shadow .18s; }
.qa button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(10, 30, 60, .2); }
.qa button::after { content: ""; position: absolute; right: -26px; top: -26px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.qa small { font-weight: 400; font-size: 11px; opacity: .9; } .qa svg { margin-bottom: 6px; }
.rank { display: flex; align-items: center; gap: 12px; background: var(--field); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.rank .rk-av { position: relative; width: 42px; height: 42px; border-radius: 10px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.rank .rk-av em { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 10px; font-style: normal; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.rank .rk-n { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); } .rank .rk-n b { display: block; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank .rk-m { text-align: right; font-weight: 800; white-space: nowrap; } .rank .rk-m small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.todo > div { position: relative; border-radius: 14px; padding: 18px; border: 1px solid var(--line); display: flex; flex-direction: column; }
.todo .orange { background: var(--s-orange); } .todo .blue { background: var(--s-blue); } .todo .red { background: var(--s-red); } .todo .purple { background: var(--s-purple); } .todo .green { background: var(--s-green); }
.todo .dic { color: #fff; }
.todo .cnt { position: absolute; right: 16px; top: 16px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.todo h4 { margin: 14px 0 4px; font-size: 15px; } .todo p { margin: 0 0 14px; font-size: 12px; color: var(--muted); flex: 1; }
.todo .go { border: 0; border-radius: 10px; color: #fff; padding: 10px; font-weight: 700; font-size: 13px; cursor: pointer; }
.todo .go:disabled { opacity: .45; cursor: default; }
.pill-red { font-size: 12px; font-weight: 700; color: var(--c-red); background: var(--s-red); padding: 5px 12px; border-radius: 999px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pill-red::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-red.ok { color: var(--c-green); background: var(--s-green); }

@media (min-width: 1025px) {
  .side { position: sticky; top: 0; height: 100vh; }
  .side-user { display: none !important; }
}
@media (max-width: 1100px) and (min-width: 1025px) { .gsearch { width: 200px; } }
@media (max-width: 1024px) {
  .side { padding-top: var(--sat); padding-bottom: calc(14px + var(--sab)); }
  .brand { padding: 16px 18px 14px; }
  .side-me { display: none; }
  .nav { flex: none; overflow: visible; }
  .top { padding: 10px 14px; }
  .top-titles h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gsearch { width: 200px; }
  .glass, .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-row, .dash-row.half { grid-template-columns: minmax(0, 1fr); }
  .todo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) { .gsearch { display: none; } }
@media (max-width: 600px) {
  .top-sub { display: none; }
  .top-titles { min-width: 72px; }
  .cash-pill .cp-txt { display: none; } .cash-pill { padding: 8px; }
  .pill.net { display: none; }
  .top-titles h1 { font-size: 16px; }
  .dash { gap: 14px; }
  .dash-hero { padding: 20px; border-radius: 16px; } .dash-hero h2 { font-size: 22px; } .dash-hero .dh-acts { display: none; }
  .glass { gap: 10px; } .glass > div { padding: 12px; } .glass .gl-t { font-size: 12px; } .glass .gl-v { font-size: 19px; } .glass .gl-s { display: none; }
  .dash-kpis { gap: 10px; } .dk { padding: 14px; } .dk-v { font-size: 20px; }
  .dc { padding: 16px; }
  .mrow .r small { display: none; } .mrow .r .amt { min-width: 0; }
  .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa button { padding: 18px 8px; font-size: 13px; }
}

/* ===== 1.2 : variantes, promotions, fidélité, scan, messages, devis et factures ===== */
.pcard { position: relative; }
.pcard .pbadge { position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--c-red); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.pcard .pbadge.gros { background: var(--c-purple); }
.pcard:has(.pbadge) .pname { padding-right: 54px; }
.pcard.has-img:has(.pbadge) .pname { padding-right: 0; }
.pcard .pvar { font-size: 12px; color: var(--muted); }
.pcard .pold { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.var-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.var-opt { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: left; }
.var-opt:hover { border-color: var(--brand); background: var(--brand-soft); }
.var-opt .bad { color: var(--danger); font-weight: 700; }
.cline .cpromo { display: block; font-size: 11px; font-weight: 600; color: var(--c-red); }
.loyal { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--s-purple); color: var(--c-purple); font-size: 13px; flex-wrap: wrap; }
.loyal .grow { color: var(--ink); font-weight: 600; }
.scan-btn { flex: none; padding: 8px 10px; }
.pos-left .toolbar { flex-wrap: nowrap; }
.scan-box { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-line { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: #ff3b3b; box-shadow: 0 0 12px #ff3b3b; animation: scanline 1.6s ease-in-out infinite alternate; }
@keyframes scanline { from { transform: translateY(-60px); } to { transform: translateY(60px); } }
.msg-preview { white-space: pre-wrap; font: 13px/1.45 var(--font); background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 12px; max-height: 260px; overflow: auto; margin: 0; }
details.more { margin: 10px 0; border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; }
details.more > summary { cursor: pointer; font-weight: 700; padding: 8px 0; color: var(--brand); }
details.more[open] > summary { margin-bottom: 6px; }
details.card.more { padding: 4px 16px; }
.rcv-line { border-bottom: 1px dashed var(--line); padding: 6px 0 10px; margin-bottom: 8px; }
.rcv-lot { margin-top: 6px; flex-wrap: wrap; }
.rcv-lot > input { flex: 1 1 160px; width: auto; }
.rcv-lot input[type=date] { width: auto; }
.r-note { font-size: .9em; font-style: italic; }
.pick-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px; margin-bottom: 12px; }
.pick-list:empty { display: none; }
.pick-list .check { margin: 6px 0; }
.doc-line { display: grid; grid-template-columns: minmax(0, 1fr) 80px 130px 36px; gap: 8px; align-items: center; margin-bottom: 6px; }
.doc-line.head { font-size: 12px; font-weight: 600; color: var(--muted); margin: 8px 0 4px; }
.doc-sum { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: 12px; background: var(--field); }
.doc-sum .big { font-size: 17px; }
@media (max-width: 600px) {
  .doc-line { grid-template-columns: minmax(0, 1fr) 60px 96px 32px; gap: 6px; }
  .var-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== First Step POS : police du logo (incluse dans l'application), logo et écran de chargement ===== */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
:root { --fs-bg: #0F2229; --fs-bg-glow: #163640; --fs-teal: #1A778B; --fs-red: #FF5C5C; --fs-grey: #A8A8A8; --fs-gold: #D8AE5E; }

/* Logo : trois points, « FIRST STEP » et « POS ». La taille suit font-size. */
.fsl { --fsl-ink: #ffffff; font-family: "Poppins", "Segoe UI", Arial, sans-serif; user-select: none; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.fsl.on-light { --fsl-ink: var(--ink); } /* sombre sur fond clair, clair en mode sombre */
.fsl-dots { display: flex; gap: 1.1em; width: max-content; height: 2.6em; align-items: flex-end; margin-bottom: .7em; position: relative; z-index: 2; }
.fsl-slot { position: relative; width: 1.55em; height: 1.55em; }
.fsl-dot { position: absolute; inset: 0; border-radius: 50%; transform-origin: 50% 100%; }
.fsl-slot:nth-child(1) .fsl-dot { background: var(--fs-red); }
.fsl-slot:nth-child(2) .fsl-dot { background: var(--fs-grey); }
.fsl-slot:nth-child(3) .fsl-dot { background: var(--fs-gold); }
.fsl-shadow { position: absolute; left: 10%; right: 10%; bottom: -.55em; height: .32em; border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(2px); opacity: 0; }
.fsl-name { display: flex; align-items: flex-end; font-weight: 700; line-height: .8; white-space: nowrap; }
.fsl-word { display: flex; align-items: flex-end; }
.fsl-word + .fsl-word { margin-left: .55em; }
.fsl-cap { color: var(--fs-teal); font-size: 4.6em; }
.fsl-low { color: var(--fsl-ink); font-size: 2.55em; letter-spacing: .32em; display: flex; margin-left: .18em; }
.fsl-low .ch:last-child { margin-right: -.32em; }
.fsl-tag { align-self: stretch; display: flex; justify-content: center; color: var(--fsl-ink); font-weight: 600; font-size: 2em; letter-spacing: .6em; margin-top: .9em; padding-left: .6em; }
.fsl-tag .ch:last-child { margin-right: -.6em; }
.fsl .ch { display: inline-block; }
/* Version compacte (menu) : points et nom sur une ligne */
.fsl.row { flex-direction: row; align-items: flex-end; gap: 1.2em; }
.fsl.row .fsl-dots { margin: 0 0 .1em; height: auto; gap: .5em; }
.fsl.row .fsl-slot { width: 1.3em; height: 1.3em; }
.fsl.row .fsl-tag { display: none; }

/* Écran de chargement */
html.splashing, html.splashing body { overflow: hidden; }
.splash { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, var(--fs-bg-glow) 0%, var(--fs-bg) 65%); background-color: var(--fs-bg);
  padding: env(safe-area-inset-top, 0px) 16px env(safe-area-inset-bottom, 0px); transition: opacity .45s ease; cursor: default; }
.splash.out { opacity: 0; pointer-events: none; }
.splash .fsl { font-size: clamp(9px, 2.6vw + 4px, 22px); opacity: 0; transition: opacity .5s; }
.splash .fsl.ready { opacity: 1; }
.splash .fsl-dots, .splash .fsl-dot, .splash .fsl-shadow, .splash .ch { will-change: transform, opacity; }

/* Logo dans l'application */
.brand { background: var(--fs-bg); border-bottom-color: rgba(255, 255, 255, .08); }
.brand .fsl { font-size: 5.6px; margin-bottom: 4px; }
.brand .b-sub { margin-top: 6px; }
.brand .b-txt { gap: 6px; }
.brand-mini .fsl { font-size: 5px; }
.fsl-only .fsl-dots { margin: 0; height: auto; gap: .55em; }
.fsl-only .fsl-slot { width: 1em; height: 1em; }
.w-logo { width: auto; height: auto; background: none; border-radius: 0; margin-bottom: 22px; box-shadow: none; }
.w-logo .fsl { font-size: 26px; }
.brand-mini .fsl-only { font-size: 12px; margin-right: 4px; }
.auth .brand-mini { margin-bottom: 18px; }

/* ===== En-tête du commerce : bannière + photo de profil (menu, assistant, réglages) ===== */
.brand { display: block; position: relative; padding: 0; margin: 0 -12px 8px; border-bottom: 0; background: none; font-size: inherit; }
.brand .side-close { position: absolute; top: 8px; right: 8px; z-index: 2; color: #fff; background: rgba(8, 20, 30, .45); }
.shop-head { position: relative; padding-bottom: 12px; color: #fff; }
.sh-banner { height: 92px; overflow: hidden; background: linear-gradient(135deg, var(--fs-bg) 0%, #163640 55%, var(--fs-teal) 100%); }
.sh-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-banner.empty { display: grid; place-items: center end; padding-right: 18px; }
.sh-banner.empty .fsl-only { font-size: 9px; opacity: .55; }
.sh-banner::after { content: ""; position: absolute; left: 0; right: 0; top: 52px; height: 40px; background: linear-gradient(transparent, rgba(0, 0, 0, .18)); pointer-events: none; }
.sh-photo { position: absolute; left: 14px; top: 56px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; background: var(--fs-teal); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); z-index: 1; }
.sh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-photo span { font: 700 22px/1 "Poppins", var(--font); color: #fff; letter-spacing: .02em; }
.sh-txt { display: flex; flex-direction: column; min-width: 0; padding: 8px 12px 0 88px; min-height: 40px; }
.sh-txt strong { font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-txt span { font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-brand { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 12px 8px 10px; font: 600 11px/1 "Poppins", var(--font); letter-spacing: .06em; color: var(--side-ink); opacity: .75; }
.side-brand .fsl-only { font-size: 7px; }
.side-me { margin-top: 0; }
@media (max-width: 1024px) { .side-brand { margin-top: 14px; } .brand { margin-top: calc(-1 * var(--sat)); } .sh-banner { padding-top: var(--sat); height: calc(92px + var(--sat)); } }
@media (min-width: 1025px) { .side { padding-top: 0; } }

/* Aperçu de l'en-tête (assistant, réglages) : même rendu que dans le menu */
.brand-preview { width: 260px; max-width: 100%; border-radius: 16px; overflow: hidden; background: var(--side-grad); box-shadow: var(--shadow); flex: none; }
.brand-preview .shop-head { padding-bottom: 14px; }
.brand-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.brand-row > .grow { flex: 1 1 260px; display: grid; gap: 14px; }

/* Choix d'une image */
.ipk { display: flex; gap: 14px; align-items: center; }
.ipk-prev { flex: none; display: grid; place-items: center; background: var(--field); border: 2px dashed var(--line); color: var(--muted); overflow: hidden; }
.ipk-prev.banner { width: 150px; height: 50px; border-radius: 10px; }
.ipk-prev.photo { width: 64px; height: 64px; border-radius: 50%; }
.ipk-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ipk-prev:has(img) { border-style: solid; }
.ipk-act { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ipk-act .row { margin-top: 4px; }
@media (max-width: 600px) { .ipk { align-items: flex-start; } .ipk-prev.banner { width: 105px; height: 35px; } }
.sum-imgs { display: inline-flex; align-items: center; gap: 8px; }
.sum-imgs .b { width: 84px; height: 28px; object-fit: cover; border-radius: 6px; }
.sum-imgs .p { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; }
.brand-mini .bm-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }