/* =====================================================================
   UNSLOP P1 — passe « unslop » (02/11/2026), COPIE LOCALE uniquement.
   Chargée en DERNIER, et seulement par : pro, index (stock), dashboard (agents),
   dashboard-v2, compta (finances). Ne touche à aucun id/classe utilisé par le JS.
   Direction : outils du comptoir Touni. Noir, blanc, rouge Touni (#c8101c) réservé
   à l'action principale et aux chiffres qui comptent. Archivo (titres, 600),
   IBM Plex Sans (texte), IBM Plex Mono (chiffres). Signature : le petit carré rouge Touni.
   Retrait = supprimer la balise <link> de cette feuille.
   unslop par Damir Sokolovsky (@heydamir), CC BY 4.0.
   ===================================================================== */

:root{
  --up-bg:#f6f6f4; --up-card:#ffffff; --up-raised:#efefec;
  --up-line:rgba(17,18,22,.09); --up-line-2:rgba(17,18,22,.14);
  --up-ink:#121316; --up-ink-2:#4e4f57; --up-mute:#6f7078;
  --up-band:#0f1013; --up-band-2:#18191d; --up-band-ink:#f2f2ef; --up-band-mute:#a3a4ab;
  --up-red:#c8101c; --up-red-ink:#b30e19; --up-gain:#15803d; --up-loss:#c8101c;
  --up-d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --up-b:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --up-m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --up-ease:cubic-bezier(.22,1,.36,1);
}

/* ── Commun : icônes Phosphor, points d'état, majuscules espacées, mouvements ── */
html[data-up] i.ph{font-size:1.125em;line-height:1;vertical-align:-0.16em}
html[data-up] .up-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-right:2px}
html[data-up] .up-dot-r{background:var(--up-red)} html[data-up] .up-dot-g{background:var(--up-gain)}
html[data-up] .up-dot-o{background:#c27a12} html[data-up] .up-dot-n{background:#a3a4ab}
/* Libellés en majuscules espacées -> casse normale (styles en ligne compris, même ceux créés par le JS) */
html[data-up] [style*="uppercase"]{text-transform:none!important;letter-spacing:normal!important}
html[data-up] [style*="font-weight:800"],html[data-up] [style*="font-weight:900"]{font-weight:600!important}
html[data-up] [style*="Jost"]{font-family:var(--up-b)!important}
/* Focus clavier visible, dans la palette */
html[data-up] :is(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--up-ink);outline-offset:2px}
/* Bouton flottant « Touni Pro » : pas d'ombre lourde */
html[data-up] .tp-back{box-shadow:0 1px 2px rgba(0,0,0,.12)!important;border:1px solid rgba(255,255,255,.12)}

/* ===================================================================== PRO (lanceur) */
html[data-up=pro] body{background:var(--up-bg)}
html[data-up=pro] .band{border-radius:0 0 20px 20px}
html[data-up=pro] .logo{font-weight:600;letter-spacing:0;text-transform:none;font-size:17px}
html[data-up=pro] .logo i{width:10px;height:10px;border-radius:2px}
html[data-up=pro] .top{padding-block:16px 8px}
html[data-up=pro] .hello{padding-block:20px 4px}
html[data-up=pro] .hello h1{font-weight:600;letter-spacing:-.02em;font-size:clamp(30px,8vw,40px)}
html[data-up=pro] .hello p{margin-top:8px}
html[data-up=pro] .stats{margin:20px 0 24px;border-radius:14px}
html[data-up=pro] .st{padding:16px!important}
html[data-up=pro] .st .k{font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--up-band-mute)}
html[data-up=pro] .st .v{font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums;margin-top:8px;font-size:clamp(13px,3.7vw,19px)}
@media (max-width:420px){html[data-up=pro] .st{padding:14px 12px!important}html[data-up=pro] .fidcard{flex-wrap:wrap}html[data-up=pro] .fidcard span{flex:1 1 100%}}
html[data-up=pro] .st .v.neg{color:#ff7a82}
html[data-up=pro] .st .v.pos{color:#5ad796}
html[data-up=pro] .sec{font-size:13px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--up-mute);margin:32px 4px 12px}
html[data-up=pro] .grid{gap:12px}
html[data-up=pro] .tile{border-radius:16px;padding:16px;gap:12px;min-height:128px;border-color:var(--up-line);transition:border-color .15s var(--up-ease),background-color .15s var(--up-ease)}
@media (hover:hover){html[data-up=pro] .tile:hover{transform:none;box-shadow:none;border-color:var(--up-line-2);background:#fcfcfb}}
html[data-up=pro] .tile:active{transform:scale(.98)}
/* Une seule couleur d'accent : les icônes reprennent le texte, le rouge reste pour l'action du jour */
html[data-up=pro] .tile .ic{width:40px;height:40px;border-radius:10px;font-size:22px;background:var(--up-raised);color:var(--up-ink)}
html[data-up=pro] .tile.big{background:var(--up-band);border-color:var(--up-band)}
html[data-up=pro] .tile.big .ic{background:rgba(255,255,255,.08);color:#fff}
html[data-up=pro] .tile[href="/stock#preparer"] .ic{background:var(--up-red);color:#fff}
html[data-up=pro] .tile b{font-weight:600;font-size:16px}
html[data-up=pro] .tile small{margin-top:-4px;line-height:1.4}
html[data-up=pro] .tile .badge{top:16px;right:16px;border-radius:6px;padding:2px 8px;font-weight:500;font-variant-numeric:tabular-nums}
html[data-up=pro] .install{border-style:solid;border-color:var(--up-line);border-radius:14px;margin-top:32px}
html[data-up=pro] .install i{font-size:22px;color:var(--up-mute)}
html[data-up=pro] .fidcard{border-radius:14px;padding:12px 12px 12px 16px;margin-top:20px}
html[data-up=pro] .fidcard button{border-radius:10px;font-weight:600;padding:10px 16px}
html[data-up=pro] .out{border-radius:10px;font-size:13px;padding:8px 12px}
html[data-up=pro] .login h1{font-weight:600}
html[data-up=pro] .login .logo{font-size:17px}
html[data-up=pro] .login input,html[data-up=pro] .login button{border-radius:10px!important}
html[data-up=pro] .login button{font-weight:600}
/* Une seule entrée : le bandeau ; les tuiles apparaissent sans voler */
html[data-up=pro] .tile.fade,html[data-up=pro] .stats.fade{animation:none}
@media (min-width:980px){
  html[data-up=pro] .hello h1{font-size:44px}
  html[data-up=pro] .st{padding:20px 24px!important}
  html[data-up=pro] .st .v{font-size:26px!important}
  html[data-up=pro] .tile{min-height:156px;padding:20px;border-radius:16px}
  html[data-up=pro] .tile .ic{width:44px;height:44px;font-size:24px;border-radius:10px}
  html[data-up=pro] .tile b{font-size:18px}
  html[data-up=pro] .sec{font-size:13px;margin-top:40px}
}
@media (prefers-color-scheme:dark){
  html[data-up=pro] body{background:#0d0e10}
  html[data-up=pro] .tile .ic{background:#24252a;color:#f0f0ec}
  html[data-up=pro] .tile:hover{background:#1a1b1f}
}

/* ===================================================================== INDEX (stock) */
html[data-up=index] body{font-family:var(--up-b);background:var(--up-bg)!important}
html[data-up=index] :is(.badge,.fb,.chip,.pp-b,.side-link,label,th){letter-spacing:normal!important;text-transform:none!important}
/* Barre latérale : sombre et plate, icônes alignées, sélection = palier de surface */
html[data-up=index] .sidebar{background:var(--up-band)!important;box-shadow:none!important;border-right:1px solid rgba(255,255,255,.06)!important}
html[data-up=index] .sidebar .side-ttl{font-weight:600;letter-spacing:0;text-transform:none;font-size:15px}
html[data-up=index] .side-sec{font-size:12px!important;letter-spacing:0!important;text-transform:none!important;font-weight:500!important;color:#8d8e95!important;margin:20px 12px 6px!important}
html[data-up=index] .side-link{display:flex!important;align-items:center;gap:10px;border-radius:10px!important;font-weight:400!important;min-height:36px!important;padding:8px 12px!important;transform:none!important}
html[data-up=index] .side-link:hover{transform:none!important}
html[data-up=index] .side-link .ic{width:20px;flex:none;display:inline-grid;place-items:center;font-size:18px!important;filter:none!important;color:#9d9ea5}
html[data-up=index] .side-link.active{background:rgba(255,255,255,.09)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;font-weight:500!important}
html[data-up=index] .side-link.active .ic{color:var(--up-red)}
html[data-up=index] .side-link.primary{background:transparent!important;color:#d8d8d3!important;border:0!important}
html[data-up=index] .side-link.primary:hover{background:rgba(255,255,255,.07)!important}
html[data-up=index] .side-role{font-size:12px!important;letter-spacing:0!important;text-transform:none!important}
@media(min-width:861px){html[data-up=index] .side-link{font-size:14.5px!important;padding:8px 12px!important}
  /* Les titres de colonnes passaient par-dessus la 1re ligne (bug d'origine) : on les remet au-dessus du tableau */
  html[data-up=index] thead th{position:static!important;font-size:12.5px!important;font-weight:500!important;color:var(--up-mute)!important}}
/* Bot WhatsApp : interrupteur sans halo ni anneau qui pulse */
html[data-up=index] #bot-bar{border-radius:12px;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important}
html[data-up=index] #bot-bar.off{background:rgba(200,16,28,.08)!important;border-color:rgba(200,16,28,.35)!important}
html[data-up=index] .bsw{box-shadow:none!important;background:#15803d;transition:background-color .15s var(--up-ease)}
html[data-up=index] .bsw::after{box-shadow:none;transition:left .18s var(--up-ease)}
html[data-up=index] .bsw .pulse{display:none}
html[data-up=index] .bdur span{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500}
html[data-up=index] .bdur button{border-radius:8px;font-weight:500}
html[data-up=index] .bdur button.on{background:#f2f2ef;border-color:#f2f2ef;color:#121316}
/* Barre du haut : compteurs en texte calme */
html[data-up=index] .topbar{background:rgba(246,246,244,.96)!important;backdrop-filter:none!important;border-bottom:1px solid var(--up-line)!important}
html[data-up=index] .kpis{gap:8px!important}
html[data-up=index] .chip{background:transparent!important;border:1px solid var(--up-line)!important;color:var(--up-ink-2)!important;border-radius:8px!important;font-family:var(--up-b)!important;font-weight:400!important}
html[data-up=index] .chip b{font-family:var(--up-m);font-weight:500;color:var(--up-ink);font-variant-numeric:tabular-nums}
html[data-up=index] .chip-total{background:var(--up-ink)!important;color:#fff!important;border-color:var(--up-ink)!important}
html[data-up=index] .chip-total b{color:#fff}
html[data-up=index] .chip-rupture b{color:var(--up-red-ink)}
html[data-up=index] #chip-shopify{background:transparent!important;border-color:var(--up-line)!important;color:var(--up-ink-2)!important;font-weight:400!important;border-radius:8px!important}
html[data-up=index] #bell-btn,html[data-up=index] .burger{border-radius:10px!important;font-size:18px!important;display:inline-grid;place-items:center}
/* Bandeau Aujourd'hui : noir plat, sans halo rouge */
html[data-up=index] .pro-hero{border-radius:16px;animation:proIn .4s var(--up-ease) both}
html[data-up=index] .pro-hero::before{display:none!important}
html[data-up=index] .pro-hero h2{font-weight:600;letter-spacing:-.02em}
html[data-up=index] .pro-hero p{color:var(--up-band-mute)}
html[data-up=index] .pro-kpis{border-radius:12px}
html[data-up=index] .pro-kpi .k{font-size:12.5px!important;letter-spacing:0;text-transform:none;color:var(--up-band-mute)}
html[data-up=index] .pro-kpi .v{font-family:var(--up-m);font-weight:500;letter-spacing:0!important;font-variant-numeric:tabular-nums}
html[data-up=index] .main-cta{background:var(--up-red)!important;box-shadow:none!important;border-radius:10px!important;font-weight:600!important}
html[data-up=index] .pro-actions a{border-radius:10px!important}
/* Formulaire d'ajout, filtres */
html[data-up=index] .panel{border-radius:16px!important;animation:none!important;box-shadow:none!important;border-color:var(--up-line)!important}
html[data-up=index] #page-stock .panel{border:1px solid rgba(17,18,22,.32)!important}
html[data-up=index] .panel-ttl{font-weight:600!important}
html[data-up=index] .fgrid label,html[data-up=index] .fg label,html[data-up=index] .fg-row label{font-size:12.5px!important;font-weight:500!important;color:var(--up-mute)!important}
html[data-up=index] .btn-add{border-radius:10px!important;font-weight:600!important;box-shadow:none!important;background:var(--up-ink)!important}
html[data-up=index] .btn-add:hover{transform:none!important;box-shadow:none!important;background:#000!important}
html[data-up=index] .fbar{border-radius:16px!important;box-shadow:none!important;backdrop-filter:none!important;background:#fff!important;border-color:var(--up-line)!important}
html[data-up=index] .fb{border-radius:10px!important;font-weight:500!important;display:inline-flex;align-items:center;gap:6px}
html[data-up=index] #btn-prep{background:var(--up-red)!important;border-color:var(--up-red)!important;color:#fff!important;font-weight:600!important}
html[data-up=index] input,html[data-up=index] select,html[data-up=index] textarea{border-radius:10px!important}
/* Tableau du stock */
html[data-up=index] tbody tr.mob-card:hover{transform:none!important;box-shadow:0 1px 2px rgba(17,18,22,.05)!important;background:#fcfcfb!important}
html[data-up=index] .pname{font-weight:600!important}
html[data-up=index] .badge{border-radius:6px!important;font-weight:500!important}
html[data-up=index] .pbadge{border-radius:4px;letter-spacing:0;text-transform:none;font-weight:500;font-size:11px;background:transparent;border-color:rgba(200,16,28,.35);color:var(--up-red-ink)}
html[data-up=index] .btn-sortir{border-radius:8px!important;font-weight:600!important;box-shadow:none!important}
html[data-up=index] .btn-edit,html[data-up=index] .del{display:inline-grid!important;place-items:center;font-size:16px!important}
html[data-up=index] .prod-ph,html[data-up=index] .pp-ph,html[data-up=index] .ddi-ph{display:grid!important;place-items:center;color:var(--up-mute);font-size:22px}
html[data-up=index] .empty .ic{font-size:28px;color:var(--up-mute)}
html[data-up=index] .pp-item.sel{background:#f3faf5!important;box-shadow:0 0 0 2px rgba(21,128,61,.35)!important}
html[data-up=index] .pp-mq,html[data-up=index] .pp-sec{font-weight:600!important;text-transform:none!important}
html[data-up=index] .m-sec{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500}
html[data-up=index] .mnb{text-transform:none!important;letter-spacing:0!important;font-weight:500!important}
html[data-up=index] .mnb .mni{font-size:22px}
@media(max-width:860px){
  html[data-up=index] .chip{padding:6px 8px!important;font-size:12.5px!important}
  html[data-up=index] .pro-hero h2{font-size:24px}
  html[data-up=index] .pro-kpi .k{white-space:normal!important;overflow:visible!important}
}

/* ===================================================================== DASHBOARD (agents / gestion) */
html[data-up=dashboard] body{font-family:var(--up-b)!important;background:var(--up-bg)!important}
html[data-up=dashboard] :is(button,input,select,textarea){font-family:var(--up-b)!important}
html[data-up=dashboard] :is(.nav-btn,.tab,.badge,.mnb,.btn-logout,.header-label,.section-title,.pl-title,.kpi-lbl,.rb-label,.dr-label,.fg label,.lf label,thead th,.dr-btn){text-transform:none!important;letter-spacing:normal!important}
html[data-up=dashboard] .header{background:#fff!important;border-bottom:1px solid var(--up-line)!important}
html[data-up=dashboard] .header-label{font-size:13px!important;color:var(--up-mute)!important}
html[data-up=dashboard] .nav{gap:2px}
html[data-up=dashboard] .nav-btn{font-size:14px!important;font-weight:500!important;border-radius:10px!important;padding:8px 12px!important;color:var(--up-ink-2)!important;box-shadow:none!important;transition:background-color .15s var(--up-ease),color .15s var(--up-ease)!important}
html[data-up=dashboard] .nav-btn.active{background:var(--up-ink)!important;color:#fff!important;box-shadow:none!important}
html[data-up=dashboard] .nav-btn.nav-agents:not(.active){border:0!important;color:var(--up-red-ink)!important}
html[data-up=dashboard] .btn-logout{font-size:13px!important;border-radius:10px!important}
/* Barre de période : le choix actif en blanc, le rouge reste aux montants */
html[data-up=dashboard] .dr-bar{background:var(--up-band)!important}
html[data-up=dashboard] .dr-btn{border-radius:8px!important;font-size:13px!important;font-weight:500!important}
html[data-up=dashboard] .dr-btn.active{background:#f2f2ef!important;color:#121316!important;border-color:#f2f2ef!important}
html[data-up=dashboard] .dr-label{border-radius:8px!important;font-size:13px!important;font-weight:500!important}
/* Cartes et chiffres */
html[data-up=dashboard] .card,html[data-up=dashboard] .card-sm,html[data-up=dashboard] .kpi,html[data-up=dashboard] .pl-section{border-radius:14px!important;border-color:var(--up-line)!important;box-shadow:none!important}
html[data-up=dashboard] .card{padding:24px!important}
html[data-up=dashboard] .kpi:hover{transform:none!important;box-shadow:none!important}
html[data-up=dashboard] .kpi-icon{display:none!important}
html[data-up=dashboard] .kpi-val,html[data-up=dashboard] .rb-val,html[data-up=dashboard] .pl-amt{font-family:var(--up-m)!important;font-weight:500!important;letter-spacing:0!important;font-variant-numeric:tabular-nums}
html[data-up=dashboard] .kpi-val{font-size:28px!important}
html[data-up=dashboard] .kpi-lbl,html[data-up=dashboard] .section-title,html[data-up=dashboard] .pl-title,html[data-up=dashboard] .rb-label{font-size:13px!important;font-weight:500!important;color:var(--up-mute)!important}
html[data-up=dashboard] .rb-label.loss{color:var(--up-red-ink)!important}
html[data-up=dashboard] .result-banner{border-radius:16px!important}
html[data-up=dashboard] .result-banner.loss{border-color:rgba(200,16,28,.35)!important}
html[data-up=dashboard] .rb-val{white-space:nowrap}
html[data-up=dashboard] .tab{font-size:14px!important;font-weight:500!important}
html[data-up=dashboard] .badge{border-radius:6px!important;font-weight:500!important}
html[data-up=dashboard] .alert{border-radius:12px!important}
html[data-up=dashboard] .btn-primary,html[data-up=dashboard] .btn-secondary,html[data-up=dashboard] .btn-login{border-radius:10px!important}
html[data-up=dashboard] input,html[data-up=dashboard] select,html[data-up=dashboard] textarea{border-radius:10px!important}
html[data-up=dashboard] .mnb{font-weight:500!important;font-size:11.5px!important}
html[data-up=dashboard] .mnb .mni{font-size:22px}
html[data-up=dashboard] .sync-dot.loading{animation:none!important}
@media(max-width:600px){
  html[data-up=dashboard] .rb-val{font-size:32px!important}
  html[data-up=dashboard] .result-banner{text-align:left!important;align-items:flex-start!important}
  html[data-up=dashboard] .dr-bar{gap:6px!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
  html[data-up=dashboard] .dr-bar::-webkit-scrollbar{display:none}
  html[data-up=dashboard] .dr-bar>*{flex:0 0 auto}
  html[data-up=dashboard] .dr-sep{display:none!important}
  html[data-up=dashboard] .kpi-val{font-size:22px!important}
}

/* ===================================================================== DASHBOARD V2 */
html[data-up=dashboard-v2] body{font-family:var(--up-b)!important}
html[data-up=dashboard-v2] :is(button,input,select,textarea){font-family:var(--up-b)!important}
/* Une seule entrée : la page ; les blocs n'arrivent plus un par un */
html[data-up=dashboard-v2] .page.active .wrap>*{animation:none!important}
html[data-up=dashboard-v2] #tab-fournisseurs,html[data-up=dashboard-v2] #tab-virements,html[data-up=dashboard-v2] #tab-meta,html[data-up=dashboard-v2] #tab-agents{animation:none!important}
html[data-up=dashboard-v2] .sync-dot.loading{animation:none!important}
html[data-up=dashboard-v2] :is(.kpi-val,.rb-val,.pl-amt){font-family:var(--up-m)!important;font-weight:500!important;letter-spacing:0!important;font-variant-numeric:tabular-nums}
html[data-up=dashboard-v2] :is(.kpi-lbl,.rb-label,.section-title,.pl-title,.badge,.tab,thead th){text-transform:none!important;letter-spacing:normal!important}
html[data-up=dashboard-v2] .rb-val{white-space:nowrap}

/* ===================================================================== COMPTA (finances) */
html[data-up=compta] :is(.k,.kpi .k,.hero .lab,.lab,h4,th){letter-spacing:normal!important;text-transform:none!important}
html[data-up=compta] .big{letter-spacing:-.02em}
html[data-up=compta] .num{font-variant-numeric:tabular-nums}
html[data-up=compta] .brand{text-transform:none!important;letter-spacing:0!important;font-weight:600!important}
html[data-up=compta] .brand i{border-radius:2px}
html[data-up=compta] .hero .lab,html[data-up=compta] .kpi .k{font-size:13px}
/* Bouton « Saisir » : rouge plat, ombre neutre (plus de halo rouge) ; grand chiffre en 600 */
html[data-up=compta] .fab{box-shadow:0 8px 24px rgba(0,0,0,.18)!important;font-weight:600!important;border-radius:14px!important;height:52px!important}
html[data-up=compta] .big{font-weight:600!important}
html[data-up=compta] h2,html[data-up=compta] h3{font-weight:600}