/* ============================================================
   static/css/lexa-ux.css — styles des comportements portés par
   lexa-ux.js (appliqué le 12 octobre 2026 ; source unique), repris de la maquette Lexa de référence
   (Maquette Lexa production : production/lexa-prod.css, src/themes.css,
   src/anime.css). Chargé après lexa.css ; toutes les classes neuves sont
   préfixées « lx- » pour ne croiser aucune classe du front réel.
   ============================================================ */

/* ---------- A1 : pastille de recherche de l'en-tête ---------- */
.lx-search{display:flex;align-items:center;gap:10px;height:38px;width:min(420px,40vw);margin-left:8px;
  border-radius:var(--r-pill);background:var(--s-2);padding:0 16px;color:var(--ink-4);font:inherit;font-size:var(--t-md);
  cursor:text;border:1px solid transparent;text-align:left;flex:0 1 auto;min-width:0}
.lx-search:hover{border-color:var(--line-2)}
.lx-search:focus-visible{outline:2px solid var(--rouge);outline-offset:1px}
.lx-search>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-search kbd,.lx-palette kbd{margin-left:auto;font-family:inherit;font-size:var(--t-micro);padding:2px 6px;border-radius:var(--r-md);
  background:var(--s-3);color:var(--ink-3);white-space:nowrap}
.lx-palette .lx-pied kbd{margin:0}

/* ---------- filtre de vue réel (#rech), sous le titre de page ---------- */
.lx-vue{padding:14px 12px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lx-vue:empty{display:none}
.lx-vue .rech{position:relative;width:260px;max-width:100%;height:36px;padding:0;border-radius:var(--r-md);background:var(--s-1);
  border:1px solid var(--line-2);display:flex;align-items:center}
.lx-vue .rech:hover{border-color:var(--ink-4);background:var(--s-1)}
.lx-vue .rech:focus-within{border-color:var(--rouge);box-shadow:0 0 0 3px var(--rouge-doux)}
.lx-vue .rech svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-4)}
.lx-vue .rech input{width:100%;height:100%;border:0;background:transparent;padding:0 12px 0 32px;font:inherit;font-size:var(--fs,12.5px);color:var(--ink-1);outline:0}
.lx-vue .rech .kbd{display:none}
.corps{padding-top:16px}

/* ---------- A1 : palette ---------- */
.lx-palette{position:fixed;inset:0;background:rgba(28,34,38,.45);z-index:95;display:flex;align-items:flex-start;justify-content:center;
  padding:80px 20px;animation:lx-fondu .15s ease}
.lx-palette .lx-boite{width:min(680px,100%);background:var(--s-1);border-radius:var(--r-md);box-shadow:var(--ombre-3);overflow:hidden;animation:lx-pop .15s ease}
.lx-palette .lx-champ{display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid var(--line);color:var(--ink-4)}
.lx-palette input{flex:1;min-width:0;height:54px;border:0;font:inherit;font-size:var(--t-lg);background:var(--s-1);color:var(--ink-1);outline:0}
.lx-palette .lx-res{max-height:60vh;overflow:auto;padding:8px 0}
.lx-palette .lx-grp{padding:10px 20px 4px;font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.lx-palette .lx-it{display:flex;align-items:center;gap:12px;width:100%;padding:9px 20px;text-align:left;border:0;background:none;color:var(--ink-1);
  font:inherit;font-size:var(--t-md);cursor:pointer}
.lx-palette .lx-it:hover,.lx-palette .lx-it.on{background:var(--s-2)}
.lx-palette .lx-it.on{box-shadow:inset 3px 0 0 var(--rouge)}
.lx-palette .lx-it .num{font-weight:700;white-space:nowrap;min-width:120px;text-align:left}
.lx-palette .lx-it .lib{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-palette .lx-it .ou{margin-left:auto;font-size:var(--t-xs);color:var(--ink-3);white-space:nowrap}
.lx-palette .lx-pvide{padding:24px 20px;color:var(--ink-3);text-align:left;font-size:var(--t-md)}
.lx-palette .lx-pied{padding:8px 20px;border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--ink-3);display:flex;gap:16px;flex-wrap:wrap}
.lx-palette .lx-pied .d{margin-left:auto}

/* ---------- F5 : alertes ancrées à la cloche ---------- */
.top-actions{position:relative}
.topbar:has(#lx-alertes){z-index:50}
#alertes-btn[aria-expanded="true"]{background:var(--s-2);color:var(--rouge)}
.lx-alertes{position:absolute;right:0;top:calc(100% + 14px);width:380px;background:var(--s-1);border-radius:var(--r-md);box-shadow:var(--ombre-3);
  z-index:40;overflow:hidden;text-align:left;color:var(--ink-1);animation:lx-pop .15s ease;transform-origin:top right}
.lx-alertes h3{padding:12px 16px;font-size:var(--t-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0}
.lx-alertes h3 small{display:block;font-size:var(--t-micro);font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-3);margin-top:2px}
.lx-alertes h3 button{font:inherit;font-size:var(--t-xs);color:var(--ink-3);text-transform:none;letter-spacing:0;font-weight:400;border:0;background:none;cursor:pointer;white-space:nowrap}
.lx-alertes h3 button:hover{color:var(--rouge)}
.lx-alertes .liste{max-height:min(60vh,520px);overflow:auto}
.lx-alertes .al{display:flex;gap:12px;width:100%;padding:12px 16px;text-align:left;border:0;border-bottom:1px solid var(--line);align-items:flex-start;
  background:none;font:inherit;color:inherit;cursor:pointer}
.lx-alertes .al:hover{background:var(--s-2)}
.lx-alertes .al .pt{width:8px;height:8px;border-radius:50%;background:var(--rouge);margin-top:6px;flex:0 0 8px}
.lx-alertes .al.info .pt{background:var(--info)}
.lx-alertes .al.lu .pt{background:var(--line-2)}
.lx-alertes .al.lu{color:var(--ink-3)}
.lx-alertes .al .tx{flex:1;min-width:0}
.lx-alertes .al b{display:block;font-size:var(--t-md)}
.lx-alertes .al small{color:var(--ink-3);font-size:var(--t-xs);display:block}
.lx-alertes .al .fleche{margin-left:auto;color:var(--ink-4);align-self:center}
.lx-alertes .constat{padding:10px 16px;border-bottom:1px solid var(--line);font-size:var(--t-xs);color:var(--ink-3);display:flex;gap:10px}
.lx-alertes .constat svg{flex:0 0 14px;margin-top:2px;color:var(--warn)}
.lx-alertes .constat b{color:var(--ink-1);display:block;font-size:var(--t-sm)}
.lx-alertes .constat.crit b,.lx-alertes .constat.crit svg{color:var(--crit)}
.lx-alertes .note{padding:8px 16px;font-size:var(--t-micro);color:var(--ink-4)}

/* ---------- toasts : pile Lexa, quatre états ---------- */
/* Au-dessus du voile des modales (200) : un message de validation ne
   doit pas s'afficher assombri derrière le formulaire (audit U3). */
#notif{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.lx-toasts{position:fixed;top:calc(var(--top) + 16px);right:16px;z-index:450;display:flex;flex-direction:column;gap:8px;pointer-events:none;
  max-width:min(420px,calc(100vw - 32px))}
body:has(.bandeau-demo) .lx-toasts{top:calc(var(--top) + 46px)}
.lx-toast{background:var(--s-inv);color:#fff;padding:10px 14px;border-radius:var(--r-md);box-shadow:var(--ombre-3);font-size:var(--t-md);
  display:flex;gap:10px;align-items:center;animation:lx-pop .15s ease;pointer-events:auto;line-height:1.4}
.lx-toast svg{flex:0 0 16px}
.lx-toast.ok svg{color:#7FD1C8}
.lx-toast.err{background:var(--crit)}
.lx-toast.warn{background:var(--warn)}
.lx-toast.info{background:var(--info)}
.lx-toast.sort{opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease}
.lx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- A2 / A3 : outils de tableau ---------- */
.lx-tbl-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 0 4px}
.pan .lx-tbl-tools{padding-left:14px;padding-right:14px}
.lx-input-ico{position:relative;flex:1 1 220px;max-width:420px}
.lx-input-ico svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-4);pointer-events:none}
.lx-input{width:100%;height:36px;padding:0 12px 0 32px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--s-1);
  color:var(--ink-1);font:inherit;font-size:var(--t-md);outline:0}
.lx-input:focus{border-color:var(--rouge);box-shadow:0 0 0 3px var(--rouge-doux)}
.lx-cpt,.lx-muted{font-size:var(--t-sm);color:var(--ink-3);white-space:nowrap}
.lx-grow{flex:1}
.lx-btn-ghost{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:0;border-radius:var(--r-md);background:transparent;
  color:var(--ink-2);font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer}
.lx-btn-ghost:hover{background:var(--s-3);color:var(--ink-1)}
.lx-tbl-pag{display:flex;align-items:center;gap:8px;justify-content:flex-end;font-size:var(--t-md);color:var(--ink-3);padding:4px 0 8px;flex-wrap:wrap}
.pan .lx-tbl-pag{padding-left:14px;padding-right:14px}
.lx-tbl-pag>.lx-muted{margin-right:auto}
.lx-pg{min-width:30px;height:30px;padding:0 6px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--s-1);color:var(--ink-2);
  font:inherit;font-size:var(--t-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.lx-pg:hover:not(:disabled){border-color:var(--ink-4);color:var(--ink-1)}
.lx-pg.on{background:var(--arsenic);color:#fff;border-color:var(--arsenic)}
.lx-pg:disabled{opacity:.45;cursor:default}
.lx-tbl-vide{padding:22px 14px;text-align:center;color:var(--ink-3);font-size:var(--t-md)}
tr.lx-masque{display:none!important}
tfoot.lx-pied-global td{opacity:.55}
tbody tr.lx-eclair td{animation:lx-eclair 1.6s ease}
/* Flèche ↕ des colonnes triables non triées (le ▼ réel reste dans le DOM). */
thead th.lx-triable:not(.tri) .fl{font-size:0}
thead th.lx-triable:not(.tri) .fl::after{content:"↕";font-size:9px;opacity:.35}
thead th.lx-triable:not(.tri):hover .fl::after{opacity:.7}

/* ---------- modale (export CSV) ---------- */
.lx-modale{position:fixed;inset:0;background:rgba(28,34,38,.45);z-index:96;display:flex;align-items:center;justify-content:center;padding:20px;animation:lx-fondu .15s ease}
.lx-panel{width:min(720px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:var(--s-1);border-radius:var(--r-md);box-shadow:var(--ombre-3);animation:lx-pop .15s ease}
.lx-ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.lx-ph h3{margin:0;font-size:var(--t-lg);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.lx-ph small{display:block;color:var(--ink-3);font-size:var(--t-xs);margin-top:3px}
.lx-x{border:0;background:none;font-size:22px;line-height:1;color:var(--ink-3);cursor:pointer}
.lx-pb{padding:16px 20px;overflow:auto}
.lx-pf{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.lx-csv{width:100%;min-height:280px;border:1px solid var(--line-2);border-radius:var(--r-md);padding:10px 12px;font-family:Consolas,monospace;font-size:12px;
  color:var(--ink-1);background:var(--s-2);resize:vertical}
.lx-btn{height:36px;padding:0 16px;border-radius:var(--r-md);font:inherit;font-size:var(--t-md);font-weight:600;cursor:pointer}
.lx-outline{border:1px solid var(--line-2);background:var(--s-1);color:var(--ink-2)}
.lx-primary{border:1px solid var(--rouge);background:var(--rouge);color:#fff}
.lx-primary:hover{background:var(--rouge-fonce)}

@keyframes lx-pop{from{transform:scale(.97);opacity:0}}
@keyframes lx-fondu{from{opacity:0}}
@keyframes lx-eclair{0%,40%{background:var(--rouge-doux)}}
@media (prefers-reduced-motion:reduce){.lx-palette,.lx-boite,.lx-alertes,.lx-toast,.lx-modale,.lx-panel{animation:none}tbody tr.lx-eclair td{animation:none}}

/* ---------- D1 : sous 900 px ---------- */
@media (max-width:900px){
  .lx-search{width:auto;flex:1;margin-left:0;min-width:0;max-width:none;padding:0 12px}
  .lx-search kbd{display:none}
  .lx-vue .rech{width:100%}
  .lx-palette{padding:56px 10px}
  .lx-palette .lx-it{flex-wrap:wrap;gap:4px 12px}
  .lx-palette .lx-it .ou{width:100%;margin-left:0}
  .lx-palette .lx-pied .d{display:none}
  .lx-alertes{position:fixed;right:8px;left:auto;top:calc(var(--top) + 6px);width:min(380px,calc(100vw - 16px))}
  .lx-toasts{left:16px;right:16px;max-width:none}
  .lx-input-ico{flex-basis:100%;max-width:none}
  .lx-tbl-pag{justify-content:flex-start}
  .lx-tbl-pag>.lx-muted{width:100%}
}
@media print{.lx-search,.lx-vue,.lx-palette,.lx-alertes,.lx-toasts,.lx-tbl-tools,.lx-tbl-pag,.lx-modale{display:none!important}tr.lx-masque{display:table-row!important}}

/* ============================================================
   Icônes de la référence (habillage/lexa-icones.js) : Font Awesome
   Light redessiné, trait 1,35, couleur du texte.
   ============================================================ */
/* E1 — médaillon 64 px à icône propre, à la place de l'icône générique de lexa.css. */
.kpi.lx-avec-ico::before,.kpi.alerte.lx-avec-ico::before{display:none!important}
.kpi>.lx-med,.hero>.lx-med{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;grid-row:1/3;grid-column:1;flex:0 0 auto;position:relative;z-index:1}
.lx-med svg{width:30px;height:30px}
.hero.lx-avec-ico{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:center}
.hero.lx-avec-ico>:not(.lx-med){grid-column:2;min-width:0}
/* Boutons : icône devant le libellé ; le glyphe d'origine reste dans le DOM, hors de la vue. */
.lx-glyphe{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
button.lx-a-ico,.btn.lx-a-ico,[role=button].lx-a-ico{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.lx-a-ico>.lx-bico{flex:0 0 auto}
.lx-ico-seul{gap:0}
.lx-ico-seul>.lx-bico{width:16px;height:16px}
.pl .tx.lx-a-ico>.lx-bico{vertical-align:-3px;margin-right:4px}
#fil i.lx-a-ico{opacity:1;display:inline-flex;vertical-align:-1px}
#fil i.lx-a-ico>.lx-bico{width:12px;height:12px}
#alertes-btn>.lx-ico{width:18px;height:18px}
@media (max-width:900px){.kpi>.lx-med,.hero>.lx-med{width:52px;height:52px}.lx-med svg{width:26px;height:26px}
  .hero.lx-avec-ico{grid-template-columns:52px minmax(0,1fr)}}
/* ============================================================
   Règles d'icônes de themes/lexa.mjs (Maquettes par theme) :
   barre latérale 16 px #8699AD → #FFF à l'actif ; en-tête .hi 18 px
   #555B6D, pastille 16 px cramoisi #A8102A ; bars 20 ; fil d'Ariane
   angle-right 12 px ; médaillon KPI 64 px rgba(255,255,255,.1), icône 30.
   ============================================================ */
.rail button[data-dom]{filter:none;opacity:1;color:#8699AD;display:inline-flex;align-items:center;justify-content:center}
.rail button[data-dom]:hover,.rail button[data-dom].on{color:#fff}
.rail button[data-dom]>.lx-dom{width:16px;height:16px}
.topbar .ic-btn,.user .out{color:#555B6D}
.topbar .ic-btn:hover,.user .out:hover{color:var(--ink-1)}
.topbar .ic-btn>svg{width:18px;height:18px}
.ic-btn .pastille-n{background:#A8102A;color:#fff;min-width:16px;height:16px;border-radius:8px;font-size:10px;font-weight:700;padding:0 4px;border:0}
.user .out{display:inline-flex;align-items:center;justify-content:center}
.user .out>.lx-bico{width:18px;height:18px}
.lx-bars{display:none!important}
.lx-bars>svg{width:20px;height:20px}
#fil{display:inline-flex;align-items:center;gap:0}
#fil i.lx-a-ico{color:rgba(31,36,49,.6);margin:0 8px}
.kpi>.lx-med,.hero>.lx-med{background:rgba(255,255,255,.1)}
@media (max-width:900px){.lx-bars{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:70px;border-radius:0;flex:0 0 auto}}
/* Objectif du chiffre directeur : crayon (pen 12) et « + » (plus 14) au trait, comme les boutons. */
.crayon.lx-a-ico,.obj-vide>.plus.lx-a-ico{display:inline-flex;vertical-align:-2px}
.crayon.lx-a-ico>.lx-bico{width:12px;height:12px}
/* Alertes : la flèche centrée sur la ligne (un svg en ligne laissait la place d'un jambage). */
.lx-alertes .al .fleche{display:inline-flex}

/* ============================================================
   En-tête et barre d'état sans débordement horizontal (9 octobre 2026).
   Entre 901 et 1180 px, l'en-tête n'a que (largeur − 240 px) : il se
   resserre ; sous 900 px, le fil d'Ariane reste masqué comme le veut
   lexa.css (ma règle #fil l'avait fait réapparaître) et la barre d'état
   défile sur elle-même au lieu d'élargir la page.
   ============================================================ */
/* Rognage HORIZONTAL seulement : overflow:hidden rognait aussi la liste d'alertes qui descend sous l'en-tête. */
.topbar{min-width:0;overflow-x:clip;overflow-y:visible}
.topbar>*{flex-shrink:0}
.topbar>.fil,.topbar>.lx-search,.topbar>.sp{flex-shrink:1;min-width:0}
#fil{overflow:hidden;white-space:nowrap}
#fil>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.statusbar{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.statusbar::-webkit-scrollbar{display:none}
.statusbar>*{flex-shrink:0}
@media (max-width:1180px){
  .titre-app{display:none}
  .densite b,.user .rl{display:none}
  .lx-search{width:auto;flex:1 1 180px;max-width:320px;min-width:38px;margin-left:0}
  .lx-search kbd{display:none}
  #fil{flex:0 1 auto;padding:0 8px}
}
@media (max-width:900px){
  #fil{display:none}
  .lx-search{max-width:none}
}
/* Priorité au fil d'Ariane : la recherche cède la place d'abord (jusqu'à la seule loupe). */
.topbar>.lx-search{flex-shrink:12}
@media (max-width:1024px){
  .user .nm{display:none}
  .user{padding:0 10px}
}
@media (max-width:1280px){.titre-app{display:none}}
@media (min-width:1181px){.topbar>#fil{flex-shrink:0}}
/* Sous 600 px, la barre d'état garde Connecté · Société · Exercice ; Devise/TVA (à droite du ressort) s'efface. */
@media (max-width:600px){.statusbar>.sp,.statusbar>.sp~*{display:none}}
@media (max-width:400px){.statusbar{padding:0 10px;gap:10px}}
/* La largeur de l'en-tête ne dépend plus du nom affiché (défaut vu en recette le 12 octobre 2026 :
   un nom long faisait déborder l'en-tête à 1366 px). La zone utilisateur se resserre, le nom et la
   fonction se terminent par « … » au-delà de 180 px. */
.topbar>.user{flex-shrink:1;min-width:0}
.user .nm,.user .rl{max-width:180px;overflow:hidden;text-overflow:ellipsis}