/* =====================================================================
   THÈME v40 — bleu (maquette 3), menu (maquette 1), tableau de bord coloré (maquette 2)
   Chargé APRÈS theme.css. Une page qui tient dans l'écran : seul le contenu défile.
   ===================================================================== */
:root{
  --accent:#FFC22E;--on-accent:#1B2036;--accent-text:#9A6A00;--accent-hover:#E5A800;--accent-soft:#FFF4D6;
  --bg:#F3F5FC;--line:#E8EBF5;--text:#1B2036;--text-2:#667089;--text-3:#A2A9BD;
  --info:#B77F00;--info-bg:#FFF4D6;
  --c-purple:#A56CF2;--c-yellow:#FFC22E;--c-coral:#F0605D;--c-green:#27B07F;
  --shadow-blue:0 12px 24px -10px rgba(255,194,46,.55);
  --shadow-card:0 1px 2px rgba(27,32,54,.04),0 6px 18px -12px rgba(27,32,54,.12);
}

/* ---------- l'écran ne défile jamais : seul <main> défile ---------- */
html,body{height:100%;overflow:hidden}
#app{height:100vh;height:100dvh;min-height:0;overflow:hidden}
#main{display:flex;flex-direction:column;height:100%;min-width:0;overflow:hidden}
header#top{position:relative;flex:none;top:auto}
main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;max-width:none;margin:0;padding:20px 32px 28px;width:100%;scrollbar-width:thin;scrollbar-color:#cfd5e8 transparent}
#view{max-width:1480px;margin:0 auto}
main::-webkit-scrollbar{width:8px}main::-webkit-scrollbar-thumb{background:#cfd5e8;border-radius:8px}
body.guest #app{overflow:auto}
@media print{
  html,body,#app,#main,main{height:auto!important;overflow:visible!important}
}

/* ---------- menu (maquette 1) ---------- */
#side{position:relative;overflow:visible;height:100%;background:var(--surface);border-right:1px solid var(--line);width:252px;z-index:50}
.brand{height:68px;padding:0 20px;border:0;gap:10px}
.bmark{width:34px;height:34px;border-radius:10px;background:var(--accent);font-size:17px}
.bname b{font-size:18px;font-weight:var(--w-medium);letter-spacing:-.2px}
#collapse.edge{position:absolute;top:26px;right:-12px;width:24px;height:24px;border-radius:999px;background:var(--accent);color:var(--on-accent);border:0;box-shadow:0 4px 10px -2px rgba(255,194,46,.5);z-index:5;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
#collapse.edge:hover{background:var(--accent-hover);color:var(--on-accent)}
#collapse.edge .li{stroke-width:2.2}
body.side-small #collapse.edge .li{transform:rotate(180deg)}
#sbsearch{display:flex;align-items:center;gap:8px;margin:0 16px 8px;height:40px;padding:0 12px;border-radius:10px;background:var(--bg);color:var(--text-3);border:1px solid transparent}
#sbsearch:focus-within{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
#sbsearch input{border:0!important;outline:0!important;box-shadow:none!important;background:transparent;flex:1;min-width:0;height:100%;padding:0;font-size:13px;color:var(--text)}
#sbsearch #gsi{display:flex;font-size:0;color:var(--text-2)}
#menu{padding:0 12px 8px;gap:0;overflow-y:auto;scrollbar-width:none}
#menu::-webkit-scrollbar{display:none}
#menu .mgt{display:flex;align-items:center;justify-content:space-between;width:100%;height:auto;background:transparent;border:0;user-select:none;padding:14px 12px 6px;font-size:13px;line-height:18px;font-weight:var(--w-medium);color:var(--text);cursor:pointer;border-radius:0}
#menu .mgt:hover{background:transparent;color:var(--accent-text)}
#menu .mgt .chv{display:flex;color:var(--text-3);transition:transform .15s}#menu .mgt .chv.c{transform:rotate(-90deg)}
#menu .mg.hid{display:none}
#menu .mg button{height:40px;padding:0 12px;border-radius:10px;gap:12px;font-weight:var(--w-regular);color:var(--text-2);width:100%}
#menu .mg button:hover{background:var(--bg);color:var(--text)}
#menu .mg button.on{background:var(--accent-soft);color:var(--accent-text);font-weight:var(--w-medium)}
#menu .mg button .ic{color:inherit}
#menu .msep{height:1px;background:var(--line);margin:10px 8px 0}
.badge{min-width:22px;height:20px;text-align:center;background:#E0262F;font-size:11px;line-height:20px;padding:0 6px}
.tseg{display:flex;margin:6px 16px 10px;padding:3px;gap:2px;background:var(--bg);border-radius:10px}
.tseg button{flex:1;height:32px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.tseg button.on{background:#fff;color:var(--text);box-shadow:0 1px 4px rgba(27,32,54,.12)}
#who{padding:10px 16px 16px;border:0;position:static}
.ucard{padding:0;gap:10px;cursor:default;background:transparent}
.ucard:hover{background:transparent}
.ucard .av{width:40px;height:40px;border-radius:12px;cursor:pointer;background:var(--accent);color:var(--on-accent);font-size:15px}
.ucard .un{cursor:pointer}
.ucard .lo{width:36px;height:36px;border:0;background:transparent;color:var(--text-2);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0}
.ucard .lo:hover{background:var(--danger-bg);color:var(--danger)}
body.side-small #side,#side.sm{width:76px}
body.side-small #sbsearch{margin:0 14px 8px;padding:0;justify-content:center}body.side-small #sbsearch input{display:none}
body.side-small #menu .mgt{display:none}body.side-small #menu .mg.hid{display:block}
body.side-small #menu .msep{margin:8px 8px}
body.side-small .tseg{margin:6px 14px 10px}body.side-small .tseg button span{display:none}body.side-small #tLight{display:none}body.side-small #tDark{display:inline-flex}
body.side-small[data-x] .tseg{}
body.side-small #who{padding:10px 8px 16px}body.side-small .ucard{flex-direction:column}body.side-small .ucard .un{display:none}
body.side-small .brand{justify-content:center;padding:0}
@media(max-width:1199px) and (min-width:861px){
  #side{width:76px}
  #sbsearch{margin:0 14px 8px;padding:0;justify-content:center}#sbsearch input{display:none}
  #menu .mgt{display:none}
  .tseg{margin:6px 14px 10px}.tseg button span{display:none}#tLight{display:none}
  #who{padding:10px 8px 16px}.ucard{flex-direction:column}.ucard .un{display:none}
  #collapse.edge{display:none}
}

/* ---------- barre du haut ---------- */
header#top{padding:0 32px;gap:12px}
#ptitle{display:none}
#clock{background:var(--accent-soft)}
#clock .rim{stroke:var(--accent)}
.dot8{background:#E0262F}

/* ---------- tableaux : survol / sélection = ligne bleue (maquette 3) ---------- */
table{border-collapse:separate;border-spacing:0 2px;margin-top:-2px}
tbody tr td{transition:background .12s,color .12s,box-shadow .12s}
tbody tr:hover td,tbody tr.sel td{background:var(--accent)!important;color:var(--on-accent);border-color:transparent;box-shadow:0 14px 18px -12px rgba(255,194,46,.55)}
tbody tr:hover td:first-child,tbody tr.sel td:first-child{border-radius:12px 0 0 12px}
tbody tr:hover td:last-child,tbody tr.sel td:last-child{border-radius:0 12px 12px 0}
tbody tr:hover td *,tbody tr.sel td *{color:inherit}
tbody tr:hover td b,tbody tr.sel td b{color:var(--on-accent)}
tbody tr:hover .note,tbody tr:hover small{color:rgba(27,32,54,.75)}
tbody tr:hover td .btn,tbody tr.sel td .btn{background:#fff;color:var(--accent-text);border-color:#fff}
tbody tr:hover td .btn.d{color:var(--danger)}
tbody tr:hover td .chip{background:rgba(27,32,54,.12);color:var(--on-accent)}
tbody tr:hover td .chip:before{background:var(--on-accent)}
tbody tr:hover td input,tbody tr:hover td select{color:var(--text)}
tbody tr:hover td .pic,tbody tr:hover td .thumb{background:rgba(255,255,255,.25)}
tbody tr:hover .pos,tbody tr:hover .neg{color:var(--on-accent)}
tr.tot:hover td{background:transparent!important;color:inherit;box-shadow:none}
tbody tr:last-child td{border-bottom:0}
.lrow{border-radius:12px;padding:0 12px;margin:0 -12px;border-bottom-color:transparent;transition:background .12s,color .12s}
.lrow:hover{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-blue)}
.lrow:hover *{color:inherit}.lrow:hover .chip{background:rgba(27,32,54,.12);color:var(--on-accent)}
.prow{border-radius:12px;padding:12px;margin:0 -12px;border-bottom-color:transparent}
.prow:hover{background:var(--accent-soft)}

/* ---------- boutons principaux : bleu ---------- */
.btn.p{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.p:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* ---------- tableau de bord coloré (maquette 2) ---------- */
.hello{margin-bottom:14px}
.hello h2{margin-bottom:2px}
.kcards{gap:16px;margin-bottom:16px}
.kcard{position:relative;border:0;border-radius:18px;padding:18px 20px;color:#fff;overflow:hidden;box-shadow:none}
.kcard small{color:rgba(255,255,255,.9);font-size:13px}
.kcard .v{font-size:30px;font-weight:var(--w-regular);margin:6px 0 4px;letter-spacing:-.5px}
.kcard .dl,.kcard .dl.up,.kcard .dl.dn{color:rgba(255,255,255,.92)}
.kcard .ki{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-style:normal;color:#fff}
.kcard:after{content:"";position:absolute;right:-30px;bottom:-40px;width:110px;height:110px;border-radius:999px;background:rgba(255,255,255,.12)}
.kcard.c1{background:linear-gradient(135deg,#FFD25C,#FFC22E)}
.kcard.c2{background:linear-gradient(135deg,#B67FF7,#9459EC)}
.kcard.c3{background:linear-gradient(135deg,#FFD04D,#FFB81C);color:#3A2B00}
.kcard.c3 small,.kcard.c3 .dl,.kcard.c3 .dl.up,.kcard.c3 .dl.dn{color:rgba(58,43,0,.8)}
.kcard.c3 .ki{background:rgba(58,43,0,.12);color:#3A2B00}
.kcard.c4{background:linear-gradient(135deg,#F67B76,#EA524F)}
.drow{gap:16px;margin-bottom:16px}
.drow.t{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{border:0;border-radius:18px;box-shadow:var(--shadow-card);padding:18px 20px}
.chead{margin-bottom:10px}
.drow .card .chead h3{font-size:15px}
.seg{background:var(--bg);padding:3px;border-radius:10px}
.seg button{height:26px;border-radius:8px}
.seg button.on{background:#fff;color:var(--accent-text);box-shadow:0 1px 3px rgba(27,32,54,.12)}
.alertbar{border-radius:14px;margin-bottom:16px;padding:10px 14px}
.pbar i.w{background:var(--c-yellow)}.pbar i.r{background:var(--c-coral)}
.prow .pbar{height:6px}
.mini div.g b{color:var(--c-green)}.mini div.r b{color:var(--c-coral)}
@media(max-width:1180px){.drow.t{grid-template-columns:minmax(0,1fr)}}

/* ---------- onglets, champs : bleu ---------- */
.tabs2 button.on,.ivtabs button.on,.seg button.on{background:var(--accent-soft);color:var(--accent-text)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- connexion : même animation, couleurs bleues ---------- */
.lgbg{background:radial-gradient(circle at 20% 15%,#FFD866 0,#FFC22E 42%,#B07A00 100%)!important}
.lgleft{background:linear-gradient(145deg,#FFD25C,#E5A800)}
.orb{background:radial-gradient(circle at 30% 28%,#FFF0C2,#FFCF4D 55%,#FFC22E);box-shadow:inset -10px -14px 28px rgba(176,122,0,.35)}

/* ---------- téléphone : le tiroir remplace le menu ---------- */
@media(max-width:860px){
  main{padding:14px 14px 24px}
  header#top{padding:0 8px}
  #side{z-index:60;position:fixed;left:0;top:0;bottom:0;height:100%;width:280px;max-width:86vw;transform:translateX(-105%);transition:transform .22s ease}
  body.menu-open #side{transform:none}
  #collapse.edge{display:none}
  .kcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kcard{padding:14px}.kcard .v{font-size:20px}.kcard .ki{display:none}
  .tseg button span{display:inline}
  #sbsearch{margin:0 16px 8px}#sbsearch input{display:block}
  #menu .mgt{display:flex}
  .ucard{flex-direction:row}.ucard .un{display:flex}
  #who{padding:10px 16px 16px}
}

/* ---------- compact : tout tient dans l'écran ---------- */
.crumb{display:none}
main{padding:16px 28px 24px}
.hello{margin-bottom:10px}.hello h2{font-size:22px;line-height:28px;margin:0}.hello span:not(.seg):not(.pill){font-size:12px}
#menu .mg button{height:34px}
#menu .mgt{padding:10px 12px 2px}
.brand{height:60px}
#sbsearch{height:36px;margin-bottom:4px}
.tseg{margin:4px 16px 8px}.tseg button{height:28px}
#who{padding:6px 16px 12px}
.kcard{padding:14px 18px}.kcard .v{font-size:26px;line-height:32px;margin:2px 0}
.kcard .ki{top:12px;right:14px;width:32px;height:32px}
.card{padding:16px 18px}
.alertbar{padding:8px 12px;margin-bottom:12px}
.kcards{margin-bottom:12px}.drow{margin-bottom:12px}
.prow{padding:8px 12px}.lrow{height:46px}
@media(max-width:860px){.crumb{display:none}}

@media(max-height:880px) and (min-width:861px){
  #menu .mg button{height:30px}#menu .mgt{padding:6px 12px 0}#menu .msep{margin-top:6px}
  .brand{height:52px}#collapse.edge{top:20px}
  .tseg{margin:2px 16px 6px}.tseg button{height:26px}
  #who{padding:4px 16px 8px}.ucard .av{width:34px;height:34px}
  .kcard{padding:12px 16px}.kcard .v{font-size:24px;line-height:28px}
  .lrow{height:42px}.prow{padding:6px 12px}
}

/* ---------- fenêtre « Nouvelle vente » (organisée en sections, façon maShop, aux couleurs Maarifa) ---------- */
/* fenêtre centrée quand elle est petite, mais jamais coupée en haut quand elle est plus haute que l'écran : on fait défiler */
#modal{align-items:flex-start;padding:16px;overflow-y:auto;overscroll-behavior:contain}
#modal .box{margin:auto 0;flex:none}
#modal .box.posbox{width:min(940px,100%);padding:0;display:flex;flex-direction:column;max-height:calc(100dvh - 32px);overflow:hidden;border-radius:18px}
.pm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 24px 14px;border-bottom:1px solid var(--line)}
.pm-head h3{margin:0;font-size:20px;line-height:26px}.pm-head .note{margin:2px 0 0;font-size:13px}
.pm-x{width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.pm-x:hover{background:var(--bg);color:var(--text)}
.pm-body{flex:1;min-height:0;overflow-y:auto;padding:16px 24px;display:flex;flex-direction:column;gap:14px;background:#FAFBFE}
.pm-sec{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.pm-st{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pm-st i{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.pm-st b{font-size:15px;font-weight:var(--w-medium)}.pm-n{color:var(--text-2);font-size:13px}
.pm-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:12px}
.pm-tabs button{height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:13px;font-weight:var(--w-regular);color:var(--text-2);cursor:pointer}
.pm-tabs button:hover{background:var(--bg)}.pm-tabs button.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:var(--w-medium)}
.pm-two{display:grid;grid-template-columns:1fr 2fr;gap:12px}.pm-three{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px}
#modal .f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-2);font-weight:var(--w-regular)}
#modal .f input{width:100%}.req{color:var(--danger)}
.pm-res{display:flex;flex-direction:column;margin-top:6px}
.pm-res button{display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left;border:0;background:transparent;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:13px;color:var(--text)}
.pm-res button:hover{background:var(--accent);color:var(--on-accent)}.pm-res button small{color:var(--text-2)}.pm-res button:hover small{color:rgba(27,32,54,.75)}
.pm-sel{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--accent-soft);border-radius:10px;padding:10px 14px}.pm-sel small{display:block;color:var(--text-2)}
.pm-find{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pm-search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;color:var(--text-3);background:#fff}
.pm-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pm-search input{border:0!important;box-shadow:none!important;outline:0;flex:1;min-width:0;height:100%;padding:0;background:transparent}
.pm-list{max-height:150px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:12px}
.pm-it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px}
.pm-it:hover{background:var(--accent);color:var(--on-accent)}.pm-it:hover small,.pm-it:hover b{color:var(--on-accent)}.pm-it:hover .btn{background:#fff;color:var(--accent-text);border-color:#fff}
.pm-it .d{flex:1;min-width:0}.pm-it .d b{display:block;font-weight:var(--w-regular);font-size:13px}.pm-it .d small{display:block;color:var(--text-2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-it .p{font-weight:var(--w-medium);font-size:13px;white-space:nowrap}
.pm-empty-s{padding:14px;text-align:center;color:var(--text-2);font-size:13px}
.pm-empty{border:1.5px dashed #CBD2E6;border-radius:14px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-3);text-align:center}
.pm-empty b{color:var(--text-2);font-weight:var(--w-medium)}.pm-empty span{font-size:12px}
.pm-cart{display:flex;flex-direction:column;gap:8px}
.pm-line{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.pm-line .d{flex:1;min-width:0;font-size:13px}.pm-line .d b{font-weight:var(--w-regular)}
.pm-line .q1{width:60px;text-align:center;color:var(--text-2)}.pm-line .pu{width:70px;text-align:right;color:var(--text-2)}
.pm-line .ls{min-width:78px;text-align:right;font-weight:var(--w-medium)}
.pm-step{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:2px}
.pm-step button{width:28px;height:28px;border:0;border-radius:8px;background:var(--bg);cursor:pointer;font-size:16px;line-height:1}.pm-step b{min-width:22px;text-align:center}
.pm-rm{width:32px;height:32px;border:0;background:transparent;color:var(--text-3);border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}.pm-rm:hover{background:var(--danger-bg);color:var(--danger)}
.pm-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;border-top:1px solid var(--line);background:#fff}
.pm-t{display:flex;flex-direction:column;line-height:1.25}.pm-t span{font-size:12px;color:var(--text-2)}.pm-t b{font-size:24px;font-weight:var(--w-medium)}.pm-t small{font-size:12px;color:var(--text-2)}
.pm-act{display:flex;gap:8px}
@media(max-width:860px){
  #modal{padding:0;align-items:stretch}
  #modal .box.posbox{width:100%!important;max-height:100dvh;border-radius:0}
  .pm-head,.pm-foot{padding:14px 16px}.pm-body{padding:12px}.pm-two,.pm-three{grid-template-columns:1fr}
  .pm-line{flex-wrap:wrap}.pm-line .d{flex-basis:100%}
}
#modal{z-index:100}

/* ---------- cartes de chiffres dans les onglets (stock, maintenance, caisse, rapports…) : pastel multicolore ---------- */
.grid{gap:16px;margin-bottom:16px}
.kpi,.kc,.mini>div{--tint:#E3EEFB;--ac:#3F7FD0;position:relative;overflow:hidden;border:1px solid rgba(27,32,54,.05)!important;border-radius:16px!important;
  background:linear-gradient(160deg,var(--tint) 0%,#FFFFFF 78%)!important;color:var(--text)!important;box-shadow:0 1px 2px rgba(27,32,54,.04)!important;padding:14px 18px 22px!important;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;transition:transform .15s,box-shadow .15s}
.kpi:hover,.kc:hover,.mini>div:hover{transform:translateY(-2px);box-shadow:0 14px 24px -14px rgba(27,32,54,.28)!important}
.kpi small,.kc small,.mini>div small{display:inline-flex!important;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.75);color:var(--text-2)!important;font-size:12px!important;font-weight:var(--w-regular)!important;letter-spacing:0!important;text-transform:none!important;opacity:1!important;margin:0!important}
.kpi small:before,.kc small:before,.mini>div small:before{content:""!important;display:block!important;width:6px;height:6px;border-radius:999px;background:var(--ac)}
.kpi b,.kc b,.mini>div b{font-size:26px!important;line-height:32px!important;font-weight:var(--w-medium)!important;color:var(--text)!important;letter-spacing:-.3px!important;font-variant-numeric:tabular-nums}
.kpi span,.kc span,.mini>div span{font-size:12px!important;color:var(--text-2)!important;opacity:1!important;margin:0!important}
.kpi:after,.kc:after,.mini>div:after{content:"";position:absolute;left:18px;right:18px;bottom:10px;height:5px;border-radius:999px;
  background:linear-gradient(90deg,var(--ac) 0 34%,transparent 34% 35.5%,rgba(27,32,54,.08) 35.5% 67%,transparent 67% 68.5%,rgba(27,32,54,.08) 68.5% 100%)}
/* couleurs : rose, bleu, pêche, vert, lavande, jaune — en alternance, ou selon le sens (g = vert, r = rose, b = bleu…) */
.grid>:nth-child(6n+1),.mini>:nth-child(6n+1){--tint:#FBE1E1;--ac:#C8504D}
.grid>:nth-child(6n+2),.mini>:nth-child(6n+2){--tint:#DCEEFA;--ac:#3A94C2}
.grid>:nth-child(6n+3),.mini>:nth-child(6n+3){--tint:#FBEAD0;--ac:#C47E22}
.grid>:nth-child(6n+4),.mini>:nth-child(6n+4){--tint:#DDF3E6;--ac:#2C9C69}
.grid>:nth-child(6n+5),.mini>:nth-child(6n+5){--tint:#EAE4FB;--ac:#7656D4}
.grid>:nth-child(6n+6),.mini>:nth-child(6n+6){--tint:#FFF3C9;--ac:#C79A12}
.kpi.g,.kc.g,.mini>.g{--tint:#DDF3E6;--ac:#2C9C69}
.kpi.r,.kc.r,.mini>.r{--tint:#FBE1E1;--ac:#C8504D}
.kpi.b,.kc.b,.mini>.k{--tint:#DCEEFA;--ac:#3A94C2}
.kc.o{--tint:#FBEAD0;--ac:#C47E22}.kc.p{--tint:#EAE4FB;--ac:#7656D4}.kc.y{--tint:#FFF3C9;--ac:#C79A12}
.kc.g,.kc.o,.kc.p,.kc.y,.kc.r,.kc.b{background:linear-gradient(160deg,var(--tint) 0%,#FFFFFF 78%)!important}
.mini{gap:12px}
/* cartes (sections) : plus arrondies, même esprit */
.card{border-radius:18px}
.kpi small,.kc small,.mini>div small{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex}
.grid{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
tbody tr:hover td,tbody tr.sel td{box-shadow:none!important}

/* ---------- avis clients ---------- */
.fbqr{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.fbqr .qb{display:flex;gap:16px;align-items:flex-start;background:var(--bg);border-radius:16px;padding:14px}
.fbqr .qi{background:#fff;border-radius:12px;padding:6px;flex:none;line-height:0;box-shadow:var(--shadow-card)}
.fbqr p{margin:4px 0}.fblink{font-size:12px;word-break:break-all;color:var(--accent-text)}
.fbcfg{display:flex;gap:12px;align-items:flex-end;margin-top:12px;flex-wrap:wrap}.fbcfg .f{flex:1;min-width:240px}
.fbc{border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-top:12px;background:#fff}.fbc.iss{border-left:4px solid var(--c-coral)}
.fbh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.fbh .sp{flex:1}
.fbst i{font-style:normal;color:#D5DAEA;font-size:16px}.fbst i.on{color:#FFB81C}
.fbm{margin:8px 0;font-size:14px;line-height:22px;white-space:pre-wrap}.fbw{font-size:13px;color:var(--text-2)}
.fbact{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.fbact select{height:36px}.fbact input{flex:1;min-width:180px;height:36px}
.aact{margin-top:8px;padding:10px 12px;border:1px solid #F6DE9B;background:#FFF4D6;border-radius:10px}.aact p{margin:4px 0}.aact code{font-size:11px;color:#667089;display:block;margin-bottom:6px;word-break:break-all}
/* boîtes de dialogue du système */
#dlg{position:fixed;inset:0;z-index:300;background:rgba(20,26,50,.45);display:flex;align-items:flex-start;justify-content:center;padding:16px;backdrop-filter:blur(2px);overflow-y:auto}#dlg .dlgbox{margin:auto}
.dlgbox{background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(10,30,120,.3);width:min(440px,100%);padding:22px 24px;animation:dlgin .15s ease-out}
@keyframes dlgin{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.dlgbox h3{margin:0 0 8px;font-size:17px;color:#9A6A00}.dlgmsg{white-space:pre-line;line-height:1.45;color:#1B2036}.dlgbox input{width:100%;margin-top:10px;box-sizing:border-box}
.dlgbtn{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
[data-dark] .dlgbox{background:#1c2236;color:#e8ecf8}[data-dark] .dlgmsg{color:#e8ecf8}
#entrySerials{min-height:120px;font-family:ui-monospace,Consolas,monospace;font-size:13px}
/* menu des 3 points : lisible et toujours visible */
.kmenu{background:#fff!important;color:#1B2036!important;min-width:230px;max-height:70vh;overflow:auto;z-index:250!important;box-shadow:0 12px 36px rgba(10,30,120,.25)!important;border:1px solid #F6DE9B!important}
.kmenu button{color:#1B2036!important;font-size:14px!important;padding:10px 14px!important;white-space:nowrap}
.kmenu button:hover:not(:disabled){background:#FFF4D6!important;color:#9A6A00!important}.kmenu button:disabled{color:#a3abc2!important}
[data-dark] .kmenu{background:#1c2236!important;border-color:#33406b!important}[data-dark] .kmenu button{color:#e8ecf8!important}[data-dark] .kmenu button:hover:not(:disabled){background:#27325a!important;color:#fff!important}
.entph{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}.eph{position:relative}.eph img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid #F6DE9B}.eph .btn{position:absolute;top:2px;right:2px;padding:0 6px}.eph .note{position:absolute;bottom:2px;left:4px;background:rgba(255,255,255,.85);border-radius:4px;padding:0 4px}
.pcfg{border:1px solid #F6DE9B;border-radius:12px;padding:10px 12px;background:#F3F5FC;margin:6px 0}.pcfg summary{cursor:pointer}.pcfg .row{margin-top:8px}

/* écran de connexion : jamais coupé en haut sur un petit écran (portable, zoom 125 %) */
.lgbg{align-items:flex-start!important}.lgcard{margin:auto}

/* ===================== v2.1 — états, accessibilité, contrôle ===================== */
:root{--ok-ink:#1E7A55;--warn-ink:#8A6100;--bad-ink:#B3261E;--muted-ink:#5E6782}
/* textes secondaires lisibles (contraste ≥ 4,5:1) */
.note{color:var(--muted-ink)}
.neg{color:var(--bad-ink)}.pos{color:var(--ok-ink)}
/* bouton en cours d'enregistrement : bloqué, avec indicateur (protection double clic) */
.btn[aria-busy=true]{opacity:.75;cursor:progress}
.spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
/* pied de fenêtre : action principale à droite */
.mfoot{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:12px}
/* bandeau d'état de la caisse */
.sbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:10px;margin:0 0 12px;font-size:14px}
.sbar .dot{width:10px;height:10px;border-radius:50%}
.sbar.ok{background:#E8F6EF;color:var(--ok-ink)}.sbar.ok .dot{background:var(--ok-ink)}
.sbar.ko{background:#FDECEC;color:var(--bad-ink)}.sbar.ko .dot{background:var(--bad-ink)}
/* mode de paiement d'un achat */
.payset{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0}.payset legend{font-weight:600;padding:0 6px}
.req{color:var(--bad-ink)}
/* comptabilité */
.alist{list-style:none;padding:0;margin:0}.alist li{padding:8px 0;border-bottom:1px solid var(--line)}
td.ln div{white-space:nowrap;line-height:1.6}
.scrollx{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap;-webkit-overflow-scrolling:touch}
/* cibles tactiles sur téléphone */
@media (max-width:860px){.btn,.tabs2 button,input,select{min-height:44px}.btn.s{min-height:38px}}

/* ---------- v60 : accent jaune — texte foncé sur fond jaune ---------- */
.lgbtn,.lgbtn:hover,.btn.p,.btn.p:hover{color:var(--on-accent)}
.lgleft,.lgleft *{color:var(--on-accent)}
.lgleft .ring{border-color:rgba(27,32,54,.28)}

/* ---------- v61 : les fenêtres avec un tableau s'élargissent (rien ne dépasse du fond blanc) ---------- */
#modal .box{max-width:96vw;overflow-x:auto}
#modal .box:has(table){width:min(1040px,96vw)}
#modal .box table{max-width:100%}

/* v62 BATA */
.w140{width:140px}

/* v64 Centre de notifications — minimaliste */
#nfPop{position:fixed;inset:0;z-index:900;background:rgba(20,24,40,.18);display:flex;justify-content:flex-end;align-items:flex-start;padding:62px 16px 16px}
.nfbox{width:420px;max-width:100%;max-height:calc(100vh - 90px);background:#fff;color:#1B2036;border-radius:20px;box-shadow:0 12px 40px rgba(20,24,40,.2);display:flex;flex-direction:column;overflow:hidden}
.nfh{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:20px 22px 14px;border-bottom:1px solid #ECEDF2}
.nfh h3{margin:0;font-size:16px;font-weight:600}.nfh span{font-size:13px;color:#7A7F92;display:block;margin-top:2px}
.nfa{display:flex;gap:12px;align-items:center}
.nfmark{background:none;border:0;color:var(--accent-text);font-weight:500;font-size:12.5px;cursor:pointer;padding:4px 0}
.nfx{width:26px;height:26px;border-radius:50%;border:0;background:#111;color:#fff;display:grid;place-items:center;cursor:pointer}
.nfl{overflow:auto;padding:4px 10px 12px}
.nfs{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#9A9FB0;padding:14px 12px 4px}
.nfi{display:flex;gap:12px;width:100%;text-align:left;background:none;border:0;border-radius:12px;padding:11px 12px;cursor:pointer;color:inherit;font:inherit;align-items:flex-start}
.nfi:hover,.nfi:focus-visible{background:#F6F7FA;outline:none}
.nfav{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:14px;margin-top:1px}
.nfav.sys{background:#F0F1F5;color:#5B6178}.nfav.k-ai{background:var(--accent);color:var(--on-accent)}.nfav.k-warn{background:#FDECEA;color:#B3261E}
.nfb{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.nft{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.nfx1{font-size:13.5px;line-height:1.4;color:#2A2F45;overflow-wrap:anywhere}.nfx1 b{font-weight:600;color:#14182B}
.nfsub{color:var(--accent-text);font-weight:500}
.nft em{font-style:normal;font-size:12px;color:#8A8FA3;white-space:nowrap;display:inline-flex;gap:7px;align-items:center;margin-top:1px}
.nfdot{width:6px;height:6px;border-radius:50%;background:var(--accent-hover);display:inline-block}
.nfch{display:flex;gap:6px;flex-wrap:wrap}
.nfch span{font-size:11.5px;border:1px solid #E4E6EE;background:#F7F8FB;color:#3A4058;border-radius:7px;padding:2px 8px}
.nfd{font-size:12px;color:#8A8FA3}
.nfe{text-align:center;padding:34px 20px;color:#7A7F92}.nfe svg{color:#13794a}
@media(max-width:600px){#nfPop{padding:56px 8px 8px}}
/* Retouche 29/10/2026 : sur écran de 1366 px, la colonne d'actions des tableaux (ex. Ventes) était coupée ; les dates des « Dernières ventes » sont tronquées proprement */
@media(max-width:1500px){td{max-width:180px}}
.lrow .nm small{overflow:hidden;text-overflow:ellipsis}
/* Retouche 29/10/2026 — téléphone : étiquette au-dessus du champ, champ pleine largeur (Budget, etc.) */
@media(max-width:700px){
  label.f,.f{display:flex;flex-direction:column;gap:4px}
  label.f>input,label.f>select,label.f>textarea{width:100%;box-sizing:border-box}
}
/* Retouche 30/10/2026 : « Depuis plus de 90 jours » (Tableau de bord) n'est plus coupé : l'étiquette passe à la ligne */
.mini>div small{height:auto;min-height:22px;padding-top:3px;padding-bottom:3px;white-space:normal;line-height:1.25;border-radius:12px}