/* sidebar */
.sidebar {
width: var(--sidebar-w); background: var(--sidebar); color: var(--sidebar-ink);
display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; flex-shrink: 0;
border-right: 1px solid var(--sidebar-line);
}
/* Brand lockup = ![]()
of the webp logo (helper `logo()` in html.js). `.brand-logo`
is the full wordmark (sidebar expanded + auth screens); `.brand-mark` is the
hexagon glyph, shown only on the collapsed icon-rail (toggled in the 820px query). */
.brand { display: flex; align-items: center; gap: 9px; padding: 18px 18px; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-mark { height: 30px; width: 30px; object-fit: contain; display: none; }
.brand.big { justify-content: center; margin-bottom: 6px; }
.brand.big .brand-logo { height: 40px; }
/* Active company (multi-tenant): the silo this session is in, under the brand. */
.company { padding: 0 18px 8px; display: flex; align-items: baseline; gap: 8px; }
.company-name { color: var(--white); font-size: var(--fs-13); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-switch { color: var(--sidebar-ink); font-size: var(--fs-11); text-decoration: none; white-space: nowrap; }
.company-switch:hover { color: var(--white); }
.global-search { padding: 0 10px 8px; }
.global-search input {
width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13);
color: var(--white); border-radius: 8px; padding: 7px 10px; font-size: var(--fs-13);
}
.global-search input::placeholder { color: var(--sidebar-group); opacity: 1; }
.global-search input:focus { outline: none; border-color: var(--brand-light); background: rgba(255,255,255,.10); }
.search-more { margin: 8px 2px 0; font-size: var(--fs-13); }
.sidebar nav { display: flex; flex-direction: column; padding: 4px 10px; gap: 1px; overflow-y: auto; flex: 1; }
.nav-group { font-size: var(--fs-11); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .07em; color: var(--sidebar-group); padding: 6px 12px 2px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 12px; border-radius: 8px; color: var(--sidebar-ink); font-size: var(--fs-14); font-weight: var(--fw-normal); transition: background .12s, color .12s; }
.nav-item:hover { background: var(--sidebar-hover); text-decoration: none; color: var(--white); }
/* Onglet sélectionné (la « lame » de marque) : dégradé Orchidée plein, fixe. */
.nav-item.active { background-image: var(--brand-grad); background-origin: border-box;
color: var(--white); }
.nav-ic { width: 22px; text-align: center; }
/* Glyphes de nav : gris clair (--sidebar-ic, le traitement « graphite sombre » du
showcase), blanc sur l'item actif (fond dégradé). */
.nav-ic-img { width: 22px; height: 22px; }
/* Descendant selector (0,2,0) pour battre `.ic { background-color: currentColor }` :
une couleur pleine, contrairement au dégradé (background-image), serait sinon écrasée
par le currentColor de base. */
.nav-item .nav-ic-img { background-color: var(--sidebar-ic); }
.nav-item.active .nav-ic-img { background-color: var(--white); }
/* Icônes (source unique : html.js ICONS, rendues par icon()). La silhouette (SVG blanc,
deux glyphes de statut en PNG) sert de MASQUE ; la couleur vient de `background`. `.ic` = base (masque + couleur =
currentColor par défaut, donc l'icône suit la couleur du texte qui l'entoure) ;
`.ic-f-` porte la source du masque (une par fichier) ; les tailles
dépendent du contexte (nav ci-dessus, tuile, section, inline). */
.ic {
display: inline-block; vertical-align: middle; width: 1em; height: 1em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.ic-inline { width: 1em; height: 1em; vertical-align: -0.14em; }
/* Tuiles (chiffres clés) : glyphe rempli au dégradé Orchidée dans la pastille « Médaillon ». */
.tile-ic .ic { width: 20px; height: 20px; background: var(--brand-grad); }
/* Règle de design « icône de titre = dégradé Orchidée » : tout glyphe accompagnant un
titre (en-tête de carte + légende de section .sec-ic) est rempli au dégradé,
jamais en graphite ni en magenta plein — comme les chiffres clés .tile-ic. */
.sec-ic .ic { background: var(--brand-grad); }
/* Légendes de section : un cran plus grandes (ancre visuelle de l'en-tête de carte). */
.form-section .sec-ic .ic { width: 18px; height: 18px; vertical-align: -0.22em; }
/* Source du masque, une règle par fichier d'icône (servi same-origin → CSP OK). */
.ic-f-tableau-de-bord { -webkit-mask-image: url(/static/icons/tableau-de-bord.svg); mask-image: url(/static/icons/tableau-de-bord.svg); }
.ic-f-statistiques { -webkit-mask-image: url(/static/icons/statistiques.svg); mask-image: url(/static/icons/statistiques.svg); }
.ic-f-catalogue { -webkit-mask-image: url(/static/icons/catalogue.svg); mask-image: url(/static/icons/catalogue.svg); }
.ic-f-mouvements { -webkit-mask-image: url(/static/icons/mouvements.svg); mask-image: url(/static/icons/mouvements.svg); }
.ic-f-fournisseur { -webkit-mask-image: url(/static/icons/fournisseur.svg); mask-image: url(/static/icons/fournisseur.svg); }
.ic-f-commandes { -webkit-mask-image: url(/static/icons/commandes.svg); mask-image: url(/static/icons/commandes.svg); }
.ic-f-factures-recues { -webkit-mask-image: url(/static/icons/factures-recues.svg); mask-image: url(/static/icons/factures-recues.svg); }
.ic-f-clients { -webkit-mask-image: url(/static/icons/clients.svg); mask-image: url(/static/icons/clients.svg); }
.ic-f-devis { -webkit-mask-image: url(/static/icons/devis.svg); mask-image: url(/static/icons/devis.svg); }
.ic-f-facture { -webkit-mask-image: url(/static/icons/facture.svg); mask-image: url(/static/icons/facture.svg); }
.ic-f-caisse { -webkit-mask-image: url(/static/icons/caisse.svg); mask-image: url(/static/icons/caisse.svg); }
.ic-f-banque { -webkit-mask-image: url(/static/icons/banque.svg); mask-image: url(/static/icons/banque.svg); }
.ic-f-export { -webkit-mask-image: url(/static/icons/export.svg); mask-image: url(/static/icons/export.svg); }
.ic-f-livraison { -webkit-mask-image: url(/static/icons/livraison.svg); mask-image: url(/static/icons/livraison.svg); }
.ic-f-reglages { -webkit-mask-image: url(/static/icons/reglages.svg); mask-image: url(/static/icons/reglages.svg); }
.ic-f-utilisateurs { -webkit-mask-image: url(/static/icons/utilisateurs.svg); mask-image: url(/static/icons/utilisateurs.svg); }
.ic-f-roles { -webkit-mask-image: url(/static/icons/roles.svg); mask-image: url(/static/icons/roles.svg); }
.ic-f-regles-globales { -webkit-mask-image: url(/static/icons/regles-globales.svg); mask-image: url(/static/icons/regles-globales.svg); }
.ic-f-historique { -webkit-mask-image: url(/static/icons/historique.svg); mask-image: url(/static/icons/historique.svg); }
.ic-f-prix { -webkit-mask-image: url(/static/icons/prix.svg); mask-image: url(/static/icons/prix.svg); }
.ic-f-sablier { -webkit-mask-image: url(/static/icons/sablier.svg); mask-image: url(/static/icons/sablier.svg); }
.ic-f-email { -webkit-mask-image: url(/static/icons/email.svg); mask-image: url(/static/icons/email.svg); }
.ic-f-calendrier { -webkit-mask-image: url(/static/icons/calendrier.svg); mask-image: url(/static/icons/calendrier.svg); }
.ic-f-triangle_attention{ -webkit-mask-image: url(/static/icons/triangle_attention.png); mask-image: url(/static/icons/triangle_attention.png); }
.ic-f-coche_validation { -webkit-mask-image: url(/static/icons/coche_validation.png); mask-image: url(/static/icons/coche_validation.png); }
.ic-f-speech-bubble { -webkit-mask-image: url(/static/icons/speech-bubble.svg); mask-image: url(/static/icons/speech-bubble.svg); }
.ic-f-projets { -webkit-mask-image: url(/static/icons/projets.svg); mask-image: url(/static/icons/projets.svg); }
.ic-f-dupliquer { -webkit-mask-image: url(/static/icons/dupliquer.svg); mask-image: url(/static/icons/dupliquer.svg); }
.nav-badge { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: var(--bad); color: var(--white); font-size: var(--fs-11); font-weight: var(--fw-bold); line-height: 1; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.nav-badge-warn { background: var(--warn); }