:root { --brand:#0f5c4d; --brand-2:#e9a23b; --side:#0d2b26; }
body { font-family: 'Inter', 'Cairo', system-ui, sans-serif; background:#f4f6f5; }
body.rtl { font-family: 'Cairo', 'Inter', system-ui, sans-serif; }
/* les champs arabes s'affichent avec la police Cairo, même en interface française */
[lang=ar], .ar, input[dir=rtl], textarea[dir=rtl] { font-family: 'Cairo', sans-serif; }
.sidebar { width:240px; min-height:100vh; background:var(--side); color:#cfe3de; flex-shrink:0; }
.sidebar .brand { padding:1.1rem 1.25rem; font-weight:700; font-size:1.2rem; color:#fff; }
.sidebar .brand i { color:var(--brand-2); }
.sidebar .nav-link { color:#cfe3de; padding:.6rem 1.25rem; border-inline-start:3px solid transparent; }
.sidebar .nav-link i { margin-inline-end:.5rem; }
.sidebar .nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.sidebar .nav-link.active { background:rgba(255,255,255,.1); color:#fff; border-inline-start-color:var(--brand-2); }
.topbar { background:#fff; border-bottom:1px solid #e3e8e6; padding:.6rem 1rem; display:flex; align-items:center; gap:.5rem; position:sticky; top:0; z-index:10; }
.min-vw-0 { min-width:0; }
.card { border:0; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.kpi .val { font-size:1.5rem; font-weight:700; }
.kpi .ico { width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font-size:1.3rem; }
.btn-primary { --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:#0b4a3e; --bs-btn-hover-border-color:#0b4a3e; }
.btn-outline-primary { --bs-btn-color:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:var(--brand); --bs-btn-hover-border-color:var(--brand); --bs-btn-active-bg:var(--brand); }
.table td, .table th { vertical-align:middle; }
.num { text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap; }
.badge-sage { background:#e7f0ff; color:#1d4ed8; }
.badge-app { background:#e8f6f1; color:var(--brand); }
.lines-table input { min-width:70px; }
.lines-table .label-col { min-width:240px; }
.suggest { position:absolute; z-index:50; background:#fff; border:1px solid #ddd; border-radius:6px; max-height:260px; overflow:auto; width:100%; box-shadow:0 6px 16px rgba(0,0,0,.1); }
.suggest div { padding:.4rem .6rem; cursor:pointer; }
.suggest div:hover { background:#f1f5f4; }
@media (max-width: 991px) {
  .sidebar { position:fixed; inset-inline-start:-260px; top:0; z-index:100; transition:inset-inline-start .2s; }
  .sidebar.open { inset-inline-start:0; }
}
@media print { body { background:#fff; } main { padding:0 !important; } }

/* ===== v3 ===== */
.sidebar { overflow-y:auto; max-height:100vh; position:sticky; top:0; }
.sidebar .nav-group { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:#7fa59c; padding:.9rem 1.25rem .25rem; }
.sidebar .nav-link { display:flex; align-items:center; gap:.1rem; font-size:.9rem; padding:.45rem 1.25rem; }
.sidebar .brand img { vertical-align:middle; }
.avatar { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#0f5c4d; color:#fff; font-size:.75rem; }
.urgent-fab { position:fixed; bottom:18px; inset-inline-end:18px; z-index:1040; width:46px; height:46px; border-radius:50%; border:0; background:#dc3545; color:#fff; box-shadow:0 6px 18px rgba(220,53,69,.4); }
.call-box { position:fixed; top:70px; inset-inline-end:18px; z-index:2000; width:320px; background:#0d2b26; color:#fff; border-radius:14px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.call-box video { width:100%; border-radius:8px; background:#000; }
.nav-tabs .nav-link { white-space:nowrap; }
.nav-tabs { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; }
.sig-pad { border:2px dashed #bbb; border-radius:8px; width:100%; height:160px; touch-action:none; background:#fff; cursor:crosshair; }
.prod-thumb { width:40px; height:40px; object-fit:cover; border-radius:6px; background:#f1f5f4; }
.pos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.6rem; }
.pos-item { border:1px solid #e3e8e6; border-radius:10px; background:#fff; padding:.5rem; cursor:pointer; text-align:center; font-size:.85rem; }
.pos-item:hover { border-color:#0f5c4d; }
.pos-item img { width:100%; height:80px; object-fit:cover; border-radius:6px; background:#f1f5f4; }
.table-sm td, .table-sm th { font-size:.875rem; }
.cursor-pointer { cursor:pointer; }
.qr canvas, .qr img { max-width:100%; }
.tree ul { list-style:none; padding-inline-start:1.2rem; }
.stat-pill { font-size:.75rem; padding:.15rem .5rem; border-radius:999px; background:#f1f5f4; }
.line-editor .suggest { min-width:320px; }
@media (max-width: 991px) {
  .sidebar { position:fixed; inset-inline-start:-270px; top:0; z-index:1050; height:100vh; width:260px; transition:inset-inline-start .2s; }
  body.nav-open .sidebar { inset-inline-start:0; }
  body.nav-open .sidebar-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1049; }
}
@media print { .urgent-fab, .call-box { display:none !important; } }
.scan-thumb{width:56px;height:40px;object-fit:cover;border-radius:6px;border:1px solid #ddd;vertical-align:middle}

/* ===================== Catalogue tactile (mobile / tablette) ===================== */
body.tc-lock{overflow:hidden}
.tc-overlay{position:fixed;inset:0;z-index:1070;background:#f3f5f4;display:none;flex-direction:column;height:100dvh;width:100vw;max-width:100vw;right:auto}
.tc-head,.tc-cats,.tc-sub,.tc-foot{flex:0 0 auto}
.tc-overlay.show{display:flex}
.tc-head{display:flex;gap:.5rem;align-items:center;padding:.6rem .75rem;background:#0f5c4d;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.tc-head .btn{min-width:46px;height:46px;font-size:1.2rem}
.tc-head .form-control,.tc-head .input-group-text{height:46px;font-size:1rem}
.tc-cats{display:flex;gap:.6rem;overflow-x:auto;padding:.7rem .75rem .4rem;background:#fff;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tc-cat{flex:0 0 auto;width:92px;border:2px solid transparent;border-radius:14px;background:#f6f7f6;padding:.4rem .3rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;position:relative}
.tc-cat.active{border-color:#0f5c4d;background:#e5f2ee}
.tc-cat-img{width:60px;height:60px;border-radius:12px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem}
.tc-cat-img img{width:100%;height:100%;object-fit:cover}
.tc-cat-name{font-size:.75rem;font-weight:600;line-height:1.1;text-align:center;max-height:2.2em;overflow:hidden}
.tc-cat-n{position:absolute;top:2px;inset-inline-end:4px;font-size:.65rem;background:#0f5c4d;color:#fff;border-radius:10px;padding:0 .35rem}
.tc-sub{display:flex;gap:.4rem;overflow-x:auto;padding:0 .75rem .5rem;background:#fff;border-bottom:1px solid #e3e6e4}
.tc-sub:empty{display:none}
.tc-sub .btn{white-space:nowrap;border-radius:20px}
.tc-sub img{width:20px;height:20px;border-radius:4px;object-fit:cover}
.tc-grid{flex:1 1 auto;min-height:0;overflow-y:auto;padding:.75rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:.75rem;align-content:start;grid-auto-rows:max-content;-webkit-overflow-scrolling:touch}
@media (min-width:768px){.tc-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
.tc-card{background:#fff;border-radius:14px;min-height:max-content;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.08);border:2px solid transparent;transition:border-color .15s}
.tc-card.sel{border-color:#198754}
.tc-card.out{opacity:.6}
.tc-img{position:relative;aspect-ratio:4/3;border-radius:12px 12px 0 0;overflow:hidden;background:#f1f3f2;display:flex;align-items:center;justify-content:center;cursor:pointer}
.tc-img img{width:100%;height:100%;object-fit:contain}
.tc-ph{font-size:2rem;font-weight:700;color:#9aa8a3}
.tc-promo{position:absolute;top:6px;inset-inline-start:6px;background:#dc3545;color:#fff;font-size:.7rem;font-weight:700;border-radius:8px;padding:.1rem .4rem}
.tc-stock{position:absolute;bottom:6px;inset-inline-start:6px;color:#fff;font-size:.7rem;font-weight:600;border-radius:8px;padding:.1rem .4rem}
.tc-qbadge{position:absolute;top:6px;inset-inline-end:6px;background:#198754;color:#fff;font-weight:700;min-width:28px;height:28px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:.85rem;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.tc-body{padding:.45rem .55rem .2rem;flex:1}
.tc-name{font-weight:600;font-size:.88rem;line-height:1.15;max-height:2.3em;overflow:hidden}
.tc-name-ar{font-family:Cairo,system-ui,sans-serif;font-size:.85rem;color:#555;line-height:1.2}
.tc-ref{font-size:.72rem;color:#888}
.tc-bc{display:block;width:100%;max-width:170px;height:30px;margin-top:.2rem}
.tc-bc-txt{display:none;font-size:.65rem;letter-spacing:.08em;color:#444;font-family:monospace}
.tc-bc-txt.show{display:block}
.tc-price{font-weight:700;color:#0f5c4d;font-size:1.05rem;margin-top:.15rem}
.tc-price small{font-size:.65rem;font-weight:500}
.tc-ht{font-size:.7rem;color:#777}
.tc-step{display:flex;gap:.3rem;padding:.45rem .55rem .55rem}
.tc-step .btn{width:44px;height:44px;font-size:1.35rem;font-weight:700;padding:0;border-radius:10px;flex:0 0 auto}
.tc-step .tc-qty{height:44px;text-align:center;font-weight:700;font-size:1.05rem;padding:0;border-radius:10px}
.tc-foot{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));background:#0f5c4d;color:#fff}
.tc-camwrap{position:absolute;inset:0;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;padding:1rem}
.tc-cambox{position:relative;width:min(92vw,520px);border-radius:14px;overflow:hidden;background:#000}
.tc-cambox video{width:100%;display:block}
.tc-laser{position:absolute;left:8%;right:8%;top:50%;height:2px;background:#ff3b3b;box-shadow:0 0 8px #ff3b3b;pointer-events:none}
.tc-toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:#198754;color:#fff;padding:.55rem 1rem;border-radius:22px;font-weight:600;opacity:0;transition:.2s;pointer-events:none;z-index:6;max-width:90vw;text-align:center}
.tc-toast.warn{background:#dc3545}
.tc-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.tc-floatbar{position:fixed;inset-inline-start:.6rem;inset-inline-end:4.9rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:1030}
.tc-floatbar .btn{height:54px;border-radius:27px;font-size:1rem;box-shadow:0 4px 14px rgba(15,92,77,.35);white-space:nowrap}
.tc-floatbar .tc-fb-cat{border:2px solid #0f5c4d;color:#0f5c4d;background:#fff;min-width:0}
.tc-floatbar .tc-fb-save{font-weight:700;padding-inline:1rem}
@media (max-width:991.98px){body:has(.tc-floatbar) main,body:has(.tc-floatbar) .content{padding-bottom:80px}}

/* ===== Lignes de document en cartes sur téléphone ===== */
@media (max-width:767.98px){
  table.line-editor thead{display:none}
  table.line-editor,table.line-editor tbody{display:block;width:100%}
  table.line-editor tr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.35rem .5rem;padding:.6rem;margin-bottom:.6rem;border:1px solid #dee2e6;border-radius:12px;background:#fff;position:relative}
  table.line-editor tr.table-success{background:#e9f7ef}
  table.line-editor td{display:block;border:0;padding:0;min-width:0}
  table.line-editor td.label-col{grid-column:1/-1;padding-inline-end:2.2rem}
  table.line-editor td:last-child{position:absolute;top:.35rem;inset-inline-end:.25rem}
  table.line-editor td input,table.line-editor td select,table.line-editor .input-group{width:100%!important;min-width:0!important}
  table.line-editor td .form-control-sm,table.line-editor td .form-select-sm{height:40px;font-size:.95rem}
  table.line-editor td.lt{grid-column:1/-1;text-align:end;font-weight:700}
  table.line-editor td.lt::before{content:"= ";color:#888}
  table.line-editor td[data-l]::before{content:attr(data-l);display:block;font-size:.7rem;color:#6c757d;margin-bottom:.1rem}
  table.line-editor td.lt[data-l]::before{display:inline;content:"= "}
  table.line-editor .input-group{flex-wrap:nowrap}
  .lines-table + *{margin-top:0}
}
.tc-units{display:flex;flex-wrap:wrap;gap:.3rem;padding:0 .55rem .1rem}
.tc-units .btn{padding:.2rem .5rem;border-radius:16px;font-size:.78rem;font-weight:600;min-height:32px}
.tc-units .btn small{font-weight:400;opacity:.85}
.tc-qbadge{width:auto;padding:0 .45rem;white-space:nowrap;font-size:.78rem}
/* actions rapides tableau de bord */
.qa-btn{transition:transform .1s, filter .15s}
.qa-btn:hover,.qa-btn:focus{filter:brightness(1.08);color:#fff}
.qa-btn:active{transform:scale(.97)}

/* ===================== Téléphone & tablette ===================== */
.min-w-0{min-width:0}
.kpi .min-w-0{flex:1 1 auto}
.kpi .val{overflow-wrap:anywhere;line-height:1.15}
.kpi .text-truncate{white-space:normal;overflow:visible}
/* onglets : défilement horizontal au doigt au lieu d'élargir la page */
.nav-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tabs .nav-link{white-space:nowrap}
/* onglets « pastilles » (livreur…) */
.seg-tabs{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.seg-tabs::-webkit-scrollbar{display:none}
.seg-tab{flex:0 0 auto;display:flex;align-items:center;gap:.4rem;padding:.6rem 1rem;border-radius:999px;background:#fff;border:1.5px solid #d6dfdc;color:#244;text-decoration:none;font-weight:600;white-space:nowrap}
.seg-tab.active{background:#0f5c4d;border-color:#0f5c4d;color:#fff}
.card-actions .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.35rem}
.search-row .form-control{flex:1 1 180px;min-width:0}
/* en-tête de page : boutons qui passent à la ligne */
main h1.h4{overflow-wrap:anywhere}
main{min-width:0}
main img,main video,main canvas{max-width:100%}
/* barre de menu du bas */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:1045;display:flex;align-items:stretch;justify-content:space-around;background:#fff;border-top:1px solid #e1e7e5;box-shadow:0 -4px 14px rgba(0,0,0,.06);padding-bottom:env(safe-area-inset-bottom);height:calc(64px + env(safe-area-inset-bottom))}
.bn-item{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#5b6b67;text-decoration:none;background:none;border:0;padding:4px 2px;font-size:.72rem;font-weight:600;min-width:0}
.bn-item .bn-ico{position:relative;font-size:1.35rem;line-height:1;padding:3px 14px;border-radius:14px;transition:background .15s}
.bn-item.active{color:#0f5c4d}
.bn-item.active .bn-ico{background:#dcefe9}
.bn-lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bn-badge{position:absolute;top:-4px;inset-inline-end:2px;background:#dc3545;color:#fff;border-radius:10px;font-size:.62rem;min-width:18px;height:18px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-weight:700}
.bn-main{margin-top:-22px}
.bn-plus{width:56px;height:56px;border-radius:50%;background:#0f5c4d;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:0 6px 16px rgba(15,92,77,.4);border:4px solid #fff}
.bn-main.active .bn-plus{background:#0b4a3e}
.sidebar-close{position:absolute;top:.8rem;inset-inline-end:.8rem;z-index:2}
@media (max-width:991.98px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .urgent-fab{bottom:calc(80px + env(safe-area-inset-bottom));width:44px;height:44px}
  .tc-floatbar{bottom:calc(74px + env(safe-area-inset-bottom))}
  body:has(.tc-floatbar) main{padding-bottom:90px!important}
  .sidebar{width:280px;inset-inline-start:-290px;box-shadow:0 0 30px rgba(0,0,0,.25)}
  .sidebar .nav-link{padding:.7rem 1.25rem;font-size:.98rem}
  .topbar{position:sticky;top:0;z-index:1030}
  main{padding:.85rem!important}
  .page-actions .btn,.d-flex.flex-wrap.gap-2>.btn{min-height:42px}
  .table{font-size:.88rem}
  .modal-dialog{margin:.5rem}
}
@media (max-width:575.98px){
  .kpi{padding:.75rem!important;gap:.6rem!important}
  .kpi .val{font-size:1.15rem}
  .kpi .ico{width:38px;height:38px;font-size:1.1rem;flex-shrink:0}
  main h1.h4{font-size:1.15rem}
  .btn-group-sm>.btn{padding:.3rem .55rem}
}
@media print{.bottom-nav{display:none!important}}
.sector-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle}