/* ═══ FLORAMAAR — CSS principal ═══
   Extrait et adapté depuis floramaar_MOBILE (1).html
*/

:root {
  --cr:#FAF7F2; --be:#F0EAE0; --go:#C8A97A; --gd:#9E7D51;
  --br:#3D2B1F; --bl:#6B4C38; --wh:#fff; --tx:#2C1F14;
  --tm:#7A6555; --tl:#A89080; --bo:#E0D5C8; --bs:#C8B8A8;
  --sg:#2D7A4F; --sb:#E8F5EE; --wo:#B8540A; --wb:#FEF3E8;
  --dg:#A32020; --db:#FDEAEA; --ya:#C89000; --yb:#FFFBEB;
  --r:10px; --s:6px
}

* { box-sizing:border-box; margin:0; padding:0 }
html { height:100% }
body { font-family:'Segoe UI',system-ui,sans-serif; background:var(--cr); color:var(--tx); font-size:14px; line-height:1.5; -webkit-tap-highlight-color:transparent; overflow-x:hidden; min-height:100% }
button { cursor:pointer; font-family:inherit }
input, select, textarea { font-family:inherit; font-size:14px }

/* ═══ LOGIN ═══ */
.login-screen { min-height:100vh; background:var(--br); display:flex; align-items:center; justify-content:center; padding:2rem }
.lb { background:#fff; border-radius:16px; padding:2.5rem 2rem; width:100%; max-width:390px; box-shadow:0 4px 20px rgba(44,31,20,.2) }
.lo { text-align:center; margin-bottom:1.75rem }
.lm { width:120px; height:120px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-bottom:10px; overflow:hidden }
.lm img { width:120px; height:120px; object-fit:cover; border-radius:50% }
.lt { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--tm); margin-top:4px }
.fg { margin-bottom:1rem }
.fg label { display:block; font-size:11px; font-weight:600; color:var(--tm); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px }
.fg input { width:100%; padding:10px 12px; border:1.5px solid var(--bo); border-radius:var(--s); background:var(--cr); outline:none; transition:border .2s; font-size:16px }
.fg input:focus { border-color:var(--go); background:#fff }
.bl { width:100%; padding:12px; background:var(--br); color:#fff; border:none; border-radius:var(--s); font-size:14px; font-weight:600; cursor:pointer; margin-top:.5rem }
.bl:hover { background:var(--gd) }
.er { color:var(--dg); font-size:12px; text-align:center; margin-top:.5rem }

/* ═══ LAYOUT PRINCIPAL ═══ */
.al { display:flex; min-height:100vh; min-height:100dvh }
.sb { width:225px; min-width:225px; background:var(--br); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:100 }
.sh { padding:1rem; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px }
.si { width:40px; height:40px; border-radius:50%; overflow:hidden; flex-shrink:0; border:2px solid rgba(200,169,122,.5) }
.si img { width:40px; height:40px; object-fit:cover; border-radius:50% }
.st span { font-size:14px; font-weight:700; color:#fff; display:block }
.st small { font-size:10px; color:rgba(255,255,255,.35) }
.sn { flex:1; padding:.75rem 0; overflow-y:auto }
.ns { padding:0 .75rem; margin-bottom:.25rem }
.nt { font-size:9px; font-weight:700; color:rgba(255,255,255,.3); letter-spacing:1.5px; text-transform:uppercase; padding:0 .5rem .25rem }
.ni { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--s); color:rgba(255,255,255,.6); font-size:13px; cursor:pointer; transition:all .15s; margin-bottom:1px; border:none; background:transparent; width:100%; text-align:left; text-decoration:none }
.ni:hover { background:rgba(255,255,255,.07); color:#fff }
.ni.on { background:var(--go); color:#fff }
.ni .nb { margin-left:auto; background:var(--dg); color:#fff; border-radius:10px; font-size:10px; padding:1px 6px }
.sf { padding:.75rem; border-top:1px solid rgba(255,255,255,.08) }
.uc { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.07); border-radius:var(--s); padding:8px 10px }
.ua { width:28px; height:28px; border-radius:50%; background:var(--go); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0 }
.un { font-size:12px; color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ur { font-size:10px; color:rgba(255,255,255,.4) }
.blo { background:transparent; border:none; color:rgba(255,255,255,.35); padding:2px; cursor:pointer; font-size:18px }
.blo:hover { color:#fff }
.mc { margin-left:225px; flex:1; display:flex; flex-direction:column }
.tb { background:#fff; border-bottom:1px solid var(--bo); padding:.75rem 1.5rem; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:50 }
.tb h2 { font-size:16px; font-weight:700; color:var(--br); flex:1 }
.pc { padding:1.5rem; flex:1 }

/* ═══ CARDS & GRILLES ═══ */
.ca { background:#fff; border:1px solid var(--bo); border-radius:var(--r); padding:1.25rem }
.ct { font-size:11px; font-weight:700; color:var(--tm); margin-bottom:.875rem; text-transform:uppercase; letter-spacing:.8px }
.sg2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:12px; margin-bottom:1.5rem }
.sc2 { background:#fff; border:1px solid var(--bo); border-radius:var(--r); padding:1rem 1.25rem }
.sl2 { font-size:10px; color:var(--tm); text-transform:uppercase; letter-spacing:.6px; margin-bottom:4px; font-weight:600 }
.sv { font-size:24px; font-weight:800; color:var(--br); line-height:1 }
.ss { font-size:11px; color:var(--tl); margin-top:3px }
.sc2.go { border-left:3px solid var(--go) }
.sc2.dg { border-left:3px solid var(--dg) }
.sc2.sg { border-left:3px solid var(--sg) }
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:16px }

/* ═══ TABLEAUX ═══ */
.tw { overflow-x:auto }
table { width:100%; border-collapse:collapse }
th { font-size:10px; font-weight:700; color:var(--tm); text-transform:uppercase; letter-spacing:.5px; padding:8px 12px; border-bottom:1.5px solid var(--bo); text-align:left; background:var(--cr) }
td { padding:9px 12px; border-bottom:1px solid var(--bo); font-size:13px; vertical-align:middle }
tr:last-child td { border-bottom:none }
tr:hover td { background:#fdf9f5 }
.ry td { background:#FFFDE8 !important }
.ro td { background:#FFF5EC !important }
.rr td { background:#FFF0F0 !important }

/* ═══ BADGES ═══ */
.ba { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600 }
.bg  { background:var(--sb); color:var(--sg) }
.bd  { background:var(--db); color:var(--dg) }
.bo2 { background:var(--wb); color:var(--wo) }
.by  { background:var(--yb); color:var(--ya); border:1px solid #E8CC70 }
.bgo { background:#FEF3E0; color:var(--gd) }
.bgr { background:var(--be); color:var(--tm) }

/* ═══ ICÔNES SVG ═══ */
.ico { display:inline-block; vertical-align:-0.2em; flex-shrink:0; pointer-events:none; }

/* ═══ BOUTONS ═══ */
.bt { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--s); font-size:13px; font-weight:600; border:1px solid transparent; transition:all .15s; cursor:pointer; text-decoration:none }
.bp { background:var(--br); color:#fff }
.bp:hover { background:var(--gd) }
.bo3 { background:transparent; border-color:var(--bs); color:var(--tx) }
.bo3:hover { border-color:var(--go); color:var(--gd) }
.bs2 { padding:4px 10px; font-size:12px }
.bsuc { background:var(--sb); color:var(--sg); border:1px solid var(--sg); padding:4px 10px; font-size:12px; border-radius:var(--s); cursor:pointer; font-weight:600 }
.bsuc:hover { background:var(--sg); color:#fff }
.reapro-btn { background:var(--sb); color:var(--sg); border:1px solid var(--sg); padding:5px 10px; font-size:12px; border-radius:var(--s); cursor:pointer; font-weight:600; white-space:nowrap }
.reapro-btn:hover { background:var(--sg); color:#fff }

/* ═══ ALERTES ═══ */
.ab { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--s); margin-bottom:.75rem; font-size:13px }
.aw { background:var(--wb); border:1px solid #F0B070; color:var(--wo) }
.ad { background:var(--db); border:1px solid #E08080; color:var(--dg) }
.ay { background:var(--yb); border:1px solid #E8CC70; color:var(--ya); font-weight:600 }
.ai { background:#EEF4FF; border:1px solid #C0D0F0; color:#2050A0 }
.ai2 { display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--s); margin-bottom:8px; border:1px solid }
.az  { background:var(--db); border-color:#E08080 }
.ao  { background:var(--wb); border-color:#F0B070 }
.ay2 { background:var(--yb); border-color:#E8CC70 }

/* ═══ MODALES ═══ */
.mo { display:none; position:fixed; inset:0; background:rgba(44,31,20,.5); z-index:200; align-items:center; justify-content:center; padding:1rem }
.mo.on { display:flex }
.md { background:#fff; border-radius:var(--r); padding:1.75rem; width:100%; max-width:540px; box-shadow:0 4px 20px rgba(44,31,20,.15); max-height:90vh; overflow-y:auto }
.md h3 { font-size:16px; font-weight:700; color:var(--br); margin-bottom:1.25rem; padding-bottom:.75rem; border-bottom:1px solid var(--bo) }
.mf { display:flex; gap:8px; justify-content:flex-end; margin-top:1.25rem; padding-top:.875rem; border-top:1px solid var(--bo) }

/* ═══ FORMULAIRES ═══ */
.fr { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.ff { margin-bottom:.875rem }
.ff label { display:block; font-size:11px; font-weight:700; color:var(--tm); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px }
.ff input, .ff select, .ff textarea { width:100%; padding:9px 11px; border:1.5px solid var(--bo); border-radius:var(--s); background:var(--cr); outline:none; transition:border .15s; color:var(--tx); font-size:16px }
.ff input:focus, .ff select:focus { border-color:var(--go); background:#fff }
.ff .hi { font-size:11px; color:var(--tm); margin-top:3px }
.si2 { padding:7px 11px; border:1.5px solid var(--bo); border-radius:var(--s); background:var(--cr); font-size:13px; color:var(--tx); outline:none }
.si2:focus { border-color:var(--go) }

/* ═══ CAISSE ═══ */
.caisse-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px }
.caisse-card {
  background:#fff; border:2px solid var(--bo); border-radius:12px;
  padding:10px 6px; display:flex; flex-direction:column; align-items:center;
  gap:6px; cursor:pointer; transition:all .18s; user-select:none;
  position:relative; -webkit-tap-highlight-color:transparent; touch-action:manipulation
}
.caisse-card:hover:not(.epuise) { border-color:var(--go); background:var(--cr); transform:translateY(-2px); box-shadow:0 4px 12px rgba(44,31,20,.12) }
.caisse-card:active:not(.epuise) { transform:scale(.96) }
.caisse-card.epuise { opacity:.38; cursor:not-allowed; filter:grayscale(.7) }
.caisse-card.jaune-card { border-color:#E8CC70; background:var(--yb) }
.caisse-card .stock-pill { position:absolute; top:6px; right:6px; font-size:10px; font-weight:700; border-radius:20px; padding:1px 6px }
.caisse-card .prod-name { font-size:11px; font-weight:700; color:var(--br); text-align:center; line-height:1.3 }
.caisse-card .col-name { font-size:10px; color:var(--tm); text-align:center }
.caisse-card .ref-small { font-family:monospace; font-size:9px; background:var(--be); padding:1px 5px; border-radius:3px; color:var(--br) }
.caisse-header { background:linear-gradient(135deg,var(--br),var(--bl)); color:#fff; border-radius:var(--r); padding:1rem 1.5rem; margin-bottom:1.25rem; display:flex; align-items:center; justify-content:space-between }
.caisse-legend { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:1rem; font-size:12px; color:var(--tm) }
.caisse-legend span { display:flex; align-items:center; gap:4px }

/* ═══ STOCK PARTENAIRE (cartes kc) ═══ */
.sg3 { display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:12px }
.kc { background:#fff; border:1px solid var(--bo); border-radius:var(--r); padding:1rem; transition:border-color .2s }
.kc:hover { border-color:var(--go) }
.kn { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin:10px 0 }
.kb { border-radius:7px; padding:7px 4px; text-align:center }
.kb .n { font-size:19px; font-weight:800; line-height:1 }
.kb .l { font-size:10px; color:var(--tm); margin-top:1px; font-weight:600 }
.pw { background:linear-gradient(135deg,var(--br),var(--bl)); color:#fff; border-radius:var(--r); padding:1.25rem 1.5rem; margin-bottom:1.5rem; display:flex; align-items:center; gap:14px }
.pa { width:50px; height:50px; border-radius:50%; background:var(--go); display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:700; color:#fff; flex-shrink:0; border:2px solid rgba(255,255,255,.3) }

/* ═══ BOUTONS VENTE STOCK (qc/qb) ═══ */
.qc { display:flex; align-items:center; gap:6px }
.qb { width:40px; height:40px; border-radius:50%; border:1.5px solid var(--bs); background:var(--cr); color:var(--tx); font-size:20px; display:flex; align-items:center; justify-content:center; font-weight:700; transition:all .15s; cursor:pointer; touch-action:manipulation; flex-shrink:0 }
.qb.pl:hover { background:var(--sb); border-color:var(--sg); color:var(--sg) }
.qb.mi:hover { background:var(--db); border-color:var(--dg); color:var(--dg) }

/* ═══ DIVERS ═══ */
.ref-badge { font-family:monospace; font-size:11px; background:var(--be); padding:2px 7px; border-radius:4px; color:var(--br); font-weight:700; letter-spacing:.3px }
.cs { width:15px; height:15px; border-radius:50%; border:1.5px solid rgba(0,0,0,.12); display:inline-block; vertical-align:middle; flex-shrink:0 }
.pb { display:flex; align-items:center; gap:10px }
.px { width:36px; height:36px; background:var(--cr); border-radius:8px; border:1px solid var(--bo); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.cp { color:var(--sg); font-weight:700 }
.cf { color:var(--gd); font-weight:700 }
.tp { background:#E8F0FF; color:#2050A0; padding:1px 7px; border-radius:8px; font-size:11px; font-weight:600 }

/* Toast notification */
#toast {
  position:fixed; bottom:24px; right:24px; z-index:999;
  background:var(--br); color:#fff; padding:12px 18px; border-radius:var(--r);
  font-size:13px; font-weight:600; box-shadow:0 4px 16px rgba(44,31,20,.3);
  transform:translateY(120%); transition:transform .25s ease;
  max-width:320px
}
#toast.show { transform:translateY(0) }
#toast.ok   { background:var(--sg) }
#toast.err  { background:var(--dg) }

/* ═══ MOBILE CARDS ═══ */
.mlist { display:none }
.tdsk  { display:block }

@media (max-width:768px) {
  .tdsk  { display:none !important }
  .mlist { display:flex; flex-direction:column; gap:10px }
}

.mcard {
  background:#fff; border:1px solid var(--bo); border-radius:var(--r);
  padding:14px; display:flex; flex-direction:column; gap:10px
}
.mcard-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px }
.mcard-title { font-weight:700; font-size:13px; line-height:1.3 }
.mcard-sub   { font-size:11px; color:var(--tm); margin-top:2px }
.mcard-kv    { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px }
.mcard-kv3   { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px 8px }
.mk { display:flex; flex-direction:column; gap:1px }
.mk dt { font-size:10px; color:var(--tm); text-transform:uppercase; letter-spacing:.4px }
.mk dd { font-size:13px; font-weight:600; color:var(--tx) }
.mcard-acts  { display:flex; gap:8px; flex-wrap:wrap; padding-top:6px; border-top:1px solid var(--bo) }
.mcard-acts .bt { flex:1; min-width:0; font-size:12px; padding:7px 10px; text-align:center }
.mcard-sep   { border:0; border-top:1px solid var(--bo); margin:0 }
.mcard.alert-hi  { border-color:var(--dg); background:var(--db) }
.mcard.alert-med { border-color:#F0B070; background:#FFF5EC }

/* ═══ RESPONSIVE MOBILE ═══ */
@media (max-width:768px) {
  .sb { width:100% !important; height:calc(58px + env(safe-area-inset-bottom, 0px)); top:auto; bottom:0; left:0; right:0; flex-direction:row; padding:0 0 env(safe-area-inset-bottom, 0px); border-top:1px solid rgba(255,255,255,.1) }
  .sh, .sf { display:none }
  .sn { flex:1; padding:0; overflow:hidden; display:flex; align-items:stretch }
  .ns { flex:1; display:flex; flex-direction:row; align-items:stretch; padding:0; margin:0 }
  .nt { display:none }
  .ni { flex:1; flex-direction:column; justify-content:center; align-items:center; padding:4px 2px; border-radius:0; font-size:9px; gap:3px; margin:0; min-width:0; position:relative }
  .ni svg { width:20px; height:20px; flex-shrink:0 }
  .ni span { display:block !important; font-size:9px; line-height:1.1; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:56px }
  .ni .nb { position:absolute; top:4px; right:4px; font-size:9px; padding:0 4px }
  .mc { margin-left:0 !important; padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px)) }
  .tb { padding:.6rem 1rem }
  .tb h2 { font-size:14px }
  .pc { padding:1rem .75rem }
  .sg2 { grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:1rem }
  .sv { font-size:20px !important }
  .g2 { grid-template-columns:1fr !important }
  .ca { padding:1rem .875rem }
  .tw { overflow-x:auto; -webkit-overflow-scrolling:touch }
  table { min-width:500px }
  th, td { padding:7px 8px; font-size:12px }
  .caisse-grid { grid-template-columns:repeat(2,1fr) !important; gap:8px }
  .caisse-card { padding:10px 6px }
  .sg3 { grid-template-columns:1fr !important }
  .lb { padding:1.75rem 1.25rem; margin:1rem }
  .lm { width:90px; height:90px }
  .lm img { width:90px; height:90px }
  .md { padding:1.25rem; max-height:85vh; margin:.5rem; width:calc(100% - 1rem) }
  .fr { grid-template-columns:1fr !important }
  .bt { padding:8px 12px; font-size:13px }
  .pw { padding:1rem }
  .ref-badge { font-size:10px }
  #toast { bottom:calc(70px + env(safe-area-inset-bottom, 0px)) !important; right:8px !important; left:8px !important; max-width:none !important }
}

@media (max-width:380px) {
  .sg2 { grid-template-columns:1fr }
  .caisse-grid { grid-template-columns:repeat(2,1fr) !important }
  .ni span { display:none !important }
  .ni { padding:6px 2px }
}

.ni:active { opacity:.7 }
.caisse-card:active:not(.epuise) { transform:scale(.94) !important }
.bt:active { opacity:.8 }

/* ─── Admin mobile nav ─────────────────────────────────────────────── */
.amn,.amn-overlay { display:none }
@media (max-width:768px) {
  .sb.admin { display:none }
  .amn { display:flex; position:fixed; bottom:0; left:0; right:0; height:calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px); background:var(--br); z-index:100; border-top:1px solid rgba(255,255,255,.1) }
  .amna { position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:4px 2px; border:0; border-radius:0; background:transparent; color:rgba(255,255,255,.72); font-size:9px; line-height:1.1; text-align:center; text-decoration:none; cursor:pointer; font-family:inherit }
  .amna.on { background:var(--go); color:#fff }
  .amna svg { width:20px; height:20px }
  .amna em { position:absolute; top:3px; right:calc(50% - 22px); padding:1px 5px; border-radius:10px; background:var(--dg); color:#fff; font-size:9px; font-style:normal }
  .amn-overlay { position:fixed; z-index:150; inset:0; display:block; background:rgba(44,31,20,.42) }
  .amn-overlay[hidden] { display:none }
  .amn-panel { position:absolute; right:0; bottom:58px; left:0; padding:14px 14px 12px; border-radius:16px 16px 0 0; background:#fff; box-shadow:0 -8px 28px rgba(44,31,20,.18); animation:amn-in .18s ease-out }
  .amn-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; color:var(--br) }
  .amn-head button { width:30px; height:30px; border:0; border-radius:50%; background:var(--cr); color:var(--br); font-size:22px; line-height:1; cursor:pointer }
  .amn-panel>a { display:flex; align-items:center; gap:10px; min-height:42px; padding:9px 10px; border-top:1px solid var(--bo); color:var(--tx); font-size:13px; font-weight:600; text-decoration:none }
  .amn-panel>a svg { width:20px; height:20px; color:var(--gd) }
  .amn-logout { color:var(--dg) !important }
  @keyframes amn-in { from { transform:translateY(100%) } to { transform:translateY(0) } }
}

/* ═══ SÉLECTEUR COULEURS VISUEL ═══ */
.color-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px }
.cpill {
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
  border:2px solid var(--bo); border-radius:20px; background:#fff;
  cursor:pointer; font-size:12px; font-family:inherit; transition:border-color .15s,background .15s
}
.cpill:hover:not(:disabled) { border-color:var(--go) }
.cpill.on { border-color:var(--br); background:var(--be); font-weight:700 }
.cpill:disabled { opacity:.3; cursor:not-allowed }
.cpill-dot {
  width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(0,0,0,.12); flex-shrink:0
}
.cpill-dot--multi {
  background: conic-gradient(#EF4444 0deg 60deg, #FACC15 60deg 120deg, #22C55E 120deg 180deg, #3B82F6 180deg 240deg, #D946EF 240deg 300deg, #F97316 300deg 360deg)
}

/* Sélecteur visuel pictogramme produit */
.pp-picker { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px }
.pp-picker-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 4px; border:1.5px solid var(--bo); border-radius:6px;
  background:#fff; cursor:pointer; font-size:9px; color:var(--tm);
  font-family:inherit; line-height:1; min-width:52px;
  transition:border-color .15s, background .15s
}
.pp-picker-btn:hover { border-color:var(--go); background:var(--cr) }
.pp-picker-btn.is-selected {
  border-color:var(--br); background:var(--be);
  color:var(--br); font-weight:700
}

/* ─── Document / relevé imprimable ────────────────────────────────── */
.pd {
  background:#fff;
  border:1px solid var(--bo);
  border-radius:var(--s);
  padding:1.5rem;
  max-width:820px;
  margin:0 auto;
}
.ph {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:1.25rem;
  padding-bottom:1rem;
  border-bottom:2px solid var(--go);
}
.pt2 {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  margin-bottom:.75rem;
}
.pt2 th {
  background:var(--cr);
  padding:7px 10px;
  text-align:left;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--tm);
  border-bottom:2px solid var(--bo);
}
.pt2 td {
  padding:7px 10px;
  border-bottom:1px solid var(--bo);
  vertical-align:middle;
}
.pt2 tbody tr:hover { background:var(--cr) }
.ptot {
  background:var(--be);
  border-left:3px solid var(--br);
  border-radius:4px;
  padding:10px 14px;
  font-weight:700;
  color:var(--br);
  font-size:13px;
  margin-top:.75rem;
}

/* À l'impression : toujours afficher les tableaux, masquer les cartes mobile */
@media print {
  .tdsk  { display:block !important }
  .mlist { display:none !important }
  .amn, .amn-overlay, .sb, .tb, .no-print { display:none !important }
  .mc { margin-left:0 !important; padding-bottom:0 !important }
  body { background:#fff !important }
  .pd { border:none !important; padding:0 !important; max-width:100% !important; margin:0 !important }
}

/* PATCH mobile modal select replacement — native select dropdown offset fix */
@media (max-width: 760px) {
  .mo select.si2.mobile-native-hidden,
  .md select.si2.mobile-native-hidden {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .mselect {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }

  .mselect-btn {
    appearance: none;
    border: 2px solid var(--bo, #e2d8cc);
    background: rgba(255,255,255,.72);
    color: var(--tx, #3d2b22);
    border-radius: 999px;
    padding: 10px 14px;
    min-height: 42px;
    font: inherit;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(61,43,34,.08);
  }

  .mselect-btn.is-on {
    background: var(--br, #4a2f22);
    border-color: var(--br, #4a2f22);
    color: #fff;
  }

  .mselect-btn:focus-visible {
    outline: 3px solid rgba(203, 151, 91, .35);
    outline-offset: 2px;
  }
}
