/* ═══════════════════════════════════════════════════════════════════
   NutriPatient — Couche de jetons (v1.60.0)
   Direction « Cabinet » : rail sombre pour l'application, papier chaud
   pour le dossier, un serif éditorial réservé aux noms et aux titres.
   ═══════════════════════════════════════════════════════════════════

   POURQUOI CE FICHIER EXISTE. Avant la 1.60.0, la charte vivait en
   valeurs hexadécimales littérales : 355 couleurs distinctes, 2790
   occurrences, réparties dans quatre feuilles de style et près de deux
   mille attributs `style=""` en ligne. Changer le vert principal
   demandait de retrouver 123 endroits. Il n'existait aucun endroit où
   dire « le vert du logiciel, c'est celui-ci ».

   Cet endroit est ici. Tout le reste y renvoie.

   CHARGEMENT. Ce fichier est enfilé AVANT toutes les autres feuilles,
   afin que les règles qui suivent puissent consommer les jetons. Sur
   l'hébergement SwissCenter, l'opcache sert volontiers un CSS périmé :
   la version est accolée en query string (`?ver=NP_VERSION`), ce qui
   suffit à forcer le rechargement à chaque livraison.

   PAS DE FONTE DISTANTE. Le système de design dessinait avec Instrument
   Sans et Newsreader, servies par Google Fonts. Une requête vers un CDN
   américain transmet l'adresse IP du praticien — et, sur les pages
   patient, celle de la personne. Pour un logiciel de santé suisse c'est
   un transfert de données qui n'a aucune justification esthétique
   suffisante. On s'en tient donc à des piles système : la grotesque de
   l'OS pour le texte courant, Georgia pour le registre éditorial. Le
   caractère du design tient à l'échelle, aux espacements et au rythme,
   pas à la fonderie.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Vert directeur : une échelle unique de dix degrés ──
     #345E48 est le --np-f500, inchangé. Tout le reste en dérive. */
  --np-f900: #16281E;
  --np-f800: #1E3A2B;
  --np-f700: #23402F;
  --np-f600: #2A4E3A;
  --np-f500: #345E48;   /* couleur primaire historique du produit */
  --np-f400: #4C7A61;
  --np-f300: #7BA48C;
  --np-f200: #B9D0C2;
  --np-f100: #DDEBE2;
  --np-f50:  #F1F7F3;

  /* ── Surfaces ──
     Le fond n'est pas blanc : #FBFAF7 est un papier légèrement chaud.
     C'est ce qui distingue un dossier d'un tableur. */
  --np-paper:   #FBFAF7;
  --np-surface: #FFFFFF;
  --np-line:    #E5E3DC;
  --np-line2:   #CFCCC2;

  /* ── Encres — quatre niveaux, pas davantage ──
     ink sur paper : 13,4:1. ink2 : 8,1:1. ink3 : 4,6:1. ink4 : 3,1:1,
     réservé au texte non essentiel de 14px et plus. */
  --np-ink:  #16211B;
  --np-ink2: #3E4A43;
  --np-ink3: #69746D;
  --np-ink4: #98A19B;

  /* ── États ──
     Les jetons --warn #d69e2e (2,39:1) et --ok #38a169 (3,25:1) de la
     1.51.8 échouaient au contraste sur fond clair. Ils ne sont pas
     ajustés, ils sont remplacés. */
  /* #9A6512 tenait 4,74:1 sur le papier mais tombait à 4,41:1 sur son
     propre fond d'encadré — c'est là qu'il sert le plus. Assombri jusqu'à
     5,17:1 sur amber-bg, mesuré, pas estimé. */
  --np-amber:      #8C5B10;
  --np-amber-bg:   #FAF1DF;
  --np-amber-line: #E8D3A8;
  --np-rose:       #A63C31;
  --np-rose-bg:    #FAEBE8;
  --np-rose-line:  #EFC9C2;
  /* Fond neutre des états d'attente. C'était un littéral non documenté
     (#F3F2EE) — le seul du fichier — et son couple avec ink3 tombait à
     4,34:1 : la charte échouait à sa propre règle. Promu en jeton, et
     l'encre passe à ink2 (7,6:1). */
  --np-neutral-bg: #F3F2EE;
  --np-sky:        #2A6280;
  --np-sky-bg:     #E9F1F5;
  --np-sky-line:   #C4DAE4;

  /* Succès : pas de jeton propre — c'est le vert directeur qui le porte.
     Deux verts concurrents dans une même interface, l'œil les lit comme
     une erreur d'impression. */
  --np-ok:      var(--np-f600);
  --np-ok-bg:   var(--np-f50);
  --np-ok-line: var(--np-f200);

  /* ── Rail de navigation, sombre ── */
  --np-rail:        #1B3126;
  --np-rail-2:      #16281E;
  --np-rail-line:   rgba(255,255,255,.09);
  --np-rail-ink:    #E8EFEA;
  --np-rail-ink2:   #A9BCB1;
  /* Les intitulés de groupe et les libellés de compteur sont du petit
     texte en capitales : 4,03:1 ne suffisait pas. Éclairci au minimum
     nécessaire pour franchir 4,5:1 sur le rail. */
  --np-rail-ink3:   #849A8D;
  --np-rail-active: rgba(255,255,255,.10);
  --np-rail-accent: #7BA48C;

  /* ── Ombres ── */
  --np-sh1: 0 1px 2px rgba(22,40,30,.07);
  --np-sh2: 0 10px 30px -12px rgba(22,40,30,.22), 0 2px 6px rgba(22,40,30,.05);
  --np-sh3: 0 20px 50px -18px rgba(22,40,30,.30), 0 4px 10px rgba(22,40,30,.06);

  /* ── Rayons ── */
  --np-r-sm: 6px;
  --np-r:    10px;
  --np-r-lg: 14px;
  --np-r-pill: 999px;

  /* ── Typographie ── */
  --np-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --np-serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --np-mono:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* ── Rythme vertical — multiples de 4 ── */
  --np-s1: 4px;  --np-s2: 8px;  --np-s3: 12px; --np-s4: 16px;
  --np-s5: 20px; --np-s6: 24px; --np-s8: 32px; --np-s10: 40px;

  /* ── Compatibilité ──
     L'ancienne charte reste adressable pendant la migration : un écran
     non encore repris continue de fonctionner, il n'a simplement pas
     encore le nouveau ton. */
  --np-primary: var(--np-f500);
  --np-primary-dark: var(--np-f700);
  --np-primary-light: var(--np-f100);
}

/* ═══════════════════════════════════════════════════════════════════
   SOCLE — portée limitée à l'application
   Ces règles ne s'appliquent qu'à l'intérieur de .np-front. Le reste du
   site vitrine, et l'administration WordPress, gardent leur apparence.
   ═══════════════════════════════════════════════════════════════════ */

.np-front {
  font-family: var(--np-sans);
  color: var(--np-ink);
  background: var(--np-paper);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.np-front h1, .np-front h2, .np-front h3, .np-front h4 {
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--np-ink);
}

.np-front a { color: var(--np-f500); text-decoration: none; }
.np-front a:hover { color: var(--np-f700); text-decoration: underline; }

.np-front :focus-visible {
  outline: 2px solid var(--np-f500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Le registre éditorial : noms de personnes, titres de dossier. Nulle
   part ailleurs — un serif employé partout n'est plus un signal. */
.np-serif, .np-front .np-patient-name, .np-front .np-page-title {
  font-family: var(--np-serif);
  font-weight: 400;
  letter-spacing: -.015em;
}

/* Chiffres alignés en colonne : indispensable dès qu'on compare des
   poids, des dates ou des valeurs de marqueurs d'une ligne à l'autre. */
.np-mono, .np-front table td.np-num {
  font-family: var(--np-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Cartes ── */
.np-front .np-card {
  background: var(--np-surface);
  border: 1px solid var(--np-line);
  border-radius: var(--np-r);
  box-shadow: var(--np-sh1);
}

/* ── Boutons ── */
.np-front .np-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 15px;
  border-radius: var(--np-r-sm);
  font-size: 13.5px; font-weight: 550;
  border: 1px solid var(--np-line2);
  background: var(--np-surface); color: var(--np-ink2);
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.np-front .np-btn:hover { background: var(--np-f50); border-color: var(--np-f300); text-decoration: none; }
.np-front .np-btn-primary,
.np-front .np-btn-ia {
  background: var(--np-f500); color: #fff; border-color: var(--np-f500);
  box-shadow: var(--np-sh1);
}
.np-front .np-btn-primary:hover,
.np-front .np-btn-ia:hover { background: var(--np-f600); border-color: var(--np-f600); color: #fff; }
.np-front .np-btn-danger { background: var(--np-rose); color: #fff; border-color: var(--np-rose); }
.np-front .np-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Champs ── */
.np-front input[type=text], .np-front input[type=number], .np-front input[type=email],
.np-front input[type=date], .np-front input[type=time], .np-front input[type=password],
.np-front input[type=search], .np-front select, .np-front textarea {
  width: 100%;
  border: 1px solid var(--np-line2);
  border-radius: var(--np-r-sm);
  padding: 9px 11px;
  font: inherit; font-size: 13.5px;
  background: var(--np-surface); color: var(--np-ink);
}
.np-front input:focus, .np-front select:focus, .np-front textarea:focus {
  border-color: var(--np-f400);
  box-shadow: 0 0 0 3px var(--np-f100);
  outline: none;
}

/* ── Étiquettes d'état ── */
.np-front .np-tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px;
  border-radius: var(--np-r-sm);
  font-size: 11.5px; font-weight: 550;
  border: 1px solid;
}
.np-front .np-tag-ok    { background: var(--np-f50);       color: var(--np-f600); border-color: var(--np-f200); }
.np-front .np-tag-todo  { background: var(--np-amber-bg);  color: var(--np-amber); border-color: var(--np-amber-line); }
.np-front .np-tag-alert { background: var(--np-rose-bg);   color: var(--np-rose);  border-color: var(--np-rose-line); }
.np-front .np-tag-info  { background: var(--np-sky-bg);    color: var(--np-sky);   border-color: var(--np-sky-line); }
.np-front .np-tag-wait  { background: var(--np-neutral-bg); color: var(--np-ink2);  border-color: var(--np-line2); }

/* ── Tableaux ── */
.np-front table th {
  font-size: 11px; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--np-ink3);
  border-bottom: 1px solid var(--np-line);
}
.np-front table td { border-bottom: 1px solid var(--np-line); }

/* ═══════════════════════════════════════════════════════════════════
   RAIL DE NAVIGATION SOMBRE
   L'application se distingue du dossier : le rail est l'outil, la zone
   de travail est le papier. Sur mobile le rail redevient une barre
   horizontale — un rail vertical sombre y mangerait l'écran.
   ═══════════════════════════════════════════════════════════════════ */

.np-front .np-nav-vertical,
.np-front .np-sidebar {
  background: var(--np-rail);
  color: var(--np-rail-ink);
  border-right: 1px solid var(--np-rail-line);
}
.np-front .np-nav-vertical a,
.np-front .np-sidebar a { color: var(--np-rail-ink2); }
.np-front .np-nav-vertical a:hover,
.np-front .np-sidebar a:hover {
  color: var(--np-rail-ink);
  background: var(--np-rail-active);
  text-decoration: none;
}
.np-front .np-nav-vertical a.is-active,
.np-front .np-nav-vertical a.np-nav-active,
.np-front .np-sidebar a.is-active,
.np-front .np-sidebar a.np-nav-active {
  color: #fff;
  background: var(--np-rail-active);
  box-shadow: inset 3px 0 0 var(--np-rail-accent);
}
.np-front .np-nav-vertical .np-nav-section,
.np-front .np-sidebar .np-nav-section {
  font-size: 10.5px; font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--np-rail-ink3);
}
.np-front .np-nav-vertical hr,
.np-front .np-sidebar hr { border: 0; border-top: 1px solid var(--np-rail-line); }

/* Le pied du rail — compteurs de dépense, licence : discret, jamais
   invisible. C'est là que le praticien vérifie ce que lui coûte sa
   journée, il doit pouvoir le lire sans se pencher. */
.np-front .np-nav-footer,
.np-front .np-sidebar-footer {
  color: var(--np-rail-ink3);
  border-top: 1px solid var(--np-rail-line);
  font-size: 11.5px;
}
.np-front .np-nav-footer strong,
.np-front .np-sidebar-footer strong { color: var(--np-rail-ink2); }

@media (max-width: 900px) {
  .np-front .np-nav-vertical, .np-front .np-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--np-rail-line);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   IMPRESSION
   Le rail sombre n'a rien à faire sur une feuille : il consommerait
   l'encre d'une cartouche pour une information de navigation.
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  .np-front .np-nav-vertical, .np-front .np-sidebar,
  .np-front .np-tabs, .np-front .np-btn { display: none !important; }
  .np-front { background: #fff; }
  .np-front .np-card { box-shadow: none; border-color: #ccc; }
}

/* ═══════════════════════════════════════════════════════════════════
   EN-TÊTE DE DOSSIER, MODE DE TRAVAIL — v1.60.0
   La clarté du rail de parcours, appliquée au reste de la page : moins de
   commandes, une hiérarchie nette, et le nom de la personne comme seul
   élément vraiment saillant.
   ═══════════════════════════════════════════════════════════════════ */

.np-front .np-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--np-line);
}
.np-front .np-page-title {
  font-family: var(--np-serif);
  font-size: 30px; font-weight: 400; letter-spacing: -.02em;
  line-height: 1.15; margin: 0;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.np-front .np-page-title .np-code {
  font-family: var(--np-mono); font-size: 12px; font-weight: 500;
  color: var(--np-ink3); background: var(--np-f50);
  border: 1px solid var(--np-line); border-radius: var(--np-r-sm);
  padding: 2px 8px; letter-spacing: 0;
}
.np-front .np-page-title .np-badge {
  font-family: var(--np-sans); font-size: 10.5px; font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--np-r-pill);
  background: var(--np-f100); color: var(--np-f700);
}
.np-front .np-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Interrupteur de mode : un point et un mot. Il annonce un état, il ne
   réclame pas l'attention — c'est le nom du patient qui doit l'avoir. */
.np-front .np-mode-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--np-line2); border-radius: var(--np-r-pill);
  background: var(--np-surface); color: var(--np-ink3);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.np-front .np-mode-btn:hover { border-color: var(--np-f300); color: var(--np-ink2); }
.np-front .np-mode-point {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--np-f300); flex: none;
}
.np-front .np-mode-btn.is-expert {
  background: var(--np-f500); border-color: var(--np-f500); color: #fff;
}
.np-front .np-mode-btn.is-expert .np-mode-point { background: #fff; }

/* Onglets : mêmes règles typographiques que le rail de parcours. */
.np-front .np-tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--np-line);
  margin-bottom: 18px;
}
.np-front .np-tab {
  padding: 9px 14px; font-size: 13.5px; font-weight: 550;
  color: var(--np-ink3); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.np-front .np-tab:hover { color: var(--np-ink); text-decoration: none; background: var(--np-f50); }
.np-front .np-tab-active {
  color: var(--np-f700); border-bottom-color: var(--np-f500); font-weight: 650;
}

/* Tuiles d'indicateurs : une tuile vide n'est pas une tuile, c'est un trou.
   En mode courant, elle s'efface au lieu d'occuper un quart de la bande. */
.np-front .np-card-tile.np-card-muted {
  background: transparent; border-style: dashed; box-shadow: none;
}
.np-front .np-card-tile.np-card-muted .np-card-tile-empty { color: var(--np-ink4); }

/* Guidage permanent — une ligne, présente sur tous les onglets. */
.np-front .np-guidage {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; margin: 0 0 18px;
  border-radius: var(--np-r); border: 1px solid var(--np-f200);
  background: var(--np-f50);
}
.np-front .np-guidage.is-attente {
  border-color: var(--np-amber-line); background: var(--np-amber-bg);
}
.np-front .np-guidage-l {
  font-size: 10.5px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--np-ink4); flex: none;
}
.np-front .np-guidage-t { font-size: 13.5px; font-weight: 650; color: var(--np-ink); }
.np-front .np-guidage-d { font-size: 12.5px; color: var(--np-ink3); flex: 1 1 auto; }
.np-front .np-guidage.is-attente .np-guidage-d { color: var(--np-amber); }
.np-front .np-guidage-go {
  flex: none; font-size: 12.5px; font-weight: 650;
  color: var(--np-f700); text-decoration: none;
}
.np-front .np-guidage-go:hover { text-decoration: underline; }

/* Lien-bouton destructeur : un ✕ dans un tableau doit rester un ✕, mais
   porter la couleur du danger comme n'importe quelle suppression. */
.np-front .np-btn-lien-danger {
  background: none; border: 0; cursor: pointer;
  color: var(--np-rose); font-size: 14px; line-height: 1;
  padding: 3px 6px; border-radius: var(--np-r-sm);
}
.np-front .np-btn-lien-danger:hover { background: var(--np-rose-bg); }

/* v1.60.0 — Une suppression a UNE apparence, quelle que soit sa taille.
   .np-btn-xs.np-btn-danger était repeint en gris par front-elegant.css :
   les six corbeilles des listes étaient typographiquement identiques au
   bouton « Télécharger » voisin. Le geste irréversible reprend sa couleur. */
.np-front .np-btn-danger,
.np-front .np-btn-xs.np-btn-danger,
.np-front .np-btn-sm.np-btn-danger {
  color: var(--np-rose) !important;
  border-color: var(--np-rose-line) !important;
  background: var(--np-surface) !important;
}
.np-front .np-btn-danger:hover,
.np-front .np-btn-xs.np-btn-danger:hover,
.np-front .np-btn-sm.np-btn-danger:hover {
  background: var(--np-rose-bg) !important;
  border-color: var(--np-rose) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   EN-TÊTE DU DOSSIER, MINCE — v1.60.0
   front-elegant.css impose 20px de padding et 28px de marge, en
   !important, à tous les en-têtes de page. Sur la fiche patient, où
   l'en-tête ne porte que quatre commandes, cela faisait ~110px de vide
   avant le bandeau. Cette classe répond sur le même registre — c'est le
   seul moyen de battre un !important — et ramène la zone à une ligne.
   ═══════════════════════════════════════════════════════════════════ */
.np-front .np-page-header.np-entete-dossier {
  justify-content: flex-end;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 10px !important;
  gap: 8px;
}
.np-front .np-entete-dossier .np-btn {
  min-height: 30px; padding: 0 12px; font-size: 12.5px;
}

/* Le contenu commence plus haut : 28px de respiration au-dessus d'un
   en-tête d'une seule ligne, c'est du vide, pas de l'air. */
.np-layout-vertical .np-main { padding-top: 18px; }

/* ═══════════════════════════════════════════════════════════════════
   SYSTÈME DE BOUTONS — compléments d'audit (v1.60.0)
   ═══════════════════════════════════════════════════════════════════ */

/* np-btn-ghost était employé à dix endroits et défini nulle part : les
   boutons retombaient sur .np-btn nu, sans fond ni bordure — dans l'onglet
   Bilans, le bouton d'engagement était plus discret que la moyenne des
   boutons du produit. Défini une fois, ici. */
.np-front .np-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--np-ink3);
}
.np-front .np-btn-ghost:hover {
  background: var(--np-f50);
  border-color: var(--np-line2);
  color: var(--np-ink);
}

/* Les composants embarqués (panneau OpenFoodFacts, modale de régime,
   Google Calendar, docsign) utilisaient les classes du back-office
   WordPress : deux boutons « Rechercher » d'apparence différente sur le
   même écran. Plutôt que de réécrire chaque gabarit, les classes WP sont
   re-stylées dans le périmètre du front — un seul système visuel. */
.np-front .button,
.np-front .button-secondary {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 14px;
  border-radius: var(--np-r-sm);
  font-size: 13px; font-weight: 550;
  border: 1px solid var(--np-line2);
  background: var(--np-surface); color: var(--np-ink2);
  cursor: pointer; text-decoration: none;
  box-shadow: none; line-height: 1;
}
.np-front .button:hover { background: var(--np-f50); border-color: var(--np-f300); color: var(--np-ink); }
.np-front .button-primary,
.np-front .button.button-primary {
  background: var(--np-f500); color: #fff; border-color: var(--np-f500);
}
.np-front .button-primary:hover { background: var(--np-f600); border-color: var(--np-f600); color: #fff; }
.np-front .button-small { min-height: 28px; padding: 0 10px; font-size: 12px; }
.np-front .button-large { min-height: 38px; padding: 0 18px; font-size: 14px; }

/* UN SEUL ORDRE DE BOUTONS. Deux conventions coexistaient dans le même
   fichier CSS : primaire à gauche (np-form-actions) et primaire à droite
   (np-cabinet-actions). Le praticien qui a appris « valider à droite » sur
   un écran cliquait « Annuler » sur l'autre.
   Règle unique : actions à droite, Annuler PUIS le primaire.
   row-reverse retourne visuellement le balisage historique
   [Primaire][Annuler] sans toucher aux gabarits — et l'ordre du DOM reste
   primaire-d'abord, donc Entrée soumet toujours le formulaire. */
.np-front .np-form-actions {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* CHAMPS OBLIGATOIRES : une seule notation. La classe pose l'astérisque ;
   il ne s'écrit jamais dans le libellé (le formulaire patient affichait
   « Nom * * », l'astérisque écrit PLUS celui de la classe). */
.np-front .np-field-required > label::after {
  content: ' *';
  color: var(--np-rose);
  font-weight: 650;
}

/* Six variantes de bouton étaient employées sans être définies nulle part
   — elles retombaient sur .np-btn nu, exactement le défaut np-btn-ghost.
   Elles deviennent des alias du secondaire ; leur singularité n'apportait
   rien. */
.np-front .np-btn-regime, .np-front .np-btn-xlsx, .np-front .np-btn-gen,
.np-front .np-btn-collapse, .np-front .np-btn-calc, .np-front .np-btn-bundled {
  background: var(--np-surface); border: 1px solid var(--np-line2); color: var(--np-ink2);
}

/* L'alerte info manquait à la feuille qui gagne la cascade : elle restait
   seule avec une barre latérale pendant que succès et erreur avaient un
   cadre complet. */
.np-front .np-alert-info {
  background: var(--np-sky-bg) !important;
  border: 1px solid var(--np-sky-line) !important;
  color: var(--np-sky) !important;
  border-left-width: 1px !important;
}

/* Chiffres tabulaires là où on compare des valeurs : le tableau pivot des
   bilans et toutes les colonnes CHF de la facturation n'en avaient pas. */
.np-front .np-val-num, .np-front .np-col-val,
.np-front .np-facture-table td, .np-front .np-total-cell,
.npp-mesures-table td, .npp-etiq-val {
  font-variant-numeric: tabular-nums;
}