/* ══════════════════════════════════════════════════════════════════
   LEX — Icônes communes teintées par MASQUE CSS
   Source unique : /design/icons/<nom>.png  (silhouette transparente).
   • Au repos : suit la couleur du texte de la barre de menu
     → blanc/clair en thème sombre, noir/foncé en thème clair.
       (currentColor = robuste, s'adapte au vrai thème de chaque app,
        sans deviner via prefers-color-scheme.)
   • Actif : couleur de l'application (--lex-accent, sinon --accent).
   Changer une icône du même nom dans /design/icons/ = mise à jour partout.
   ══════════════════════════════════════════════════════════════════ */
.lex-ico{
  display:inline-block;flex:0 0 auto;vertical-align:middle;
  width:22px;height:22px;
  background-color:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  transition:background-color .18s ease, opacity .18s ease;
}
/* onglet actif → couleur de l'app */
.lex-ico.on{
  background-color:var(--lex-accent, var(--accent, #6366f1)) !important;
}