/* ============================================================================
   ZCA SUITE — LIQUID GLASS  ·  Design system de proposition (DARK)
   ----------------------------------------------------------------------------
   Proposition de refonte « Apple Liquid Glass » : verre dépoli, profondeur,
   halos chauds (ambre/orange) sur fond bleu nuit. Maquette uniquement —
   AUCUN code applicatif n'est modifié. Les 4 apps gardent leur logique.

   Source de vérité unique : toutes les pages (index, hub, compta, crm,
   portail) importent CE fichier. Ne jamais redéfinir les couleurs ailleurs.

   En production : polices auto-hébergées (souveraineté CH). Ici, CDN toléré
   pour la simple visualisation locale.
   ========================================================================== */

/* ---- Polices (visualisation) -------------------------------------------- */

/* ============================================================================
   1. TOKENS
   ========================================================================== */
:root{
  --encre-fixe:#1B263B; /* encre fixe (logo, dock workflow) — indépendante du thème */
  /* — Fond nuit & halos — */
  --bg-0:#070A12;            /* nuit profonde */
  --bg-1:#0B1020;            /* nuit bleutée  */
  --bg-2:#0E1424;            /* surface basse */
  --glow-ember:255,138,76;   /* halo orange   */
  --glow-azure:64,108,170;   /* halo bleu     */

  /* — Verre (liquid glass) — */
  --glass:rgba(255,255,255,.075);     /* verre CLAIR — un peu plus présent (encarts moins sombres) */
  --glass-2:rgba(255,255,255,.11);    /* verre plus marqué (cartes en avant) */
  --glass-3:rgba(255,255,255,.17);    /* survol / actif */
  --glass-line:rgba(255,255,255,.14); /* contour verre — adouci (était .22, trop dur) */
  --glass-edge:rgba(255,255,255,.92); /* ARÊTE spéculaire lumineuse (haut) — signature Apple */
  --glass-edge-soft:rgba(255,255,255,.22);
  --glass-deep:rgba(10,14,26,.46);    /* verre teinté sombre (sidebar, modales) */
  --track:rgba(255,255,255,.12);      /* rail des jauges / interrupteurs */
  --tint-ember:rgba(255,138,76,.10);  /* voile ambré (sélection chaude) */
  --tint-azure:rgba(94,146,205,.12);
  --sheen:.60;                        /* intensité du reflet diagonal (glossy) */
  /* — Recettes « liquid glass » : LIQUIDE = clair + lentille (var --lg-clear, via @supports) ;
       FROST = repli pour navigateurs sans url() et pour le GIVRE (ice). — */
  --lg-frost:blur(22px) saturate(200%) brightness(1.08);
  --lg-frost-lg:blur(40px) saturate(180%) brightness(1.05);
  --lg-clear:saturate(195%) brightness(1.09) blur(2px);     /* quasi transparent : on VOIT à travers, courbé aux bords */
  --lg-clear-lg:saturate(178%) brightness(1.06) blur(7px);  /* chrome (sidebar/topbar) : un poil plus de flou */
  --ice-edge:rgba(214,236,255,.45);   /* arête glacée */
  --rim:inset 0 1px 1px 0 var(--glass-edge), inset 0 -11px 24px -8px rgba(255,255,255,.16), inset 0 0 0 1px var(--glass-edge-soft);

  /* — Encre / texte — */
  --ink:rgba(244,247,253,.94);
  --ink-2:rgba(244,247,253,.66);
  --ink-3:rgba(244,247,253,.42);
  --ink-4:rgba(244,247,253,.26);

  /* — Accents — */
  --ember:#FF8A4C;  --ember-2:#F2512B; --ember-3:#FFB463;
  --azure:#6FA2DD;  --azure-2:#3E6CA6;
  --valide:#5FC08C; --valide-d:#2f7d5e;
  --ambre:#E6B45C;  --ambre-d:#7d5f1f;
  --ia:#2FC6DE;     --ia-d:#0C7C8E;     /* IA = cyan/aqua (distinct du violet CRM & du vert validé) */
  --violet:#B197E0; --violet-d:#5b4488; /* identité CRM (anciennement réutilisée par l'IA) */
  --danger:#FB4B57; --danger-d:#B0252F;  /* vrai rouge (urgent/danger) — plus du tout orangé */
  --urgent-rgb:251,75,87;

  /* — Dégradés signature — */
  --grad-ember:linear-gradient(135deg,#FFC178 0%,#FF8A4C 44%,#F2512B 100%);
  --grad-azure:linear-gradient(135deg,#8FC0F2 0%,#5E92CD 50%,#3E6CA6 100%);
  --grad-ia:linear-gradient(135deg,#7FE3F0 0%,#22B6D4 100%);
  --grad-violet:linear-gradient(135deg,#C9B4F0 0%,#9C7BD6 100%);
  --grad-head:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,0));

  /* — Rayons / ombres — */
  --r-xl:30px; --r-lg:24px; --r:18px; --r-sm:13px; --r-pill:999px;
  --blur:22px; --blur-lg:40px;
  --sh-1:var(--rim), 0 2px 6px rgba(0,0,0,.26), 0 18px 44px -18px rgba(0,0,0,.66);
  --sh-2:var(--rim), 0 4px 12px rgba(0,0,0,.32), 0 40px 90px -28px rgba(0,0,0,.74);
  --sh-ember:0 10px 30px -8px rgba(242,81,43,.55);
  --sh-azure:0 10px 30px -8px rgba(62,108,166,.55);

  /* — Accent ACTIF (réécrit par .app[data-app=…]) : défaut = ember / Hub / constellation — */
  --acc:var(--ember); --acc-3:var(--ember-3); --acc-grad:var(--grad-ember);
  --acc-glow:var(--glow-ember); --acc-sh:var(--sh-ember); --acc-ink:#2a0f04;

  --maxw:1320px;
  color-scheme:dark;
}
/* — Signature par logiciel : l'ambiance (halos orange+bleu) reste identique partout,
     seule la couleur d'ACTION change (boutons primaires, nav actif, badges, jauges, marque). — */
.app[data-app="compta"]{--acc:var(--azure);--acc-3:#9FC8F2;--acc-grad:var(--grad-azure);--acc-glow:var(--glow-azure);--acc-sh:var(--sh-azure);--acc-ink:#06121f;}
.app[data-app="crm"]{--acc:var(--violet);--acc-3:#C9B4F0;--acc-grad:var(--grad-violet);--acc-glow:177,151,224;--acc-sh:0 10px 30px -8px rgba(91,68,136,.55);--acc-ink:#1c0f33;}
.app[data-app="portail"]{--acc:var(--valide);--acc-3:#8FE0B6;--acc-grad:linear-gradient(135deg,#86E6B6,#3FA98C);--acc-glow:95,192,140;--acc-sh:0 10px 30px -8px rgba(47,125,94,.55);--acc-ink:#06241a;}

/* ============================================================================
   2. BASE
   ========================================================================== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',-apple-system,system-ui,sans-serif;
  color:var(--ink);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:var(--bg-0);
  min-height:100vh;
}
/* — Le décor : nuit + halos chauds/froids, fixés derrière tout — */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    /* halo chaud retiré du fond global : la teinte du halo vient désormais du LOGICIEL actif (.app::before, --acc-glow) */
    radial-gradient(700px 560px at 8% 20%, rgba(var(--glow-azure),.40), transparent 60%),
    radial-gradient(760px 620px at 22% 104%, rgba(70,130,210,.30), transparent 60%),
    radial-gradient(560px 460px at 52% 46%, rgba(140,95,185,.20), transparent 64%),
    radial-gradient(520px 420px at 60% 80%, rgba(47,198,222,.14), transparent 64%),
    linear-gradient(160deg,var(--bg-1) 0%, var(--bg-0) 58%, #04060C 100%);
}
body::after{ /* grille — structure que la lentille du verre vient courber (réf. Apple) */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.85;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(145% 130% at 50% 28%, #000 62%, transparent 96%);
          mask-image:radial-gradient(145% 130% at 50% 28%, #000 62%, transparent 96%);
}
/* — Halo ambiant teinté par le LOGICIEL actif (--acc-glow), posé sur la nuit froide.
     Hub=ember · Compta=azur · CRM=violet · Portail=vert. Adouci (.30 vs .50) : l'orange piquait. —
     Pseudo en position fixe → hors du flux grid de .app. */
.app::before,.pub::before,.device-stage::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(780px 600px at 84% 5%, rgba(var(--acc-glow),.30), transparent 60%),
    radial-gradient(560px 520px at 100% 48%, rgba(var(--acc-glow),.14), transparent 58%);
}
html[data-theme="light"] .app::before,html[data-theme="light"] .pub::before,html[data-theme="light"] .device-stage::before{
  background:
    radial-gradient(780px 600px at 84% 5%, rgba(var(--acc-glow),.20), transparent 60%),
    radial-gradient(560px 520px at 100% 48%, rgba(var(--acc-glow),.10), transparent 58%);
}
a{color:inherit;text-decoration:none;}
::selection{background:rgba(var(--glow-ember),.32);}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-feature-settings:"tnum" 1;}
.serif{font-family:'Cormorant Garamond',Georgia,serif;}
.muted{color:var(--ink-2);}
.muted2{color:var(--ink-3);}
.t-ember{color:var(--ember-3);} .t-azure{color:var(--azure);}
.t-ok{color:var(--valide);} .t-warn{color:var(--ambre);}
.t-ia{color:var(--ia);} .t-danger{color:var(--danger);}
.up{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:600;color:var(--ink-3);}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
hr.hairline{border:0;height:1px;background:var(--glass-line);margin:16px 0;}

/* — Scrollbars douces — */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:var(--track);border-radius:10px;border:2px solid transparent;background-clip:padding-box;}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);background-clip:padding-box;}

/* ============================================================================
   3. PRIMITIVE VERRE
   ========================================================================== */
.glass{
  position:relative;
  background:var(--glass);
  border:1px solid var(--glass-line);
  border-radius:var(--r);
  -webkit-backdrop-filter:var(--lg-frost);
          backdrop-filter:var(--lg-frost);
  box-shadow:var(--sh-1);
}
/* reflet liquide : streak diagonal spéculaire en haut-gauche de chaque surface */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(132deg, rgba(255,255,255,var(--sheen)) 0%, rgba(255,255,255,calc(var(--sheen)*.5)) 18%, rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 16%);
  -webkit-mask:linear-gradient(154deg,#000,transparent 70%);
          mask:linear-gradient(154deg,#000,transparent 70%);
  mix-blend-mode:screen; opacity:1;
}
.glass-2{background:var(--glass-2);}
.glass-deep{
  background:var(--glass-deep);
  -webkit-backdrop-filter:var(--lg-frost-lg);
          backdrop-filter:var(--lg-frost-lg);
}
/* — Réfraction « lentille » (open-source : feTurbulence + feDisplacementMap).
     Ajoutée uniquement là où le navigateur sait l'afficher ; sinon le frost reste. — */
@supports (backdrop-filter:url(#lg-refract)){
  .glass,.card,.tile,.kcol,.dropzone,.search,.composer,.appcard,.lg-theme{
    backdrop-filter:url(#lg-refract) var(--lg-clear);
  }
  .sidebar,.topbar,.glass-deep,.loupe{ backdrop-filter:url(#lg-refract) var(--lg-clear-lg); }
  /* surfaces FIGÉES → frost cristallin immobile ; surfaces VEDETTES → lentille animée */
  .ice,.card.ice,.tile.ice,.li.ice{ backdrop-filter:url(#lg-frost-ice) var(--lg-frost); }
  .water-demo{ backdrop-filter:url(#lg-water) var(--lg-clear); }
}

/* ============================================================================
   4. SHELL APPLICATIF (sidebar + main)
   ========================================================================== */
.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh;}
.sidebar{
  position:sticky;top:0;align-self:start;height:100vh;
  display:flex;flex-direction:column;gap:5px;
  padding:20px 14px;overflow-y:auto;
  background:var(--glass-deep);
  border-right:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--lg-frost-lg);
          backdrop-filter:var(--lg-frost-lg);
  box-shadow:1px 0 0 var(--glass-edge-soft) inset;
  z-index:30;
}
.brand{display:flex;align-items:center;gap:11px;padding:6px 10px 16px;}
.brand .mark{
  width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  background:var(--acc-grad);box-shadow:var(--acc-sh);
  display:grid;place-items:center;color:var(--acc-ink);font-weight:800;font-size:15px;
}
.brand .mark.azure{background:var(--grad-azure);box-shadow:var(--sh-azure);color:#06121f;}
.brand .mark.ia{background:var(--grad-ia);color:#1c0f33;}
.brand .name{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:700;line-height:1;}
.brand .name small{display:block;font-family:'Inter';font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:3px;}

.ctx{ /* puce de contexte (mandat / marque courante) */
  display:flex;align-items:center;gap:10px;margin:2px 4px 12px;padding:10px 11px;
  border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--glass-line);
}
.ctx .av{width:30px;height:30px;border-radius:9px;background:var(--grad-azure);flex:0 0 auto;
  display:grid;place-items:center;font-weight:700;font-size:12px;color:#06121f;}
.ctx .meta{min-width:0;}
.ctx .meta b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ctx .meta span{font-size:11.5px;color:var(--ink-3);}

.nav-label{padding:14px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4);}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;
  color:var(--ink-2);font-size:14px;font-weight:500;cursor:pointer;
  border:1px solid transparent;transition:.16s;
}
.nav-item .ic{width:18px;height:18px;flex:0 0 auto;opacity:.85;}
.nav-item .ic svg{width:18px;height:18px;display:block;}
.nav-item:hover{color:#fff;}  /* la pastille de verre glisse derrière au survol → texte clair */
/* indicateur LIQUIDE : une pastille de verre unique qui GLISSE entre les items
   (élément .nav-indicator injecté par views.js, positionné sur l'item actif). */
.nav-indicator{
  position:absolute; left:0; top:0; height:40px; width:160px;
  border-radius:12px; z-index:0; pointer-events:none; opacity:0;
  background:var(--acc-grad); box-shadow:var(--acc-sh), var(--rim);
  transition:transform .2s cubic-bezier(.22,1.05,.32,1),
             height .18s cubic-bezier(.22,1.05,.32,1),
             width .16s ease, opacity .2s ease;
  will-change:transform,height,width;
}
.nav-indicator.ready{opacity:1;}
.sidebar .nav-item{position:relative;z-index:1;}
.nav-item.active{
  color:#fff;font-weight:700;background:transparent;border-color:transparent;box-shadow:none;
}
.nav-item.active:hover{background:transparent;}
.nav-item.active .ic{opacity:1;}
.nav-item .badge{margin-left:auto;}
.nav-item.mini{font-size:13px;padding:7px 11px;color:var(--ink-3);}

.nav-foot{margin-top:auto;padding-top:12px;}
/* Personas (Portail) : on n'affiche que l'espace du rôle actif. */
.role-grp[hidden],.appswitch[hidden]{display:none;}
.role-grp{display:flex;flex-direction:column;gap:5px;}
/* sélecteur de logiciel (constellation) */
.appswitch{display:flex;gap:6px;padding:7px;border-radius:14px;background:var(--glass);
  border:1px solid var(--glass-line);}
.appswitch a{flex:1;text-align:center;padding:8px 0;border-radius:9px;font-size:11px;font-weight:600;
  color:var(--ink-3);}
.appswitch a.on{color:#fff;background:var(--glass-3);box-shadow:0 1px 0 var(--glass-edge) inset;}

/* — Zone principale — */
.main{min-width:0;display:flex;flex-direction:column;}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:16px 26px;border-bottom:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(10,14,24,.72),rgba(10,14,24,.36));
  -webkit-backdrop-filter:var(--lg-frost-lg);
          backdrop-filter:var(--lg-frost-lg);
}
.topbar h1{font-size:22px;font-weight:700;letter-spacing:-.02em;}
.topbar .sub{font-size:12.5px;color:var(--ink-3);margin-top:2px;}
.topbar .sp{flex:1;}
.content{padding:26px;max-width:var(--maxw);width:100%;}

/* champ de recherche en verre */
.search{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--glass-line);min-width:220px;color:var(--ink-3);font-size:13.5px;}
.search input{all:unset;flex:1;color:var(--ink);font-size:13.5px;}

/* ============================================================================
   5. VUES (commutation par .active)
   ========================================================================== */
.view{display:none;animation:fade .35s ease both;}
.view.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* — Sous-onglets internes à une vue (fiches, dossiers, détails à panneaux) :
     une barre latérale (.subnav) commute des panneaux (.subview), UN seul visible.
     Géré par views.js via [data-sub] → [data-subview], borné par [data-subscope]. — */
.fiche-layout{display:grid;grid-template-columns:228px 1fr;gap:18px;align-items:start;}
.subnav{display:flex;flex-direction:column;gap:3px;position:sticky;top:88px;}
.subnav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;
  color:var(--ink-2);font-size:13.5px;font-weight:500;cursor:pointer;border:1px solid transparent;transition:.14s;}
.subnav-item .ic{width:17px;height:17px;flex:0 0 auto;opacity:.85;}
.subnav-item .ic svg{width:17px;height:17px;display:block;}
.subnav-item:hover{background:var(--glass);color:var(--ink);}
.subnav-item.active{background:var(--glass-2);color:var(--ink);font-weight:700;border-color:var(--glass-line);box-shadow:var(--sh-1);}
.subnav-item .badge{margin-left:auto;}
.subview{display:none;animation:fade .3s ease both;}
.subview.active{display:block;}
@media (max-width:760px){ .fiche-layout{grid-template-columns:1fr;} .subnav{position:static;flex-direction:row;flex-wrap:wrap;} }

/* ============================================================================
   6. GRILLES
   ========================================================================== */
.grid{display:grid;gap:16px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.g-auto{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.span-2{grid-column:span 2;} .span-3{grid-column:span 3;} .span-full{grid-column:1/-1;}
.stack{display:flex;flex-direction:column;gap:16px;}
.row{display:flex;gap:12px;}.row.wrap{flex-wrap:wrap;}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.center{display:flex;align-items:center;gap:10px;}
.cluster{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.sp{flex:1;}

/* ============================================================================
   7. CARTES
   ========================================================================== */
.card{padding:18px 20px;border-radius:var(--r-lg);background:var(--glass);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--lg-frost);backdrop-filter:var(--lg-frost);
  box-shadow:var(--sh-1);position:relative;}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--grad-head);-webkit-mask:linear-gradient(180deg,#000,transparent 40%);
  mask:linear-gradient(180deg,#000,transparent 44%);opacity:.95;}
.card>*{position:relative;}
.card.hi{background:var(--glass-2);}
/* .warm = « ATTENTION/ACTION » → ambre FIXE (--glow-ember) dans les 4 apps :
   l'intention ne doit PAS prendre la couleur de la marque (--acc-glow). */
.card.warm{background:linear-gradient(150deg, rgba(var(--glow-ember),.18), var(--glass));
  border-color:rgba(var(--glow-ember),.30);}
.card.cool{background:linear-gradient(150deg, var(--tint-azure), var(--glass));
  border-color:rgba(var(--glow-azure),.30);}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.card-title{font-size:15.5px;font-weight:600;}
.card-title .serif{font-size:20px;font-weight:700;}
.card-sub{font-size:12.5px;color:var(--ink-3);}

/* — Tuile KPI — */
.tile{padding:18px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:var(--lg-frost);backdrop-filter:var(--lg-frost);box-shadow:var(--sh-1);position:relative;overflow:hidden;}
.tile .lab{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
.tile .big{font-size:34px;font-weight:800;letter-spacing:-.03em;margin-top:8px;line-height:1;}
.tile .big.mono{font-size:30px;}
.tile .delta{font-size:12px;font-weight:600;margin-top:8px;}
.tile .spark{position:absolute;right:14px;bottom:12px;opacity:.85;}
.tile.warm{background:linear-gradient(150deg,rgba(var(--glow-ember),.20),var(--glass));border-color:rgba(var(--glow-ember),.32);}
.tile.cool{background:linear-gradient(150deg,var(--tint-azure),var(--glass));border-color:rgba(var(--glow-azure),.30);}

/* ============================================================================
   8. BOUTONS / SEGMENTS / TOGGLES
   ========================================================================== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;cursor:pointer;border:1px solid var(--glass-line);
  background:var(--glass);color:var(--ink);transition:.16s;white-space:nowrap;}
.btn:hover{background:var(--glass-3);}
.btn svg{width:16px;height:16px;}
.btn.primary{background:var(--acc-grad);border-color:transparent;color:var(--acc-ink);box-shadow:var(--acc-sh);}
.btn.primary:hover{filter:brightness(1.06);}
.btn.azure{background:var(--grad-azure);border-color:transparent;color:#06121f;box-shadow:var(--sh-azure);}
.btn.ia{background:var(--grad-ia);border-color:transparent;color:#1c0f33;}
.btn.ghost{background:transparent;}
.btn.sm{padding:6px 11px;font-size:12.5px;}
.btn.icon{padding:9px;border-radius:11px;}
/* Action destructrice : le poids reflète la conséquence (le token --danger existait déjà). */
.btn.danger{color:var(--danger);border-color:rgba(var(--urgent-rgb),.42);background:rgba(var(--urgent-rgb),.10);}
.btn.danger:hover{background:rgba(var(--urgent-rgb),.18);}
.btn.danger.fill{background:linear-gradient(135deg,#FF6B74,#E5343F);border-color:transparent;color:#fff;box-shadow:0 8px 22px -8px rgba(var(--urgent-rgb),.6);}

/* Focus clavier visible — anneau unique, prend l'accent de l'app (--acc-glow). */
.btn:focus-visible,.nav-item:focus-visible,.subnav-item:focus-visible,.seg button:focus-visible,
.switch:focus-visible,a:focus-visible,[tabindex]:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(var(--acc-glow),.5);
}

/* — ROBUSTESSE : le texte ne déborde plus de sa carte / ne pousse plus la bordure —
   Cause n°1 : un enfant flex sans min-width:0 force la rangée plus large que le parent. */
.between>*,.card-head>*,.center>*,.ctx>*,.li>*,.tl>*,.cluster{min-width:0;}
.card-title,.tile .big,.gr,.gr b,.gr span,.msg,.subnav-item,.kcard,.note,.bd{overflow-wrap:anywhere;}
.table{table-layout:auto;}
.table td,.table th{overflow-wrap:anywhere;word-break:break-word;}
.pill,.tag,.badge{max-width:100%;}
/* la carte arrondie ne laisse pas un coin de contenu dépasser son rayon */
.tile,.kcol,.kcard{overflow:hidden;}

.seg{position:relative;display:inline-flex;padding:4px;gap:3px;border-radius:var(--r-pill);background:var(--glass);
  border:1px solid var(--glass-line);overflow:hidden;}
/* seg « Catégorie » qui s'enroule sur plusieurs rangées : rayon-carte pour aligner conteneur ET pastille */
.seg[style*="wrap"],.seg.wrap{border-radius:var(--r-sm);}
.seg[style*="wrap"] .seg-ind,.seg.wrap .seg-ind{border-radius:9px;}
/* pastille de verre coulissante de l'onglet segmenté (injectée par views.js) */
.seg-ind{position:absolute;left:0;top:0;height:30px;width:62px;border-radius:var(--r-pill);z-index:0;pointer-events:none;opacity:0;
  background:var(--glass-3);box-shadow:0 1px 0 var(--glass-edge) inset, 0 2px 8px rgba(0,0,0,.20);
  transition:transform .19s cubic-bezier(.22,1.05,.32,1), width .16s ease, height .16s ease, opacity .2s;}
.seg-ind.ready{opacity:1;}
.seg button{all:unset;position:relative;z-index:1;padding:7px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
  color:var(--ink-3);cursor:pointer;transition:color .16s;}
.seg button.on,.seg button:hover{color:var(--ink);}

/* interrupteur (bascule) */
.switch{width:42px;height:25px;border-radius:var(--r-pill);background:var(--track);
  border:1px solid var(--glass-line);position:relative;cursor:pointer;flex:0 0 auto;}
.switch i{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;
  transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.4);}
.switch.on{background:var(--acc-grad);border-color:transparent;}
.switch.on i{left:19px;}

/* ============================================================================
   9. PASTILLES / TAGS / BADGES
   ========================================================================== */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;border:1px solid transparent;background:var(--glass);color:var(--ink-2);}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.pill.ok{color:var(--valide);background:rgba(95,192,140,.13);border-color:rgba(95,192,140,.28);}
.pill.warn{color:var(--ambre);background:rgba(230,180,92,.13);border-color:rgba(230,180,92,.28);}
.pill.ia{color:var(--ia);background:rgba(47,198,222,.15);border-color:rgba(47,198,222,.32);}
.pill.info{color:var(--azure);background:rgba(111,162,221,.13);border-color:rgba(111,162,221,.28);}
.pill.ember{color:var(--ember-3);background:rgba(var(--glow-ember),.15);border-color:rgba(var(--glow-ember),.34);}
.pill.danger{color:var(--danger);background:rgba(var(--urgent-rgb),.14);border-color:rgba(var(--urgent-rgb),.32);}
.pill.urgent{color:#FF888F;background:rgba(var(--urgent-rgb),.18);border-color:rgba(var(--urgent-rgb),.50);font-weight:700;}
.pill.urgent .dot{background:#FF5965;box-shadow:0 0 8px rgba(var(--urgent-rgb),.9);}
.badge.urgent{background:linear-gradient(135deg,#FF6B74,#E5343F);color:#fff;}
.pill.neutral{color:var(--ink-2);background:var(--glass);border-color:var(--glass-line);}

.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;background:var(--acc-grad);color:var(--acc-ink);}
.badge.azure{background:var(--grad-azure);color:#06121f;}
.badge.soft{background:var(--glass-3);color:var(--ink);}

/* Puce d'assignation (Hub tickets) — pilule ronde, plus le carré par défaut du navigateur */
.assignee{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 4px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--glass-line);color:var(--ink-2);cursor:pointer;
  font-size:11px;line-height:1;transition:.14s;}
.assignee:hover{background:var(--glass-3);color:var(--ink);}
.assignee .av{flex:0 0 auto;border-radius:50%;}
.assignee.non-assigne{border-style:dashed;color:var(--ink-3);}
.assignee.non-assigne:hover{border-style:solid;color:var(--ink);}

.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:500;background:var(--glass);border:1px solid var(--glass-line);color:var(--ink-2);}

.dot-s{width:8px;height:8px;border-radius:50%;display:inline-block;}
.dot-ok{background:var(--valide);} .dot-warn{background:var(--ambre);}
.dot-off{background:var(--ink-4);} .dot-live{background:var(--valide);box-shadow:0 0 0 3px rgba(95,192,140,.22);}

/* ============================================================================
   10. LISTES / LIGNES / TABLEAUX
   ========================================================================== */
.list{display:flex;flex-direction:column;}
.li{display:flex;align-items:center;gap:13px;padding:13px 8px;border-bottom:1px solid var(--glass-line);transition:.14s;}
.li:last-child{border-bottom:0;}
.li:hover{background:var(--glass);border-radius:12px;}
.li .av{width:36px;height:36px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  font-weight:700;font-size:13px;background:var(--glass-3);color:var(--ink);}
.li .gr{min-width:0;flex:1;}
.li .gr b{font-size:14px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.li .gr span{font-size:12.5px;color:var(--ink-3);}

.table{width:100%;border-collapse:collapse;font-size:13.5px;}
.table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--glass-line);}
.table td{padding:12px;border-bottom:1px solid var(--glass-line);color:var(--ink-2);}
/* colonne case à cocher (listes d'imputation/validation) : rond centré, contenu dans sa colonne, jamais sur le libellé.
   La .switch a un transform:scale(.8) inline dont la BOÎTE de layout reste 42px et débordait la colonne 34px → on neutralise le scale et on fixe la vraie taille. */
.table td:first-child{vertical-align:middle;padding:10px 6px 10px 12px;white-space:nowrap;}
.table td:first-child .switch{transform:none !important;width:34px;height:20px;display:inline-block;vertical-align:middle;flex:0 0 auto;}
.table td:first-child .switch i{width:16px;height:16px;top:2px;left:2px;}
.table td:first-child .switch.on i{left:16px;}
label.cluster .switch{flex:0 0 auto;} label.cluster{flex-wrap:nowrap;}
.table tr:hover td,.table tbody tr:hover td{background:var(--glass);}
.table td b{color:var(--ink);font-weight:600;}
.table .num{text-align:right;font-family:'JetBrains Mono',monospace;}

/* ============================================================================
   11. BARRES DE PROGRESSION / JAUGES
   ========================================================================== */
.bar{height:8px;border-radius:var(--r-pill);background:var(--track);overflow:hidden;}
.bar>i{display:block;height:100%;border-radius:inherit;background:var(--acc-grad);}
.bar.azure>i{background:var(--grad-azure);}
.bar.ok>i{background:linear-gradient(90deg,#5FC08C,#2f7d5e);}
.meter{display:flex;align-items:center;gap:10px;}
.meter .bar{flex:1;}
.meter .val{font-size:12.5px;font-weight:600;color:var(--ink-2);min-width:42px;text-align:right;}

/* ============================================================================
   12. KANBAN
   ========================================================================== */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start;}
.kcol{background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r-lg);padding:13px;
  -webkit-backdrop-filter:var(--lg-frost);backdrop-filter:var(--lg-frost);}
.kcol-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;padding:2px 4px;}
.kcol-h b{font-size:13px;font-weight:700;}
.kcard{background:var(--glass-2);border:1px solid var(--glass-line);border-radius:14px;padding:13px;margin-bottom:10px;
  box-shadow:var(--sh-1);cursor:grab;transition:.16s;}
.kcard:hover{transform:translateY(-2px);background:var(--glass-3);}
.kcard b{font-size:13.5px;font-weight:600;}
.kcard .meta{font-size:11.5px;color:var(--ink-3);margin-top:5px;}

/* ============================================================================
   13. CHAT
   ========================================================================== */
.chat{display:flex;flex-direction:column;gap:11px;}
.msg{max-width:78%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.5;position:relative;}
.msg .who{font-size:11px;font-weight:600;color:var(--ink-3);margin-bottom:3px;}
.msg.them{align-self:flex-start;background:var(--glass-2);border:1px solid var(--glass-line);border-bottom-left-radius:5px;}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,rgba(var(--acc-glow),.30),rgba(var(--acc-glow),.16));
  border:1px solid rgba(var(--acc-glow),.34);border-bottom-right-radius:5px;}
.msg .time{font-size:10.5px;color:var(--ink-4);margin-top:5px;text-align:right;}
.composer{display:flex;align-items:center;gap:9px;padding:9px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--glass-line);}
.composer input{all:unset;flex:1;color:var(--ink);font-size:14px;padding:0 6px;}

/* ============================================================================
   14. TIMELINE
   ========================================================================== */
.timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:6px;}
.tl{display:flex;gap:14px;padding-bottom:18px;position:relative;}
.tl:not(:last-child)::before{content:"";position:absolute;left:9px;top:22px;bottom:-2px;width:2px;background:var(--glass-line);}
.tl .pt{width:20px;height:20px;border-radius:50%;flex:0 0 auto;border:2px solid var(--glass-line);
  background:var(--bg-2);margin-top:2px;z-index:1;}
.tl.done .pt{background:var(--acc-grad);border-color:transparent;}
.tl.now .pt{background:var(--bg-2);border-color:var(--acc);box-shadow:0 0 0 4px rgba(var(--acc-glow),.18);}
.tl .bd b{font-size:14px;font-weight:600;display:block;}
.tl .bd span{font-size:12.5px;color:var(--ink-3);}

/* ============================================================================
   15. LA LOUPE  (signature ZCA : logiciel embarqué dans le ticket)
   ========================================================================== */
.loupe{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--glass-line);background:var(--glass-deep);
  -webkit-backdrop-filter:var(--lg-frost-lg);backdrop-filter:var(--lg-frost-lg);box-shadow:var(--sh-2);}
.loupe-bar{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--glass-line);
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent);}
.loupe-bar .dots{display:flex;gap:6px;}
.loupe-bar .dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18);}
.loupe-bar .dots i:first-child{background:var(--danger);}
.loupe-bar .lbl{font-size:12px;font-weight:600;color:var(--ink-2);}
.loupe-body{display:grid;grid-template-columns:1.15fr .85fr;gap:0;}
.loupe-doc{padding:18px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.015) 0 26px,transparent 26px 52px);
  border-right:1px solid var(--glass-line);min-height:320px;}
.paper{background:rgba(247,247,250,.96);color:#1a2233;border-radius:8px;padding:20px;font-size:11.5px;line-height:1.6;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.6);}
.paper .ph{height:9px;border-radius:4px;background:#dfe3ea;margin:7px 0;}
.paper .ph.w40{width:40%;} .paper .ph.w60{width:60%;} .paper .ph.w80{width:80%;}
.loupe-side{padding:18px;display:flex;flex-direction:column;gap:12px;}
.loupe-side .act{display:flex;flex-direction:column;gap:8px;margin-top:auto;}

/* ============================================================================
   16. DÉPÔT (dropzone) / RENDU PIXEL
   ========================================================================== */
.dropzone{border:1.5px dashed rgba(255,255,255,.22);border-radius:var(--r-lg);padding:38px;text-align:center;
  background:var(--glass);transition:.18s;}
.dropzone:hover{background:var(--glass-2);border-color:rgba(var(--glow-ember),.5);}
.dropzone .ico{width:54px;height:54px;border-radius:16px;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--acc-grad);box-shadow:var(--acc-sh);}

/* ============================================================================
   17. AGENDA
   ========================================================================== */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.cal .h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);text-align:center;padding:4px 0;}
.cal .d{aspect-ratio:1/.82;border-radius:12px;border:1px solid var(--glass-line);background:var(--glass);padding:7px 8px;font-size:12px;}
.cal .d .n{font-weight:600;color:var(--ink-2);}
.cal .d.off{opacity:.4;} .cal .d.today{border-color:rgba(var(--acc-glow),.5);background:rgba(var(--acc-glow),.12);}
.cal .ev{margin-top:5px;font-size:10px;font-weight:600;padding:2px 6px;border-radius:6px;background:var(--grad-azure);color:#06121f;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal .ev.ember{background:var(--grad-ember);color:#2a0f04;}

/* ============================================================================
   18. DONUT / SPARK (inline SVG helpers stylent leur trait via currentColor)
   ========================================================================== */
.donut{transform:rotate(-90deg);} .donut circle{fill:none;stroke-linecap:round;}

/* ============================================================================
   19. MODALE / OVERLAY DÉMO
   ========================================================================== */
.note{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r);background:var(--tint-azure);
  border:1px solid rgba(var(--glow-azure),.30);font-size:13px;color:var(--ink-2);}
.note .k{flex:0 0 auto;}
/* Rappel de souveraineté (côté client/partenaire) — vert = suisse/sécurisé */
.souv-strip{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:var(--r);font-size:12.5px;
  color:var(--ink-2);background:linear-gradient(150deg,rgba(95,192,140,.13),var(--glass));border:1px solid rgba(95,192,140,.30);}
.souv-strip b{color:var(--ink);font-weight:600;}

/* bandeau « maquette » discret en pied de page */
.maquette-foot{margin:30px 0 6px;text-align:center;font-size:11.5px;color:var(--ink-4);letter-spacing:.04em;}

/* ============================================================================
   20. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(2,1fr);}
  .kanban{grid-template-columns:repeat(2,1fr);} .loupe-body{grid-template-columns:1fr;}
  .loupe-doc{border-right:0;border-bottom:1px solid var(--glass-line);}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:-280px;transition:.25s;width:264px;box-shadow:var(--sh-2);}
  .sidebar.open{left:0;}
  .g-2,.g-3,.g-4,.g-auto{grid-template-columns:1fr;} .span-2,.span-3{grid-column:auto;}
  .kanban{grid-template-columns:1fr;}
  .content{padding:18px;} .topbar{padding:14px 18px;}
  .menu-btn{display:inline-grid!important;}
}
.menu-btn{display:none;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--glass);
  border:1px solid var(--glass-line);cursor:pointer;}

/* ============================================================================
   21. BASCULE DE THÈME (bouton flottant injecté par views.js)
   ========================================================================== */
.lg-theme{
  position:fixed;right:92px;bottom:21px;z-index:80;
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);
  cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink);
  background:var(--glass-2);border:1px solid var(--glass-line);box-shadow:var(--sh-1);
  -webkit-backdrop-filter:var(--lg-frost);backdrop-filter:var(--lg-frost);
}
.lg-theme:hover{background:var(--glass-3);}
.lg-theme svg{width:16px;height:16px;}

/* ============================================================================
   21b. BULLE DE CHAT PERSISTANTE (injectée par views.js) — sur les 4 logiciels
        FAB en bas à droite → s'ouvre en panneau, se replie d'un clic.
   ========================================================================== */
.lg-chat{position:fixed;right:22px;bottom:20px;z-index:90;}
.lg-chat-fab{
  width:58px;height:58px;border-radius:50%;cursor:pointer;display:grid;place-items:center;position:relative;
  background:var(--acc-grad);color:var(--acc-ink);box-shadow:var(--acc-sh), var(--rim);
  border:1px solid var(--glass-edge-soft);transition:transform .2s cubic-bezier(.3,1.2,.32,1);
}
.lg-chat-fab:hover{transform:translateY(-2px) scale(1.05);}
.lg-chat-fab .ic-open,.lg-chat-fab .ic-close{position:absolute;transition:opacity .2s, transform .25s;}
.lg-chat-fab svg{width:25px;height:25px;display:block;}
.lg-chat-fab .ic-close{opacity:0;transform:rotate(-90deg) scale(.6);}
.lg-chat.open .lg-chat-fab .ic-open{opacity:0;transform:rotate(90deg) scale(.6);}
.lg-chat.open .lg-chat-fab .ic-close{opacity:1;transform:none;}
.lg-chat-n{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--danger);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg-0);}
.lg-chat.open .lg-chat-n{opacity:0;}
.lg-chat-panel{
  position:absolute;right:0;bottom:72px;width:min(346px,calc(100vw - 32px));height:0;overflow:hidden;
  display:flex;flex-direction:column;border-radius:22px;
  background:var(--glass-deep);border:1px solid var(--glass-line);box-shadow:var(--sh-2);
  -webkit-backdrop-filter:var(--lg-frost-lg);backdrop-filter:var(--lg-frost-lg);
  transform-origin:bottom right;transform:translateY(14px) scale(.9);opacity:0;pointer-events:none;
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,1.05,.32,1), height .28s cubic-bezier(.22,1.05,.32,1);
}
.lg-chat.open .lg-chat-panel{height:min(460px,72vh);opacity:1;transform:none;pointer-events:auto;}
.lg-chat-hd{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--glass-line);flex:0 0 auto;}
.lg-chat-hd .av{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px;
  background:var(--acc-grad);color:var(--acc-ink);flex:0 0 auto;}
.lg-chat-hd b{font-size:14px;}
.lg-chat-hd .st{font-size:11.5px;color:var(--valide);display:flex;align-items:center;gap:5px;}
.lg-chat-x{margin-left:auto;width:30px;height:30px;border-radius:9px;cursor:pointer;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--ink-2);}
.lg-chat-x:hover{background:var(--glass-3);color:var(--ink);}
.lg-chat-seg{display:flex;gap:4px;padding:9px 12px 4px;flex:0 0 auto;}
.lg-chat-bd{flex:1 1 auto;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
.lg-chat-ft{flex:0 0 auto;padding:11px 13px;border-top:1px solid var(--glass-line);}
.lg-chat-ft .composer{box-shadow:none;}
/* Bulle CABINET : liste de TOUTES les conversations + bascule liste↔fil */
.lg-chat-list{flex:1 1 auto;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:3px;}
.lg-chat.mode-thread .lg-chat-list,.lg-chat.mode-thread .lg-chat-seg{display:none;}
.lg-chat.mode-list .lg-chat-bd,.lg-chat.mode-list .lg-chat-ft{display:none;}
.lg-chat-back{display:none;width:30px;height:30px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  align-items:center;justify-content:center;border-radius:9px;flex:0 0 auto;padding:0;}
.lg-chat-back svg{width:18px;height:18px;} .lg-chat-back:hover{background:var(--glass-2);color:var(--ink);}
.lg-chat.mode-thread .lg-chat-back{display:inline-flex;}
.lg-chat-row{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:12px;cursor:pointer;transition:background .15s;}
.lg-chat-row:hover{background:var(--glass-2);}
.lg-chat-row .av{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:12px;background:var(--glass-2);border:1px solid var(--glass-line);color:var(--ink);}
.lg-chat-row-gr{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.lg-chat-row-gr b{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lg-chat-row-gr span{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lg-chat-row-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto;}
.lg-chat-row-meta .t{font-size:10.5px;color:var(--ink-4);}
.lg-chat-row-n{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center;}
.lg-chat-send{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;
  background:var(--acc-grad);color:var(--acc-ink);border:0;}
@media (max-width:760px){ .lg-chat{right:14px;bottom:14px;} .lg-theme{right:84px;bottom:15px;} }

/* ============================================================================
   21c. PLAN DE TRAVAIL (Workflow) — injecté par views.js, apps ÉQUIPE
        Bouton-poste au coin → panneau « Plan de travail » (pièces gardées +
        outils) → visionneuse ANCRÉE plein écran qui pousse le contenu.
        Sur les apps équipe, le chat et la bascule de thème se décalent à gauche
        pour ne JAMAIS chevaucher le bouton-poste.
   ========================================================================== */
/* décalage du chat + bascule thème (seulement là où le workflow existe) */
body:has(.app[data-app="compta"]) .lg-chat,
body:has(.app[data-app="crm"])    .lg-chat,
body:has(.app[data-app="hub"])    .lg-chat{ right:92px; }
body:has(.app[data-app="compta"]) .lg-theme,
body:has(.app[data-app="crm"])    .lg-theme,
body:has(.app[data-app="hub"])    .lg-theme{ right:162px; }

/* --- bouton-poste (déclencheur) --- */
.zwf{ position:fixed; right:22px; bottom:20px; z-index:78; }
.zwf-fab{
  width:54px; height:54px; border-radius:50%; cursor:pointer; position:relative;
  display:grid; place-items:center;
  background:var(--encre-fixe,#1B263B); color:#fff;
  box-shadow:var(--sh-1); border:1px solid var(--glass-edge-soft);
  transition:transform .2s cubic-bezier(.3,1.2,.32,1);
}
.zwf-fab:hover{ transform:translateY(-2px) scale(1.05); }
.zwf-fab svg{ width:23px; height:23px; display:block; }
.zwf-n{
  position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--acc); color:var(--acc-ink); font-size:11px; font-weight:800;
  display:grid; place-items:center; border:2px solid var(--bg-0);
}

/* --- panneau (s'ouvre au clic, ancré au-dessus du bouton) --- */
.zwf-panel{
  position:absolute; right:0; bottom:68px; width:min(340px,calc(100vw - 32px));
  height:0; overflow:hidden; display:flex; flex-direction:column;
  border-radius:22px; background:var(--glass-deep); border:1px solid var(--glass-line);
  box-shadow:var(--sh-2);
  -webkit-backdrop-filter:var(--lg-frost-lg); backdrop-filter:var(--lg-frost-lg);
  transform-origin:bottom right; transform:translateY(14px) scale(.92); opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,1.05,.32,1), height .28s cubic-bezier(.22,1.05,.32,1);
}
.zwf.open .zwf-panel{ height:auto; max-height:min(560px,80vh); opacity:1; transform:none; pointer-events:auto; }
.zwf-hd{ display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--glass-line); flex:0 0 auto; }
.zwf-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--encre-fixe,#1B263B); color:#fff; }
.zwf-ic svg{ width:19px; height:19px; }
.zwf-hd-t{ flex:1; min-width:0; }
.zwf-hd-t b{ font-size:14px; color:var(--ink); display:block; }
.zwf-hd-t span{ font-size:11px; color:var(--ink-3); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zwf-min{ width:30px; height:30px; border-radius:9px; cursor:pointer; display:grid; place-items:center; flex:0 0 auto;
  background:var(--glass); border:1px solid var(--glass-line); color:var(--ink-2); }
.zwf-min:hover{ background:var(--glass-3); color:var(--ink); }
.zwf-min svg{ width:17px; height:17px; }
.zwf-bd{ flex:1 1 auto; overflow-y:auto; padding:12px 14px 14px; }
.zwf-sec-t{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:4px 2px 8px; }
.zwf-bd .zwf-sec-t + .zwf-list + .zwf-sec-t,
.zwf-bd .zwf-list ~ .zwf-sec-t{ margin-top:16px; }

/* --- liste des pièces gardées --- */
.zwf-list{ display:flex; flex-direction:column; gap:6px; }
.zwf-row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:13px;
  background:var(--glass); border:1px solid var(--glass-line); }
.zwf-row-ic{ width:30px; height:30px; flex:0 0 auto; border-radius:9px; display:grid; place-items:center;
  background:var(--glass-2); color:var(--acc-3); }
.zwf-row-ic svg{ width:16px; height:16px; }
.zwf-row-gr{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.zwf-row-gr b{ font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zwf-row-gr span{ font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zwf-row-see{ flex:0 0 auto; padding:5px 11px; border-radius:999px; cursor:pointer; font-size:11.5px; font-weight:600;
  background:var(--glass-2); border:1px solid var(--glass-line); color:var(--ink); }
.zwf-row-see:hover{ background:var(--glass-3); }
.zwf-row-del{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; cursor:pointer; display:grid; place-items:center;
  background:transparent; border:0; color:var(--ink-4); }
.zwf-row-del:hover{ background:var(--glass-2); color:var(--danger); }
.zwf-row-del svg{ width:14px; height:14px; }
.zwf-empty{ font-size:12px; color:var(--ink-3); padding:8px 4px; }

/* --- outils --- */
.zwf-tools{ display:flex; flex-direction:column; gap:6px; }
.zwf-tool{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border-radius:13px; cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-line); color:var(--ink); font-size:12.5px; font-weight:600; text-align:left; }
.zwf-tool:hover{ background:var(--glass-2); }
.zwf-tool svg{ width:18px; height:18px; flex:0 0 auto; color:var(--ink-2); }
.zwf-foot-note{ margin-top:14px; padding-top:11px; border-top:1px solid var(--glass-line);
  font-size:11px; color:var(--ink-3); line-height:1.45; }

/* --- VISIONNEUSE ANCRÉE — pousse le contenu de l'app --- */
.app{ transition:padding-right .34s cubic-bezier(.22,1.05,.32,1); }
body.zwf-docked .app{ padding-right:480px; }
.zdoc{
  position:fixed; top:0; right:0; bottom:0; width:min(460px,92vw); z-index:84;
  display:flex; flex-direction:column;
  background:var(--glass-deep); border-left:1px solid var(--glass-line);
  box-shadow:var(--sh-2);
  -webkit-backdrop-filter:var(--lg-frost-lg); backdrop-filter:var(--lg-frost-lg);
  transform:translateX(102%); opacity:0; pointer-events:none;
  transition:transform .34s cubic-bezier(.22,1.05,.32,1), opacity .26s ease;
}
.zdoc.open{ transform:none; opacity:1; pointer-events:auto; }
.zdoc-hd{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--glass-line); flex:0 0 auto; flex-wrap:wrap; }
.zdoc-hd-t{ flex:1; min-width:120px; }
.zdoc-hd-t b{ font-size:14.5px; color:var(--ink); display:block; }
.zdoc-hd-t span{ font-size:11.5px; color:var(--ink-3); display:block; margin-top:2px; }
.zdoc-pager, .zdoc-zoom{ display:flex; align-items:center; gap:4px; padding:3px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-line); }
.zdoc-pager button, .zdoc-zoom button{ width:26px; height:26px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  background:transparent; border:0; color:var(--ink-2); font-size:16px; line-height:1; }
.zdoc-pager button:hover, .zdoc-zoom button:hover{ background:var(--glass-3); color:var(--ink); }
.zdoc-idx, .zdoc-zlbl{ font-size:11.5px; font-weight:600; color:var(--ink-2); padding:0 4px; min-width:30px; text-align:center; }
.zdoc-keep{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; cursor:pointer;
  font-size:12px; font-weight:700; background:var(--glass-2); border:1px solid var(--glass-line); color:var(--ink); }
.zdoc-keep:hover{ background:var(--glass-3); }
.zdoc-keep svg{ width:15px; height:15px; }
.zdoc-keep.is-kept{ background:rgba(95,192,140,.16); border-color:rgba(95,192,140,.4); color:var(--valide); }
.zdoc-x{ width:32px; height:32px; border-radius:10px; cursor:pointer; display:grid; place-items:center; flex:0 0 auto;
  background:var(--glass); border:1px solid var(--glass-line); color:var(--ink-2); }
.zdoc-x:hover{ background:var(--glass-3); color:var(--ink); }
.zdoc-x svg{ width:17px; height:17px; }
.zdoc-bd{ flex:1 1 auto; overflow:auto; padding:26px 24px; display:flex; justify-content:center; align-items:flex-start; }
.zdoc-paper{ width:100%; max-width:380px; background:#fdfdfb; color:#1c2230; border-radius:10px;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.6); padding:26px 24px; transform-origin:top center; transition:transform .2s ease; }
.zdoc-paper-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.zdoc-logo{ font-size:18px; font-weight:800; letter-spacing:-.02em; color:#0a1f44; }
.zdoc-paper-tag{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#8a93a6; }
.zdoc-paper-row{ display:flex; justify-content:space-between; font-size:12px; color:#5a6377; margin-bottom:5px; }
.zdoc-paper-sep{ height:1px; background:#e6e8ee; margin:14px 0; }
.zdoc-paper-line{ display:flex; justify-content:space-between; font-size:12.5px; color:#2a3142; margin-bottom:8px; }
.zdoc-paper-line.tot{ font-weight:800; font-size:14px; color:#0a1f44; }
.zdoc-paper-qr{ display:flex; align-items:center; gap:14px; margin-top:22px; padding-top:18px; border-top:2px dashed #d4d7e0; }
.zdoc-qr{ width:62px; height:62px; flex:0 0 auto; border-radius:6px;
  background:
    linear-gradient(90deg,#1c2230 2px,transparent 2px) 0 0/8px 8px,
    linear-gradient(#1c2230 2px,transparent 2px) 0 0/8px 8px, #fff;
  border:3px solid #1c2230; }
.zdoc-paper-qr-t b{ font-size:12px; color:#1c2230; display:block; }
.zdoc-paper-qr-t span{ font-size:11px; color:#7a8295; }
.zdoc-ft{ flex:0 0 auto; padding:13px 18px; border-top:1px solid var(--glass-line);
  font-size:11px; color:var(--ink-3); text-align:center; }

@media (max-width:760px){
  .zwf{ right:14px; bottom:14px; }
  body:has(.app[data-app="compta"]) .lg-chat,
  body:has(.app[data-app="crm"])    .lg-chat,
  body:has(.app[data-app="hub"])    .lg-chat{ right:80px; }
  body:has(.app[data-app="compta"]) .lg-theme,
  body:has(.app[data-app="crm"])    .lg-theme,
  body:has(.app[data-app="hub"])    .lg-theme{ right:150px; }
  body.zwf-docked .app{ padding-right:0; }
}

/* ============================================================================
   22. THÈME CLAIR — frosted-white sur fond perle, mêmes halos orange+bleu
       (bascule via <html data-theme="light">)
   ========================================================================== */
html[data-theme="light"]{
  color-scheme:light;
  /* fond CLAIR & FROID (fini le taupe) : gris perle bleuté + grille, comme les réfs Apple */
  --bg-0:#DCE2EA; --bg-1:#E9EDF3; --bg-2:#F6F8FB;
  --glass:rgba(255,255,255,.28); --glass-2:rgba(255,255,255,.42); --glass-3:rgba(255,255,255,.62);
  --glass-line:rgba(48,56,74,.10); --glass-edge:rgba(255,255,255,1); --glass-edge-soft:rgba(255,255,255,.7);
  --glass-deep:rgba(255,255,255,.5); --track:rgba(36,52,82,.13);
  --ink:rgba(18,26,42,.92); --ink-2:rgba(18,26,42,.60); --ink-3:rgba(18,26,42,.44); --ink-4:rgba(18,26,42,.28);
  --sh-1:var(--rim), 0 1px 3px rgba(30,45,80,.10), 0 16px 40px -18px rgba(30,45,80,.28);
  --sh-2:var(--rim), 0 4px 12px rgba(30,45,80,.12), 0 38px 84px -28px rgba(30,45,80,.34);
  --lg-frost:blur(18px) saturate(150%) brightness(1.02);
  --lg-frost-lg:blur(30px) saturate(140%) brightness(1.01);
  --lg-clear:saturate(150%) brightness(1.02) blur(2px);
  --lg-clear-lg:saturate(140%) brightness(1.01) blur(6px);
}
html[data-theme="light"] body::before{
  background:
    /* halo chaud retiré : teinte portée par le logiciel actif (.app::before) */
    radial-gradient(680px 560px at 6% 18%, rgba(var(--glow-azure),.26), transparent 60%),
    radial-gradient(760px 620px at 22% 110%, rgba(120,150,210,.22), transparent 62%),
    radial-gradient(560px 460px at 60% 70%, rgba(160,120,200,.14), transparent 64%),
    linear-gradient(160deg,#E7ECF3 0%, #DCE2EB 55%, #D2D9E4 100%);
}
html[data-theme="light"] body::after{
  opacity:.9;
  background-image:
    linear-gradient(rgba(40,60,100,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,60,100,.07) 1px, transparent 1px);
}
html[data-theme="light"] ::selection{background:rgba(var(--glow-ember),.24);}
/* En clair, les textes d'accent passent sur leur teinte foncée pour rester lisibles */
html[data-theme="light"] .t-ember{color:var(--ember-2);}
html[data-theme="light"] .t-azure{color:var(--azure-2);}
html[data-theme="light"] .t-ok{color:var(--valide-d);}
html[data-theme="light"] .t-warn{color:var(--ambre-d);}
html[data-theme="light"] .t-ia{color:var(--ia-d);}
html[data-theme="light"] .t-danger{color:var(--danger-d);}
html[data-theme="light"] .pill.ok{color:var(--valide-d);background:rgba(63,125,94,.12);border-color:rgba(63,125,94,.24);}
html[data-theme="light"] .pill.warn{color:var(--ambre-d);background:rgba(181,121,31,.12);border-color:rgba(181,121,31,.24);}
html[data-theme="light"] .pill.ia{color:var(--ia-d);background:rgba(12,124,142,.13);border-color:rgba(12,124,142,.26);}
html[data-theme="light"] .pill.info{color:var(--azure-2);background:rgba(62,108,166,.12);border-color:rgba(62,108,166,.24);}
html[data-theme="light"] .pill.ember{color:var(--ember-2);background:rgba(242,81,43,.12);border-color:rgba(242,81,43,.26);}
html[data-theme="light"] .pill.danger{color:var(--danger-d);background:rgba(var(--urgent-rgb),.12);border-color:rgba(var(--urgent-rgb),.28);}
html[data-theme="light"] .pill.urgent{color:#B01F2A;background:rgba(var(--urgent-rgb),.14);border-color:rgba(var(--urgent-rgb),.42);}
html[data-theme="light"] .pill.urgent .dot{background:#E5343F;box-shadow:0 0 6px rgba(var(--urgent-rgb),.5);}
html[data-theme="light"] .pill.neutral,html[data-theme="light"] .tag{color:var(--ink-2);}
/* bulle de chat « moi » : garder un fond teinté lisible en clair */
html[data-theme="light"] .msg.me{color:var(--ink);}
html[data-theme="light"] .paper{box-shadow:0 10px 30px -12px rgba(30,40,70,.35);}

/* ============================================================================
   23. ÉTAT « FIGÉ » — verre GIVRÉ (ice)
       Pour l'info verrouillée/immuable : écriture validée, bouclement clôturé,
       facture payée, devis signé, ticket résolu, pièce archivée. Le verre
       « gèle » : teinte bleu-blanc, cristaux de givre, arête glacée, réfraction
       cristalline immobile (cf. filtre #lg-frost-ice).
   ========================================================================== */
.ice{
  position:relative;
  background:linear-gradient(157deg, rgba(216,238,255,.16), rgba(170,210,247,.05)), var(--glass);
  border-color:var(--ice-edge);
  box-shadow:inset 0 1px 0 rgba(236,248,255,.72), inset 0 0 0 1px rgba(190,222,255,.10),
             0 2px 6px rgba(0,0,0,.22), 0 18px 44px -18px rgba(18,40,80,.5),
             0 0 34px -12px rgba(150,200,255,.30);
}
/* cristaux de givre (texture feTurbulence en data-URI) */
.ice::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:
    conic-gradient(from 205deg at 28% 16%, rgba(255,255,255,.16), transparent 38%, rgba(198,228,255,.10) 64%, transparent 88%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size:auto, 170px 170px;
  opacity:.5; mix-blend-mode:screen;
  -webkit-mask:radial-gradient(120% 90% at 50% 0%, #000, transparent 92%);
          mask:radial-gradient(120% 90% at 50% 0%, #000, transparent 92%);
}
.ice>*{position:relative;}
/* petite étiquette « figé » */
.frozen-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;color:#cfe7ff;background:rgba(200,230,255,.13);border:1px solid var(--ice-edge);}
.frozen-tag::before{content:"❄";font-size:11px;line-height:1;}
/* pastille d'état givrée (VALIDÉE / Payée / Signé / Clôturé) */
.pill.frozen{color:#d4ecff;background:linear-gradient(160deg,rgba(206,233,255,.22),rgba(150,196,242,.10));
  border-color:var(--ice-edge);}
.pill.frozen .dot{background:#e6f4ff;box-shadow:0 0 7px rgba(180,222,255,.85);}
/* survol d'une ligne figée : reste glacé, pas de chaleur */
.li.ice:hover{background:linear-gradient(157deg, rgba(216,238,255,.14), rgba(170,210,247,.05));}

/* reflet « eau » plus glossy sur la carte vedette animée */
.water-demo{position:relative;overflow:hidden;}
.water-demo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.18), transparent 30%, transparent 70%, rgba(255,255,255,.10));
  mix-blend-mode:screen;}

/* — Thème CLAIR : le givre devient un givre clair (bleu pâle) — */
html[data-theme="light"] .ice{
  background:linear-gradient(157deg, rgba(220,240,255,.62), rgba(190,222,252,.34)), var(--glass);
  border-color:rgba(120,170,220,.34);
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(150,190,235,.18),
             0 1px 3px rgba(30,60,110,.10), 0 16px 40px -18px rgba(40,80,140,.26),
             0 0 26px -12px rgba(120,175,235,.30);
}
html[data-theme="light"] .ice::after{opacity:.32;mix-blend-mode:multiply;
  -webkit-mask:radial-gradient(120% 90% at 50% 0%, rgba(60,110,180,.5), transparent 92%);
          mask:radial-gradient(120% 90% at 50% 0%, rgba(60,110,180,.5), transparent 92%);}
html[data-theme="light"] .frozen-tag{color:#1c5b96;background:rgba(150,195,240,.22);border-color:rgba(120,170,220,.4);}
html[data-theme="light"] .pill.frozen{color:#175a93;background:linear-gradient(160deg,rgba(150,200,245,.28),rgba(120,175,235,.16));border-color:rgba(120,170,220,.4);}
html[data-theme="light"] .pill.frozen .dot{background:#2f78c4;box-shadow:0 0 6px rgba(90,150,220,.6);}

/* — .pill : ne jamais couper le texte (ex. « Suspendu » qui passait à la ligne) — */
.pill{white-space:nowrap;}
/* — Tableaux d'imputation/validation : lignes en CARTES arrondies (fini le bloc carré qui coupe) — */
.table.imput{border-collapse:separate;border-spacing:0 6px;}
.table.imput thead th{border:none;padding-bottom:2px;}
.table.imput td{border-bottom:none;background:var(--glass);}
.table.imput tr td:first-child{border-top-left-radius:13px;border-bottom-left-radius:13px;}
.table.imput tr td:last-child{border-top-right-radius:13px;border-bottom-right-radius:13px;}
.table.imput tr.ice td{background:linear-gradient(157deg,rgba(216,238,255,.13),rgba(170,210,247,.045));}
.table.imput tbody tr:hover td{background:var(--glass-2);}

/* — Helper d'épinglage : la colonne reste visible sans scroll (doc / contexte). —
   Utilitaire générique (Compta préparation : loupe + contexte ; Templates : aperçu ; GED : aperçu). */
.dock{position:sticky;top:14px;align-self:start;}
@media (max-width:980px){.dock{position:static;}}

/* — État « Classement en cours… » (GED) : teinte CYAN (--ia) = COULEUR seulement,
   AUCUNE fonction IA. Le tri est AUTOMATIQUE / déterministe (worker de classement :
   QR → bank_pdf → heuristique → templates), jamais présenté comme « IA ». */
.pill.encours{color:var(--ia);background:rgba(47,198,222,.13);border-color:rgba(47,198,222,.30);}
html[data-theme="light"] .pill.encours{color:var(--ia-d);background:rgba(12,124,142,.12);border-color:rgba(12,124,142,.24);}
.pill.encours .dot{animation:zpulse 1.15s ease-in-out infinite;}
@keyframes zpulse{0%,100%{opacity:.28;}50%{opacity:1;}}
/* petit indicateur « tri automatique par contenu en cours » dans le panneau d'aperçu */
.autotri{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);
  background:rgba(47,198,222,.10);border:1px solid rgba(47,198,222,.26);
  border-radius:var(--r-sm);padding:8px 11px;}
.autotri .dot{width:7px;height:7px;border-radius:50%;background:var(--ia);flex:0 0 auto;animation:zpulse 1.15s ease-in-out infinite;}
html[data-theme="light"] .autotri{color:var(--ink-2);background:rgba(12,124,142,.09);border-color:rgba(12,124,142,.22);}
html[data-theme="light"] .autotri .dot{background:var(--ia-d);}