/* ============================================================
   static/css/lexa.css — Lexa sur le DOM RÉEL de COMMERCIAL PORTAL (appliqué le 12 octobre 2026 ;
   source unique, recopiée par la maquette Lexa réelle).
   Chargé APRÈS comcrm.css : il ne renomme aucune classe, ne masque
   aucun élément que le JavaScript lit ; il réécrit les jetons puis les
   classes réelles (rail, nav, en-tête, pages, cartes, tableaux,
   pastilles, formulaires, modales, onglets, KPI, éditeur de proforma,
   grille de droits, bandeau démo, toasts, barre d'état).
   Référence : Maquettes par theme/themes/lexa.mjs + commun.mjs,
   docs/maquettes/habillage-lexa-16-septembre.html.
   ============================================================ */
/* Nunito Sans n'est plus importée d'ici : `polices.css`, chargée par les
   gabarits avant cette feuille, la sert depuis le portail (EX-7). */

/* ---------- Jetons ---------- */
:root{
  --rouge:#DE182F; --rouge-fonce:#B8122A; --rouge-doux:#FBE3E6;
  --arsenic:#364046; --arsenic-fonce:#2B343A; --indigo:#1D3C57; --celadon:#2E8E8E; --orange:#FF8719;
  /* Les mêmes teintes, assombries pour PORTER DU TEXTE BLANC : l'orange de
     la charte (2,4:1) et le céladon (3,9:1) restent au décor — points,
     filets, graphes — et cèdent la place à ces deux tons (≥ 4,5:1, seuil
     AA) partout où un libellé s'écrit en blanc dessus (audit FB-10). */
  --orange-texte:#B85700; --celadon-texte:#2A7F7F;
  --cramoisi:#A8102A; --platine:#EBEBE2;

  --mmd-red:var(--rouge); --mmd-arsenic:var(--arsenic);

  --s-app:#F5F5F5; --s-1:#FFFFFF; --s-2:#F8F9FA; --s-3:#F1F3F5;
  --s-inv:var(--arsenic); --s-inv-2:var(--arsenic-fonce);
  /* ink-4 (aides, axes, puces) et ink-inv (navigation sur arsenic) sont du
     texte : 4,7:1 et 4,95:1 au lieu de 3,15:1 et 3,63:1 (FB-10). */
  --ink-1:#1F2431; --ink-2:#4E5A62; --ink-3:#7B868D; --ink-4:#6B757C; --ink-inv:#A3B3C4;
  --line:#F1F3F5; --line-2:#DEE2E6; --line-inv:rgba(255,255,255,.08);

  /* États : pastilles pleines (fond plein, texte blanc) ; les paires
     fond clair / texte foncé restent pour les alertes et deltas. */
  --ok:#2E8E8E; --ok-bg:#E1F0F0; --ok-bd:#BFE0E0;
  --warn:#D96C08; --warn-bg:#FFEBDA; --warn-bd:#FFD3AE;
  --serious:#C87A12; --serious-bg:#FBEADF; --serious-bd:#F0CBAE;
  --crit:#A8102A; --crit-bg:#F6DDE1; --crit-bd:#EFC0C8;
  --info:#1D3C57; --info-bg:#E2E8EE; --info-bd:#C2D0DC;

  --font:"Avenir LT Pro","Avenir Next","Avenir","Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-micro:10px; --t-mini:11px; --t-xs:11px; --t-sm:12px; --t-md:12.5px; --t-lg:14px;
  --t-xl:16px; --t-2xl:20px; --t-hero:30px;

  --r-sm:4px; --r-md:4px; --r-lg:4px; --r-pill:30px;
  --ombre:0 -3px 31px 0 rgba(0,0,0,.05),0 6px 20px 0 rgba(0,0,0,.02);
  --ombre-3:0 8px 24px rgba(28,34,38,.12),0 2px 6px rgba(28,34,38,.08);
  --e-1:var(--ombre); --e-2:var(--ombre); --e-3:var(--ombre-3); --e-4:var(--ombre-3);

  --rail:56px; --nav:184px; --top:70px; --statut:28px;
  --fs:13px; --row:11px; --btn:32px; --pad:20px;
}
html[data-densite="confort"]{--fs:13.5px;--row:14px;--btn:34px;--pad:24px}

body{font-size:var(--fs);line-height:1.5;color:var(--ink-1);background:var(--s-app);
     font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--rouge);outline-offset:2px;border-radius:4px}

/* ============================================================
   Connexion — deux volets (habillage/connexion.js)
   ============================================================ */
body.connexion{display:block;place-items:normal;background:var(--s-1);overflow:auto}
.connexion-lexa{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.connexion-lexa .volet{background:var(--arsenic);color:#fff;display:flex;flex-direction:column;
  justify-content:center;padding:64px;gap:24px;position:relative;overflow:hidden}
.connexion-lexa .volet::after{content:"";position:absolute;right:-120px;bottom:-120px;width:360px;
  height:360px;border-radius:50%;background:rgba(255,255,255,.05)}
.connexion-lexa .volet .mark{width:48px;height:48px;border-radius:4px;background:var(--rouge);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:22px}
.connexion-lexa .volet h1{font-size:26px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.connexion-lexa .volet p{font-size:15px;color:#C9D2DB;max-width:420px;line-height:1.6}
.connexion-lexa .volet .soc{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-inv)}
.connexion-lexa form.login{width:100%;max-width:460px;margin:0 auto;padding:64px;box-shadow:none;border-radius:0;
  display:flex;flex-direction:column;justify-content:center;gap:0;background:var(--s-1)}
.connexion-lexa form h2{font-size:18px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.connexion-lexa form .aide{color:var(--ink-3);font-size:12.5px;margin-bottom:12px}
.connexion-lexa form .aide code{font-family:inherit;font-weight:700;color:var(--ink-1)}
.connexion-lexa label{display:block;font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--ink-2);margin:12px 0 6px}
.connexion-lexa input{height:42px;border:1px solid var(--line-2);border-radius:4px;padding:0 14px;background:var(--s-1)}
.connexion-lexa input:focus{outline:2px solid var(--rouge);outline-offset:-1px;border-color:var(--rouge);box-shadow:none}
.connexion-lexa button#ok{height:44px;margin-top:20px;background:var(--rouge);border-radius:4px;font-size:13px;
  font-weight:600;box-shadow:none}
.connexion-lexa button#ok:hover:not(:disabled){background:var(--rouge-fonce)}
.connexion-lexa .motif{background:var(--info-bg);color:var(--info);border:1px solid var(--info-bd);border-radius:4px;
  padding:10px 12px;font-size:12.5px;margin-bottom:8px}
.connexion-lexa .err{background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit-bd);
  font-size:12.5px;font-weight:600;padding:9px 11px;border-radius:4px;margin-top:14px}
.comptes-demo{margin-top:28px;border-top:1px solid var(--line-2);padding-top:16px;display:flex;flex-direction:column;gap:4px}
.comptes-demo .cap{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.comptes-demo .compte{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 10px;
  border-radius:4px;background:var(--s-2);color:var(--ink-1);font:inherit;cursor:pointer}
.comptes-demo .compte:hover{background:var(--s-3)}
.comptes-demo .compte.inactif{opacity:.55}
.comptes-demo .avx{width:30px;height:30px;border-radius:50%;background:var(--arsenic);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:0 0 auto}
.comptes-demo .txt{display:flex;flex-direction:column;min-width:0}
.comptes-demo .txt b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comptes-demo .txt small{font-size:11px;color:var(--ink-3)}

/* ============================================================
   Coquille — barre sombre 240 px (rail 56 + nav 184), en-tête 70 px
   ============================================================ */
.app{grid-template-columns:var(--rail) var(--nav) minmax(0,1fr);
     grid-template-rows:var(--top) 1fr var(--statut);
     grid-template-areas:"rail nav top" "rail nav main" "rail nav st"}
#filter-bar{display:none}
.app.avec-bandeau{padding-top:30px}

/* --- Rail des domaines --- */
.rail{background:var(--arsenic-fonce);border-right:0;padding:8px 0;gap:4px;box-shadow:var(--ombre);z-index:7}
.rail button{width:40px;height:40px;border-radius:4px;color:var(--ink-inv);font-size:17px;opacity:.85;
  filter:grayscale(1) brightness(1.6)}
.rail button:hover{background:rgba(255,255,255,.08);color:#fff;opacity:1;filter:none}
.rail button.on{color:#fff;background:var(--rouge);opacity:1;filter:none}
.rail button.on::before{display:none}
.rail button[data-info]:hover::after{left:48px;background:var(--arsenic);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;border-radius:4px;box-shadow:var(--ombre-3)}

/* --- Navigation des modules --- */
.nav{background:var(--arsenic);border-right:0;color:var(--ink-inv);box-shadow:var(--ombre);z-index:6}
.nav-tete{height:var(--top);display:flex;flex-direction:column;justify-content:center;
  padding:0 20px;background:var(--arsenic-fonce);flex:0 0 auto}
.nav-tete h2{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;line-height:1.2}
.nav-tete p{font-size:10px;color:var(--ink-inv);letter-spacing:.04em;margin-top:3px}
.nav-corps{padding:8px 0 12px}
.nav-grp{margin-bottom:8px}
.nav-grp>h3{padding:12px 20px 6px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-inv);opacity:.8;font-weight:600;margin:0}
.nav-item{padding:11px 20px;border-radius:0;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-inv);line-height:1.3;gap:10px}
.nav-item:hover{background:rgba(255,255,255,.04);color:#fff}
.nav-item.on{background:var(--arsenic-fonce);color:#fff;font-weight:700}
.nav-item.on::before{display:none}
.nav-item .cpt{background:rgba(255,255,255,.1);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;
  border-radius:30px;min-width:20px}
.nav-item.on .cpt{background:var(--rouge);color:#fff}
.nav-item .pt{width:6px;height:6px;flex:0 0 6px}
.nav-pied{border-top:1px solid rgba(255,255,255,.08);background:transparent;padding:14px 20px;
  color:var(--ink-inv);font-size:11px}
.nav-pied:empty{display:none}
.nav-note{color:var(--ink-inv)}
.nav-note b{color:#fff}
.jauge-obj .l{color:var(--ink-inv)}
.jauge-obj .l b{color:#fff}
.nav-pied .piste{background:rgba(255,255,255,.12)}
.nav-pied .piste i{background:var(--rouge)}
.jauge-obj.cliquable:hover{background:rgba(255,255,255,.06)}
.jauge-obj .definir{color:#fff}

/* --- En-tête 70 px blanc à ombre --- */
.topbar{background:var(--s-1);border-bottom:0;box-shadow:var(--ombre);padding:0 12px 0 0;gap:8px;z-index:5;position:relative}
.topbar .mark{width:44px;height:36px;flex:0 0 auto;margin:0 4px 0 12px;background:var(--rouge);
  border-radius:4px;font-size:18px;box-shadow:none}
.topbar .mark:hover{background:var(--rouge-fonce)}
.titre-app{border-right:1px solid var(--line-2);padding:0 16px 0 6px}
.titre-app b{color:var(--ink-1);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.titre-app span{color:var(--ink-4);letter-spacing:.04em;text-transform:none;font-size:10.5px}
.fil{color:var(--ink-3);font-size:12.5px;padding:0 16px}
.fil b{color:var(--ink-1);font-weight:600}
.fil i{opacity:.6}

.rech{width:min(360px,30vw);height:38px;background:var(--s-2);border:1px solid transparent;border-radius:30px;
  padding:0 14px 0 38px}
.rech:hover{background:var(--s-2);border-color:var(--line-2)}
.rech:focus-within{background:var(--s-1);border-color:var(--rouge);box-shadow:none}
.rech svg{left:15px;top:11px;color:var(--ink-4)}
.rech input{color:var(--ink-1);font-size:13px}
.rech input::placeholder{color:var(--ink-4)}
.kbd{color:var(--ink-3);border:0;background:var(--s-3);border-radius:4px;padding:2px 6px;font-size:10px}

.densite{background:var(--s-2);border:1px solid transparent;border-radius:30px;padding:3px;margin-left:8px}
.densite b{color:var(--ink-4)}
.densite button{color:var(--ink-3);border-radius:30px;padding:4px 10px}
.densite button:hover{color:var(--ink-1)}
.densite button.on{background:var(--arsenic);color:#fff}

.top-actions{margin-left:4px}
.ic-btn{width:44px;height:44px;border-radius:50%;color:var(--ink-2)}
.ic-btn:hover{background:var(--s-3);color:var(--ink-1)}
.ic-btn svg{width:18px;height:18px}
.ic-btn .pastille-n{top:6px;right:6px;min-width:16px;height:16px;border:0;font-size:10px;border-radius:8px}

.user{height:var(--top);margin-left:4px;padding:0 14px;border-left:0;border-radius:0;background:var(--s-2);gap:10px}
.user:hover{background:var(--s-3)}
.user .av{width:30px;height:30px;flex:0 0 30px;background:var(--arsenic);font-size:11px;font-weight:700}
.user>div{min-width:0}
.user .nm{color:var(--ink-1);font-size:13px;font-weight:600;white-space:nowrap}
.user .rl{color:var(--ink-3);font-size:11px;white-space:nowrap}
.user .out{color:var(--ink-3);font-size:16px}
.user .out:hover{color:var(--rouge)}

/* --- Zone principale --- */
.main{background:var(--s-app)}
.tete{background:transparent;border-bottom:0;padding:24px 12px 0;flex-wrap:wrap;gap:12px}
.tete h1{font-size:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.tete .sous{font-size:12.5px;color:var(--ink-3);margin-top:3px;text-transform:none;letter-spacing:0}
.corps{padding:24px 12px 60px;gap:24px}
.corps.plein{padding:24px 12px 60px;display:block;overflow:auto}
.corps>*{animation:none}

/* --- Barre d'état, claire --- */
.statusbar{background:var(--s-1);color:var(--ink-3);border-top:1px solid var(--line-2);font-size:11px;padding:0 20px}
.statusbar b{color:var(--ink-1);font-weight:600}
.pt-live{background:var(--celadon);box-shadow:0 0 0 3px rgba(46,142,142,.2)}
.statusbar .item b[style]{color:var(--celadon)!important}

/* ============================================================
   Boutons, puces, jetons, segments
   ============================================================ */
.btn{height:auto;min-height:var(--btn);padding:6px 12px;border-radius:4px;border:1px solid var(--line-2);
  background:var(--s-1);font-size:13px;font-weight:500;color:var(--ink-1);box-shadow:none;line-height:1.4}
.btn:hover{background:var(--s-2);border-color:var(--line-2);box-shadow:none}
.btn:active{transform:none}
.btn.primaire{background:var(--rouge);border-color:var(--rouge);color:#fff}
.btn.primaire:hover{background:var(--rouge-fonce);border-color:var(--rouge-fonce)}
.btn.sombre{background:var(--arsenic);border-color:var(--arsenic);color:#fff}
.btn.sombre:hover{background:var(--arsenic-fonce)}
.btn.fantome{border-color:transparent;background:none;color:var(--ink-2)}
.btn.fantome:hover{background:var(--s-3)}
.btn.danger{color:#fff;border-color:var(--cramoisi);background:var(--cramoisi)}
.btn.danger:hover{background:#8E0D23;border-color:#8E0D23}
.btn.mini,.alerte .btn.mini{min-height:24px;padding:2px 8px;font-size:10.5px}
.mini-btn{height:24px;border-radius:4px;font-size:10px;letter-spacing:.05em;color:var(--ink-3);border-color:var(--line-2)}
.mini-btn:hover,.mini-btn.on{background:var(--s-3);color:var(--ink-1);border-color:var(--line-2)}

.puce{font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:4px 8px;border-radius:4px;border:0;color:#fff;
  background:var(--ink-4)}
.puce.ok{background:var(--celadon-texte);color:#fff}
.puce.warn{background:var(--orange-texte);color:#fff}
.puce.info{background:var(--info);color:#fff}

.jeton{height:28px;padding:0 12px;border-radius:30px;border:1px solid var(--line-2);background:var(--s-1);
  font-size:12px;font-weight:500;color:var(--ink-2);box-shadow:none}
.jeton:hover{border-color:var(--ink-4);color:var(--ink-1)}
.jeton.on{background:var(--arsenic);border-color:var(--arsenic);color:#fff}
/* Le jeton coloré en ligne (initiales d'un compte, administration) : un médaillon rond. */
.jeton[style*="background"]{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  padding:0;border:0;border-radius:50%;color:#fff;font-size:11px;font-weight:700;vertical-align:middle}
.seg{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.seg.on{color:var(--ink-1);border-bottom-color:var(--rouge)}
.segments{background:transparent;border-bottom:1px solid var(--line-2);height:40px}
.seg.lien{text-transform:none;letter-spacing:0}

/* --- Barre de filtres --- */
.barre{background:transparent;border-bottom:0;padding:0 12px 0;gap:8px}
.tete+.barre{padding-top:12px}
.barre .lib{font-size:10px;letter-spacing:.05em;color:var(--ink-3)}
.barre .meta{font-size:12px;color:var(--ink-3)}
.barre .sep{background:var(--line-2)}
.barre .filtre{font-size:12px;color:var(--ink-3)}
.barre .filtre input[type=date],.rech-inline,.rech-saisie{border:1px solid var(--line-2);border-radius:4px;
  height:36px;padding:0 12px;font-size:12.5px;background:var(--s-1)}
.barre .filtre input[type=date]:focus,.rech-inline:focus,.rech-saisie:focus{outline:2px solid var(--rouge);outline-offset:-1px}

/* ============================================================
   Cartes (panneaux), KPI, hero
   ============================================================ */
.pan{border:0;border-radius:4px;box-shadow:var(--ombre);background:var(--s-1)}
.pan:hover{box-shadow:var(--ombre)}
.pan-h{padding:20px 20px 0;border-bottom:0;gap:12px}
.pan-h h3{font-size:16px;font-weight:500;letter-spacing:0;text-transform:none}
.pan-h .st{font-size:12.5px;color:var(--ink-3)}
.pan-b{padding:14px 20px 20px}
.pan-b.serre{padding:0 8px 8px}
.pan-b.serre .vide{padding:32px}

/* Tuile pleine Lexa : fond de couleur, médaillon translucide 64 px,
   grand cercle décoratif, texte blanc. Les tuiles se colorent à la
   suite (rouge, indigo, céladon, arsenic). */
.kpis{gap:24px}
.kpi{border:0;border-radius:4px;box-shadow:var(--ombre);padding:20px;min-height:0;color:#fff;
  display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;row-gap:0;align-items:center;
  background:var(--rouge);transition:none}
.kpi:hover{transform:none;box-shadow:var(--ombre);border-color:transparent}
.kpi::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:rgba(255,255,255,.06);pointer-events:none}
.kpi::before{content:"";position:static;width:64px;height:64px;grid-row:1/3;grid-column:1;border-radius:50%;
  background:rgba(255,255,255,.12);display:block;
  /* icône générique : une tuile sans icône dans le DOM réel */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 14 4-4 3 3 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:30px 30px}
.kpi>div{min-width:0;grid-column:2}
.kpi .lb{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff;opacity:.95;
  white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.kpi .vl{font-size:20px;font-weight:600;letter-spacing:0;line-height:1.2;margin:4px 0 0;color:#fff}
.kpi .vl small{color:rgba(255,255,255,.8);font-size:11px}
.kpi .bas{margin-top:8px;gap:8px;flex-wrap:wrap;grid-column:2}
.kpi .sub{color:rgba(255,255,255,.8);font-size:12px;white-space:normal}
.kpi .delta{background:rgba(255,255,255,.2);color:#fff;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:600}
.kpi .delta.pos,.kpi .delta.neg,.kpi .delta.neutre{background:rgba(255,255,255,.2);color:#fff}
.kpi .spark{right:16px;top:14px;opacity:.9;filter:brightness(0) invert(1)}
.kpis .kpi:nth-child(4n+2){background:var(--indigo)}
.kpis .kpi:nth-child(4n+3){background:var(--celadon-texte)}
.kpis .kpi:nth-child(4n+4){background:var(--arsenic)}
.kpi.alerte,.kpis .kpi.alerte{border:0;background:var(--orange-texte)}
.kpi.alerte .vl{color:#fff}
.kpi.alerte::before{position:static;left:auto;top:auto;bottom:auto;width:64px;height:64px;grid-row:1/3;
  background-color:rgba(255,255,255,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.5 20h19L12 4z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E")}

/* Chiffre directeur : la grande tuile rouge. */
.hero{background:var(--rouge);border:0;border-radius:4px;box-shadow:var(--ombre);padding:20px;min-height:0}
.hero::after{width:220px;height:220px;right:-70px;top:-70px;background:rgba(255,255,255,.06);border-radius:50%}
.hero .lb{font-size:14px;font-weight:600;letter-spacing:.04em;color:#fff;opacity:.95}
.hero .val{font-size:30px;font-weight:600;letter-spacing:0;margin:6px 0 2px}
.hero .val small{color:rgba(255,255,255,.8)}
.hero .sous{color:rgba(255,255,255,.8);font-size:12px}
.hero .obj .l{color:rgba(255,255,255,.8)}
.hero .piste{background:rgba(255,255,255,.2)}
.hero .piste i{background:#fff}
.hero .obj.cliquable:hover{background:rgba(255,255,255,.1)}
.hero .obj-vide{color:#fff;border-color:rgba(255,255,255,.4)}
.hero .delta.pos,.hero .delta.neg{background:rgba(255,255,255,.2);color:#fff}

.delta{font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px}

/* Écritures comptables, deltas, graphiques */
.ecr{border:0;border-radius:4px;background:var(--s-2);margin:12px 0}
.ecr-tete{background:var(--s-3);border-bottom:0;padding:8px 12px;font-size:12px}
.ecr-lignes td{padding:4px 12px;border-bottom:1px solid var(--s-1)}
.lg{font-size:12px;font-weight:500;color:var(--ink-2)}
.lg .cle,.bulle .r .cle{border-radius:50%;width:10px;height:10px;flex:0 0 10px}
.grille-l{stroke:var(--s-3)}
.axe-t{fill:var(--ink-4);font-weight:500;font-size:10px}
.bulle{background:var(--arsenic);border-radius:4px;box-shadow:var(--ombre-3)}
.bh .et{font-weight:500}
.bh .tr i{border-radius:4px;height:12px}
.b-ligne em{border-radius:50%}
.b-ligne:hover{background:var(--s-2)}

/* ============================================================
   Tableaux « card-list » : lignes espacées de 12 px sur fond #F8F9FA
   ============================================================ */
table{border-spacing:0 12px;font-size:12.5px}
thead th{background:var(--s-1);font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink-1);
  padding:4px 14px;border-bottom:0;top:0}
thead th.triable:hover{color:var(--rouge);background:var(--s-1)}
thead th .fl{font-size:9px}
thead th.tri .fl{color:var(--rouge);opacity:1}
tbody td{padding:var(--row) 12px;border-bottom:0;background:var(--s-2)}
tbody td:first-child{border-radius:4px 0 0 4px}
tbody td:last-child{border-radius:0 4px 4px 0}
tbody tr:hover td{background:var(--s-3)}
tbody tr:hover{background:transparent}
tbody tr.sel td{background:var(--rouge-doux)}
tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--rouge)}
tbody tr.modifie td{background:#FFF4E8}
tbody tr.modifie:hover td{background:#FFEBDA}
tfoot td{border-top:0;background:var(--s-3);font-weight:700;padding:11px 12px}
tfoot td:first-child{border-radius:4px 0 0 4px}
tfoot td:last-child{border-radius:0 4px 4px 0}
.vide{padding:40px 20px;color:var(--ink-3);font-size:13px}
.scinde tr.groupe td{background:transparent;border-radius:0;padding:4px 12px 0;color:var(--ink-3)}
.scinde tr.groupe:hover td{background:transparent}
.scinde .sous-ligne{color:var(--ink-3)}

/* Les tables qui ne sont PAS des listes : éditeur de proforma, écritures,
   lignes d'un tableau de détail. Elles gardent leurs filets serrés. */
.ed-lignes,.ecr-lignes{border-spacing:0}
.ed-lignes tbody td,.ecr-lignes tbody td{background:transparent;border-radius:0}
.ed-lignes tbody tr:hover td{background:var(--s-2)}
.ecr-lignes tbody tr:hover td{background:transparent}
.ed-lignes th{background:var(--s-2);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  padding:8px;border-bottom:1px solid var(--line-2)}
.ed-lignes td{padding:4px 8px;border-bottom:1px solid var(--s-3)}

.cell-org .n{font-weight:600}
.sigle,.mono{border-radius:4px}
.cell-org .s{color:var(--ink-3)}

/* --- Pastilles de statut : pleines --- */
.pastille{font-size:11px;font-weight:600;padding:4px 8px;border-radius:4px;border:0;color:#fff;gap:0;line-height:1.2}
.pastille::before{display:none}
.p-gris{background:#6B757C;color:#fff}
.p-bleu{background:var(--info);color:#fff}
.p-vert{background:var(--celadon-texte);color:#fff}
.p-rouge{background:var(--cramoisi);color:#fff}
.p-ambre{background:var(--orange-texte);color:#fff}
.p-orange{background:var(--serious);color:#fff}
.etiq{font-size:11px;font-weight:600;background:var(--s-3);border:0;border-radius:4px;padding:3px 8px;color:var(--ink-2)}
.jeton-visa{border-radius:30px;font-size:10.5px}
.jeton-visa.ok{background:var(--celadon-texte);border-color:var(--celadon-texte);color:#fff}
.jauge .p{width:60px;height:6px;border:0;background:var(--s-3)}
.cpt-inv{height:30px;border-radius:4px;border-color:var(--line-2)}
.cpt-inv:focus{border-color:var(--rouge);box-shadow:none;outline:2px solid var(--rouge);outline-offset:-1px}
.sel-info{background:var(--rouge);color:#fff;border:0;border-radius:30px;padding:3px 10px;font-size:11px}
.coche{accent-color:var(--rouge);width:15px;height:15px}
.ic-tbl{color:var(--ink-3);opacity:.6;border-radius:4px}
.ic-tbl:hover{background:var(--s-1);color:var(--rouge)}
td .lien{color:var(--rouge)}
.pers .a{border-radius:50%}

/* ============================================================
   Vue scindée (comptes clients), fiche, onglets, sections
   ============================================================ */
.scinde{gap:24px;background:transparent;height:auto;min-height:100%;overflow:visible}
.scinde .colonne{border-right:0;background:var(--s-1);border-radius:4px;box-shadow:var(--ombre);overflow:hidden;
  max-height:calc(100vh - var(--top) - var(--statut) - 48px)}
.scinde .colonne .defile{padding:0 8px 8px}
.segments{padding:0 12px;flex:0 0 auto}
.detail{border-radius:4px;box-shadow:var(--ombre);background:var(--s-1);
  max-height:calc(100vh - var(--top) - var(--statut) - 48px)}
.d-tete{padding:20px;border-bottom:1px solid var(--line)}
.d-haut h2{font-size:16px;font-weight:600}
.d-haut .meta{color:var(--ink-3);font-size:12px}
.mono{width:40px;height:40px;flex:0 0 40px}
.d-stats{gap:12px;background:transparent;border:0;border-radius:0;overflow:visible}
.d-stat{background:var(--s-2);border-radius:4px;padding:10px 12px}
.d-stat .l{font-size:10px;letter-spacing:.05em;color:var(--ink-3);font-weight:600}
.d-stat .v{font-size:15px;font-weight:700}

.f-onglets{padding:0 12px;border-bottom:1px solid var(--line-2);gap:0}
.f-onglets a{padding:10px 12px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.f-onglets a.on{color:var(--ink-1);border-bottom-color:var(--rouge)}
.f-onglets a .c{color:var(--ink-4)}
.f-deux>div:first-child{border-right-color:var(--line)}
.sec{padding:16px 20px;border-bottom:1px solid var(--line)}
.sec-t{font-size:10px;letter-spacing:.08em;color:var(--ink-3);font-weight:700;margin-bottom:10px}
.sec-t a{color:var(--rouge);font-size:11px;letter-spacing:0;text-transform:none}
.d-vide{color:var(--ink-3)}
.g-ligne{font-size:12px}
.g-piste{height:8px;border:0;background:var(--s-3);border-radius:30px}
.g-legende{font-size:11px}
.g-legende em{border-radius:50%}
.ct{padding:8px 0}
.ct+.ct{border-top:1px solid var(--line)}
.ct .av{border-radius:50%;width:30px;height:30px;flex:0 0 30px}
.ct .nm{font-weight:600}
.pl{font-size:12.5px;padding:8px 0}
.pl+.pl{border-top:1px solid var(--line)}

/* --- Fil d'activité à bulles --- */
.frise{padding-left:22px;margin-left:8px;border-left:2px solid var(--line-2)}
.frise::before{display:none}
.ev{padding-bottom:0;margin-bottom:18px}
.ev:last-child{margin-bottom:0}
.ev::before{left:-30px;top:6px;width:10px;height:10px;border:3px solid var(--rouge);background:var(--s-1)}
.ev.c1::before{border-color:var(--rouge)}.ev.c2::before{border-color:var(--indigo)}
.ev.c3::before{border-color:var(--serious)}.ev.c4::before{border-color:var(--celadon)}
.ev .t{background:var(--s-3);border-radius:4px 4px 0 0;padding:10px 12px 0;font-size:12.5px;font-weight:600;position:relative}
.ev .t::before{content:"";position:absolute;left:-8px;top:10px;border:6px solid transparent;border-right:8px solid var(--s-3);border-left:0}
.ev .d{background:var(--s-3);border-radius:0 0 4px 4px;padding:2px 12px 10px;margin-top:0;font-size:11.5px;color:var(--ink-3)}
.ev .t:only-child{border-radius:4px;padding-bottom:10px}
.ev .t+.d{padding-top:4px}

/* ============================================================
   Kanban (pipeline)
   ============================================================ */
.kanban{gap:12px;background:transparent}
.kcol{background:var(--s-3);border-radius:4px;min-width:240px}
.kcol.survol{background:var(--rouge-doux)}
.kcol>h3{background:var(--s-1);border-bottom:0;border-radius:4px 4px 0 0;padding:12px 14px}
.kcol>h3 .t{font-size:10px;letter-spacing:.06em}
.kcol>h3 .t em{border-radius:50%}
.kcol>h3 .s{font-size:16px;font-weight:600}
.klist{padding:12px;gap:12px}
.opp{border:0;border-left:3px solid var(--ink-4);border-radius:4px;box-shadow:var(--ombre);padding:12px}
.opp:hover{transform:none;box-shadow:var(--ombre-3)}
.opp .n{font-weight:600;font-size:12.5px}
.opp .c{color:var(--ink-3)}
.opp .p{border:0;background:var(--s-3);border-radius:30px;padding:1px 8px}

/* ============================================================
   Poste magasinier : saisie du jour, arbre du catalogue
   ============================================================ */
.fil-etapes{background:transparent;border-bottom:0;padding:12px 12px 0}
.fil-et{border-radius:30px;border-color:var(--line-2);font-size:12px;padding:6px 14px}
.fil-et.on{background:var(--arsenic);border-color:var(--arsenic)}
.fil-et.on .n{background:var(--rouge)}
.fil-et.faite .n{background:var(--ok-bg);color:var(--ok)}
.etape{padding:24px 12px}
.etape .q{font-size:16px;font-weight:600}
.etape .q-s{font-size:12.5px;color:var(--ink-3)}
.carte-choix{border:0;border-radius:4px;box-shadow:var(--ombre);padding:20px}
.carte-choix:hover:not(.off){transform:none;box-shadow:var(--ombre-3);outline:1px solid var(--rouge)}
.carte-choix .t{font-size:14px;font-weight:600}
.carte-choix .c{color:var(--rouge)}
.pas input{height:34px;border-radius:4px;border-color:var(--line-2)}
.pas input:focus{outline:2px solid var(--rouge);outline-offset:-1px;border-color:var(--rouge)}
.pas .mo{height:34px;width:30px;border-radius:4px;border-color:var(--line-2);background:var(--s-1)}
.pas .mo:hover{background:var(--arsenic);border-color:var(--arsenic)}
.pied-saisie{border-top:1px solid var(--line-2);background:var(--s-1);padding:12px;border-radius:0 0 4px 4px}
.arbre .arb-n{padding:10px 14px;font-size:12.5px;border-left-width:3px}
.arbre .arb-n:hover{background:var(--s-2)}
.arbre .arb-n.on{background:var(--rouge-doux);border-left-color:var(--rouge)}
.arbre .arb-n .cpt{border-radius:30px;background:var(--s-3)}
.arbre .n1{background:var(--s-2);border-top:1px solid var(--line)}
.arbre .n0{border-bottom:1px solid var(--line)}
.arbre .deduite{color:var(--serious)}

/* ============================================================
   Modales et formulaires
   ============================================================ */
.voile{background:rgba(28,34,38,.45);backdrop-filter:none}
.modale{border-radius:4px;box-shadow:var(--ombre-3);width:min(880px,100%);max-height:calc(100vh - 40px)}
.modale.large{width:min(1040px,100%)}
.modale>h2{padding:16px 20px;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}
.modale>h2 .x{color:var(--ink-3);font-size:22px;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;padding:0}
.modale>h2 .x:hover{background:var(--s-3);color:var(--rouge)}
.mbody{padding:20px;background:var(--s-1)}
.mtabs{margin:-20px -20px 20px;padding:0 12px;background:var(--s-1);border-bottom:1px solid var(--line-2)}
.mtabs button{padding:12px 12px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.mtabs button:hover{background:transparent;color:var(--ink-1)}
.mtabs button.on{color:var(--ink-1);border-bottom-color:var(--rouge)}
.mfoot{padding:12px 20px;border-top:1px solid var(--line);background:var(--s-2);flex-wrap:wrap}
.champs{gap:14px 24px}
.champ label{font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink-2);margin-bottom:6px}
.champ input,.champ select,.champ textarea{height:36px;border:1px solid var(--line-2);border-radius:4px;
  padding:0 12px;background:var(--s-1);font-size:13px}
.champ textarea{height:84px;padding:8px 12px}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--rouge);box-shadow:none;
  outline:2px solid var(--rouge);outline-offset:-1px}
.champ input[readonly]{background:var(--s-2);color:var(--ink-2)}
.champ select[multiple]{border:1px solid var(--line-2);border-radius:4px;background:var(--s-1)}
.champ select[multiple] option:checked{background:var(--arsenic);color:#fff}
.aide{font-size:11.5px;color:var(--ink-3)}
.champ .aide{margin-top:4px}
.champ>div[style]{font-weight:600}

/* --- Alertes (cloche) --- */
.alerte{border:0;border-radius:4px;padding:12px 14px;gap:12px}
.alerte .ic{border-radius:50%;width:24px;height:24px;flex:0 0 24px;font-weight:700}
.alerte .t{font-size:12.5px;font-weight:600}
.alerte .d{font-size:11.5px}
.a-crit{background:var(--crit-bg);color:var(--crit)}
.a-warn{background:var(--warn-bg);color:var(--warn)}
.a-info{background:var(--info-bg);color:var(--info)}

/* ============================================================
   Éditeur de proforma (feuille de document)
   ============================================================ */
.feuille{border:0;border-radius:4px;box-shadow:var(--ombre)}
.f-tete{padding:20px;border-bottom:1px solid var(--line)}
.f-tete h3{font-size:16px;font-weight:600}
.f-tete .rf{color:var(--ink-3);font-size:12px}
.f-tete .em .l{font-size:10px;letter-spacing:.05em;color:var(--ink-3);font-weight:600}
.f-tete .em .v{font-size:13px;font-weight:700}
.f-grille{background:var(--line);border-bottom:1px solid var(--line)}
.f-champ{padding:10px 20px}
.f-champ label{font-size:10px;letter-spacing:.05em;color:var(--ink-3);font-weight:600;margin-bottom:4px}
.f-champ input,.f-champ select{font-size:13px;font-weight:600;padding:3px 0}
.f-champ input:focus,.f-champ select:focus{border-bottom-color:var(--rouge);outline:none}
.ed-lignes input{height:30px;border-radius:4px}
.ed-lignes input:hover{border-color:var(--line-2)}
.ed-lignes input:focus{border-color:var(--rouge);outline:none}
.ed-lignes .sup{border-radius:50%;width:26px;height:26px;display:inline-grid;place-items:center;padding:0}
.ed-lignes .sup:hover{background:var(--rouge-doux);color:var(--rouge)}
.ed-vide{padding:32px;border-bottom:1px solid var(--line)}
.ed-ajout{background:var(--s-2);border-bottom:1px solid var(--line);padding:12px 20px;gap:10px}
.ed-ajout select{height:36px;border-radius:4px;border-color:var(--line-2);padding:0 12px;min-width:0;width:0;flex:1 1 auto}
.ed-ajout .btn{flex:0 0 auto}
.ed-totaux{background:var(--s-2);padding:16px 20px;gap:32px;border-radius:0 0 4px 4px}
.ed-tot .l{font-size:10px;letter-spacing:.05em;color:var(--ink-3);font-weight:600}
.ed-tot .v{font-size:15px;font-weight:700}
.ed-tot.fort .v{font-size:20px;color:var(--rouge)}
.ed-tot.mention .l,.ed-tot.mention .v{color:var(--ink-3)}
.ed-lignes td.fige{color:var(--ink-1)}

/* ============================================================
   Administration — comptes, profils, grille de droits
   ============================================================ */
.barre-outils{margin-bottom:16px}
.grille-droits{gap:12px;padding:2px}
.module-droits{border:1px solid var(--line-2);border-radius:4px;padding:10px 12px 12px;background:var(--s-1)}
.module-droits legend{font-size:10px;letter-spacing:.07em;color:var(--ink-3);font-weight:700}
.case-droit{font-size:12.5px;padding:4px 2px;border-radius:4px}
.case-droit:hover{background:var(--s-2)}
.case-droit input{accent-color:var(--rouge)}
.case-droit.grisee{color:var(--ink-4)}
.grille-membres{gap:6px}
.avertissement{background:var(--warn-bg);border-left:3px solid var(--orange);border-radius:0 4px 4px 0;font-size:12.5px;color:var(--ink-1)}
.fiche-admin dt{font-size:10px;letter-spacing:.06em;color:var(--ink-3);font-weight:600}
.fiche-admin dd{font-weight:600;font-size:12.5px}
.fiche-admin h4{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:16px 0 8px}
.historique{border:0;border-radius:4px;background:var(--s-2)}
.historique li{border-bottom:1px solid var(--s-1);font-size:12.5px;padding:8px 12px}
.refus{background:var(--s-1);border:0;border-radius:4px;box-shadow:var(--ombre);padding:48px 32px}
.refus h2{font-size:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--rouge)}
.refus p{color:var(--ink-2)}

/* --- Groupes de taxation --- */
.tx-bloc{border:0;background:var(--s-2);border-radius:4px;padding:14px 16px}
.tx-coche input[type=checkbox]{accent-color:var(--rouge)}
.tx-apercu{border:1px dashed var(--line-2);background:var(--s-3);border-radius:4px;font-size:12px}

/* ============================================================
   Bandeau démo, notifications, barres de défilement
   ============================================================ */
.bandeau-demo{z-index:60;background:repeating-linear-gradient(135deg,#D96C08,#D96C08 14px,#C45F05 14px,#C45F05 28px);
  color:#fff;font-size:11.5px;letter-spacing:.02em}
.bandeau-demo b{letter-spacing:.1em}
.app.avec-bandeau .rail,.app.avec-bandeau .nav{margin-top:0}

#notif{top:calc(var(--top) + 16px);right:16px;bottom:auto;left:auto;transform:translateY(-6px);background:var(--arsenic);color:#fff;
  border-left:0;border-radius:4px;box-shadow:var(--ombre-3);font-size:12.5px;font-weight:500;padding:10px 14px;
  max-width:calc(100vw - 32px)}
#notif.on{transform:none}
body:has(.bandeau-demo) #notif{top:calc(var(--top) + 46px)}
#notif.ok{background:var(--celadon)}
#notif.err{background:var(--cramoisi)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D5D8DC;border:3px solid var(--s-app);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#B9BEC4}
.nav-corps::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-color:var(--arsenic)}
.tbl-zone::-webkit-scrollbar-thumb,.defile::-webkit-scrollbar-thumb,.d-corps::-webkit-scrollbar-thumb,
.mbody::-webkit-scrollbar-thumb{border-color:var(--s-1)}

/* ============================================================
   Responsive : sous 1180 px les grilles se resserrent, sous 900 px la
   barre sombre se replie (ouverture par la marque « F » de l'en-tête,
   voile .voile-nav posé par connexion.js) et les colonnes s'empilent.
   ============================================================ */
@media (max-width:1180px){
  .scinde{grid-template-columns:1fr}
  .scinde .colonne,.detail{max-height:none}
  .kpis{grid-template-columns:repeat(2,1fr)!important}
}
.voile-nav{display:none}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main" "st"}
  .rail,.nav{position:fixed;top:0;bottom:0;transform:translateX(-240px);transition:transform 220ms cubic-bezier(.4,0,.2,1);z-index:120}
  .rail{left:0;width:var(--rail)}
  .nav{left:var(--rail);width:var(--nav)}
  .app.avec-bandeau .rail,.app.avec-bandeau .nav{top:30px}
  body.nav-ouverte .rail,body.nav-ouverte .nav{transform:none}
  body.nav-ouverte .voile-nav{display:block;position:fixed;inset:0;background:rgba(28,34,38,.45);z-index:110}
  .topbar{padding:0 6px 0 0;gap:4px}
  .titre-app{display:none}
  .fil{display:none}
  .rech{width:auto;flex:1;min-width:0}
  .kbd,.densite,.user .nm,.user .rl{display:none}
  .user{padding:0 8px;background:transparent}
  .tete{padding:16px 12px 0}
  .tete h1{font-size:16px}
  .corps,.corps.plein{padding:16px 12px 40px;gap:16px}
  .corps>[class*="c"]{grid-column:span 12}
  .kpis{grid-template-columns:1fr!important}
  .champs,.f-grille{grid-template-columns:1fr}
  .d-stats{grid-template-columns:1fr 1fr}
  .kpi::before{width:52px;height:52px;flex-basis:52px}
  .connexion-lexa{grid-template-columns:1fr}
  .connexion-lexa .volet{padding:32px 24px;gap:14px;min-height:0}
  .connexion-lexa form.login{padding:24px}
  .modale{width:100%}
  #notif{left:16px;right:16px;max-width:none}
  /* L'éditeur de proforma suit la largeur de la modale : à 390 px le
     champ « Qté » faisait 25 px et les croix se superposaient (audit
     FB-17). Comme les tableaux de lecture, le tableau des lignes défile
     horizontalement et garde une largeur lisible. */
  #ed-corps{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #ed-corps .ed-lignes{min-width:720px}
}

/* Bascule FR/EN (16 octobre 2026). Sur la connexion, la règle `.login button`
   (bouton rouge pleine largeur) ne doit pas atteindre les deux pastilles. */
.login .langue button{width:auto;height:auto;margin:0;background:transparent;color:var(--ink-3)}
.login .langue button:hover:not(:disabled){background:transparent;color:var(--ink-1)}
.login .langue button.on{background:var(--arsenic);color:#fff}
/* En anglais le fil d'Ariane s'allonge : la recherche, qui cède la place
   la première (lexa-ux.css), devenait trop étroite pour « Ctrl K », qui
   débordait sur la densité. Le raccourci s'efface avec la place. */
.lx-search{overflow:hidden;container-type:inline-size}
@container (max-width:150px){.lx-search kbd{display:none}}