/* bo-shell.css : la coque generique d un back office (phone first).
   Aucun savoir client ici. Les couleurs et la police viennent de BO.init({ colors, font })
   qui pose les variables --bo-* sur <html>. Voir docs/BO-SHELL.md. */
:root {
  --bo-ink:#17362B; --bo-ink-2:#21493a; --bo-on-ink:#f6f0e6; --bo-accent:#e2b354; --bo-on-accent:#1d2b2a;
  --bo-bg:#f7f3ea; --bo-surface:#ffffff; --bo-surface-2:#f1ece0; --bo-line:#e3dacb; --bo-text:#1d2b2a; --bo-muted:#667069;
  --bo-ok:#1f7a62; --bo-ok-bg:#d9efe6; --bo-warn:#8a5d0a; --bo-warn-bg:#f6e7c4; --bo-bad:#a3322f; --bo-bad-bg:#fbe3e1; --bo-info:#26466b; --bo-info-bg:#e3ecf5;
  --bo-font:"Noto Sans Thai", Jost, system-ui, sans-serif; --bo-font-num:Jost, "Noto Sans Thai", system-ui, sans-serif;
  --bo-radius:16px; --bo-radius-lg:22px; --bo-nav-h:68px; color-scheme:light;
  /* echelle de type et de rythme (v2, 12/10) */
  --bo-fs-xs:11.5px; --bo-fs-s:13px; --bo-fs-m:15px; --bo-fs-l:18px; --bo-fs-xl:24px; --bo-fs-hero:44px;
  --bo-sp-1:4px; --bo-sp-2:8px; --bo-sp-3:12px; --bo-sp-4:16px; --bo-sp-5:24px; --bo-sp-6:32px;
  --bo-shadow-1:0 1px 2px rgba(23,40,32,.06), 0 2px 8px rgba(23,40,32,.05);
  --bo-shadow-2:0 2px 6px rgba(23,40,32,.07), 0 12px 32px rgba(23,40,32,.10);
  --bo-ease:cubic-bezier(.2,.8,.2,1);
}
html[data-theme="dark"] {
  --bo-bg:#0a1c17; --bo-surface:#12302a; --bo-surface-2:#183a33; --bo-line:#2b4b43; --bo-text:#eef4f1; --bo-muted:#a9bbb4;
  --bo-ok:#5fd0ac; --bo-ok-bg:#16463a; --bo-warn:#f0c872; --bo-warn-bg:#4a3a14; --bo-bad:#ff9d96; --bo-bad-bg:#4d1f1d; --bo-info:#a9c8ee; --bo-info-bg:#1d3552;
  --bo-ink:#0f2a22; color-scheme:dark;
  --bo-shadow-1:0 1px 2px rgba(0,0,0,.25); --bo-shadow-2:0 12px 32px rgba(0,0,0,.35);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body.bo { margin:0; background:var(--bo-bg); color:var(--bo-text); font:16px/1.5 var(--bo-font); -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 1; }
.bo [hidden] { display:none !important; }
.bo a { color:inherit; }

/* ---- haut de page ---- */
.bo-top { position:sticky; top:0; z-index:30; background:var(--bo-ink); color:var(--bo-on-ink); padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px; display:flex; align-items:center; gap:10px; }
.bo-top__logo { width:36px; height:36px; border-radius:10px; object-fit:cover; background:#fff; flex:none; }
.bo-top__txt { min-width:0; flex:1; }
.bo-top__name { margin:0; font:500 17px/1.2 var(--bo-font-num); letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bo-top__sub { display:block; font-size:12px; color:color-mix(in srgb, var(--bo-on-ink) 72%, transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bo-top__tools { display:flex; gap:6px; flex:none; }
.bo-tool { min-width:44px; min-height:44px; padding:0 10px; border-radius:12px; border:1px solid color-mix(in srgb, var(--bo-on-ink) 22%, transparent); background:transparent; color:var(--bo-on-ink); font:500 13px var(--bo-font-num); display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; }
.bo-tool svg { width:20px; height:20px; }
.bo-tool[disabled] { opacity:.5; }
.bo-spin svg { animation:bo-turn .8s linear infinite; }
@keyframes bo-turn { to { transform:rotate(360deg); } }

/* ---- page ---- */
.bo-main { max-width:1040px; margin:0 auto; padding:14px 14px calc(var(--bo-nav-h) + env(safe-area-inset-bottom,0px) + 28px); }
.bo-view { display:grid; gap:16px; }
.bo-view > * { min-width:0; }
.bo-h { margin:10px 2px 0; font:600 17px/1.3 var(--bo-font-num); color:var(--bo-text); display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.bo-h .bo-count { font:500 13px var(--bo-font-num); color:var(--bo-on-accent); background:var(--bo-accent); border-radius:999px; padding:0 9px; line-height:20px; }
.bo-sub { color:var(--bo-muted); font:400 12px/1.4 var(--bo-font-num); }
.bo-sub.block { display:block; }
.bo-help { margin:0; color:var(--bo-muted); font-size:13px; line-height:1.5; }
.bo-help .bo-sub { display:block; margin-top:2px; }
.bo-stack { display:grid; gap:10px; }
.bo-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.bo-empty { text-align:center; padding:30px 16px; color:var(--bo-muted); border:1px dashed var(--bo-line); border-radius:var(--bo-radius-lg); margin:0; display:grid; justify-items:center; gap:10px; font-size:14px; }
.bo-empty__i { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--bo-accent) 30%, var(--bo-surface)), var(--bo-surface-2)); color:var(--bo-ink); }
html[data-theme="dark"] .bo-empty__i { color:var(--bo-accent); }
.bo-empty__i svg { width:30px; height:30px; }
.bo-empty b { color:var(--bo-text); font-size:15px; }

/* ---- bas de page : la barre de navigation ---- */
.bo-nav { position:fixed; z-index:40; left:0; right:0; bottom:0; display:flex; justify-content:center; padding:0 8px calc(env(safe-area-inset-bottom,0px) + 6px); pointer-events:none; }
.bo-nav__bar { pointer-events:auto; width:100%; max-width:560px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; padding:5px; background:color-mix(in srgb, var(--bo-surface) 94%, transparent); border:1px solid var(--bo-line); border-radius:22px; box-shadow:0 12px 36px rgba(8,30,22,.22); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.bo-nav__item { position:relative; min-height:56px; border:0; border-radius:16px; background:transparent; color:var(--bo-muted); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:5px 2px; cursor:pointer; font:inherit; }
.bo-nav__item svg { width:24px; height:24px; }
.bo-nav__l1 { font-size:12px; font-weight:600; line-height:1.15; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bo-nav__l2 { font:400 10px/1.1 var(--bo-font-num); opacity:.85; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bo-nav__item[aria-current="page"] { background:var(--bo-ink); color:var(--bo-on-ink); }
html[data-theme="dark"] .bo-nav__item[aria-current="page"] { background:var(--bo-accent); color:var(--bo-on-accent); }
.bo-badge { position:absolute; top:3px; left:50%; margin-left:8px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--bo-bad); color:#fff; font:600 11px/19px var(--bo-font-num); text-align:center; border:2px solid var(--bo-surface); box-sizing:content-box; }
.bo-badge.soft { background:var(--bo-accent); color:var(--bo-on-accent); }

/* ---- composants ---- */
.bo-card { background:var(--bo-surface); border:1px solid var(--bo-line); border-radius:var(--bo-radius-lg); padding:16px; box-shadow:var(--bo-shadow-1); }
.bo-card.tone-warn { border-left:5px solid var(--bo-accent); }
.bo-card.tone-ok { border-left:5px solid var(--bo-ok); }
.bo-card.tone-bad { border-left:5px solid var(--bo-bad); }
.bo-card.dim { opacity:.7; }
.bo-btn { font:inherit; font-size:15px; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--bo-line); background:var(--bo-surface); color:var(--bo-text); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; }
.bo-btn svg { width:18px; height:18px; }
.bo-btn .bo-sub { color:inherit; opacity:.75; font-size:11px; }
.bo-btn.primary { background:var(--bo-ink); color:var(--bo-on-ink); border-color:var(--bo-ink); }
html[data-theme="dark"] .bo-btn.primary { background:var(--bo-accent); color:var(--bo-on-accent); border-color:var(--bo-accent); }
.bo-btn.ok { background:var(--bo-ok); color:#fff; border-color:var(--bo-ok); }
html[data-theme="dark"] .bo-btn.ok { color:#06231b; }
.bo-btn.danger { color:var(--bo-bad); border-color:color-mix(in srgb, var(--bo-bad) 45%, var(--bo-line)); }
.bo-btn.small { min-height:38px; padding:0 14px; font-size:14px; }
.bo-btn[disabled] { opacity:.5; cursor:progress; }
.bo-pill { display:inline-flex; align-items:center; gap:5px; font:500 12px/1 var(--bo-font); padding:5px 10px; border-radius:999px; background:var(--bo-surface-2); color:var(--bo-muted); white-space:nowrap; }
.bo-pill.ok { background:var(--bo-ok-bg); color:var(--bo-ok); }
.bo-pill.warn { background:var(--bo-warn-bg); color:var(--bo-warn); }
.bo-pill.bad { background:var(--bo-bad-bg); color:var(--bo-bad); }
.bo-pill.info { background:var(--bo-info-bg); color:var(--bo-info); }
.bo-pill.dot::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.bo-kpis { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.bo-kpi { position:relative; background:var(--bo-surface); border:1px solid var(--bo-line); border-radius:var(--bo-radius-lg); padding:14px 16px; display:grid; gap:2px; align-content:start; min-height:96px; box-shadow:var(--bo-shadow-1); text-align:left; font:inherit; color:inherit; width:100%; }
button.bo-kpi { cursor:pointer; transition:transform .15s var(--bo-ease), box-shadow .15s; }
button.bo-kpi:active { transform:scale(.97); }
.bo-kpi__i { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:var(--bo-surface-2); color:var(--bo-muted); }
.bo-kpi__i svg { width:17px; height:17px; }
.bo-kpi.tone-warn .bo-kpi__i { background:var(--bo-warn-bg); color:var(--bo-warn); } .bo-kpi.tone-bad .bo-kpi__i { background:var(--bo-bad-bg); color:var(--bo-bad); } .bo-kpi.tone-ok .bo-kpi__i { background:var(--bo-ok-bg); color:var(--bo-ok); }
.bo-kpi__l { font-size:13px; color:var(--bo-muted); line-height:1.3; padding-right:34px; }
.bo-kpi__v { font:600 30px/1.1 var(--bo-font-num); color:var(--bo-text); letter-spacing:-.01em; margin-top:4px; }
.bo-kpi__s { font-size:12px; color:var(--bo-muted); }
.bo-kpi.tone-warn .bo-kpi__v { color:var(--bo-warn); } .bo-kpi.tone-bad .bo-kpi__v { color:var(--bo-bad); } .bo-kpi.tone-ok .bo-kpi__v { color:var(--bo-ok); }
.bo-kpi.hero { background:linear-gradient(145deg,var(--bo-ink),var(--bo-ink-2)); border:0; color:var(--bo-on-ink); }
.bo-kpi.hero .bo-kpi__l, .bo-kpi.hero .bo-kpi__s { color:color-mix(in srgb, var(--bo-on-ink) 75%, transparent); } .bo-kpi.hero .bo-kpi__v { color:var(--bo-accent); }

.bo-list { display:grid; gap:10px; }
.bo-item { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; background:var(--bo-surface); border:1px solid var(--bo-line); border-radius:var(--bo-radius-lg); padding:10px 12px 10px 10px; box-shadow:var(--bo-shadow-1); transition:transform .15s var(--bo-ease), box-shadow .15s; overflow:hidden; }
.bo-item::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0; background:transparent; }
.bo-item:active { transform:scale(.985); }
@media (hover:hover) { .bo-item:hover, button.bo-kpi:hover { box-shadow:var(--bo-shadow-2); } }
.bo-item.tone-warn::before { background:var(--bo-accent); } .bo-item.tone-ok::before { background:var(--bo-ok); } .bo-item.tone-bad::before { background:var(--bo-bad); }
.bo-item.dim { opacity:.68; }
.bo-thumb { width:64px; height:64px; border-radius:14px; object-fit:cover; background:var(--bo-surface-2); display:block; }
.bo-thumb.lg { width:84px; height:84px; }
.bo-item__body { min-width:0; display:grid; gap:3px; }
.bo-item__title { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.bo-item__big { font:600 16.5px/1.25 var(--bo-font); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bo-item__amt { font:600 17px/1.2 var(--bo-font-num); white-space:nowrap; }
.bo-item__meta { font-size:13.5px; color:var(--bo-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bo-item__pills { display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }

.bo-seg { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; padding:4px; background:var(--bo-surface-2); border-radius:14px; }
.bo-seg button { min-height:42px; border:0; border-radius:10px; background:transparent; color:var(--bo-muted); font:500 13px var(--bo-font); cursor:pointer; padding:2px 4px; }
.bo-seg button[aria-pressed="true"] { background:var(--bo-surface); color:var(--bo-text); box-shadow:0 1px 4px rgba(0,0,0,.14); }
.bo-chips { display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:none; }
.bo-chips::-webkit-scrollbar { display:none; }
.bo-chip { flex:none; min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--bo-line); background:var(--bo-surface); color:var(--bo-text); font:500 14px var(--bo-font); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.bo-chip[aria-pressed="true"] { background:var(--bo-ink); color:var(--bo-on-ink); border-color:var(--bo-ink); }
html[data-theme="dark"] .bo-chip[aria-pressed="true"] { background:var(--bo-accent); color:var(--bo-on-accent); border-color:var(--bo-accent); }
.bo-chip b { font:600 12px var(--bo-font-num); opacity:.8; }

.bo input, .bo select, .bo textarea { font:inherit; font-size:16px; width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--bo-line); border-radius:12px; background:var(--bo-surface); color:var(--bo-text); }
.bo textarea { min-height:70px; }
.bo input[type=checkbox] { width:22px; min-height:22px; height:22px; }
.bo label { display:grid; gap:4px; font-size:14px; color:var(--bo-muted); }
.bo-form { display:grid; gap:12px; }
.bo-grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.bo-search { position:relative; }
.bo-search svg { position:absolute; left:12px; top:13px; width:20px; height:20px; color:var(--bo-muted); }
.bo-search input { padding-left:40px; }

.bo-alert { padding:12px 14px; border-radius:14px; background:var(--bo-bad-bg); color:var(--bo-bad); display:grid; gap:4px; font-size:14px; }
.bo-alert code { word-break:break-all; background:var(--bo-surface); color:var(--bo-text); padding:2px 6px; border-radius:6px; }
.bo-okbar { padding:10px 14px; border-radius:14px; background:var(--bo-ok-bg); color:var(--bo-ok); font-size:14px; }
.bo-note { padding:10px 14px; border-radius:12px; background:var(--bo-warn-bg); color:var(--bo-warn); font-size:14px; }
.bo-note.err { background:var(--bo-bad-bg); color:var(--bo-bad); }

/* ---- feuille du bas (sheet) et toast ---- */
.bo-sheet { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; background:rgba(5,20,14,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:bo-fade .2s ease-out; }
@keyframes bo-fade { from { opacity:0; } }
.bo-sheet__panel { width:100%; max-width:640px; max-height:92vh; max-height:92dvh; overflow:auto; overscroll-behavior:contain; background:var(--bo-bg); border-radius:26px 26px 0 0; padding:0 16px calc(env(safe-area-inset-bottom,0px) + 22px); animation:bo-up .32s var(--bo-ease); box-shadow:0 -10px 40px rgba(0,0,0,.25); transition:transform .25s var(--bo-ease); }
@keyframes bo-up { from { transform:translateY(60%); } }
.bo-sheet__grab { display:block; width:42px; height:5px; border-radius:99px; background:var(--bo-line); margin:8px auto 0; }
.bo-sheet__bar { display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; top:0; background:var(--bo-bg); padding:4px 0 10px; z-index:2; touch-action:none; }
.bo-sheet__bar .bo-btn { width:38px; padding:0; border-radius:50%; background:var(--bo-surface-2); border:0; }
.bo-sheet__bar h2 { margin:0; font:600 18px/1.3 var(--bo-font-num); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bo-sheet__body { display:grid; gap:14px; }
.bo-toast { position:fixed; z-index:80; left:12px; right:12px; bottom:calc(var(--bo-nav-h) + env(safe-area-inset-bottom,0px) + 22px); max-width:520px; margin:0 auto; padding:12px 16px 12px 12px; border-radius:16px; background:var(--bo-ink); color:var(--bo-on-ink); box-shadow:0 14px 40px rgba(0,0,0,.32); font-size:15px; display:flex; gap:10px; align-items:center; animation:bo-toast .3s var(--bo-ease); }
.bo-toast::before { content:""; flex:none; width:26px; height:26px; border-radius:50%; background:var(--bo-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2b2a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/16px no-repeat; }
.bo-toast.err::before { background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3322f' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center/16px no-repeat; }
@keyframes bo-toast { from { transform:translateY(16px) scale(.96); opacity:0; } }
.bo-toast.err { background:var(--bo-bad); color:#fff; }

/* ---- porte (code d acces) ---- */
.bo-gate { max-width:460px; margin:8vh auto 0; display:grid; gap:14px; }
.bo-gate h2 { margin:0; font:600 20px/1.3 var(--bo-font); }

/* ---- desktop ---- */
@media (min-width:900px) {
  .bo-main { padding-top:22px; }
  .bo-list.cols2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bo-sheet { align-items:center; } .bo-sheet__panel { border-radius:24px; }
}
@media (min-width:560px) { .bo-kpis.cols4 { grid-template-columns:repeat(4,minmax(0,1fr)); } }


/* ---- genre de reservation (kind): pastille et filtre segmente ---- */
.bo-kind { display:inline-flex; align-items:center; gap:5px; font:600 12px/1 var(--bo-font); padding:5px 10px 5px 8px; border-radius:999px; white-space:nowrap;
  color:color-mix(in srgb, var(--k,var(--bo-muted)) 72%, var(--bo-text)); background:color-mix(in srgb, var(--k,var(--bo-muted)) 15%, var(--bo-surface)); border:1px solid color-mix(in srgb, var(--k,var(--bo-muted)) 38%, transparent); }
.bo-kind svg { width:14px; height:14px; flex:none; color:var(--k,var(--bo-muted)); }
.bo-kind.small { padding:3px 7px 3px 6px; font-size:11px; } .bo-kind.small svg { width:12px; height:12px; }
.bo-kseg button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:48px; font-size:12.5px; line-height:1.15; }
.bo-kseg button b { font:600 14px/1 var(--bo-font-num); color:var(--bo-muted); }
.bo-kseg button[aria-pressed="true"] b { color:var(--bo-text); }
.bo-kseg button[style] { border-bottom:3px solid transparent; }
.bo-kseg button[style][aria-pressed="true"] { border-bottom-color:var(--k); }

/* ---- hors ligne, installation (app installable) ---- */
.bo-offline { padding:8px 14px; text-align:center; font:500 13px/1.3 var(--bo-font); background:var(--bo-warn-bg); color:var(--bo-warn); border-bottom:1px solid var(--bo-line); }
.bo-install { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:14px; background:var(--bo-info-bg); color:var(--bo-info); font-size:14px; }
.bo-install__t { display:grid; gap:2px; min-width:0; }
.bo-install__t span { font-size:13px; }
.bo-install__a { display:flex; gap:6px; flex:none; align-items:center; }
.bo-inline { width:1.1em; height:1.1em; vertical-align:-.18em; }

/* ==== v2 (12/10): le niveau de la console EPS ====
   en-tete de vue, carte heros avec gros chiffre et barres, listes groupees,
   boutons icones, frise d etats, rails de cartes photo, squelettes,
   transitions de vue, tirer pour rafraichir. Aucun savoir client. */
.bo-top { box-shadow:0 1px 0 color-mix(in srgb, var(--bo-on-ink) 8%, transparent); }
.bo-top__logo { border-radius:12px; box-shadow:0 0 0 1px color-mix(in srgb, var(--bo-on-ink) 18%, transparent); }
.bo-top__name { font-weight:600; letter-spacing:.01em; }
.bo-nav__item { transition:background .2s, color .2s; }
.bo-nav__item svg { transition:transform .2s var(--bo-ease); }
.bo-nav__item[aria-current="page"] svg { transform:translateY(-1px) scale(1.06); }
.bo-nav__item[aria-current="page"]::after { content:""; position:absolute; bottom:5px; width:5px; height:5px; border-radius:50%; background:var(--bo-accent); }
html[data-theme="dark"] .bo-nav__item[aria-current="page"]::after { background:var(--bo-on-accent); }
.bo-nav__item[aria-current="page"] .bo-nav__l1 { margin-bottom:6px; }
.bo-view.bo-enter > * { animation:bo-in .34s var(--bo-ease) both; }
.bo-view.bo-enter > *:nth-child(2) { animation-delay:.03s; } .bo-view.bo-enter > *:nth-child(3) { animation-delay:.06s; } .bo-view.bo-enter > *:nth-child(4) { animation-delay:.09s; } .bo-view.bo-enter > *:nth-child(n+5) { animation-delay:.12s; }
@keyframes bo-in { from { opacity:0; transform:translateY(8px); } }

/* en-tete d une vue: grand titre + sous-titre + action */
.bo-ph { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:4px 2px 0; }
.bo-ph h1 { margin:0; font:600 var(--bo-fs-xl)/1.15 var(--bo-font-num); letter-spacing:-.01em; }
.bo-ph p { margin:4px 0 0; color:var(--bo-muted); font-size:14px; line-height:1.4; }
.bo-ph__a { flex:none; display:flex; gap:8px; }

/* carte heros: le chiffre du jour */
.bo-hero { position:relative; overflow:hidden; border-radius:26px; padding:20px 20px 18px; color:var(--bo-on-ink); background:linear-gradient(150deg, var(--bo-ink) 0%, var(--bo-ink-2) 100%); box-shadow:var(--bo-shadow-2); isolation:isolate; }
.bo-hero__img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; opacity:.34; }
.bo-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(160deg, color-mix(in srgb, var(--bo-ink) 55%, transparent) 0%, color-mix(in srgb, var(--bo-ink) 92%, transparent) 70%); }
.bo-hero__eyebrow { font:500 12.5px/1.2 var(--bo-font-num); letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb, var(--bo-on-ink) 70%, transparent); }
.bo-hero__title { margin:6px 0 0; font:600 22px/1.2 var(--bo-font-num); }
.bo-hero__row { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:14px; }
.bo-hero__v { font:600 var(--bo-fs-hero)/1 var(--bo-font-num); color:var(--bo-accent); letter-spacing:-.02em; white-space:nowrap; }
.bo-hero__vs { display:block; margin-top:6px; font-size:13px; color:color-mix(in srgb, var(--bo-on-ink) 75%, transparent); }
.bo-hero__bars { display:flex; align-items:flex-end; gap:5px; height:58px; flex:none; }
.bo-hero__bars i { display:block; width:9px; min-height:3px; border-radius:4px 4px 2px 2px; background:color-mix(in srgb, var(--bo-accent) 55%, transparent); }
.bo-hero__bars i.hl { background:var(--bo-accent); box-shadow:0 0 12px color-mix(in srgb, var(--bo-accent) 60%, transparent); }
.bo-hero__foot { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:16px; padding-top:12px; border-top:1px solid color-mix(in srgb, var(--bo-on-ink) 14%, transparent); font-size:13px; color:color-mix(in srgb, var(--bo-on-ink) 80%, transparent); }
.bo-hero__foot b { color:var(--bo-on-ink); font:600 14px var(--bo-font-num); }

/* liste groupee (lignes avec separateurs, comme une app native) */
.bo-group { background:var(--bo-surface); border:1px solid var(--bo-line); border-radius:var(--bo-radius-lg); box-shadow:var(--bo-shadow-1); overflow:hidden; }
.bo-row-i { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; width:100%; min-height:58px; padding:11px 14px; background:transparent; border:0; border-top:1px solid var(--bo-line); text-align:left; font:inherit; color:inherit; text-decoration:none; }
.bo-group > .bo-row-i:first-child { border-top:0; }
button.bo-row-i, a.bo-row-i { cursor:pointer; } button.bo-row-i:active, a.bo-row-i:active { background:var(--bo-surface-2); }
.bo-row-i__ic { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:var(--k, var(--bo-ink)); background:color-mix(in srgb, var(--k, var(--bo-ink)) 12%, var(--bo-surface)); }
html[data-theme="dark"] .bo-row-i__ic { color:var(--k, var(--bo-accent)); background:color-mix(in srgb, var(--k, var(--bo-accent)) 16%, var(--bo-surface)); }
.bo-row-i__ic svg { width:19px; height:19px; }
.bo-row-i__t { min-width:0; display:grid; gap:1px; }
.bo-row-i__t b { font-weight:600; font-size:15px; line-height:1.3; }
.bo-row-i__t span { color:var(--bo-muted); font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.bo-row-i__r { text-align:right; font:600 15px var(--bo-font-num); display:flex; align-items:center; gap:6px; color:var(--bo-text); }
.bo-row-i__r small { display:block; font:400 12px var(--bo-font); color:var(--bo-muted); }
.bo-chev { width:18px; height:18px; color:var(--bo-muted); opacity:.7; }

/* boutons icones ronds (appeler, ecrire, copier) */
.bo-ibtns { display:flex; gap:10px; flex-wrap:wrap; }
.bo-ibtn { display:grid; justify-items:center; gap:5px; min-width:58px; text-decoration:none; color:var(--bo-text); font:500 11.5px/1.1 var(--bo-font); background:none; border:0; padding:0; cursor:pointer; }
.bo-ibtn i { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:var(--bo-surface); border:1px solid var(--bo-line); box-shadow:var(--bo-shadow-1); color:var(--k, var(--bo-ink)); transition:transform .15s var(--bo-ease); }
html[data-theme="dark"] .bo-ibtn i { color:var(--k, var(--bo-accent)); }
.bo-ibtn:active i { transform:scale(.92); }
.bo-ibtn svg { width:21px; height:21px; }
.bo-ibtn.sm { min-width:0; } .bo-ibtn.sm i { width:40px; height:40px; border-radius:13px; } .bo-ibtn.sm svg { width:18px; height:18px; }

/* frise d etats (demande, paiement, confirmation, jour J) */
.bo-tl { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.bo-tl li { position:relative; display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; padding:0 0 16px; }
.bo-tl li:last-child { padding-bottom:0; }
.bo-tl li::before { content:""; position:absolute; left:10px; top:22px; bottom:0; width:2px; background:var(--bo-line); }
.bo-tl li:last-child::before { display:none; }
.bo-tl li.done::before { background:var(--bo-ok); }
.bo-tl__d { width:22px; height:22px; border-radius:50%; border:2px solid var(--bo-line); background:var(--bo-surface); display:grid; place-items:center; z-index:1; }
.bo-tl__d svg { width:13px; height:13px; }
.bo-tl li.done .bo-tl__d { background:var(--bo-ok); border-color:var(--bo-ok); color:#fff; }
.bo-tl li.now .bo-tl__d { border-color:var(--bo-accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--bo-accent) 25%, transparent); }
.bo-tl li.now .bo-tl__d::after { content:""; width:8px; height:8px; border-radius:50%; background:var(--bo-accent); }
.bo-tl li.bad .bo-tl__d { background:var(--bo-bad); border-color:var(--bo-bad); color:#fff; }
.bo-tl__t { display:grid; gap:1px; padding-top:1px; }
.bo-tl__t b { font-size:14.5px; font-weight:600; } .bo-tl__t span { font-size:12.5px; color:var(--bo-muted); }
.bo-tl li.todo .bo-tl__t b { color:var(--bo-muted); font-weight:500; }

/* rail de cartes photo (defilement horizontal) */
.bo-rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px, 68%); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 8px; margin:0 -14px; padding-left:14px; padding-right:14px; scrollbar-width:none; }
.bo-rail::-webkit-scrollbar { display:none; }
@media (min-width:700px) { .bo-rail { grid-auto-columns:minmax(240px, 300px); margin:0; padding-left:2px; } }
.bo-pcard { scroll-snap-align:start; position:relative; display:block; overflow:hidden; border-radius:22px; min-height:178px; color:#fff; text-align:left; border:0; padding:0; cursor:pointer; font:inherit; background:var(--bo-ink); box-shadow:var(--bo-shadow-2); isolation:isolate; }
.bo-pcard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .5s var(--bo-ease); }
.bo-pcard:active img { transform:scale(1.04); }
.bo-pcard::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(5,20,14,.05) 20%, rgba(5,20,14,.82) 100%); }
.bo-pcard__tag { position:absolute; top:12px; left:12px; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.92); color:#17362B; font:600 12.5px/1 var(--bo-font-num); }
.bo-pcard__body { position:absolute; left:14px; right:14px; bottom:12px; display:grid; gap:2px; }
.bo-pcard__body b { font:600 18px/1.2 var(--bo-font-num); text-shadow:0 1px 8px rgba(0,0,0,.35); }
.bo-pcard__body span { font-size:13px; opacity:.9; }

/* squelettes pendant la premiere lecture */
.bo-skel { display:grid; gap:14px; }
.bo-skel i { display:block; border-radius:18px; background:linear-gradient(90deg, var(--bo-surface-2) 0%, color-mix(in srgb, var(--bo-surface) 70%, var(--bo-surface-2)) 50%, var(--bo-surface-2) 100%); background-size:220% 100%; animation:bo-shim 1.2s linear infinite; }
.bo-skel .h { height:170px; border-radius:26px; } .bo-skel .k { height:96px; } .bo-skel .r { height:88px; }
.bo-skel__2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@keyframes bo-shim { to { background-position:-120% 0; } }

/* tirer pour rafraichir */
.bo-ptr { position:fixed; left:50%; top:calc(var(--bo-ptr-top, 70px)); z-index:35; width:40px; height:40px; margin-left:-20px; border-radius:50%; background:var(--bo-surface); box-shadow:var(--bo-shadow-2); display:grid; place-items:center; color:var(--bo-ink); opacity:0; transform:translateY(-30px); pointer-events:none; }
html[data-theme="dark"] .bo-ptr { color:var(--bo-accent); }
.bo-ptr svg { width:20px; height:20px; }
.bo-ptr.go svg { animation:bo-turn .8s linear infinite; }

/* en-tete photo d une feuille */
.bo-shero { position:relative; margin:0 -16px; height:190px; overflow:hidden; isolation:isolate; color:#fff; }
.bo-shero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.bo-shero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(5,20,14,0) 30%, rgba(5,20,14,.85) 100%); }
.bo-shero__b { position:absolute; left:16px; right:16px; bottom:14px; display:grid; gap:3px; }
.bo-shero__b b { font:600 22px/1.15 var(--bo-font-num); }
.bo-shero__b span { font-size:14px; opacity:.9; }
.bo-shero__p { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.bo-shero .bo-pill { background:rgba(255,255,255,.92); }

.bo-btn { transition:transform .12s var(--bo-ease), background .2s, box-shadow .2s; font-weight:500; }
.bo-btn:active { transform:scale(.96); }
.bo-btn.primary, .bo-btn.ok { box-shadow:0 4px 14px color-mix(in srgb, var(--bo-ink) 25%, transparent); }
.bo-btn.grow { flex:1 1 auto; }
.bo-seg { border-radius:16px; } .bo-seg button { border-radius:12px; transition:background .2s, color .2s; }
.bo-pill { font-weight:600; }
.bo input:focus, .bo select:focus, .bo textarea:focus { outline:none; border-color:var(--bo-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--bo-accent) 28%, transparent); }
.bo-search input { border-radius:16px; background:var(--bo-surface); box-shadow:var(--bo-shadow-1); }
.bo-day-h { grid-column:1 / -1; position:sticky; top:var(--bo-top-h, 64px); z-index:4; margin:8px 0 -2px; padding:6px 4px; background:var(--bo-bg); font:600 13px/1.2 var(--bo-font-num); color:var(--bo-muted); letter-spacing:.04em; text-transform:uppercase; display:flex; justify-content:space-between; }
.bo-day-h:first-child { margin-top:0; }
@media (prefers-reduced-motion:reduce) { .bo-sheet, .bo-sheet__panel, .bo-spin svg, .bo-view.bo-enter > *, .bo-toast, .bo-skel i { animation:none !important; } }
/* une tuile seule en fin de grille a deux colonnes prend toute la largeur */
.bo-kpis > :last-child:nth-child(odd) { grid-column:1 / -1; }
@media (min-width:560px) { .bo-kpis.cols4 > :last-child:nth-child(odd) { grid-column:auto; } }
@media (min-width:900px) { .bo-kpis.cols4:has(> :nth-child(5):last-child) { grid-template-columns:repeat(5,minmax(0,1fr)); } }

/* ---- le stock (generique, 12/10): ligne d article, +/- , historique ---- */
.bo-stks { display:grid; gap:10px; }
.bo-stk { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 10px 10px 10px; background:var(--bo-surface); border:1px solid var(--bo-line); border-radius:var(--bo-radius-lg); box-shadow:var(--bo-shadow-1); }
.bo-stk.low { border-left:5px solid var(--bo-accent); }
.bo-stk.off { opacity:.55; }
.bo-stk__main { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center; min-width:0; background:transparent; border:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.bo-stk__img { width:52px; height:52px; border-radius:14px; object-fit:cover; background:var(--bo-surface-2); display:grid; place-items:center; color:var(--bo-muted); }
.bo-stk__ph svg { width:24px; height:24px; }
.bo-stk__t { display:grid; gap:4px; min-width:0; justify-items:start; }
.bo-stk__t b { font-weight:600; font-size:var(--bo-fs-m); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.bo-stk__min { font-size:var(--bo-fs-xs); color:var(--bo-muted); }
.bo-stk__q { display:grid; justify-items:end; line-height:1; }
.bo-stk__q b { font:500 30px/1 var(--bo-font-num); letter-spacing:-.01em; }
.bo-stk.low .bo-stk__q b { color:var(--bo-warn); }
.bo-stk__q small { font-size:var(--bo-fs-xs); color:var(--bo-muted); margin-top:4px; }
.bo-stk__pm { display:flex; gap:6px; }
.bo-stk__b { width:44px; height:44px; border-radius:999px; border:1px solid var(--bo-line); background:var(--bo-surface-2); color:var(--bo-text); display:grid; place-items:center; cursor:pointer; }
.bo-stk__b svg { width:20px; height:20px; }
.bo-stk__b.plus { background:var(--bo-ink); color:var(--bo-on-ink); border-color:var(--bo-ink); }
.bo-stk__b:active { transform:scale(.94); }
.bo-stkh { grid-template-columns:64px minmax(0,1fr) auto; }
.bo-stkh__d { font:500 18px/1 var(--bo-font-num); text-align:center; }
.bo-stkh__d.up { color:var(--bo-ok); } .bo-stkh__d.down { color:var(--bo-bad); }
.bo-stepper { display:grid; grid-template-columns:56px minmax(0,1fr) 56px; gap:10px; align-items:center; }
.bo-stepper input { text-align:center; font:500 30px/1 var(--bo-font-num); min-height:56px; }
.bo-stepper .bo-stk__b { width:56px; height:56px; }