/* =====================================================================
   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:#0A3FF2;--accent-hover:#0732C4;--accent-soft:#E9EFFF;
  --bg:#F3F5FC;--line:#E8EBF5;--text:#1B2036;--text-2:#667089;--text-3:#A2A9BD;
  --info:#0A3FF2;--info-bg:#E9EFFF;
  --c-purple:#A56CF2;--c-yellow:#FFC22E;--c-coral:#F0605D;--c-green:#27B07F;
  --shadow-blue:0 12px 24px -10px rgba(10,63,242,.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:#fff;border:0;box-shadow:0 4px 10px -2px rgba(10,63,242,.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:#fff}
#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)}
#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);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:#fff;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:#fff;border-color:transparent;box-shadow:0 14px 18px -12px rgba(10,63,242,.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:#fff}
tbody tr:hover .note,tbody tr:hover small{color:rgba(255,255,255,.8)}
tbody tr:hover td .btn,tbody tr.sel td .btn{background:#fff;color:var(--accent);border-color:#fff}
tbody tr:hover td .btn.d{color:var(--danger)}
tbody tr:hover td .chip{background:rgba(255,255,255,.18);color:#fff}
tbody tr:hover td .chip:before{background:#fff}
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:#fff}
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:#fff;box-shadow:var(--shadow-blue)}
.lrow:hover *{color:inherit}.lrow:hover .chip{background:rgba(255,255,255,.2);color:#fff}
.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:#fff}
.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,#2D63FF,#0A3FF2)}
.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);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)}
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%,#5C85FF 0,#0A3FF2 42%,#062A9E 100%)!important}
.lgleft{background:linear-gradient(145deg,#2D63FF,#0732C4)}
.orb{background:radial-gradient(circle at 30% 28%,#D4E0FF,#7FA0FF 55%,#0A3FF2);box-shadow:inset -10px -14px 28px rgba(6,42,158,.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:#fff;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:#fff;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:#fff}.pm-res button small{color:var(--text-2)}.pm-res button:hover small{color:rgba(255,255,255,.85)}
.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:#fff}.pm-it:hover small,.pm-it:hover b{color:#fff}.pm-it:hover .btn{background:#fff;color:var(--accent);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)}
.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 #cfd9ff;background:#E9EFFF;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:#0A3FF2}.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 #cfd9ff!important}
.kmenu button{color:#1B2036!important;font-size:14px!important;padding:10px 14px!important;white-space:nowrap}
.kmenu button:hover:not(:disabled){background:#E9EFFF!important;color:#0A3FF2!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 #cfd9ff}.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 #cfd9ff;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}