/* Couche « Vision », chargée après style-sober.css : surfaces en verre translucide sur un fond d'ambiance doux,
   grands arrondis, onglets et boutons en pilule, barre latérale flottante. Couleurs neutres : la teinte vient du fond. */

:root{
  --vz-glass:rgba(38,42,50,.52);
  --vz-glass-2:rgba(52,57,66,.55);
  --vz-line:rgba(255,255,255,.085);
  --vz-hi:rgba(255,255,255,.07);
  --vz-pill:rgba(255,255,255,.07);
  --vz-pill-on:rgba(255,255,255,.17);
  --vz-r:14px;
  --vz-blur:blur(28px) saturate(150%);
  --vz-shadow:inset 0 1px 0 var(--vz-hi),0 10px 34px rgba(0,0,0,.28);
}

/* ---------- Fond d'ambiance : graphite avec deux halos très désaturés ---------- */
body{background-color:#121418;
  background-image:radial-gradient(1100px 700px at 12% -10%,rgba(92,112,138,.30),transparent 62%),
    radial-gradient(900px 640px at 105% 110%,rgba(120,104,86,.24),transparent 60%),
    radial-gradient(700px 500px at 60% 40%,rgba(70,86,104,.12),transparent 70%);
  background-attachment:fixed}
.top{background:rgba(18,20,24,.62);border-bottom:1px solid var(--vz-line);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}

/* ---------- Surfaces en verre ---------- */
.card,.pane,.nw-kpi,.kstrip,.cu-kpis{background:var(--vz-glass)!important;border:1px solid var(--vz-line)!important;border-radius:var(--vz-r)!important;
  -webkit-backdrop-filter:var(--vz-blur);backdrop-filter:var(--vz-blur);box-shadow:var(--vz-shadow)}
.pane-h{border-bottom:1px solid var(--vz-line);padding:12px 16px}
.pane-b{padding:12px 16px}
.kstrip{gap:0;background:var(--vz-glass)!important}
.kstrip>div{background:transparent;padding:12px 16px}
.kstrip>div+div{box-shadow:inset 1px 0 0 var(--vz-line)}
.pane table th,.hm-act .nw-table th,.cu-page .cu-table thead th{background:rgba(40,44,52,.94)}
.modal .mbox{background:rgba(32,36,43,.86);border:1px solid var(--vz-line);border-radius:14px;
  -webkit-backdrop-filter:var(--vz-blur);backdrop-filter:var(--vz-blur);box-shadow:var(--vz-shadow),0 30px 80px rgba(0,0,0,.45)}
.modal{background:rgba(8,10,12,.45)}

/* ---------- Barre latérale flottante ---------- */
@media (min-width:1024px){
  .side{margin:12px 0 12px 12px;top:12px;height:calc(100dvh - 24px);border:1px solid var(--vz-line);border-radius:16px;
    background:rgba(30,33,40,.55);-webkit-backdrop-filter:var(--vz-blur);backdrop-filter:var(--vz-blur);box-shadow:var(--vz-shadow)}
}
.side a{border-radius:8px!important}
.side a.on{background:var(--vz-pill-on)!important;box-shadow:none}
.side a:hover:not(.on){background:var(--vz-pill)}
.side-foot{border-top-color:var(--vz-line)}

/* ---------- Onglets : piste en verre et pilule pleine pour l'onglet actif ---------- */
.ws-tabs,.sx-tabs,.cu-tabs{display:inline-flex!important;width:max-content;max-width:100%;gap:2px!important;padding:3px;border:1px solid var(--vz-line)!important;border-radius:10px;
  background:var(--vz-pill);-webkit-backdrop-filter:var(--vz-blur);backdrop-filter:var(--vz-blur)}
.ws-tab,.sx-tab,.cu-tab{height:30px;padding:0 14px;border:0!important;border-radius:7px!important;margin:0;background:transparent;color:var(--slate-300);font-weight:500;display:inline-flex;align-items:center;gap:6px}
.ws-tab:hover,.sx-tab:hover,.cu-tab:hover{background:var(--vz-pill);color:#fff}
.ws-tab.on,.sx-tab.on,.cu-tab.on{background:var(--vz-pill-on)!important;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}

/* ---------- Boutons, puces et champs : pilules discrètes ---------- */
button,.dd-btn,.sel-btn,.cx-select{border-radius:8px;border-color:var(--vz-line);background:var(--vz-pill)}
button:hover,.dd-btn:hover{background:rgba(255,255,255,.12)}
button.primary,.primary{background:#e8ebf0;border-color:#e8ebf0;color:#14171c}
button.primary:hover,.primary:hover{background:#fff;border-color:#fff}
button.danger,.ws-btn.ws-danger{background:var(--vz-pill)}
.ws-chip,.nw-chip{border-radius:7px;border-color:var(--vz-line);background:var(--vz-pill)}
.ws-chip.on,.nw-chip.on{background:var(--vz-pill-on);border-color:transparent}
input,select,textarea{border-radius:8px}
.badge{border-radius:6px}

/* ---------- Barres de progression et histogramme ---------- */
.ws-bar{border-radius:999px;background:rgba(255,255,255,.07)}
.ws-bar i{border-radius:999px}
.ws-col span:first-child{border-radius:5px 5px 0 0}

/* ---------- Clients : bandeau de chiffres d'un seul tenant (pas de cartes dans la carte) ---------- */
.cu-page .cu-kpis{gap:0!important;background:var(--vz-glass)!important}
.cu-page .cu-kpis .metric{background:transparent!important;border:0!important;border-radius:0!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.cu-page .cu-kpis .metric+.metric{box-shadow:inset 1px 0 0 var(--vz-line)}

/* ---------- Pastilles et filtres : même arrondi que les boutons ---------- */
button.cu-chip,button.fb-tag{border-radius:8px}

/* ---------- Interrupteurs (mode sous attaque) : la bulle part de la gauche, pas du centre ---------- */
button.sx-switch{display:flex;justify-content:flex-start;align-items:center;width:40px;height:24px;min-width:0;padding:2px;border-radius:999px;background:rgba(255,255,255,.12)}
button.sx-switch:hover{background:rgba(255,255,255,.18)}
button.sx-switch.on{background:var(--danger,#d9534f);border-color:transparent}
button.sx-switch i{flex:none;width:18px;height:18px}

/* ---------- Boîte mail : icônes de dossiers au trait ---------- */
.wm-fold .wm-ic{width:16px;height:16px;flex:none;color:var(--slate-400)}
.wm-fold.on .wm-ic{color:#fff}
.wm-star .wm-ic{width:16px;height:16px}
.wm-star.on .wm-ic{fill:#e8b04f;stroke:#e8b04f}
.wm-none-ic .wm-ic{width:34px;height:34px;color:var(--slate-500)}
.wm-att .wm-ic,.ma-spark .wm-ic{width:16px;height:16px;flex:none}

/* ---------- Fiche client : fenêtre centrée (plus de panneau collé à droite) ---------- */
#cu-drawer-root{justify-content:center;align-items:center;padding:24px}
.cu-scrim{background:rgba(8,10,12,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cu-drawer{width:min(760px,100%);height:auto;max-height:min(86dvh,880px);border:1px solid var(--vz-line);border-radius:14px;overflow:hidden;
  background:rgba(32,36,43,.92);-webkit-backdrop-filter:var(--vz-blur);backdrop-filter:var(--vz-blur);box-shadow:var(--vz-shadow),0 30px 80px rgba(0,0,0,.45);animation:cu-pop .18s ease}
@keyframes cu-pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.cu-d-body{min-height:0}
@media (max-width:640px){#cu-drawer-root{padding:0;align-items:stretch}.cu-drawer{max-height:none;height:100%;border-radius:0;border:0}}
.cu-drawer .cu-tabs{margin:0 18px 8px;padding:3px;overflow:hidden;flex:none;align-self:flex-start}
.ws-tabs,.sx-tabs,.cu-tabs{scrollbar-width:none}
.ws-tabs::-webkit-scrollbar,.sx-tabs::-webkit-scrollbar,.cu-tabs::-webkit-scrollbar{display:none}

/* ---------- Barre réduite : compteur en pastille pleine sur le coin de l'icône, sans la masquer ---------- */
@media (min-width:1024px){
  .app.collapsed nav a{overflow:visible}
  .app.collapsed nav a .n{top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:8px;
    font-size:9.5px;line-height:16px;text-align:center;background:#d9534f;color:#fff;box-shadow:0 0 0 2px rgba(24,27,33,.95)}
}
@media (min-width:1024px){
  .app.collapsed{--sbw:84px}
  .app.collapsed nav a .n{top:-3px;right:-2px}
}

/* ---------- Bandeau du haut flottant, aligné sur la barre latérale (même marge, même arrondi, même verre) ---------- */
@media (min-width:1024px){
  .top{margin:12px 12px 0;top:12px;min-height:52px;padding:7px 14px;border:1px solid var(--vz-line);border-radius:16px;
    background:rgba(30,33,40,.55);box-shadow:var(--vz-shadow)}
}

/* ---------- Paramètres du compte : deux colonnes sur grand écran, le journal sur toute la largeur ---------- */
@media (min-width:1100px){
  .set-col{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;align-items:start}
  .set-col>.set-sec:last-child{grid-column:1/-1}
}

/* ---------- Pied de la barre latérale : Déconnexion sous la navigation ---------- */
.side-foot{padding-top:10px}
.side .logout{display:flex;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--slate-300);font-size:14px;font-weight:500;text-align:left}
.side .logout .ic{width:18px;height:18px;flex:none}
.side .logout:hover{background:var(--vz-pill);color:#e08a8a}

/* ---------- Téléphones (Android et iPhone) ---------- */
@media (max-width:760px){
  .hm-grid{grid-template-columns:minmax(0,1fr)!important}
  .hm-grid .pane-b{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hm-kpis .nw-kpi:last-child:nth-child(odd){grid-column:1/-1!important}
}
@media (max-width:760px){.tk-more{min-width:36px;min-height:36px}}
@media (max-width:760px){
  .cu-page .cu-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px 14px;padding:12px 14px}
  .cu-page .cu-row td{align-content:start}
  .cu-page .cu-row td .badge{justify-self:start}
}
@media (max-width:760px){.tk-stats>.tk-stat:last-child:nth-child(odd){grid-column:1/-1}}
/* Onglets sur téléphone : chaque onglet garde sa largeur, la piste défile au doigt */
@media (max-width:760px){
  .ws-tabs,.sx-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important}
  .ws-tab,.sx-tab{flex:none;white-space:nowrap}
  .sv-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-kpis>*{min-width:0}
  .sv-kpis>:last-child:nth-child(odd){grid-column:1/-1}
}
.sv-btn.sv-primary{background:#e8ebf0;border-color:#e8ebf0;color:#14171c}
.sv-btn.sv-primary:hover{background:#fff;border-color:#fff}
@media (max-width:760px){.spg-keynote a{display:inline-block;padding:8px 2px;margin:-8px 0}}