/* ═══════════════════════════════════════════════════════════════════════
   J2M CRM — feuille de style commune (#23 · design system)
   Source de vérité : docs/DESIGN_SYSTEM.md · maquette docs/maquette/j2m-maquette.html
   Ordre : jetons → alias de compatibilité → base → coque (sidebar/tiroir)
           → primitives (lib/ui.py) → composants historiques (restylés sur les jetons)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons (oklch, teal 182°, rayon 14 px) — copiés tels quels de la maquette ── */
:root{
  --radius:14px; --radius-sm:10px; --radius-md:12px; --radius-xl:18px;
  --background:oklch(0.985 0.004 240); --foreground:oklch(0.21 0.01 255);
  --card:oklch(0.995 0.002 240); --popover:oklch(1 0.002 240);
  --primary:oklch(0.48 0.11 182.47); --primary-foreground:oklch(0.985 0 0);
  --primary-soft:oklch(0.95 0.03 182.47); --primary-ink:oklch(0.40 0.09 182.47);
  --secondary:oklch(0.95 0.007 235); --secondary-foreground:oklch(0.27 0.01 255);
  --muted:oklch(0.955 0.005 240); --muted-foreground:oklch(0.5 0.012 255);
  --destructive:oklch(0.577 0.245 27.3); --destructive-soft:oklch(0.95 0.03 27);
  --border:oklch(0.89 0.01 245); --input:oklch(0.9 0.008 245); --ring:var(--primary);
  --sidebar:oklch(0.98 0.004 240); --sidebar-foreground:oklch(0.2 0.01 255);
  --sidebar-accent:oklch(0.95 0.007 240); --sidebar-border:oklch(0.89 0.01 245);
  --serif-ink:oklch(0.32 0.06 182.47);
  /* statuts (sémantique, jamais l'accent) */
  --st-amber:oklch(0.55 0.13 70); --st-amber-soft:oklch(0.96 0.05 85);
  --st-blue:oklch(0.5 0.15 255); --st-blue-soft:oklch(0.95 0.03 255);
  --st-orange:oklch(0.58 0.17 45); --st-orange-soft:oklch(0.96 0.04 60);
  --st-green:oklch(0.5 0.14 150); --st-green-soft:oklch(0.95 0.05 150);
  --st-sky:oklch(0.48 0.12 230); --st-sky-soft:oklch(0.95 0.03 230);
  --st-cyan:oklch(0.52 0.10 208); --st-cyan-soft:oklch(0.95 0.045 205);
  --st-red:oklch(0.52 0.19 25); --st-red-soft:oklch(0.95 0.04 25);
  --st-indigo:oklch(0.47 0.17 280); --st-indigo-soft:oklch(0.95 0.03 280);
  --st-violet:oklch(0.5 0.18 300); --st-violet-soft:oklch(0.95 0.03 300);
  --st-slate:oklch(0.48 0.02 250); --st-slate-soft:oklch(0.95 0.005 250);
  --st-yellow:oklch(0.42 0.1 85); --st-yellow-soft:oklch(0.92 0.16 98);
  /* statuts de FACTURE = code couleur de l'ancien CRM ($global_invoice_colors, ticket 343) — mêmes
     valeurs en sombre : fonds pleins, texte choisi pour rester lisible */
  --fac-attente:#ffaa00; --fac-attente-ink:#3d2600;   --fac-envoye:#cc0000; --fac-envoye-ink:#ffffff;
  --fac-annule:#cccccc; --fac-annule-ink:#333333;     --fac-paye:#0000cc; --fac-paye-ink:#ffffff;
  --fac-partiel:#22aaee; --fac-partiel-ink:#06263a;   --fac-rejete:#ffffff; --fac-rejete-ink:#333333;
  --shadow-sm:0 1px 2px oklch(0.2 0.01 255 / .06);
  --shadow:0 1px 2px oklch(0.2 0.01 255 / .05), 0 10px 30px -14px oklch(0.2 0.01 255 / .18);
  --shadow-md:0 4px 6px -1px oklch(0.2 0.01 255 / .10), 0 2px 4px -1px oklch(0.2 0.01 255 / .06);
  --mtop-h:52px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --background:oklch(0.19 0.008 255); --foreground:oklch(0.985 0 0);
  --card:oklch(0.23 0.01 255); --popover:oklch(0.24 0.01 255);
  --primary:oklch(0.67 0.11 182.47); --primary-foreground:oklch(0.21 0.01 255);
  --primary-soft:oklch(0.30 0.04 182.47); --primary-ink:oklch(0.78 0.10 182.47);
  --secondary:oklch(0.3 0.01 255); --secondary-foreground:oklch(0.985 0 0);
  --muted:oklch(0.3 0.01 255); --muted-foreground:oklch(0.76 0.01 250);
  --destructive:oklch(0.704 0.191 22.2); --destructive-soft:oklch(0.32 0.06 25);
  --border:oklch(1 0 0 / 14%); --input:oklch(1 0 0 / 18%);
  --sidebar:oklch(0.22 0.01 255); --sidebar-foreground:oklch(0.985 0 0);
  --sidebar-accent:oklch(0.32 0.01 255); --sidebar-border:oklch(1 0 0 / 14%);
  --serif-ink:oklch(0.85 0.07 182.47);
  --st-amber:oklch(0.82 0.13 80); --st-amber-soft:oklch(0.33 0.06 75);
  --st-blue:oklch(0.78 0.10 255); --st-blue-soft:oklch(0.32 0.06 255);
  --st-orange:oklch(0.8 0.13 55); --st-orange-soft:oklch(0.34 0.07 50);
  --st-green:oklch(0.8 0.13 150); --st-green-soft:oklch(0.32 0.06 150);
  --st-sky:oklch(0.8 0.10 230); --st-sky-soft:oklch(0.32 0.06 230);
  --st-cyan:oklch(0.82 0.10 205); --st-cyan-soft:oklch(0.32 0.06 208);
  --st-red:oklch(0.8 0.13 25); --st-red-soft:oklch(0.34 0.08 25);
  --st-indigo:oklch(0.8 0.11 280); --st-indigo-soft:oklch(0.33 0.07 280);
  --st-violet:oklch(0.8 0.12 300); --st-violet-soft:oklch(0.33 0.07 300);
  --st-slate:oklch(0.8 0.02 250); --st-slate-soft:oklch(0.32 0.01 250);
  --st-yellow:oklch(0.93 0.14 98); --st-yellow-soft:oklch(0.45 0.1 95);
  --shadow-sm:0 1px 2px oklch(0 0 0 / .4); --shadow:0 1px 2px oklch(0 0 0 / .4), 0 10px 30px -14px oklch(0 0 0 / .7);
  --shadow-md:0 4px 6px -1px oklch(0 0 0 / .5), 0 2px 4px -1px oklch(0 0 0 / .4);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --background:oklch(0.19 0.008 255); --foreground:oklch(0.985 0 0);
  --card:oklch(0.23 0.01 255); --popover:oklch(0.24 0.01 255);
  --primary:oklch(0.67 0.11 182.47); --primary-foreground:oklch(0.21 0.01 255);
  --primary-soft:oklch(0.30 0.04 182.47); --primary-ink:oklch(0.78 0.10 182.47);
  --secondary:oklch(0.3 0.01 255); --secondary-foreground:oklch(0.985 0 0);
  --muted:oklch(0.3 0.01 255); --muted-foreground:oklch(0.76 0.01 250);
  --destructive:oklch(0.704 0.191 22.2); --destructive-soft:oklch(0.32 0.06 25);
  --border:oklch(1 0 0 / 14%); --input:oklch(1 0 0 / 18%);
  --sidebar:oklch(0.22 0.01 255); --sidebar-foreground:oklch(0.985 0 0);
  --sidebar-accent:oklch(0.32 0.01 255); --sidebar-border:oklch(1 0 0 / 14%);
  --serif-ink:oklch(0.85 0.07 182.47);
  --st-amber:oklch(0.82 0.13 80); --st-amber-soft:oklch(0.33 0.06 75);
  --st-blue:oklch(0.78 0.10 255); --st-blue-soft:oklch(0.32 0.06 255);
  --st-orange:oklch(0.8 0.13 55); --st-orange-soft:oklch(0.34 0.07 50);
  --st-green:oklch(0.8 0.13 150); --st-green-soft:oklch(0.32 0.06 150);
  --st-sky:oklch(0.8 0.10 230); --st-sky-soft:oklch(0.32 0.06 230);
  --st-cyan:oklch(0.82 0.10 205); --st-cyan-soft:oklch(0.32 0.06 208);
  --st-red:oklch(0.8 0.13 25); --st-red-soft:oklch(0.34 0.08 25);
  --st-indigo:oklch(0.8 0.11 280); --st-indigo-soft:oklch(0.33 0.07 280);
  --st-violet:oklch(0.8 0.12 300); --st-violet-soft:oklch(0.33 0.07 300);
  --st-slate:oklch(0.8 0.02 250); --st-slate-soft:oklch(0.32 0.01 250);
  --st-yellow:oklch(0.93 0.14 98); --st-yellow-soft:oklch(0.45 0.1 95);
  --shadow-sm:0 1px 2px oklch(0 0 0 / .4); --shadow:0 1px 2px oklch(0 0 0 / .4), 0 10px 30px -14px oklch(0 0 0 / .7);
  --shadow-md:0 4px 6px -1px oklch(0 0 0 / .5), 0 2px 4px -1px oklch(0 0 0 / .4);
  color-scheme:dark;
}

/* ── 2. Alias de compatibilité — les modules (routes/) utilisent encore les
      anciens noms. Ils se rabattent sur les jetons ; #24 les remplace module
      par module, puis ce bloc disparaît. Ne PAS y ajouter de nouveaux emplois. ── */
:root{
  --bg:var(--background); --surface:var(--card); --surface-1:var(--card);
  --surface-2:var(--muted); --surface-3:var(--secondary);
  --border-strong:var(--input);
  --text-primary:var(--foreground); --text-secondary:var(--muted-foreground); --text-tertiary:var(--muted-foreground);
  --accent:var(--primary); --accent-light:var(--primary-soft); --accent-dark:var(--primary-ink);
  --red:var(--st-red); --red-light:var(--st-red-soft);
  --orange:var(--st-orange); --orange-light:var(--st-orange-soft);
  --blue:var(--st-blue); --blue-light:var(--st-blue-soft);
  --yellow:var(--st-amber); --yellow-light:var(--st-amber-soft);
  --purple:var(--st-violet);
  --radius-lg:var(--radius);
  --sidebar-w:248px;
}

/* ── 3. Base ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--background); }
body{
  background:var(--background); color:var(--foreground);
  font:14px/1.5 "Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; caret-color:var(--primary);
  min-height:100vh;
}
a{ color:var(--primary-ink); text-decoration:none; }
button{ font:inherit; color:inherit; }
input, textarea, select{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.serif{ font-family:"Instrument Serif",ui-serif,Georgia,serif; font-weight:400; }
.num, .tabular{ font-variant-numeric:tabular-nums; }

/* ── 4. Coque : entête mobile + tiroir + sidebar + main ── */
.mtop{ display:none; position:sticky; top:0; z-index:40; align-items:center; gap:10px;
       height:var(--mtop-h); padding:0 14px; background:var(--card); border-bottom:1px solid var(--border); }
.mtop .brand{ padding:0; min-width:0; flex:1; }
.mtop .brand .name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.backdrop{ display:none; position:fixed; inset:0; background:oklch(0.2 0.01 255 / .45); z-index:60; }
.backdrop.on{ display:block; }
.btn.drawer-close{ display:none; }

.shell{ display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); min-height:100vh; }
/* Sidebar — style « dashboard Stripe » (#101) : fond blanc net, logo J2M mis en valeur, sélecteur
   d'espace façon sélecteur de compte, navigation aérée et calme (icônes grises, entrée active en
   couleur d'accent sans gros fond), compteurs en pastilles teintées, sous-onglets sur un filet. */
.sidebar{ display:flex; flex-direction:column; gap:0; padding:16px 12px 10px;
          background:var(--card); border-right:1px solid var(--border); color:var(--sidebar-foreground);
          position:sticky; top:0; height:100vh; overflow-y:auto; overscroll-behavior:contain;
          scrollbar-width:thin; scrollbar-color:transparent transparent; }
.sidebar:hover{ scrollbar-color:color-mix(in oklch,var(--foreground) 18%,transparent) transparent; }
.brand{ display:flex; align-items:center; gap:10px; padding:4px 6px; color:inherit; }
.brand .name{ font-weight:600; font-size:15px; letter-spacing:-.01em; }
.brand .env{ margin-left:auto; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-foreground);
             border:1px solid var(--border); background:color-mix(in oklch,var(--muted) 60%,transparent); padding:2px 8px; border-radius:999px; }
/* Logo : fleur + J2M (static/logo-nav*.png, fond transparent) — version claire / sombre selon le thème */
.sb-logo{ display:inline-flex; align-items:center; flex:none; }
.sb-logo img{ height:44px; width:auto; display:block; }
.mtop .sb-logo img{ height:30px; }
.sb-logo .lg-dark{ display:none; }
:root[data-theme="dark"] .sb-logo .lg-light{ display:none; }
:root[data-theme="dark"] .sb-logo .lg-dark{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sb-logo .lg-light{ display:none; }
  :root:not([data-theme="light"]) .sb-logo .lg-dark{ display:block; }
}
/* Logo DocuSign (lib/docusign_compose.logo_docusign, #119) — version claire / sombre selon le thème, comme .sb-logo */
.ds-logo{ display:inline-flex; align-items:center; flex:none; }
.ds-logo img{ height:18px; width:auto; display:block; }
.ds-logo .lg-dark{ display:none; }
:root[data-theme="dark"] .ds-logo .lg-light{ display:none; }
:root[data-theme="dark"] .ds-logo .lg-dark{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ds-logo .lg-light{ display:none; }
  :root:not([data-theme="light"]) .ds-logo .lg-dark{ display:block; }
}
h3 .ds-logo img{ height:22px; }
.ds-off{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted-foreground); align-self:center; }
.ds-off .ds-logo{ filter:grayscale(1); opacity:.5; }
.dsx-envoi-btn{ gap:10px; }
.sb-head{ display:flex; align-items:center; gap:2px; padding:0 0 16px 6px; }
.sb-head .sb-logo{ margin-right:auto; border-radius:8px; }
.sb-head .sb-logo:focus-visible{ outline:2px solid var(--ring); outline-offset:3px; }
.sb-head .btn.icon{ width:30px; height:30px; color:var(--muted-foreground); }
.sb-head .btn.icon:hover{ color:var(--foreground); background:color-mix(in oklch,var(--foreground) 6%,transparent); }
.sb-head .btn.icon svg{ width:17px; height:17px; }
.sb-head .btn.drawer-close{ margin-left:0; }
/* Pastille d'initiales d'un espace (FR, SU, NO…) */
.sp-av{ width:20px; height:20px; border-radius:6px; flex:none; display:grid; place-items:center;
        font-size:9.5px; font-weight:700; letter-spacing:.02em; line-height:1; }
.sp-av.teal{ background:var(--primary-soft); color:var(--primary-ink); }
.sp-av.orange{ background:var(--st-orange-soft); color:var(--st-orange); }  .sp-av.violet{ background:var(--st-violet-soft); color:var(--st-violet); }
.sp-av.blue{ background:var(--st-blue-soft); color:var(--st-blue); }        .sp-av.green{ background:var(--st-green-soft); color:var(--st-green); }
.sp-av.indigo{ background:var(--st-indigo-soft); color:var(--st-indigo); }  .sp-av.slate{ background:var(--st-slate-soft); color:var(--st-slate); }
.sp-av.ico{ background:color-mix(in oklch,var(--foreground) 6%,transparent); color:var(--muted-foreground); }
.sp-av.ico svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
/* Sélecteur d'espace sous le logo — carte cliquable, menu déroulé vers le bas */
.orgsw{ position:relative; margin:0 0 18px; }
.orgsw > summary{ list-style:none; display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:10px;
                  border:1px solid var(--border); background:var(--card); box-shadow:0 1px 2px oklch(0.2 0.01 255 / .05);
                  cursor:pointer; transition:background .12s,border-color .12s; }
.orgsw > summary:hover, .orgsw[open] > summary{ background:color-mix(in oklch,var(--foreground) 3%,var(--card)); border-color:color-mix(in oklch,var(--foreground) 16%,var(--border)); }
.orgsw > summary::-webkit-details-marker{ display:none; }
.orgsw > summary .sp-av{ width:28px; height:28px; border-radius:8px; font-size:11px; }
.orgsw > summary .sp-av.ico svg{ width:16px; height:16px; }
.orgsw-l{ display:flex; flex-direction:column; min-width:0; line-height:1.25; font-size:13.5px; font-weight:600;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orgsw-l small{ font-size:11px; font-weight:500; color:var(--muted-foreground); }
.orgsw .chev{ margin-left:auto; display:inline-flex; color:var(--muted-foreground); }
.orgsw .chev svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.orgsw .menu{ position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--popover); border:1px solid var(--border); border-radius:10px;
              box-shadow:var(--shadow); padding:5px; display:flex; flex-direction:column; gap:1px; z-index:20; }
.orgsw .menu .mh{ font-size:11.5px; font-weight:500; color:var(--muted-foreground); padding:5px 8px 4px; }
.orgsw .menu a{ padding:6px 8px; border-radius:6px; font-size:13.5px; color:inherit; display:flex; align-items:center; gap:10px; }
.orgsw .menu a > svg{ width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; color:var(--muted-foreground); margin:0 2px; }
.orgsw .menu a:hover{ background:color-mix(in oklch,var(--foreground) 5%,transparent); }
.orgsw .menu a[aria-current="page"]{ color:var(--primary-ink); font-weight:600; }
/* Navigation */
.sidebar .nav-sec{ display:flex; flex-direction:column; gap:2px; }
.sidebar .nav-sec + .nav-sec{ margin-top:20px; }
.sidebar .nav-sec .h{ font-size:12px; font-weight:500; color:var(--muted-foreground); padding:0 10px 6px; }
/* Groupe repliable (ticket 160) : le titre est un bouton ; l'état replié vient de <html data-nav-plie>
   (règles par groupe générées dans render_page — shared._NAV_FOLD_CSS) */
.sidebar .nav-fold{ display:flex; align-items:center; gap:6px; width:100%; margin:0; border:0; background:none; cursor:pointer;
                    font:inherit; font-size:12px; font-weight:500; text-align:left; color:var(--muted-foreground); border-radius:6px;
                    padding:3px 10px 5px; transition:color .12s; }
@media (hover:hover){ .sidebar .nav-fold:hover{ color:var(--sidebar-foreground); } .sidebar .nav-fold:hover .chev{ opacity:1; } }
.sidebar .nav-fold:focus-visible{ outline:2px solid var(--ring); outline-offset:-2px; }
.sidebar .nav-fold .chev{ margin-left:auto; display:inline-flex; opacity:.55; transition:transform .15s,opacity .12s; }
.sidebar .nav-fold .chev svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.sidebar .nav-fold .fold-dot{ display:none; width:6px; height:6px; border-radius:50%; background:var(--st-red); }
.sidebar .nav-items{ display:flex; flex-direction:column; gap:2px; }
/* Au doigt (tiroir mobile) : titre de groupe assez haut pour être touché sans viser */
@media (hover:none), (max-width:820px){ .sidebar .nav-fold{ min-height:40px; padding:8px 10px; } }
.nav-a{ display:flex; align-items:center; gap:11px; min-height:32px; padding:6px 10px; border-radius:7px;
        color:color-mix(in oklch,var(--sidebar-foreground) 86%,var(--card)); font-weight:500; font-size:14px; line-height:1.25;
        cursor:pointer; background:none; border:0; width:100%; text-align:left; transition:background .12s,color .12s; }
.nav-a > span:not(.cnt):not(.chev):not(.sp-av):not(.nav-ic){ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Icône d'onglet sur pastille teintée : la couleur de sa carte d'accueil (shared.NAV_FAMILLES, ticket 160) */
.nav-ic{ width:20px; height:20px; border-radius:6px; flex:none; display:grid; place-items:center; color:var(--ic); background:var(--ib); }
.nav-a .nav-ic svg{ width:13px; height:13px; stroke-width:2; }
.nav-a svg{ width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.nav-a > svg{ color:var(--muted-foreground); transition:color .12s; }
.nav-a:hover{ background:color-mix(in oklch,var(--foreground) 5%,transparent); color:var(--sidebar-foreground); }
.nav-a:hover > svg{ color:var(--sidebar-foreground); }
.nav-a:focus-visible, .sidebar .sub a:focus-visible, .orgsw > summary:focus-visible{ outline:2px solid var(--ring); outline-offset:-2px; }
.nav-a[aria-current="page"]{ color:var(--primary-ink); font-weight:600; background:color-mix(in oklch,var(--primary) 7%,transparent); }
.nav-a[aria-current="page"] > svg{ color:var(--primary); }
.nav-a .chev{ margin-left:auto; display:inline-flex; color:var(--muted-foreground); transition:transform .15s; }
.nav-a .chev svg{ width:14px; height:14px; color:inherit; }
.nav-a[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.nav-a .cnt{ margin-left:auto; display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 7px;
             border-radius:6px; font-size:11.5px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
             color:var(--muted-foreground); background:color-mix(in oklch,var(--foreground) 7%,transparent); }
.nav-a .cnt.hot{ background:var(--st-red-soft); color:var(--st-red); }
.nav-a .cnt.warm{ background:var(--st-orange-soft); color:var(--st-orange); }
.sidebar .sub{ margin:2px 0 6px 20px; padding-left:12px; border-left:1px solid var(--border); display:flex; flex-direction:column; gap:1px; }
.sidebar .sub[hidden]{ display:none; }
.sidebar .sub a{ position:relative; display:block; padding:5px 9px; font-size:13.5px; line-height:1.35; color:var(--muted-foreground);
                 border-radius:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:background .12s,color .12s; }
.sidebar .sub a:hover{ background:color-mix(in oklch,var(--foreground) 5%,transparent); color:var(--sidebar-foreground); }
.sidebar .sub a[aria-current="page"]{ color:var(--primary-ink); font-weight:600; background:none; overflow:visible; }
.sidebar .sub a[aria-current="page"]::before{ content:""; position:absolute; left:-13px; top:6px; bottom:6px; width:2px; border-radius:2px; background:var(--primary); }
/* Pied : l'utilisateur */
.side-foot{ margin-top:auto; padding-top:12px; display:flex; flex-direction:column; gap:4px; }
.side-foot::before{ content:""; display:block; height:1px; background:var(--border); margin:6px 2px 8px; }
.user{ display:flex; align-items:center; gap:10px; padding:4px 2px 2px 6px; }
.user > div{ min-width:0; flex:1; }
.avatar{ width:30px; height:30px; border-radius:50%; background:var(--secondary); display:grid; place-items:center; font-weight:600; font-size:12px; color:var(--secondary-foreground); flex:none; }
.user .avatar{ flex:none; width:32px; height:32px; font-size:13px; background:linear-gradient(135deg,var(--primary-soft),color-mix(in oklch,var(--primary) 26%,var(--card))); color:var(--primary-ink); }
.user .n{ font-weight:600; font-size:13.5px; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user .r{ font-size:12px; color:var(--muted-foreground); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user .btn.icon{ flex:none; width:30px; height:30px; color:var(--muted-foreground); }
.user .btn.icon:hover{ color:var(--foreground); background:color-mix(in oklch,var(--foreground) 6%,transparent); }
.user .btn.icon svg{ width:16px; height:16px; }
#theme-toggle span, #sidebar-toggle span{ display:inline-flex; }
#theme-toggle .ico-sun, .hn-theme .ico-sun{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) #theme-toggle .ico-sun, :root:not([data-theme="light"]) .hn-theme .ico-sun{ display:inline-flex; }
  :root:not([data-theme="light"]) #theme-toggle .ico-moon, :root:not([data-theme="light"]) .hn-theme .ico-moon{ display:none; }
}
:root[data-theme="dark"] #theme-toggle .ico-sun, :root[data-theme="dark"] .hn-theme .ico-sun{ display:inline-flex; }
:root[data-theme="dark"] #theme-toggle .ico-moon, :root[data-theme="dark"] .hn-theme .ico-moon{ display:none; }
.nav-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; border-radius:999px;
            background:var(--st-red); color:var(--primary-foreground); font-size:10px; font-weight:600; font-variant-numeric:tabular-nums; margin-left:auto; }

.main{ display:flex; flex-direction:column; min-width:0; }
/* Dashboards en pleine largeur (tables larges visibles d'un coup, sans scroll horizontal).
   Les fiches restent lisibles via un max-width sur leur propre coque (.cd-fiche, wrappers inline). */
.content{ padding:28px 32px 64px; max-width:none; width:100%; flex:1; }
.cd-fiche{ max-width:1360px; margin-inline:auto; }
.page-title{ display:none; }

/* ── 5. Entête d'écran ── */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.page-head .crumb{ font-size:12px; color:var(--muted-foreground); display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.page-head .crumb b{ font-weight:500; color:var(--foreground); }
.page-head h1{ margin:0; font-size:30px; line-height:1.1; letter-spacing:-.015em; font-weight:600; text-wrap:balance; }
.page-head h1 .serif{ font-size:34px; color:var(--serif-ink); font-style:italic; margin-left:6px; }
.page-head .lede{ margin:6px 0 0; color:var(--muted-foreground); max-width:52ch; }
.page-head .actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* ── 6. Primitives (lib/ui.py) ── */
.btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:var(--radius-sm);
      border:1px solid var(--border); background:var(--card); color:var(--foreground); font-weight:500; font-size:13.5px;
      cursor:pointer; box-shadow:var(--shadow-sm); white-space:nowrap; text-decoration:none; transition:background .1s, color .1s, opacity .1s; }
.btn:hover{ background:var(--secondary); }
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }
.btn.primary, .btn-primary{ background:var(--primary); color:var(--primary-foreground); border-color:transparent; }
.btn.primary:hover, .btn-primary:hover{ background:var(--primary); filter:brightness(1.06); }
.btn.ghost, .btn-ghost{ border-color:transparent; background:transparent; box-shadow:none; color:var(--muted-foreground); }
.btn.ghost:hover, .btn-ghost:hover{ background:var(--secondary); color:var(--foreground); }
.btn.danger, .btn-danger{ background:var(--st-red-soft); color:var(--st-red); border-color:color-mix(in oklch,var(--st-red) 30%,transparent); }
.btn.danger:hover, .btn-danger:hover{ background:color-mix(in oklch,var(--st-red) 18%,var(--st-red-soft)); }
.btn.sm, .btn-sm{ height:30px; padding:0 10px; font-size:12.5px; }
.btn.xs, .btn-xs{ height:26px; padding:0 8px; font-size:11.5px; }
.btn.icon{ width:30px; height:30px; padding:0; justify-content:center; }
.btn svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* bouton-filtre actif (multi-sélection .ms-filter, bascules) */
.btn.on{ border-color:var(--primary); background:var(--primary-soft); color:var(--primary-ink); font-weight:600; }
.ms-filter{ position:relative; }
.ms-filter .ms-btn{ width:100%; justify-content:space-between; min-width:130px; }
.ms-filter .ms-btn .ms-lbl{ overflow:hidden; text-overflow:ellipsis; }
.ms-filter .ms-btn .chev{ color:var(--muted-foreground); font-size:12px; }
.ms-panel{ position:absolute; top:calc(100% + 4px); left:0; z-index:200; min-width:180px; max-height:300px; overflow-y:auto; padding:6px;
           background:var(--popover); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow); }
.ms-panel label{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap; color:var(--foreground); }
.ms-panel label:hover{ background:var(--secondary); }
.ms-panel label.on{ background:var(--primary-soft); color:var(--primary-ink); font-weight:600; }
.ms-panel input[type=checkbox]{ width:14px; height:14px; accent-color:var(--primary); cursor:pointer; }

/* barre d'actions en lot (sélection de lignes) — fixée en bas, affichée par le JS de la page */
.selbar{ position:fixed; bottom:0; left:0; right:0; z-index:500; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 24px;
         background:var(--foreground); color:var(--background); box-shadow:0 -4px 20px rgba(0,0,0,.2); }
.selbar .lbl{ flex:1; min-width:120px; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.selbar .btn{ background:var(--background); color:var(--foreground); border-color:transparent; }
.selbar .btn.primary{ background:var(--primary); color:var(--primary-foreground); }
.selbar .btn.ghost{ background:transparent; color:var(--background); opacity:.85; }
.selbar .btn.danger{ background:var(--st-red); color:var(--primary-foreground); }
.ac-drop > div:hover{ background:var(--secondary); }

/* filtre client en deux cases « Réf. client » / « Client » (lib/filtre_client.py, ticket 201) */
.cli2{ display:contents; }
/* « Client » puis « Réf. client » (ticket 227). Le nom ne s'étire plus sur toute la ligne de
   filtres (Fiches Sign., Maint. Financée : case « beaucoup trop large ») : 340 px au plus. */
.cli2 .field.cli2-nom{ flex:1 1 220px; min-width:170px; max-width:340px; }
.cli2-wrap{ position:relative; }
/* Croix ✕ dans la case Client (ticket 347) : efface le client ; visible seulement s'il y en a un.
   À GAUCHE de la case (Elie, 29-10-2026, ticket 376) : le texte se décale quand elle est là. */
.cli2-wrap:has(.cli2-x:not([hidden])) .input{ padding-left:32px; }
/* … et la MÊME croix sur d'autres cases de filtre (ui.croix, ticket 424 : « Émise du » / « au » des Factures) */
.croix-wrap{ position:relative; }
.croix-wrap:has(.croix-x:not([hidden])) .input{ padding-left:32px; }
.croix-x, .cli2-x{ position:absolute; left:5px; top:50%; transform:translateY(-50%); width:22px; height:22px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--muted-foreground); font-size:12px; line-height:22px; text-align:center; cursor:pointer; }
.croix-x:hover, .croix-x:focus-visible, .cli2-x:hover, .cli2-x:focus-visible{ background:var(--secondary); color:var(--foreground); }
.croix-x[hidden], .cli2-x[hidden]{ display:none; }
/* pas de 2ᵉ croix : celle que les anciens Chrome / Edge mettaient dans une case date */
.croix-wrap input::-webkit-clear-button{ display:none; -webkit-appearance:none; }
/* Champs gardés côte à côte (ui.champs_ligne, ticket 424) — pas un .field : les règles « > .field » ne le visent pas */
.champs-ligne{ display:flex; flex-wrap:nowrap; align-items:flex-end; gap:10px; min-width:0; }
.champs-ligne > .field{ flex:1 1 0; min-width:0; }
.cli2-drop{ position:absolute; top:calc(100% + 2px); left:0; min-width:100%; width:max-content; max-width:min(420px, 92vw); max-height:280px; overflow-y:auto;
            background:var(--popover); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow); z-index:200; padding:4px; }
.cli2-drop[hidden]{ display:none; }
/* Choix multiple en étiquettes (lib/ui.tag_select, ticket 248) — comme « Commerciaux » de Financement */
.tagsel{ position:relative; }
.tagsel-box{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:40px; padding:5px 34px 5px 10px; border:1px solid var(--input);
  border-radius:var(--radius-sm); background:var(--card); cursor:pointer; position:relative; }
.tagsel.open .tagsel-box, .tagsel-box:focus-visible{ border-color:var(--ring); outline:none; box-shadow:0 0 0 3px color-mix(in oklch,var(--ring) 20%,transparent); }
.tagsel-tag{ display:inline-flex; align-items:center; gap:4px; background:var(--primary-soft); color:var(--primary-ink); font-size:12.5px; font-weight:600;
  padding:3px 4px 3px 10px; border-radius:999px; white-space:nowrap; }
.tagsel-x{ border:0; background:none; color:inherit; font-size:15px; line-height:1; opacity:.6; cursor:pointer; padding:0 4px; }
.tagsel-x:hover{ opacity:1; }
.tagsel-ph{ color:var(--muted-foreground); font-size:13.5px; }
.tagsel-ph[hidden]{ display:none; }
.tagsel-arrow{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted-foreground); font-size:12px; pointer-events:none; }
.tagsel-drop{ position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:300; background:var(--popover); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:6px; }
.tagsel-drop[hidden]{ display:none; }
.tagsel-q{ width:100%; height:32px; padding:0 10px; border:1px solid var(--input); border-radius:8px; background:var(--card); color:var(--foreground); font:inherit; font-size:13px; margin-bottom:4px; box-sizing:border-box; }
.tagsel-list{ max-height:240px; overflow-y:auto; }
.tagsel-opt{ padding:8px 10px; border-radius:6px; font-size:13px; cursor:pointer; }
.tagsel-opt:hover, .tagsel-opt.on{ background:var(--secondary); }
.tagsel-vide{ padding:8px 10px; font-size:12.5px; color:var(--muted-foreground); }
.cli2-drop > div{ padding:7px 10px; border-radius:6px; font-size:13px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cli2-drop > div span{ color:var(--muted-foreground); font-size:11.5px; margin-left:6px; }
.cli2-drop > div:hover, .cli2-drop > div.on{ background:var(--secondary); }

/* menu déroulant d'actions (ui.menu) */
.dd{ position:relative; display:inline-block; }
.dd > summary{ list-style:none; }
.dd > summary::-webkit-details-marker{ display:none; }
.dd > summary .chev{ margin-left:2px; color:var(--muted-foreground); font-size:12px; line-height:1; }
.dd .menu{ position:absolute; right:0; top:calc(100% + 6px); min-width:220px; background:var(--popover); border:1px solid var(--border); border-radius:var(--radius-sm);
           box-shadow:var(--shadow); padding:4px; display:flex; flex-direction:column; gap:1px; z-index:120; }
.dd .menu a, .dd .menu button{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; font-size:13px; color:inherit; background:none; border:0; text-align:left; cursor:pointer; white-space:nowrap; width:100%; }
.dd .menu a:hover, .dd .menu button:hover{ background:var(--secondary); }
.dd .menu hr{ border:0; border-top:1px solid var(--border); margin:4px 2px; }
.dd .menu .dot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--muted-foreground); }
.dd .menu .dot.green{ background:var(--st-green); } .dd .menu .dot.red{ background:var(--st-red); } .dd .menu .dot.amber{ background:var(--st-amber); }
/* sous-liste dans un menu (ui.menu : BDC › J2M France / J2M SUD) — dépliée sur place, pas de volet latéral (mobile) */
.dd .menu .dd-sub > summary{ list-style:none; display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; font-size:13px; cursor:pointer; white-space:nowrap; }
.dd .menu .dd-sub > summary::-webkit-details-marker{ display:none; }
.dd .menu .dd-sub > summary:hover{ background:var(--secondary); }
.dd .menu .dd-sub > summary .chev{ margin-left:auto; color:var(--muted-foreground); font-size:14px; line-height:1; transition:transform .15s; }
.dd .menu .dd-sub[open] > summary .chev{ transform:rotate(90deg); }
.dd .menu .dd-sub .sub{ display:flex; flex-direction:column; gap:1px; margin:1px 0 4px 16px; padding-left:6px; border-left:1px solid var(--border); }

.field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.field > label{ font-size:12px; font-weight:500; color:var(--muted-foreground); }
.input, .select, .textarea{ height:36px; border:1px solid var(--input); background:var(--card); border-radius:var(--radius-sm); padding:0 12px;
                            font:inherit; color:inherit; min-width:0; box-shadow:var(--shadow-sm); width:100%; }
.textarea{ height:auto; min-height:80px; padding:8px 12px; resize:vertical; }
.input::placeholder, .textarea::placeholder{ color:var(--muted-foreground); }
.input:focus, .select:focus, .textarea:focus{ outline:2px solid var(--ring); outline-offset:0; border-color:transparent; }
.select{ appearance:none; padding-right:30px;
         background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
         background-position:calc(100% - 16px) 15px,calc(100% - 11px) 15px; background-size:5px 5px; background-repeat:no-repeat; }
.select:disabled{ background-color:var(--muted); color:var(--muted-foreground); cursor:not-allowed; box-shadow:none; opacity:1; }
/* Mode de paiement verrouillé (fiche client, ticket 419) : menu grisé + « i » dans le libellé qui affiche l'aide au clic
   (zone de clic agrandie par ::after pour le doigt ; marges négatives : le libellé garde sa hauteur, menus alignés) */
.mp-i{ position:relative; width:18px; height:18px; margin:-4px 0 -4px 6px; vertical-align:middle; border-radius:50%; border:1px solid var(--border);
       background:var(--card); color:var(--muted-foreground); font:600 11px/1 Georgia,serif; cursor:pointer;
       display:inline-grid; place-items:center; padding:0; }
.mp-i::after{ content:""; position:absolute; inset:-10px; }
.mp-i:hover, .mp-i[aria-expanded="true"]{ border-color:var(--primary); color:var(--primary-ink); }
.mp-aide{ font-size:12px; color:var(--muted-foreground); }
.mp-aide[hidden]{ display:none; }
.field.search{ position:relative; }
.field.search svg{ position:absolute; left:11px; bottom:10px; width:16px; height:16px; stroke:var(--muted-foreground); fill:none; stroke-width:2; stroke-linecap:round; }
.field.search .input{ padding-left:34px; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.card-header{ padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.card-body{ padding:16px; }

.pill{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px 0 7px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap; letter-spacing:.01em; }
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.amber{ background:var(--st-amber-soft); color:var(--st-amber); }   .pill.blue{ background:var(--st-blue-soft); color:var(--st-blue); }
.pill.orange{ background:var(--st-orange-soft); color:var(--st-orange); } .pill.green{ background:var(--st-green-soft); color:var(--st-green); }
.pill.sky{ background:var(--st-sky-soft); color:var(--st-sky); } .pill.cyan{ background:var(--st-cyan-soft); color:var(--st-cyan); }         .pill.red{ background:var(--st-red-soft); color:var(--st-red); }
.pill.indigo{ background:var(--st-indigo-soft); color:var(--st-indigo); } .pill.violet{ background:var(--st-violet-soft); color:var(--st-violet); }
.pill.slate{ background:var(--st-slate-soft); color:var(--st-slate); } .pill.yellow{ background:var(--st-yellow-soft); color:var(--st-yellow); }   .pill.teal{ background:var(--primary-soft); color:var(--primary-ink); }
/* Pastilles des statuts de facture (ticket 343) — fond plein, Rejeté blanc cerclé */
.pill.fac-attente{ background:var(--fac-attente); color:var(--fac-attente-ink); } .pill.fac-envoye{ background:var(--fac-envoye); color:var(--fac-envoye-ink); }
.pill.fac-annule{ background:var(--fac-annule); color:var(--fac-annule-ink); } .pill.fac-paye{ background:var(--fac-paye); color:var(--fac-paye-ink); }
.pill.fac-partiel{ background:var(--fac-partiel); color:var(--fac-partiel-ink); } .pill.fac-rejete{ background:var(--fac-rejete); color:var(--fac-rejete-ink); box-shadow:inset 0 0 0 1px #00000033; }
/* <select> de statut de facture coloré : un liseré pour que « Rejeté » (blanc) reste visible */
.fac-st-sel,.jfr-st-sel:not(.jfr-mode-sel),.rel-sel-statut{ box-shadow:inset 0 0 0 1px #00000026; }

.chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; border:1px solid var(--border); background:var(--card); font-size:12px; font-weight:500; color:var(--foreground); }
.chip.on{ border-color:transparent; background:var(--primary); color:var(--primary-foreground); }
.chip .x{ opacity:.7; color:inherit; text-decoration:none; } .chip .x:hover{ opacity:1; }
/* Autocomplétion @Nom (crm-ui.js attachMentions) — le parent du <textarea> est en position:relative */
.mention-ac{ position:absolute; left:0; top:100%; z-index:5; min-width:180px; max-height:220px; overflow:auto; background:var(--popover); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:4px; }
.mention-ac[hidden]{ display:none; }
.mention-ac div{ padding:7px 10px; border-radius:8px; font-size:13px; cursor:pointer; }
.mention-ac div.on, .mention-ac div:hover{ background:var(--secondary); }
.mention{ color:var(--primary-ink); font-weight:600; }
.ta-wrap{ position:relative; display:flex; } .ta-wrap textarea{ flex:1; }
/* Chips de personnes (assignés d'une tâche) */
.people{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.people .chip{ height:26px; } .people .chip .x{ cursor:pointer; }

.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:20px; overflow-x:auto; scrollbar-width:none; }
.tabs .tab{ padding:9px 14px; font-weight:500; color:var(--muted-foreground); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; font-size:13.5px; white-space:nowrap; background:none; border-top:0; border-left:0; border-right:0; }
.tabs .tab:hover{ color:var(--foreground); }
.tabs .tab[aria-selected="true"]{ color:var(--primary-ink); border-bottom-color:var(--primary); font-weight:600; }
.tabs .tab .cnt{ margin-left:6px; font-size:11px; font-variant-numeric:tabular-nums; background:var(--muted); color:var(--muted-foreground); padding:1px 6px; border-radius:999px; }

.kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:18px; }
.kpis.n3{ grid-template-columns:repeat(3,1fr); } .kpis.n4{ grid-template-columns:repeat(4,1fr); }
.kpis.n1{ grid-template-columns:minmax(0,460px); }   /* une seule case (Clients : « Situation en attente de règlement TTC », tickets 354, 441) */
.kpis.auto{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.card.kpi{ padding:14px 16px; display:flex; flex-direction:column; gap:4px; position:relative; }
.kpi .l{ font-size:12px; font-weight:500; color:var(--muted-foreground); }
.kpi .v{ font-size:26px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.kpi .v small{ font-size:14px; font-weight:500; color:var(--muted-foreground); margin-left:3px; letter-spacing:0; }
.kpi .d{ font-size:12px; color:var(--muted-foreground); display:flex; gap:6px; align-items:center; }
.kpi .d.up{ color:var(--st-green); } .kpi .d.warn{ color:var(--st-amber); } .kpi .d.down{ color:var(--st-red); }
.kpi.alert{ border-color:color-mix(in oklch,var(--st-amber) 45%,var(--border)); }
.kpi.alert .v{ color:var(--st-amber); }
.kpi .spark{ position:absolute; right:14px; bottom:14px; width:64px; height:24px; }
.kpi .spark polyline{ fill:none; stroke:var(--primary); stroke-width:1.75; stroke-linejoin:round; }
.kpi .spark path{ fill:color-mix(in oklch,var(--primary) 14%,transparent); }
.kpi .spark circle{ fill:var(--primary); }
/* Bandeau des Factures (ticket 240) : CA de l'année avoirs déduits · CA du mois — les Situations en dessous (409) */
.kpis.ca{ grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr); margin-bottom:12px; }
/* Onglet Clients : case Leaseur · contentieux cliquable (filtre la liste) */
.kpi.cli-sit .sit-rows{ display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.kpi.cli-sit .sit-l{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:3px 6px; margin:0 -6px; border-radius:6px; color:var(--foreground); text-decoration:none; }
.kpi.cli-sit .sit-l:hover{ background:var(--muted); } .kpi.cli-sit .sit-l.on{ background:var(--primary-soft); }
.kpi.cli-sit .sit-n b{ font-weight:600; font-variant-numeric:tabular-nums; margin-left:4px; }
.kpi.cli-sit .sit-du b{ font-weight:600; color:var(--st-amber); font-variant-numeric:tabular-nums; }
.kpi.cli-sit .sit-du small{ margin-left:4px; font-size:11px; color:var(--muted-foreground); }
/* Case Situations (ticket 279) : 3 lignes pastille · CA HT · impayé TTC ; année dans le titre */
.kpi.ca-sit .l{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kpi.ca-sit .ca-annee-sel{ height:26px; width:auto; padding:0 24px 0 8px; font-size:12px; text-transform:none; letter-spacing:0; }
.kpi.ca-sit .sit-rows{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.kpi.ca-sit .sit-l{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px 12px; align-items:center; }
.kpi.ca-sit .sit-l .chip{ justify-self:start; cursor:pointer; user-select:none; height:26px; }
.kpi.ca-sit .sit-l b{ font-weight:600; font-variant-numeric:tabular-nums; }
.kpi.ca-sit .sit-l small{ margin-left:4px; font-size:11px; color:var(--muted-foreground); }
.kpi.ca-sit .sit-du{ text-align:right; } .kpi.ca-sit .sit-du b{ color:var(--st-amber); }
/* Situations en 3 bulles côte à côte + sous-total par bulle + total cumulé pleine largeur (ticket 409) */
.sit-grp{ margin-bottom:18px; }
.sit-grp-h{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--muted-foreground); margin-bottom:6px; }
.sit-grp-h .ca-annee-sel{ height:26px; width:auto; padding:0 24px 0 8px; font-size:12px; }
.sit-bulles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.kpi.sit-b .sit-rows{ flex:1; }
.kpi.ca-sit.sit-b .sit-l .chip{ height:auto; min-height:26px; max-width:100%; white-space:normal; line-height:1.2; }
.kpi .sit-l.sit-st{ border-top:1px solid var(--border); border-radius:0; padding-top:6px; margin-top:auto; }
.kpi.cli-sit .sit-l.sit-st{ margin:auto -6px 0; }
.kpi.cli-sit .sit-l.sit-st:hover{ background:none; }
.kpi .sit-st .sit-tot-l, .kpi.cli-sit .sit-st .sit-n{ font-weight:600; }
.sit-total{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 16px; margin-top:8px;
  padding:9px 16px; border-radius:10px; background:var(--muted); font-size:13px; font-weight:600; }
.sit-total b{ font-weight:600; font-variant-numeric:tabular-nums; }
.sit-total .sit-mt{ display:flex; gap:16px; flex-wrap:wrap; }
.sit-total small{ margin-left:4px; font-size:11px; font-weight:500; color:var(--muted-foreground); }
.sit-total .sit-du b{ color:var(--st-amber); }
.sit-total.cli-sit-total{ justify-content:flex-end; }   /* Clients : « Total X clients » à droite, à côté du montant (441) */
@media (max-width:1100px){ .ca-sit-grp.avec-ca .sit-bulles{ grid-template-columns:1fr; } }   /* CA HT + impayé : trop large pour 3 */
@media (max-width:820px){ .sit-bulles{ grid-template-columns:1fr; } }
.kpi.ca-annee .ca-pe{ display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline; font-size:13px; color:var(--muted-foreground); }
.kpi.ca-annee .ca-pe b{ font-weight:600; font-variant-numeric:tabular-nums; }
.kpi.ca-annee .ca-pe .ok b{ color:var(--st-green); } .kpi.ca-annee .ca-pe .att b{ color:var(--st-amber); }
.kpi.ca-annee .ca-pe small{ font-size:11px; }
.kpi.ca-annee .ca-ctl{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; }
.kpi.ca-annee .ca-ctl > div{ min-height:0; }
.kpi.ca-annee .ca-annee-sel{ height:28px; width:auto; padding:0 26px 0 10px; font-size:12.5px; }
.kpi.ca-mois{ background:color-mix(in oklch,var(--primary) 6%,var(--card)); border-color:color-mix(in oklch,var(--primary) 35%,var(--border)); }
.kpi.ca-mois .ca-cmp{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:2px 0; }
.kpi.ca-mois .ca-cmp span{ display:block; font-size:12px; color:var(--muted-foreground); }
.kpi.ca-mois .ca-cmp b{ font-size:21px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kpi.ca-mois .ca-cmp div:first-child b{ color:var(--primary-ink); }
@media (max-width:1100px){ .kpis.ca{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .kpis.ca{ grid-template-columns:1fr; } }

.card.filters{ display:grid; grid-template-columns:minmax(220px,1.4fr) repeat(auto-fit,minmax(140px,1fr)); gap:10px; align-items:end; padding:14px 16px; margin-bottom:12px; overflow:visible; }
.card.filters .actions{ display:flex; gap:8px; align-items:center; }
.active-filters{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:12px; font-size:12.5px; color:var(--muted-foreground); }

/* Tableau ui.table() : mise en page fixe + colgroup obligatoire. Les tableaux
   historiques (hors .tbl) gardent une mise en page automatique. */
.tbl{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl table{ table-layout:fixed; font-size:13.5px; }
.tbl td{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl td.wrap{ white-space:normal; }
/* Titre de colonne trop long pour sa largeur (téléphone) : coupé avec « … » au lieu de déborder
   sur la colonne voisine et de rendre le tableau défilable de côté (ticket 211). */
.tbl th{ overflow:hidden; text-overflow:ellipsis; }
table{ border-collapse:collapse; width:100%; }
th{ font-size:11px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:var(--muted-foreground); text-align:left; padding:10px 14px;
    border-bottom:1px solid var(--border); background:color-mix(in oklch,var(--muted) 55%,transparent); white-space:nowrap; }
td{ padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:13.5px; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover td{ background:color-mix(in oklch,var(--muted) 45%,transparent); }
tbody tr.sel td{ background:var(--primary-soft); }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }
td.rs{ font-weight:600; }
td.rs small{ display:block; font-weight:400; color:var(--muted-foreground); font-size:12px; font-variant-numeric:tabular-nums; }
td .who{ display:inline-flex; align-items:center; gap:7px; }
td .who .avatar{ width:22px; height:22px; font-size:10px; }
td.dt{ font-variant-numeric:tabular-nums; color:var(--muted-foreground); }
td.dt.late{ color:var(--st-red); font-weight:600; }
td.act{ text-align:right; white-space:nowrap; }
.tbl td.act .btn{ visibility:hidden; }
.tbl tr:hover td.act .btn{ visibility:visible; }
@media (hover:none){ .tbl td.act .btn{ visibility:visible; } }   /* écran tactile : pas de survol pour les révéler */
/* Factures / Relances des espaces J2M : actions toujours visibles et teintées comme Factures CABLAN
   et Matériel (ticket 225) — vert = voir le PDF, bleu = envoyer, teal = ouvrir. */
table.act-visibles td.act .btn{ visibility:visible; }
.btn.t-primary{ background:var(--primary-soft); border-color:color-mix(in oklch,var(--primary) 35%,transparent); color:var(--primary-ink); }
.btn.t-green{ background:var(--st-green-soft); border-color:var(--st-green-soft); color:var(--st-green); }
.btn.t-sky{ background:var(--st-sky-soft); border-color:var(--st-sky-soft); color:var(--st-sky); }
.btn.t-slate{ background:var(--muted); border-color:var(--muted); color:var(--muted-foreground); }
.btn.t-primary:hover, .btn.t-green:hover, .btn.t-sky:hover, .btn.t-slate:hover{ filter:brightness(.95); }
.rowflag{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--st-amber); margin-right:6px; vertical-align:1px; }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted-foreground); font-variant-numeric:tabular-nums; }
.pager{ display:flex; gap:4px; }
.pager .btn{ height:30px; min-width:30px; padding:0 9px; font-size:12.5px; }
.pager .btn.cur{ background:var(--primary); color:var(--primary-foreground); border-color:transparent; }
.legend{ display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 0; }
.legend .pill{ opacity:.9; }

.subnav{ display:flex; gap:2px; flex-wrap:wrap; padding:4px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); margin-bottom:18px; width:max-content; max-width:100%; overflow-x:auto; }
.subnav a{ padding:6px 12px; border-radius:8px; font-size:13px; font-weight:500; color:var(--muted-foreground); white-space:nowrap; }
.subnav a:hover{ background:var(--secondary); color:var(--foreground); }
.subnav a[aria-current="page"]{ background:var(--primary-soft); color:var(--primary-ink); font-weight:600; }
.subnav a.adm{ margin-left:8px; background:var(--st-amber-soft); color:var(--st-amber); }
.crm-ebar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.crm-ebar-lbl{ font-size:10.5px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-foreground); margin-right:4px; white-space:nowrap; }
/* Barre des CRM + onglets TOUJOURS visibles en défilant (Elie, 28-10-2026, ticket 346) : collées en
   haut de l'écran, sur toute la largeur du contenu, fond opaque ; un trait dessous dès que la page défile
   (classe .stuck posée par crm-ui.js). Sous la barre mobile .mtop quand elle est affichée. */
.crm-top{ position:sticky; top:0; z-index:30; background:var(--background); margin:-10px -32px 18px; padding:10px 32px; }
.crm-top.stuck{ box-shadow:0 1px 0 var(--border), 0 6px 12px -8px rgba(0,0,0,.18); }
.crm-top .crm-ebar{ margin-bottom:8px; }
.crm-top .subnav{ margin-bottom:0; }
html[data-sidebar="hidden"] .crm-top{ top:var(--mtop-h); }
/* Tête d'une LISTE CRM (ticket 346) : seulement les boutons, à droite */
.list-actions{ display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.two{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
.card.agenda{ display:flex; flex-direction:column; }
.agenda .h{ padding:12px 16px; border-bottom:1px solid var(--border); font-weight:600; font-size:13px; display:flex; align-items:center; gap:8px; }
.agenda .h .pill{ margin-left:auto; }
.agenda .it{ display:grid; grid-template-columns:52px 1fr; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); font-size:13px; align-items:start; }
.agenda .it:last-child{ border-bottom:0; }
.agenda .it .t{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--primary-ink); }
.agenda .it .t.late{ color:var(--st-red); }
.agenda .it small{ display:block; color:var(--muted-foreground); }
.agenda .it.done{ opacity:.55; }
.agenda .it.done .t{ color:var(--muted-foreground); text-decoration:line-through; }
.agenda .empty{ padding:18px 16px; color:var(--muted-foreground); font-size:13px; }

.alertbox{ padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.alertbox h3{ margin:0; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; }
.alertbox .row{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12.5px; }
.alertbox .row .t{ font-weight:500; }
.alertbox .row small{ display:block; color:var(--muted-foreground); }
.alertbox .row.amber{ background:var(--st-amber-soft); border-color:color-mix(in oklch,var(--st-amber) 30%,transparent); }
.alertbox .row.red{ background:var(--st-red-soft); border-color:color-mix(in oklch,var(--st-red) 30%,transparent); }
.alertbox .row.green{ background:var(--st-green-soft); border-color:color-mix(in oklch,var(--st-green) 30%,transparent); }
.alertbox .row.blue{ background:var(--st-blue-soft); border-color:color-mix(in oklch,var(--st-blue) 30%,transparent); }
.alertbox .ico{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-size:13px; }
.alertbox .ico.geo{ background:var(--st-amber-soft); color:var(--st-amber); }
.alertbox .ico.lock{ background:var(--st-red-soft); color:var(--st-red); }
.alertbox .ico.dev{ background:var(--st-blue-soft); color:var(--st-blue); }

/* ── 7. Composants historiques (classes encore utilisées par les modules), sur les jetons ── */
.modern-btn, .add-line-btn{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; background:var(--primary); border:none;
                            border-radius:var(--radius-sm); color:var(--primary-foreground); font-weight:600; cursor:pointer; font-size:13px; font-family:inherit; text-decoration:none; }
.modern-btn:hover, .add-line-btn:hover{ filter:brightness(1.06); }
.pagination-btn{ display:inline-flex; align-items:center; gap:5px; height:32px; background:var(--card); color:var(--muted-foreground); padding:0 12px; border:1px solid var(--border);
                 border-radius:var(--radius-sm); font-weight:500; cursor:pointer; font-size:13px; font-family:inherit; text-decoration:none; }
.pagination-btn:hover{ background:var(--secondary); color:var(--foreground); }
.delete-btn{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; background:transparent; color:var(--muted-foreground);
             border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:14px; }
.delete-btn:hover{ background:var(--st-red-soft); color:var(--st-red); border-color:color-mix(in oklch,var(--st-red) 30%,transparent); }

.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.filter-block{ display:flex; flex-direction:column; gap:4px; }
.filter-block label{ font-size:12px; font-weight:500; color:var(--muted-foreground); }
.filter-input, .filter-select, .owner-select, .status-select{ height:36px; padding:0 10px; border:1px solid var(--input); border-radius:var(--radius-sm); font-size:13px;
                                                              background:var(--card); font-family:inherit; color:var(--foreground); outline:none; }
.filter-input:focus, .filter-select:focus, .owner-select:focus, .status-select:focus{ outline:2px solid var(--ring); outline-offset:0; border-color:transparent; }

.table-wrapper{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; box-shadow:var(--shadow-sm); }
.status-badge{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap; }

.search-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; max-width:520px; width:100%; box-shadow:var(--shadow); }
.prospection-card{ max-width:720px; margin:0 auto; }
.search-title{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.search-title h3{ margin:0; font-size:16px; font-weight:600; letter-spacing:-0.2px; }
.search-icon{ font-size:20px; }
.search-form{ display:flex; flex-direction:column; gap:10px; }
.search-form input{ width:100%; height:38px; padding:0 12px; border-radius:var(--radius-sm); border:1px solid var(--input); font-size:14px; font-family:inherit;
                    background:var(--card); color:var(--foreground); outline:none; }
.search-form input:focus{ outline:2px solid var(--ring); outline-offset:0; border-color:transparent; }

.agenda-box{ background:var(--st-amber-soft); border:1px solid color-mix(in oklch,var(--st-amber) 30%,transparent); padding:14px 16px; border-radius:var(--radius); margin-bottom:16px; }
.agenda-title{ margin:0 0 10px; color:var(--st-amber); font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; }

a.tel-link{ font-variant-numeric:tabular-nums; font-size:13px; color:var(--st-blue); font-weight:500; }
a.tel-link:hover{ text-decoration:underline; }
a.siren-link{ font-variant-numeric:tabular-nums; font-size:12px; color:var(--st-blue); font-weight:500; }
a.siren-link:hover{ text-decoration:underline; }
tr.already-called td{ background:var(--st-red-soft) !important; color:var(--st-red); }

.nice-table{ width:100%; border-collapse:collapse; font-size:13.5px; background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.nice-table td{ padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top; white-space:normal; word-break:break-word; max-width:200px; }

.note-input{ width:100%; min-height:44px; padding:6px 8px; border-radius:8px; border:1px solid var(--input); resize:vertical; font-family:inherit; font-size:13px; line-height:1.4; background:var(--card); color:var(--foreground); }
.note-input:focus{ outline:2px solid var(--ring); outline-offset:0; border-color:transparent; }

::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--input); border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted-foreground); }

/* Fondu d'entrée : opacité seule. L'ancienne version animait un transform, ce
   qui faisait de .content le bloc conteneur de tout position:fixed (piège
   historique : dialogs, visualiseurs). Plus de transform → plus de piège. */
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.fade-in{ animation:fadeIn .18s ease-out; }

dialog{ background:var(--popover); color:var(--foreground); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
dialog:modal{ margin:auto; max-height:calc(100vh - 32px); overflow:auto; }
dialog::backdrop{ background:oklch(0.2 0.01 255 / .45); }
dialog.dlg{ padding:0; width:min(560px, calc(100vw - 32px)); }
.dlg-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); }
.dlg-head h2{ margin:0; font-size:15px; font-weight:600; }
.dlg-body{ padding:18px; display:flex; flex-direction:column; gap:12px; }
.dlg-foot{ padding:12px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

/* ── 8. Notifications (cloche) — panneau ancré sous la cloche de la sidebar ── */
.notif-bell-btn{ position:relative; }
.notif-bell-badge{ position:absolute; top:-4px; right:-4px; background:var(--st-red); color:var(--primary-foreground); font-size:10px; font-weight:600; min-width:17px; height:17px; border-radius:9px;
                   display:none; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--sidebar); }
.notif-panel{ position:fixed; top:12px; left:calc(var(--sidebar-w) + 12px); width:380px; max-height:560px; background:var(--popover); border-radius:var(--radius);
              box-shadow:var(--shadow); border:1px solid var(--border); display:none; flex-direction:column; z-index:9997; overflow:hidden; animation:notifSlideIn .15s ease; }
@keyframes notifSlideIn{ from{ opacity:0; transform:translateY(-8px) scale(0.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
.notif-panel-hdr{ display:flex; align-items:center; justify-content:space-between; padding:15px 18px 11px; border-bottom:1px solid var(--border); flex-shrink:0; }
.notif-panel-hdr-title{ font-size:16px; font-weight:600; color:var(--foreground); }
.notif-panel-hdr-btn{ font-size:12px; color:var(--primary-ink); background:none; border:none; cursor:pointer; font-weight:600; padding:4px 8px; border-radius:6px; font-family:inherit; }
.notif-panel-hdr-btn:hover{ background:var(--primary-soft); }
.notif-panel-body{ overflow-y:auto; flex:1; scrollbar-width:thin; }
.notif-section-lbl{ font-size:13px; font-weight:600; color:var(--foreground); padding:10px 18px 4px; }
.notif-row{ display:flex; align-items:flex-start; gap:11px; padding:10px 16px; text-decoration:none; color:inherit; position:relative; cursor:pointer; }
.notif-row:hover{ background:var(--secondary); }
.notif-row.is-new{ background:var(--primary-soft); }
.notif-row.is-new:hover{ background:color-mix(in oklch,var(--primary) 18%,var(--primary-soft)); }
.notif-row-icon{ width:40px; height:40px; border-radius:50%; background:var(--muted); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.notif-row-body{ flex:1; min-width:0; }
.notif-row-msg{ font-size:13.5px; color:var(--foreground); line-height:1.4; margin-bottom:3px; }
.notif-row-time{ font-size:12px; color:var(--primary-ink); font-weight:500; }
.notif-row-dot{ width:10px; height:10px; border-radius:50%; background:var(--primary); flex-shrink:0; margin-top:8px; }
.notif-empty{ text-align:center; color:var(--muted-foreground); font-size:14px; padding:44px 20px; }

#g-progress{ position:fixed; top:0; left:0; width:0; height:3px; background:var(--primary); z-index:99999; border-radius:0 2px 2px 0; transition:none; pointer-events:none; }

/* ── 9. Responsive ── */
@media (max-width:1100px){
  .two{ grid-template-columns:1fr; }
  .kpis, .kpis.n4{ grid-template-columns:repeat(3,1fr); }
}
/* Mode tiroir : mobile (≤ 820 px) OU sidebar masquée à la demande sur desktop
   (html[data-sidebar="hidden"], bouton ⇤ de la sidebar, mémorisé). Mêmes règles. */
html[data-sidebar="hidden"] .mtop{ display:flex; }
html[data-sidebar="hidden"] .shell{ grid-template-columns:1fr; }
html[data-sidebar="hidden"] .sidebar{ position:fixed; top:0; left:0; bottom:0; height:100vh; width:min(20rem,86vw); z-index:70; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow); }
html[data-sidebar="hidden"] .sidebar.open{ transform:none; }
html[data-sidebar="hidden"] .btn.drawer-close{ display:inline-flex; margin-left:auto; }
html[data-sidebar="hidden"] .notif-panel{ left:12px; top:calc(var(--mtop-h) + 6px); }
html[data-sidebar="hidden"] .mtop #burger{ display:none; }        /* desktop : survol du bord gauche */
html[data-sidebar="hidden"] .sb-hotzone{ display:block; }
.sb-hotzone{ display:none; position:fixed; top:0; left:0; bottom:0; width:14px; z-index:65; }
html[data-sidebar="hidden"] .sidebar.peek{ transform:none; }
@media (hover:none), (max-width:820px){ .sb-hotzone{ display:none !important; } html[data-sidebar="hidden"] .mtop #burger{ display:inline-flex; } }
#sidebar-toggle .ico-dock{ display:none; }
html[data-sidebar="hidden"] #sidebar-toggle .ico-dock{ display:inline-flex; }
html[data-sidebar="hidden"] #sidebar-toggle .ico-hide{ display:none; }
@media (max-width:820px){
  .mtop{ display:flex; }
  .shell{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; top:0; left:0; bottom:0; height:100vh; width:min(20rem,86vw); z-index:70; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow); }
  .sidebar.open{ transform:none; }
  .btn.drawer-close{ display:inline-flex; margin-left:auto; }
  #sidebar-toggle{ display:none; }            /* sur mobile, seule la croix ferme le tiroir */
  .content{ padding:16px 14px 40px; }
  /* Barre des CRM collée sous la barre du haut ; CRM et onglets sur UNE ligne qui défile au doigt
     (sinon 12 onglets sur 4 lignes mangeraient l'écran) */
  .crm-top{ top:var(--mtop-h); margin:-8px -14px 14px; padding:8px 14px; }
  .crm-top .crm-ebar, .crm-top .subnav{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .crm-top .crm-ebar::-webkit-scrollbar, .crm-top .subnav::-webkit-scrollbar{ display:none; }
  .crm-top .subnav{ width:auto; }
  .crm-top .crm-ebar .chip{ flex:none; }
  .kpis, .kpis.n3, .kpis.n4{ grid-template-columns:1fr 1fr; }
  .card.filters{ grid-template-columns:1fr 1fr; }
  .filter-bar{ flex-direction:column; gap:8px; padding:12px; }
  .filter-block{ width:100%; }
  .filter-input, .filter-select{ width:100%; }
  .notif-panel{ left:8px; right:8px; width:auto; top:calc(var(--mtop-h) + 6px); max-height:75vh; }
  .page-head h1{ font-size:24px; } .page-head h1 .serif{ font-size:27px; }
}
/* ── Mobile (≤ 820 px) : barre d'onglets en bas de l'écran à la place du tiroir (Elie, 14-10-2026,
   ticket 160). Mêmes onglets / couleurs / droits que la sidebar, sans les groupes. --bnav-h : hauteur
   réservée en bas (contenu, barres d'actions et toasts fixés en bas passent au-dessus). ── */
:root{ --bnav-h:0px; }
.bnav{ display:none; }
@media (max-width:820px){
  :root{ --bnav-h:calc(61px + env(safe-area-inset-bottom, 0px)); }   /* 60 px d'onglets + 1 px de bordure */
  .bnav{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:60; padding-bottom:env(safe-area-inset-bottom, 0px);
         background:var(--card);
         border-top:1px solid var(--border); box-shadow:0 -8px 24px -16px oklch(0.2 0.01 255 / .35); }
  .bnav-in{ display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; }
  .bnav-in::-webkit-scrollbar{ display:none; }
  .bnav-a{ position:relative; flex:1 0 66px; max-width:112px; min-height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center;
           gap:4px; padding:7px 4px 6px; margin:0; border:0; background:none; font:inherit; font-size:10.5px; font-weight:500; line-height:1.1;
           color:var(--muted-foreground); text-decoration:none; cursor:pointer; scroll-snap-align:start; -webkit-tap-highlight-color:transparent; }
  .bnav-a:active{ background:color-mix(in oklch,var(--foreground) 5%,transparent); }
  .bnav-a .nav-ic{ width:32px; height:26px; border-radius:9px; }
  .bnav svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .bnav-a .l{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bnav-a[aria-current="page"]{ color:var(--primary-ink); font-weight:600; }
  .bnav-a[aria-current="page"]::before{ content:""; position:absolute; top:0; left:24%; right:24%; height:3px; border-radius:0 0 3px 3px; background:var(--primary); }
  .bnav-a .cnt{ position:absolute; top:4px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:inline-flex;
                align-items:center; justify-content:center; font-size:10px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums;
                color:var(--primary-foreground); background:var(--st-red); border:2px solid var(--card); }
  .bnav-a .cnt.warm{ background:var(--st-orange); }
  /* le tiroir n'existe plus sur mobile : ni bouton ☰, ni panneau, ni voile */
  .mtop #burger, html[data-sidebar="hidden"] .mtop #burger{ display:none !important; }
  .sidebar, .backdrop{ display:none !important; }
  .content{ padding-bottom:calc(var(--bnav-h) + 28px); }
  /* barres d'actions et toasts fixés en bas d'un écran : au-dessus de la barre d'onglets */
  .selbar, [style*="position:fixed;bottom:0"]{ bottom:var(--bnav-h) !important; }
  [style*="position:fixed"][style*="bottom:24px"], [style*="position:fixed"][style*="bottom:20px"]{ bottom:calc(var(--bnav-h) + 16px) !important; }
}
/* ── Listes des CRM en CARTES sur téléphone (ticket 386) : `table.mcards` + `data-l` posés par
   static/crm-ui.js. Une ligne = une carte « libellé · valeur » ; bureau (> 820 px) inchangé. ── */
@media (max-width:820px){
  table.mcards{ display:block; width:100% !important; min-width:0 !important; table-layout:auto !important; border:0 !important; background:none !important; }
  table.mcards > colgroup, table.mcards > thead{ display:none !important; }
  table.mcards > tbody{ display:flex; flex-direction:column; gap:10px; }
  table.mcards > tbody > tr{ display:block; position:relative; padding:12px 14px 10px; background:var(--card) !important;
         border:1px solid var(--border) !important; border-radius:12px; box-shadow:0 1px 2px oklch(0.2 0.01 255 / .05); }
  table.mcards > tbody > tr > td{ display:block; position:relative; width:auto !important; min-width:0 !important; max-width:none !important;
         height:auto !important; padding:3px 0 3px 36% !important; border:0 !important; background:none !important; text-align:left !important;
         white-space:normal !important; overflow:visible !important; text-overflow:clip !important; font-size:13.5px; line-height:1.4; }
  table.mcards > tbody > tr > td[data-l]::before{ content:attr(data-l); position:absolute; left:0; top:4px; width:33%;
         font-size:11.5px; font-weight:500; line-height:1.3; color:var(--muted-foreground); overflow-wrap:anywhere; }
  table.mcards > tbody > tr > td.mc-titre{ padding:0 34px 6px 0 !important; font-size:15px; font-weight:600; }
  table.mcards > tbody > tr > td.mc-chk{ position:absolute; top:8px; right:8px; z-index:1; padding:2px !important; }   /* au-dessus du titre (sinon la case ne se touche pas) */
  table.mcards > tbody > tr > td.mc-chk input{ width:22px !important; height:22px !important; }
  table.mcards > tbody > tr > td.mc-act{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px;
         padding:9px 0 0 !important; border-top:1px solid var(--border) !important; }
  table.mcards > tbody > tr > td.mc-vide{ display:none !important; }
  table.mcards > tbody > tr.mc-plein{ padding:14px; text-align:center; }
  table.mcards > tbody > tr.mc-plein > td{ padding:0 !important; text-align:center !important; }
  table.mcards select{ max-width:100%; }
  table.mcards > tbody > tr > td :where(span, div, small, b, strong, a, em){ white-space:normal !important; overflow-wrap:anywhere; }
  /* le cadre du tableau disparaît : les cartes ont le leur */
  .content :has(> table.mcards){ overflow:visible !important; background:none !important; border-color:transparent !important;
         box-shadow:none !important; padding:0 !important; }
  .content .card:has(> .tbl > table.mcards){ background:none !important; border-color:transparent !important; box-shadow:none !important; }
}
/* ── Barre de navigation EN HAUT (desktop, ticket 351) : html[data-nav="haut"], posé par le serveur
   (préférence du compte, lib/barre_haut.py) puis par les boutons « barre en haut / à gauche ».
   Remplace la sidebar ; sur mobile (≤ 820 px) la barre d'onglets du bas reste. Onglets sur UNE ligne :
   ceux qui ne tiennent pas sont recopiés dans « Autres » (static/crm-ui.js). ── */
:root{ --hnav-h:56px; }
.hnav{ display:none; }
@media (min-width:821px){
  html[data-nav="haut"] .hnav{ display:flex; align-items:center; gap:6px; position:sticky; top:0; z-index:45;
         height:var(--hnav-h); padding:0 14px; background:var(--card); border-bottom:1px solid var(--border); }
  html[data-nav="haut"] .shell{ grid-template-columns:1fr; }
  html[data-nav="haut"] .sidebar, html[data-nav="haut"] .mtop, html[data-nav="haut"] .sb-hotzone,
  html[data-nav="haut"] .backdrop{ display:none !important; }
  html[data-nav="haut"] .crm-top{ top:var(--hnav-h); }
  html[data-nav="haut"] .notif-panel{ top:calc(var(--hnav-h) + 6px); left:auto; right:12px; }
}
.hn-logo{ padding:0 8px 0 2px; border-radius:8px; }
.hn-logo img{ height:30px; }
.hn-tabs{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:2px; height:40px; overflow:hidden; }
.hn-a{ position:relative; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 10px; margin:0; border:0; border-radius:8px;
       background:none; font:inherit; font-size:13.5px; font-weight:500; line-height:1; white-space:nowrap; text-decoration:none; cursor:pointer;
       color:color-mix(in oklch,var(--sidebar-foreground) 86%,var(--card)); transition:background .12s,color .12s; }
.hn-a:hover{ background:color-mix(in oklch,var(--foreground) 5%,transparent); color:var(--sidebar-foreground); }
.hn-a:focus-visible, .hn-choisir:focus-visible{ outline:2px solid var(--ring); outline-offset:-2px; }
.hn-a .nav-ic svg, .hn-ck .nav-ic svg{ width:13px; height:13px; stroke-width:2; }
.hnav svg, .hn-ck svg{ stroke:currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.hn-a[aria-current="page"]{ color:var(--primary-ink); font-weight:600; background:color-mix(in oklch,var(--primary) 7%,transparent); }
.hn-tabs .hn-a[aria-current="page"]::after{ content:""; position:absolute; left:10px; right:10px; bottom:2px; height:2px; border-radius:2px; background:var(--primary); }
.hn-tabs .hn-a.hn-cache{ visibility:hidden; }
.hn-a .cnt{ min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
            font-size:10.5px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; color:var(--primary-foreground); background:var(--st-red); }
.hn-a .cnt.warm{ background:var(--st-orange); }
.hn-more{ position:relative; flex:none; }
/* Largeur du bouton « Autres » CONSTANTE (point réservé, pas de gras) : sinon une pastille recopiée
   dans le menu l'élargirait, ferait passer un onglet à la ligne, et ainsi de suite. */
.hn-more-btn .hn-dot{ display:inline-block; visibility:hidden; width:7px; height:7px; border-radius:50%; background:var(--st-red); }
.hn-more:has(.hn-menu .cnt:not([style*="none"])) .hn-dot{ visibility:visible; }
.hn-more:has(.hn-menu [aria-current="page"]) > .hn-more-btn{ color:var(--primary-ink); background:color-mix(in oklch,var(--primary) 7%,transparent); }
.hn-menu{ display:none; position:absolute; top:100%; right:0; width:270px; max-height:calc(100vh - var(--hnav-h) - 16px); overflow-y:auto;
          padding:6px; background:var(--popover); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); z-index:46; }
@media (hover:hover){ .hn-more:not(.ferme):hover .hn-menu{ display:block; } }
.hn-more.open .hn-menu{ display:block; }
.hn-menu .hn-grp:not(:has(.hn-a)){ display:none; }
.hn-menu .hn-grp + .hn-grp{ margin-top:4px; padding-top:4px; border-top:1px solid var(--border); }
.hn-menu .hn-grp .h{ font-size:11.5px; font-weight:500; color:var(--muted-foreground); padding:6px 8px 4px; }
.hn-menu .hn-a{ display:flex; width:100%; height:34px; padding:0 8px; text-align:left; }
.hn-menu .hn-a .cnt{ margin-left:auto; }
.hn-choisir{ display:flex; align-items:center; gap:8px; width:100%; margin:4px 0 0; padding:10px 8px; border:0; border-top:1px solid var(--border);
             background:none; font:inherit; font-size:13px; font-weight:500; color:var(--primary-ink); cursor:pointer; text-align:left; }
.hn-choisir:hover{ background:color-mix(in oklch,var(--primary) 7%,transparent); }
.hn-choisir svg{ width:15px; height:15px; stroke-width:1.9; }
.hn-tools{ flex:none; display:flex; align-items:center; gap:2px; margin-left:4px; padding-left:8px; border-left:1px solid var(--border); }
.hn-tools .btn.icon{ width:32px; height:32px; color:var(--muted-foreground); }
.hn-tools .btn.icon:hover{ color:var(--foreground); background:color-mix(in oklch,var(--foreground) 6%,transparent); }
.hn-tools .btn.icon svg{ width:17px; height:17px; stroke-width:1.75; }
.hn-tools .avatar{ margin:0 4px; }
#hn-dlg{ width:min(780px, calc(100vw - 32px)); }
.hn-ck-grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px 18px; }
.hn-ck-grp{ border:0; margin:0; padding:0; min-width:0; }
.hn-ck-grp legend{ font-size:12px; font-weight:600; color:var(--muted-foreground); padding:0 0 6px; }
.hn-ck{ display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:7px; font-size:13.5px; cursor:pointer; }
.hn-ck:hover{ background:color-mix(in oklch,var(--foreground) 4%,transparent); }
.hn-ck input{ width:15px; height:15px; margin:0; flex:none; accent-color:var(--primary); }
.hn-dlg-err{ margin:12px 0 0; color:var(--st-red); font-size:13px; }
.hn-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:9999; max-width:min(520px, calc(100vw - 32px));
           padding:10px 16px; border-radius:10px; background:var(--foreground); color:var(--background); font-size:13px; box-shadow:var(--shadow); }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* ── Fenêtre « Enregistrer l'appel » (static/crm-call2.js) — Prospection, recherches ── */
dialog.call-dlg{ width:min(520px, calc(100vw - 32px)); }
.call-dlg .cm-title{ display:flex; align-items:center; gap:12px; min-width:0; }
.call-dlg .cm-ico{ width:34px; height:34px; border-radius:var(--radius-sm); display:grid; place-items:center; flex:none;
                   background:var(--primary-soft); color:var(--primary-ink); }
.call-dlg .cm-ico svg{ width:17px; height:17px; }
.call-dlg .cm-tel{ font-size:12.5px; color:var(--muted-foreground); font-variant-numeric:tabular-nums; margin-top:2px; }
.call-dlg .cm-info{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px 18px;
                    background:color-mix(in oklch,var(--muted) 45%,transparent); border-bottom:1px solid var(--border); }
.call-dlg .cm-info[hidden], .call-dlg .cm-detail[hidden], .call-dlg .cm-err[hidden], .call-dlg .cm-src[hidden]{ display:none; }
.call-dlg .cm-pill{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:999px; font-size:12px;
                    background:var(--card); border:1px solid var(--border); color:var(--muted-foreground); white-space:nowrap; }
.call-dlg .cm-pill b{ color:var(--foreground); font-weight:600; font-variant-numeric:tabular-nums; }
.call-dlg .cm-srcb, .call-dlg .cm-src{ font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:999px; }
.call-dlg .cm-srcb.sirene, .call-dlg .cm-src.sirene{ background:var(--st-green-soft); color:var(--st-green); }
.call-dlg .cm-srcb.fichier, .call-dlg .cm-src.fichier{ background:var(--st-slate-soft); color:var(--st-slate); }
.call-dlg .cm-src{ align-self:flex-start; margin-top:2px; }
.call-dlg .cm-google{ margin-left:auto; height:26px; }
.call-dlg .cm-detail{ display:grid; gap:3px; padding:10px 18px; font-size:12.5px; border-bottom:1px solid var(--border); }
.call-dlg .cm-detail > div{ display:grid; grid-template-columns:110px 1fr; gap:8px; }
.call-dlg .cm-detail > div > span:first-child{ color:var(--muted-foreground); }
.call-dlg .cm-detail > div > span:last-child{ white-space:pre-line; }
.call-dlg .cm-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.call-dlg textarea.input{ height:auto; min-height:76px; padding:8px 10px; resize:vertical; line-height:1.45; font-family:inherit; }
.call-dlg .cm-quick{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.call-dlg .cm-quick .chip{ cursor:pointer; font-family:inherit; }
.call-dlg .cm-quick .chip:hover{ border-color:var(--primary); color:var(--primary-ink); }
.call-dlg .cm-quick .chip.on{ background:var(--primary-soft); color:var(--primary-ink); border-color:transparent; }
.call-dlg .cm-score{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; font-size:12.5px; }
.call-dlg .cm-score.wait{ color:var(--muted-foreground); }
.call-dlg .cm-score .h{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; font-weight:500; }
.call-dlg .cm-score .note{ font-size:11.5px; font-weight:600; padding:1px 8px; border:1px solid; border-radius:999px; cursor:help; }
.call-dlg .cm-score .bar{ height:5px; border-radius:999px; background:var(--muted); overflow:hidden; }
.call-dlg .cm-score .bar i{ display:block; height:100%; border-radius:999px; }
.call-dlg .cm-err{ padding:9px 12px; border-radius:var(--radius-sm); font-size:12.5px; background:var(--st-red-soft); color:var(--st-red);
                   border:1px solid color-mix(in oklch,var(--st-red) 30%,transparent); }
@media (max-width:520px){ .call-dlg .cm-2{ grid-template-columns:1fr; } }
/* ── Bouton « appeler » de l'extension Kavkom (ticket 385) : image `img.kavkom-icon-call` posée par
   l'extension à côté des numéros, trop petite. Agrandie AUTOUR DE SON CENTRE (transform) : l'extension
   la place elle-même (dans la case du téléphone) — sa position et la mise en page ne bougent pas. ── */
img.kavkom-icon-call{ transform:scale(1.8); transform-origin:center; cursor:pointer; }
img.kavkom-icon-call:hover{ transform:scale(2); }