/* Jàmm Bâtiment — style de l'application (brique, ardoise, sable) */
:root {
  --brick: #b5452b; --brick2: #8f3420; --brick-l: #f7e3dc;
  --slate: #1f2a33; --slate2: #2c3a46; --slate3: #3b4c5a;
  --bg: #f4efe6; --card: #ffffff; --line: #e6dccb; --line2: #efe8dc; --field: #fbf8f3;
  --tx: #1d2731; --mu: #66727d; --mu2: #98a1a9;
  --green: #1e8e4a; --green-l: #e3f3e8; --red: #c0392b; --red-l: #fbe5e2; --orange: #d27a1e; --orange-l: #fbeedd;
  --blue: #2a6fb0; --blue-l: #e3eef8; --yellow: #c99a0e;
  --r: 14px; --sh: 0 1px 2px rgba(29, 39, 49, .06), 0 6px 18px rgba(29, 39, 49, .06);
  --fh: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --fb: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fb); font-size: 15px; background: var(--bg); color: var(--tx); line-height: 1.4; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brick); }
.hidden { display: none !important; }
svg { width: 20px; height: 20px; flex: none; }
.mu { color: var(--mu); } .mu2 { color: var(--mu2); }
.green { color: var(--green); } .red { color: var(--red); } .orange { color: var(--orange); } .blue { color: var(--blue); }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.right { text-align: right; }
.b { font-weight: 700; }
.sm { font-size: 13px; }
.h { font-family: var(--fh); font-weight: 700; letter-spacing: .01em; }

/* ===== Démarrage ===== */
#splash { position: fixed; inset: 0; z-index: 100; background: var(--slate); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .5s; }
#splash.off { opacity: 0; pointer-events: none; }
#splash .t { font-family: var(--fh); font-size: 34px; font-weight: 800; letter-spacing: .02em; }
#splash .s { color: #e8c9a8; font-size: 15px; }
#splash .bar { width: 140px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; }
#splash .bar i { display: block; height: 100%; width: 40%; background: var(--brick); border-radius: 4px; animation: load 1.1s infinite ease-in-out; }
@keyframes load { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ===== Connexion ===== */
#login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--slate) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Cpath d='M0 0h64v32H0z' fill='none'/%3E%3Cpath d='M0 15.5h64M32 0v15.5M0 31.5h64M16 15.5v16M48 15.5v16' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E"); }
.lg { width: 100%; max-width: 880px; display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.lg-brand { background: linear-gradient(160deg, var(--brick), var(--brick2)); color: #fff; padding: 40px 32px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.lg-brand img { width: 92px; height: 92px; border-radius: 22px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.lg-brand h1 { font-family: var(--fh); font-size: 38px; line-height: 1; margin: 10px 0 0; font-weight: 800; }
.lg-brand .sl { color: #ffe0cc; font-size: 16px; }
.lg-brand .where { margin-top: 18px; font-size: 14px; color: #ffd9c7; line-height: 1.6; }
.lg-panel { padding: 30px 28px; }
.lg-panel h2 { margin: 0 0 14px; font-family: var(--fh); font-size: 26px; }
.lg-users { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.lg-user { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); background: var(--field); border-radius: 12px; padding: 8px 12px 8px 8px; }
.lg-user.on { border-color: var(--brick); background: var(--brick-l); }
.lg-user b { display: block; font-size: 14px; } .lg-user small { color: var(--mu); font-size: 12px; }
.av { width: 34px; height: 34px; border-radius: 10px; background: var(--slate); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.who { color: var(--mu); text-align: center; margin: 8px 0; }
.dots { display: flex; gap: 14px; justify-content: center; margin: 12px 0; }
.dots i { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--slate3); }
.dots i.f { background: var(--brick); border-color: var(--brick); }
.dots.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.lg-err { color: var(--red); text-align: center; min-height: 20px; font-size: 14px; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 290px; margin: 6px auto 0; }
.pad button { height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--field); font-size: 22px; font-weight: 600; }
.pad button:active { background: var(--brick-l); }
.pad button.x { font-size: 14px; color: var(--mu); }
.lg-foot { text-align: center; color: var(--mu2); font-size: 12px; margin-top: 16px; }
@media (max-width: 720px) { .lg { grid-template-columns: 1fr; } .lg-brand { padding: 24px; flex-direction: row; align-items: center; flex-wrap: wrap; } .lg-brand img { width: 60px; height: 60px; border-radius: 16px; } .lg-brand h1 { font-size: 28px; margin: 0; } .lg-brand .where { display: none; } }

/* ===== Mise en page ===== */
#app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
#side { background: var(--slate); color: #d7dee4; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 14px 10px; overflow-y: auto; }
#side .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; }
#side .brand img { width: 42px; height: 42px; border-radius: 11px; background: #fff; }
#side .brand b { font-family: var(--fh); font-size: 19px; color: #fff; line-height: 1.05; display: block; }
#side .brand small { color: #e8b9a3; font-size: 12px; }
#side nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
#side nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: #c9d2d9; text-decoration: none; font-weight: 500; position: relative; }
#side nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
#side nav a.on { background: var(--slate2); color: #fff; }
#side nav a.on::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--brick); }
#side nav a.sell { background: var(--brick); color: #fff; margin: 4px 0 8px; font-weight: 700; }
#side nav a.sell:hover { background: var(--brick2); }
#side nav a .pill { margin-left: auto; }
#side .me { display: flex; align-items: center; gap: 10px; padding: 10px 6px 2px; border-top: 1px solid rgba(255,255,255,.08); }
#side .me b { color: #fff; font-size: 14px; } #side .me small { color: #9fb0bd; font-size: 12px; }
#side .ibtn { background: rgba(255,255,255,.08); color: #fff; border: none; }
#main { min-width: 0; padding: 0 22px 40px; }
.top { position: sticky; top: 0; z-index: 20; background: rgba(244,239,230,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 16px 0 12px; margin-bottom: 6px; }
.top.sc { border-bottom: 1px solid var(--line); }
.top h1 { margin: 0; font-family: var(--fh); font-size: 28px; font-weight: 800; line-height: 1.1; }
.top .sub { color: var(--mu); font-size: 14px; margin-top: 2px; }
.ibtn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--tx); }
.ibtn:hover { border-color: var(--mu2); }
.syncdot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; }
.syncdot.off { background: var(--red); }
#tabs { display: none; }
#view { animation: fade .25s; }
#view.nofade { animation: none; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #side { display: none; }
  #main { padding: 0 14px calc(86px + env(safe-area-inset-bottom)); }
  .top { padding-top: calc(12px + env(safe-area-inset-top)); }
  .top h1 { font-size: 24px; }
  #tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--card); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  #tabs a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--mu); text-decoration: none; font-size: 11px; font-weight: 600; padding: 4px 0; }
  #tabs a.on { color: var(--brick); }
  #tabs a.sell .b { width: 50px; height: 50px; margin-top: -22px; border-radius: 16px; background: var(--brick); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(181,69,43,.4); }
  #tabs a.sell .b svg { width: 26px; height: 26px; }
  #tabs a.sell { color: var(--brick); }
}

/* ===== Éléments ===== */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--sh); margin-bottom: 14px; }
.card.flat { box-shadow: none; }
.card h3 { margin: 0 0 10px; font-family: var(--fh); font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card h3 .sp { flex: 1; }
.sec { font-family: var(--fh); font-size: 15px; font-weight: 700; color: var(--mu); text-transform: uppercase; letter-spacing: .06em; margin: 18px 2px 8px; display: flex; align-items: center; gap: 8px; }
.sec .sp { flex: 1; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cols, .cols3 { grid-template-columns: minmax(0, 1fr); } }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sh); position: relative; overflow: hidden; }
.kpi small { color: var(--mu); font-size: 13px; font-weight: 600; display: block; }
.kpi b { display: block; font-family: var(--fh); font-size: 27px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .s { color: var(--mu); font-size: 12.5px; }
.kpi::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k, var(--brick)); }
.kpi.click { cursor: pointer; } .kpi.click:hover { border-color: var(--mu2); }
@media (max-width: 600px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kpi b { font-size: 22px; } .kpi { padding: 12px; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--tx); }
.btn:hover { border-color: var(--mu2); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.pri { background: var(--brick); border-color: var(--brick); color: #fff; }
.btn.pri:hover { background: var(--brick2); }
.btn.dark { background: var(--slate); border-color: var(--slate); color: #fff; }
.btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--brick); }
.btn.sm { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 10px; }
.btn.lg { min-height: 54px; font-size: 17px; border-radius: 14px; }
.btn.block { width: 100%; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.qa button { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); text-align: left; font-weight: 700; box-shadow: var(--sh); }
.qa button svg { width: 24px; height: 24px; color: var(--brick); }
.qa button small { color: var(--mu); font-weight: 500; font-size: 12.5px; }
.qa button.main { background: var(--brick); color: #fff; border-color: var(--brick); }
.qa button.main svg, .qa button.main small { color: #ffe0d2; }

.fld { margin-bottom: 12px; }
.fld > label, .lbl { display: block; font-size: 13px; color: var(--mu); font-weight: 600; margin-bottom: 5px; }
.in { width: 100%; min-height: 44px; border: 1px solid var(--line); background: var(--field); border-radius: 11px; padding: 0 12px; font-size: 16px; outline: none; }
textarea.in { padding: 10px 12px; min-height: 80px; resize: vertical; }
.in:focus { border-color: var(--brick); background: #fff; box-shadow: 0 0 0 3px rgba(181,69,43,.12); }
select.in { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2366727d' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.in.sm { min-height: 36px; font-size: 14px; border-radius: 9px; padding: 0 9px; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hint { font-size: 12.5px; color: var(--mu); margin-top: 4px; }
.chk { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.chk input { width: 20px; height: 20px; accent-color: var(--brick); }

.search { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; margin-bottom: 12px; }
.search svg { color: var(--mu); }
.search input { border: none; background: transparent; outline: none; min-height: 44px; flex: 1; font-size: 16px; min-width: 0; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--tx); }
.chip.on { background: var(--slate); border-color: var(--slate); color: #fff; }
.chip .n { opacity: .65; margin-left: 4px; }
.seg { display: inline-flex; background: var(--line2); border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: none; background: transparent; border-radius: 9px; padding: 7px 12px; font-weight: 600; font-size: 13.5px; color: var(--mu); }
.seg button.on { background: var(--card); color: var(--tx); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--line2); color: var(--mu); white-space: nowrap; }
.badge.green { background: var(--green-l); color: var(--green); }
.badge.red { background: var(--red-l); color: var(--red); }
.badge.orange { background: var(--orange-l); color: var(--orange); }
.badge.blue { background: var(--blue-l); color: var(--blue); }
.badge.brick { background: var(--brick-l); color: var(--brick2); }
.badge.dark { background: var(--slate); color: #fff; }
.pill { min-width: 20px; height: 20px; border-radius: 10px; background: var(--brick); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }

.list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); margin-bottom: 14px; }
.list.flat { box-shadow: none; }
.it { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: none; border-bottom: 1px solid var(--line2); background: transparent; text-align: left; }
.it:last-child { border-bottom: none; }
button.it:hover, .it.click:hover { background: #fbf8f3; }
.it .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--line2); display: flex; align-items: center; justify-content: center; flex: none; font-weight: 700; font-size: 13px; color: var(--slate2); }
.it .t { font-weight: 650; }
.it .s { color: var(--mu); font-size: 13px; margin-top: 1px; }
.it .v { text-align: right; flex: none; }
.it .v b { display: block; font-variant-numeric: tabular-nums; }
.it .v small { font-size: 12.5px; font-weight: 600; }
.empty { text-align: center; color: var(--mu); padding: 30px 16px; }
.empty svg { width: 36px; height: 36px; color: var(--mu2); display: block; margin: 0 auto 8px; }
.empty b { display: block; color: var(--tx); margin-bottom: 4px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; color: var(--mu); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .r, .tbl th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { background: #fbf8f3; }
.tblw { overflow-x: auto; }
.tot { display: flex; justify-content: space-between; padding: 4px 0; }
.tot.big { font-family: var(--fh); font-size: 24px; font-weight: 800; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }

.bar { height: 8px; border-radius: 6px; background: var(--line2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: var(--green); }
.bar.warn i { background: var(--orange); } .bar.over i { background: var(--red); }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 10px; }
.chart .c { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
.chart .c i { width: 100%; max-width: 46px; background: var(--slate3); border-radius: 6px 6px 2px 2px; min-height: 3px; }
.chart .c.today i { background: var(--brick); }
.chart .c small { font-size: 11.5px; color: var(--mu); }
.chart .c span { font-size: 11px; font-weight: 700; color: var(--slate2); white-space: nowrap; }

/* ===== Fenêtres ===== */
.ov { position: fixed; inset: 0; z-index: 50; background: rgba(20, 27, 33, .5); display: flex; align-items: center; justify-content: center; padding: 20px; animation: ovin .2s; }
@keyframes ovin { from { opacity: 0; } }
.sheet { background: var(--bg); width: 100%; max-width: 540px; max-height: calc(100vh - 40px); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.3); animation: up .25s; }
.sheet.wide { max-width: 860px; }
@keyframes up { from { transform: translateY(20px); opacity: .5; } }
.sheet .hd { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.sheet .hd h2 { margin: 0; font-family: var(--fh); font-size: 21px; font-weight: 800; flex: 2; text-align: center; }
.sheet .hd .back { border: none; background: transparent; color: var(--brick); font-weight: 700; flex: 1; text-align: left; padding: 6px 0; font-size: 15px; }
.sheet .hd .sp { flex: 1; }
.sheet .bd { padding: 16px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.sheet .ft { display: flex; gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
.sheet .ft .btn { flex: 1; min-height: 48px; }
@media (max-width: 600px) { .ov { padding: 0; align-items: flex-end; } .sheet, .sheet.wide { max-width: none; max-height: 94vh; border-radius: 20px 20px 0 0; } }

#toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 30px); opacity: 0; z-index: 90; background: var(--slate); color: #fff; padding: 12px 18px; border-radius: 14px; display: flex; align-items: center; gap: 10px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: .25s; pointer-events: none; max-width: calc(100vw - 30px); }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast.err { background: var(--red); }
@media (max-width: 900px) { #toast { bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* ===== Caisse (vente) ===== */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.pos .cart { position: sticky; top: 84px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.pos .cart .ch { padding: 12px 14px; border-bottom: 1px solid var(--line2); }
.pos .cart .cb { overflow-y: auto; flex: 1; padding: 6px 14px; }
.pos .cart .cf { padding: 12px 14px; border-top: 1px solid var(--line); background: #fdfbf7; }
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.prod { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 13px; padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 108px; box-shadow: var(--sh); position: relative; }
.prod:hover { border-color: var(--brick); }
.prod .n { font-weight: 650; font-size: 14px; line-height: 1.25; padding-right: 12px; }
.prod .p { font-family: var(--fh); font-weight: 800; font-size: 19px; margin-top: auto; }
.prod .p small { font-family: var(--fb); font-weight: 600; font-size: 12px; color: var(--mu); }
.prod .q { font-size: 12px; color: var(--mu); font-weight: 600; }
.prod .q.low { color: var(--orange); } .prod .q.out { color: var(--red); }
.prod .cat { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; }
.prod.out { opacity: .55; }
.cl { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.cl:last-child { border-bottom: none; }
.cl .n { font-weight: 650; font-size: 14px; }
.cl .s { color: var(--mu); font-size: 12.5px; }
.cl .tt { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--field); }
.qty button { width: 34px; height: 34px; border: none; background: transparent; font-size: 18px; font-weight: 700; color: var(--brick); }
.qty input { width: 64px; height: 34px; border: none; text-align: center; background: transparent; font-weight: 700; font-size: 15px; outline: none; }
.qty.big button { width: 48px; height: 48px; font-size: 22px; } .qty.big input { width: 100px; height: 48px; font-size: 20px; }
.units { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.units button { text-align: left; border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 12px; }
.units button.on { border-color: var(--brick); background: var(--brick-l); }
.units button b { display: block; }
.units button span { font-family: var(--fh); font-size: 18px; font-weight: 800; }
.units button small { display: block; color: var(--mu); font-size: 12px; }
.pay-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.pay-modes button { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px; font-weight: 650; font-size: 14px; text-align: left; }
.pay-modes button i { width: 30px; height: 30px; border-radius: 9px; color: #fff; font-style: normal; font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.pay-modes button.on { border-color: var(--brick); background: var(--brick-l); }
.cartbar { display: none; }
@media (max-width: 1100px) { .pos { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 900px) {
  .pos { grid-template-columns: minmax(0, 1fr); }
  .pos .cart { position: static; max-height: none; }
  .pos.mcart .prodside { display: none; } .pos:not(.mcart) .cart { display: none; }
  .cartbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 25; background: var(--slate); color: #fff; border-radius: 16px; padding: 12px 16px; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.3); border: none; font-weight: 700; }
  .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.info { background: var(--blue-l); color: #1d4f7d; border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; display: flex; gap: 8px; align-items: flex-start; }
.info.warn { background: var(--orange-l); color: #8a4d0c; }
.info.err { background: var(--red-l); color: #92271b; }
.info.ok { background: var(--green-l); color: #17663a; }
.info svg { margin-top: 1px; }

/* Signature */
.sigbox { border: 2px dashed var(--mu2); border-radius: 14px; background: #fff; position: relative; touch-action: none; }
.sigbox canvas { display: block; width: 100%; height: 220px; border-radius: 12px; }
.sigbox .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--mu2); pointer-events: none; font-size: 15px; }
.steps { display: flex; gap: 4px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--mu2); }
.steps .on { color: var(--brick); }
.steps .ok { color: var(--green); }
.tl { position: relative; padding-left: 18px; }
.tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl > div { position: relative; padding: 4px 0 10px; }
.tl > div::before { content: ''; position: absolute; left: -17px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--card); border: 2px solid var(--mu2); }
.tl > div.ok::before { background: var(--green); border-color: var(--green); }

/* ===== Documents (factures, devis, bons) ===== */
.docview { position: fixed; inset: 0; z-index: 70; background: #59636b; display: flex; flex-direction: column; }
.dv-bar { display: flex; gap: 8px; align-items: center; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); background: var(--slate); flex-wrap: wrap; }
.dv-bar .back { border: none; background: transparent; color: #fff; font-weight: 700; margin-right: auto; font-size: 15px; }
.dv-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px; -webkit-overflow-scrolling: touch; }
.paper { width: 794px; min-height: 1123px; background: #fff; color: #1d2731; padding: 0 48px 120px; box-shadow: 0 10px 30px rgba(0,0,0,.3); font-size: 13px; font-family: var(--fb); line-height: 1.45; position: relative; overflow: hidden; }
.paper > * { position: relative; z-index: 1; }
.paper.short { min-height: 0; padding: 40px 60px; font-size: 18px; }
.pp-band { height: 26px; margin: 0 -48px 26px; background: linear-gradient(90deg, var(--brick2), var(--brick) 45%, #cf5a3d); position: relative; }
.pp-band::before { content: ''; position: absolute; inset: 0; opacity: .18; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='13'%3E%3Cpath d='M0 6.5h40M20 0v6.5M10 6.5V13M30 6.5V13' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E"); }
.pp-band svg { position: absolute; left: 0; right: 0; top: 100%; width: 100%; height: 10px; display: block; }
.paper > .pp-wm { position: absolute; z-index: 0; width: 420px; height: 420px; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-12deg); opacity: .045; filter: grayscale(1); pointer-events: none; }
.pp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid #eadfcd; }
.pp-brand { display: flex; gap: 16px; align-items: center; }
.pp-logo { width: 84px; height: 84px; border-radius: 20px; background: #fff; box-shadow: 0 6px 18px rgba(143,52,32,.18); border: 1px solid #f0e4d4; display: flex; align-items: center; justify-content: center; flex: none; }
.pp-logo img { width: 72px; height: 72px; border-radius: 16px; object-fit: contain; }
.pp-shop b { font-family: var(--fh); font-size: 27px; font-weight: 800; color: var(--slate); display: block; line-height: 1; letter-spacing: .01em; }
.pp-shop em { display: block; font-style: normal; color: var(--brick); font-weight: 700; font-size: 13px; margin: 3px 0 4px; }
.pp-shop div { color: #66727d; font-size: 12px; max-width: 360px; }
.pp-shop .legal { color: #8a7f70; font-size: 11.5px; margin-top: 2px; }
.pp-doc { text-align: right; flex: none; }
.pp-doc .ty { font-family: var(--fh); font-size: 40px; font-weight: 800; color: var(--slate); letter-spacing: .06em; line-height: .95; }
.pp-doc .no { display: inline-block; margin-top: 8px; background: var(--brick); color: #fff; font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: 999px; letter-spacing: .02em; }
.pp-doc .dt { color: #66727d; margin-top: 6px; font-size: 13px; }
.pp-doc .ex { margin-top: 8px; color: #66727d; font-size: 12px; }
.pp-to { display: flex; gap: 12px; margin: 20px 0 18px; }
.pp-to > div { flex: 1; background: #faf6f0; border: 1px solid #efe5d6; border-radius: 12px; padding: 11px 14px; position: relative; overflow: hidden; }
.pp-to > div::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--slate3); }
.pp-to > div.ch::before { background: var(--brick); }
.pp-to > div.meta { background: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; flex: 1.15; }
.pp-to > div.meta::before { display: none; }
.pp-to small { display: block; color: #9a8c79; font-size: 10.5px; text-transform: uppercase; font-weight: 700; letter-spacing: .07em; margin-bottom: 2px; }
.pp-to b { font-size: 15.5px; color: var(--slate); }
.pp-to .meta span { font-weight: 700; font-size: 12.5px; color: var(--slate); }
.pp-t { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 4px; border: 1px solid #eadfcd; border-radius: 12px; overflow: hidden; }
.pp-t th { background: var(--slate); color: #fff; text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.pp-t td { padding: 10px 12px; border-top: 1px solid #f0e8dc; vertical-align: top; }
.pp-t tbody tr:nth-child(even) td { background: #fbf8f3; }
.pp-t .n { width: 34px; text-align: center; color: #9a8c79; font-weight: 700; }
.pp-t td.n { color: #b9ad9c; }
.pp-t td b { font-weight: 650; }
.pp-t .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-t .u { color: #8a7f70; font-size: 12px; }
.pp-ret { color: #c0392b; font-size: 11.5px; font-style: italic; }
.pp-box { display: inline-block; width: 16px; height: 16px; border: 1.5px solid #b9ad9c; border-radius: 4px; }
.pp-bottom { display: flex; gap: 22px; align-items: flex-start; margin-top: 16px; }
.pp-left { flex: 1; min-width: 0; }
.pp-tot { margin-left: auto; width: 300px; flex: none; margin-top: 16px; }
.pp-bottom .pp-tot { margin-top: 0; }
.pp-tot > div { display: flex; justify-content: space-between; padding: 5px 4px; border-bottom: 1px dashed #eadfcd; font-variant-numeric: tabular-nums; }
.pp-tot > div.big { font-family: var(--fh); font-size: 24px; font-weight: 800; background: linear-gradient(135deg, var(--brick), var(--brick2)); color: #fff; border-radius: 12px; padding: 10px 14px; margin: 8px 0; border: none; box-shadow: 0 8px 18px rgba(143,52,32,.25); }
.pp-tot > div.due { color: #c0392b; font-weight: 800; font-size: 15px; background: #fdecea; border-radius: 10px; padding: 8px 12px; border: none; margin-top: 6px; }
.pp-words { background: #faf6f0; border-radius: 12px; padding: 12px 14px; font-weight: 700; color: var(--slate); font-size: 13.5px; border: 1px solid #efe5d6; margin-top: 14px; }
.pp-bottom .pp-words { margin-top: 0; }
.pp-words small, .pp-pays small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: #9a8c79; font-weight: 700; margin-bottom: 3px; }
.pp-words::first-letter { text-transform: uppercase; }
.pp-pays { margin-top: 10px; padding: 10px 14px; border: 1px solid #efe5d6; border-radius: 12px; }
.pp-pays > div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12.5px; color: #4a5560; }
.pp-sign { display: flex; gap: 26px; margin-top: 34px; }
.pp-sign > div { flex: 1; border: 1.5px dashed #d8ccb9; border-radius: 12px; padding: 8px 12px; font-size: 11.5px; color: #8a7f70; min-height: 96px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.pp-sign > div b { text-transform: none; letter-spacing: 0; color: var(--slate); }
.pp-sign img { max-width: 220px; max-height: 80px; display: block; margin-top: 4px; }
.pp-foot { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; color: #66727d; font-size: 11.5px; background: #f7f1e8; border-top: 4px solid var(--brick); padding: 12px 48px 14px; }
.pp-thanks { font-weight: 700; color: var(--slate); margin-bottom: 5px; }
.pp-contact { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; }
.paper.short .pp-foot { position: static; margin: 24px -60px -40px; }
.pp-stamp { display: inline-block; border: 3px solid var(--green); color: var(--green); font-weight: 800; padding: 3px 14px; border-radius: 10px; transform: rotate(-8deg); font-family: var(--fh); font-size: 22px; letter-spacing: .08em; background: rgba(30,142,74,.06); }
.pp-stamp.red { border-color: var(--red); color: var(--red); background: rgba(192,57,43,.06); }
.pp-stamp.orange { border-color: var(--orange); color: var(--orange); background: rgba(210,122,30,.06); }
.pp-doc .ex .pp-stamp { margin-top: 4px; }.pdf-stage { position: fixed; left: -10000px; top: 0; }
@media print {
  @page { size: A4; margin: 0; }
  body > *:not(.docview) { display: none !important; }
  .docview { position: static; background: #fff; }
  .dv-bar { display: none; }
  .dv-scroll { padding: 0; overflow: visible; }
  .dv-hold, .dv-fit { width: auto !important; height: auto !important; transform: none !important; }
  .paper { box-shadow: none; }
}

/* ===================================================================
   PUNCH & ANIMATIONS
   =================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes brickIn { 0% { transform: translateY(-60px); opacity: 0; } 70% { transform: translateY(3px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes shine { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes pulseRed { 0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,.45); } 50% { box-shadow: 0 0 0 7px rgba(192,57,43,0); } }
@keyframes bumpK { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes rip { to { transform: scale(1); opacity: 0; } }
@keyframes drift { from { background-position: 0 0; } to { background-position: 128px 64px; } }
@keyframes burst { 0% { transform: rotate(var(--a)) translateY(0) scale(.2); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-70px) scale(1); opacity: 0; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(30,142,74,.5); } 100% { box-shadow: 0 0 0 26px rgba(30,142,74,0); } }

/* Entrée en cascade des blocs à l'ouverture d'une page */
#view:not(.nofade) > *, #view:not(.nofade) .kpis > *, #view:not(.nofade) .qa > *, #view:not(.nofade) .cols > div > * { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
#view:not(.nofade) > *:nth-child(2) { animation-delay: .06s; } #view:not(.nofade) > *:nth-child(3) { animation-delay: .12s; } #view:not(.nofade) > *:nth-child(4) { animation-delay: .18s; } #view:not(.nofade) > *:nth-child(n+5) { animation-delay: .22s; }
#view:not(.nofade) .qa > *:nth-child(1), #view:not(.nofade) .kpis > *:nth-child(1) { animation-delay: .08s; }
#view:not(.nofade) .qa > *:nth-child(2), #view:not(.nofade) .kpis > *:nth-child(2) { animation-delay: .14s; }
#view:not(.nofade) .qa > *:nth-child(3), #view:not(.nofade) .kpis > *:nth-child(3) { animation-delay: .20s; }
#view:not(.nofade) .qa > *:nth-child(4), #view:not(.nofade) .kpis > *:nth-child(4) { animation-delay: .26s; }
#view:not(.nofade) .kpis > *:nth-child(5) { animation-delay: .32s; }
#view:not(.nofade) .cols > div > *:nth-child(2) { animation-delay: .3s; } #view:not(.nofade) .cols > div > *:nth-child(n+3) { animation-delay: .38s; }
#view:not(.nofade) .prods > * { animation: rise .4s cubic-bezier(.2,.8,.2,1) both; }
#view { animation: none; }

/* Bandeau d'accueil */
.hero { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 28px; margin-bottom: 16px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #c9573a 0%, var(--brick) 35%, var(--brick2) 70%, #5e2213 100%); box-shadow: 0 18px 40px rgba(143,52,32,.35); }
.hero::before { content: ''; position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Cpath d='M0 15.5h64M32 0v15.5M0 31.5h64M16 15.5v16M48 15.5v16' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E"); animation: drift 40s linear infinite; }
.hero::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); animation: shine 6s ease-in-out 1s infinite; }
.hero-in { position: relative; z-index: 1; max-width: 70%; }
.hero-d { font-size: 13px; font-weight: 600; color: #ffd7c6; text-transform: uppercase; letter-spacing: .08em; }
.hero h2 { margin: 2px 0 14px; font-family: var(--fh); font-size: 34px; font-weight: 800; line-height: 1.05; }
.hero-l { font-size: 14px; color: #ffe2d6; font-weight: 600; }
.hero-n { font-family: var(--fh); font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-shadow: 0 4px 18px rgba(0,0,0,.25); }
.hero-s { margin-top: 6px; font-size: 14px; color: #ffe2d6; }
.hero-s .up { color: #b8f5c9; font-weight: 700; } .hero-s .down { color: #ffd0c4; font-weight: 700; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.18); transition: background .2s, transform .2s; }
.hchip:hover { background: rgba(255,255,255,.26); transform: translateY(-2px); }
.hchip b { min-width: 24px; height: 24px; border-radius: 12px; background: #fff; color: var(--brick2); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; padding: 0 6px; }
.hchip.red b { background: #ffe1db; color: var(--red); animation: pulseRed 2s infinite; }
.hchip.blue b { color: var(--blue); } .hchip.orange b { color: var(--orange); }
.hero-wall { position: absolute; right: 18px; bottom: 10px; width: 250px; height: 190px; z-index: 0; opacity: .95; }
.hero-wall rect { fill: rgba(255,255,255,.22); stroke: rgba(255,255,255,.35); animation: brickIn .55s cubic-bezier(.3,1.4,.5,1) both; }
.hero-wall rect:nth-child(5n+3) { fill: rgba(243,217,191,.55); }
.hero-roof { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw 1s ease-out 1.8s forwards; }
@media (max-width: 760px) { .hero { padding: 20px; } .hero-in { max-width: none; } .hero h2 { font-size: 26px; } .hero-n { font-size: 40px; } .hero-wall { width: 150px; height: 114px; right: -10px; bottom: auto; top: 8px; opacity: .45; } .hero-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; } .hero-chips::-webkit-scrollbar { display: none; } .hchip { flex: none; } }

/* Cartes et listes vivantes */
.kpi, .card, .qa button, .prod, .list { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .2s; }
.kpi.click:hover, .qa button:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(29,39,49,.12); }
.kpi::after { width: 5px; background: linear-gradient(180deg, var(--k, var(--brick)), color-mix(in srgb, var(--k, var(--brick)) 55%, #fff)); }
.kpi::before { content: ''; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: var(--k, var(--brick)); opacity: .07; transition: transform .4s; }
.kpi:hover::before { transform: scale(1.6); }
.kpi b { font-size: 29px; }
.qa button { position: relative; overflow: hidden; }
.qa button svg { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.qa button:hover svg { transform: scale(1.18) rotate(-6deg); }
.qa button.main { background: linear-gradient(135deg, #cf5a3d, var(--brick) 45%, var(--brick2)); box-shadow: 0 12px 26px rgba(181,69,43,.35); }
.qa button.main::after { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: shine 4s ease-in-out 1.5s infinite; }
button.it, .it.click, a.it { transition: background .15s, padding-left .2s; }
button.it:hover, a.it:hover { padding-left: 18px; }
.badge.red { animation: pulseRed 2.2s infinite; }

/* Boutons : relief, pression, onde */
.btn, .qa button, .prod, .chip, .pad button { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.btn { transition: transform .12s, box-shadow .2s, background .2s, border-color .2s; }
.btn:active:not(:disabled), .qa button:active, .prod:active, .chip:active, .pad button:active { transform: scale(.96); }
.btn.pri { background: linear-gradient(135deg, #c8553a, var(--brick) 50%, var(--brick2)); box-shadow: 0 6px 16px rgba(181,69,43,.3); }
.btn.pri:hover { box-shadow: 0 10px 22px rgba(181,69,43,.4); transform: translateY(-1px); }
.btn.green { background: linear-gradient(135deg, #27a65a, var(--green)); box-shadow: 0 6px 16px rgba(30,142,74,.28); }
.btn.dark { background: linear-gradient(135deg, var(--slate3), var(--slate)); }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .18; transform: scale(0); animation: rip .6s ease-out forwards; pointer-events: none; }
.chip { transition: background .2s, color .2s, transform .15s; }
.chip.on { box-shadow: 0 4px 12px rgba(31,42,51,.25); }

/* Menu de gauche */
#side { background: linear-gradient(180deg, #24313b 0%, var(--slate) 60%, #18222a 100%); }
#side nav a { transition: background .2s, color .2s, transform .2s; }
#side nav a:hover { transform: translateX(3px); }
#side nav a.on::before { animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
#side nav a.sell { background: linear-gradient(135deg, #cf5a3d, var(--brick)); box-shadow: 0 8px 20px rgba(181,69,43,.35); overflow: hidden; }
#side nav a.sell::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); animation: shine 5s ease-in-out 2s infinite; }
#side .brand img { transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
#side .brand:hover img { transform: rotate(-8deg) scale(1.08); }
.pill { animation: pop .4s cubic-bezier(.3,1.6,.5,1); }
#tabs a.sell .b { background: linear-gradient(135deg, #cf5a3d, var(--brick2)); transition: transform .2s; }
#tabs a.sell:active .b { transform: scale(.9); }
#tabs a svg { transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
#tabs a.on svg { transform: translateY(-2px) scale(1.12); }

/* Connexion et démarrage */
#login { animation: drift 60s linear infinite; }
.lg { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.lg-brand img { animation: pop .7s cubic-bezier(.3,1.6,.5,1) .2s both; }
.lg-brand h1 { animation: rise .6s ease .35s both; }
.lg-user { transition: transform .15s, border-color .2s, background .2s; }
.lg-user:hover { transform: translateY(-2px); }
.dots i { transition: background .15s, transform .2s cubic-bezier(.3,1.6,.5,1); }
.dots i.f { transform: scale(1.25); }
#splash img { animation: pop .8s cubic-bezier(.3,1.6,.5,1) both; }
#splash .t { animation: rise .6s ease .3s both; }

/* Caisse */
.prod:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(29,39,49,.12); }
.prod .p { transition: color .2s; } .prod:hover .p { color: var(--brick); }
.flydot { position: fixed; z-index: 95; width: 22px; height: 22px; border-radius: 7px; background: var(--brick); box-shadow: 0 6px 16px rgba(181,69,43,.5); pointer-events: none; transform: translate(-50%,-50%); }
.bump { animation: bumpK .45s cubic-bezier(.3,1.6,.5,1); }
.cartbar { transition: transform .2s; background: linear-gradient(135deg, var(--slate2), var(--slate)) !important; }
.pos .cart .cf .tot.big span:last-child { color: var(--brick2); }
.units button, .pay-modes button { transition: transform .15s, border-color .2s, background .2s; }
.units button:hover, .pay-modes button:hover { transform: translateY(-2px); }
.units button.on, .pay-modes button.on { animation: bumpK .35s; box-shadow: 0 6px 14px rgba(181,69,43,.18); }

/* Vente réussie : coche qui éclate */
.okburst { position: relative; width: 84px; height: 84px; margin: 4px auto 0; }
.okburst span { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, #2bb764, var(--green)); color: #fff; display: flex; align-items: center; justify-content: center; animation: pop .55s cubic-bezier(.3,1.6,.5,1) both, ring 1s ease-out .3s; }
.okburst span svg { width: 44px; height: 44px; stroke-width: 2.6; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .4s ease-out .35s forwards; }
.okburst i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 2px; background: var(--c); animation: burst .9s cubic-bezier(.2,.8,.3,1) .25s both; }

/* Fenêtres, messages, graphiques */
.sheet { animation: up .35s cubic-bezier(.2,1.2,.4,1); }
@keyframes up { from { transform: translateY(40px) scale(.97); opacity: 0; } }
.ov { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#toast { transition: transform .35s cubic-bezier(.3,1.5,.5,1), opacity .25s; }
#toast.on { transform: translate(-50%, 0) scale(1); }
.chart .c i { transform-origin: bottom; animation: growY .8s cubic-bezier(.2,.8,.2,1) both; background: linear-gradient(180deg, #4d6170, var(--slate3)); }
.chart .c.today i { background: linear-gradient(180deg, #d66447, var(--brick)); box-shadow: 0 6px 16px rgba(181,69,43,.35); }
.chart .c:nth-child(1) i { animation-delay: .3s; } .chart .c:nth-child(2) i { animation-delay: .36s; } .chart .c:nth-child(3) i { animation-delay: .42s; } .chart .c:nth-child(4) i { animation-delay: .48s; } .chart .c:nth-child(5) i { animation-delay: .54s; } .chart .c:nth-child(6) i { animation-delay: .6s; } .chart .c:nth-child(7) i { animation-delay: .66s; }
@keyframes growY { from { transform: scaleY(0); } }
.bar i { animation: growX 1s cubic-bezier(.2,.8,.2,1) .3s both; transform-origin: left; }
@keyframes growX { from { transform: scaleX(0); } }
.top h1 { animation: rise .4s ease both; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }