.system-loading-screen {
  --loader-accent: #4f46e5;
  --loader-accent-deep: #312e81;
  --loader-accent-bright: #818cf8;
  --loader-mark-ink: #fff;
  --loader-mark-bg: var(--loader-accent);
  --loader-mark-border: color-mix(in srgb, var(--loader-accent) 72%, white);
  --loader-title-ink: #3730a3;
  --loader-surface: linear-gradient(145deg, #eef2ff 0%, #c7d2fe 100%);
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--loader-surface);
  transition: opacity .34s ease, visibility .34s ease;
  animation: systemLoaderSaturation 1.55s cubic-bezier(.4,0,.2,1) infinite;
}
.system-loading-screen[data-system="sales"] {
  --loader-accent: #16a34a;
  --loader-accent-deep: #14532d;
  --loader-accent-bright: #86efac;
  --loader-mark-ink: #fff;
  --loader-title-ink: #14532d;
  --loader-surface: linear-gradient(145deg, #effdf4 0%, #c7f4d6 100%);
}
.system-loading-screen[data-system="logistics"] {
  --loader-accent: #d97706;
  --loader-accent-deep: #713f12;
  --loader-accent-bright: #fef08a;
  --loader-mark-ink: #fff;
  --loader-title-ink: #713f12;
  --loader-surface: linear-gradient(145deg, #fff9df 0%, #fde9a9 100%);
}
.system-loading-screen[data-system="management"] {
  --loader-accent: #166534;
  --loader-accent-deep: #123b24;
  --loader-accent-bright: #287346;
  --loader-mark-ink: #fff;
  --loader-mark-bg: var(--loader-accent);
  --loader-mark-border: color-mix(in srgb, var(--loader-accent) 72%, white);
  --loader-title-ink: #fff;
  --loader-surface: linear-gradient(145deg, #123b24 0%, #287346 100%);
}
.system-loading-screen[data-system="control"] {
  --loader-accent: #0284c7;
  --loader-accent-deep: #0c4a6e;
  --loader-accent-bright: #bae6fd;
  --loader-mark-ink: #fff;
  --loader-title-ink: #0c4a6e;
  --loader-surface: linear-gradient(145deg, #eaf8ff 0%, #c9eaff 100%);
}
.system-loading-screen[data-system="products"] {
  --loader-accent: #7e22ce;
  --loader-accent-deep: #581c87;
  --loader-accent-bright: #e9d5ff;
  --loader-mark-ink: #fff;
  --loader-title-ink: #581c87;
  --loader-surface: linear-gradient(145deg, #f8f0ff 0%, #ead7ff 100%);
}
.system-loading-screen[data-system="administration"],
.system-loading-screen[data-system="database"],
.system-loading-screen[data-system="graphen"] {
  --loader-accent: #111827;
  --loader-accent-deep: #080b11;
  --loader-accent-bright: #94a3b8;
  --loader-mark-ink: #fff;
  --loader-mark-bg: var(--loader-accent);
  --loader-mark-border: color-mix(in srgb, var(--loader-accent) 72%, white);
  --loader-title-ink: #fff;
  --loader-surface: linear-gradient(145deg, #080b11 0%, #252d3a 100%);
}
.system-loading-screen[hidden] { display: none; }
.system-loading-screen.is-leaving { opacity: 0; visibility: hidden; }
.system-loading-screen::before {
  content: none;
}
.system-loading-core { position: relative; display: grid; justify-items: center; width: min(430px, calc(100% - 40px)); text-align: center; }
.system-loading-monogram {
  position: relative;
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  border: 1px solid var(--loader-mark-border);
  border-radius: 19px !important;
  color: var(--loader-mark-ink) !important;
  background: var(--loader-mark-bg);
  box-shadow: none;
  font-family: var(--font-heading, "Lato Navigea", Lato, Arial, sans-serif);
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: 1;
  animation: systemLoaderHeartbeat 1.55s cubic-bezier(.4,0,.2,1) infinite;
}
.system-loading-monogram::before {
  content: none !important;
}
.system-loading-monogram::after {
  content: none;
}
.system-loading-label,
.system-loading-track { display: none; }
.system-loading-title {
  display: block;
  margin: 19px 0 0;
  color: var(--loader-title-ink);
  font-family: var(--font-heading, "Lato Navigea", Lato, Arial, sans-serif);
  font-size: 0;
  font-weight: 850;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.system-loading-title::before { content: "Chargement de Navigea"; font-size: 17px; }
.system-loading-screen[data-system="sales"] .system-loading-title::before { content: "Chargement du Commerce"; }
.system-loading-screen[data-system="logistics"] .system-loading-title::before { content: "Chargement de la Logistique"; }
.system-loading-screen[data-system="management"] .system-loading-title::before { content: "Chargement du Management"; }
.system-loading-screen[data-system="control"] .system-loading-title::before { content: "Chargement du Contrôle de gestion"; }
.system-loading-screen[data-system="products"] .system-loading-title::before { content: "Chargement des Produits"; }
.system-loading-screen[data-system="administration"] .system-loading-title::before,
.system-loading-screen[data-system="database"] .system-loading-title::before { content: "Chargement du BackEnd"; }
.system-loading-screen[data-system="graphen"] .system-loading-title::before { content: "Préparation des extractions"; }

@keyframes systemLoaderHeartbeat {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.1); }
  31% { transform: scale(1); }
  51% { transform: scale(1.1); }
  69% { transform: scale(1); }
}
@keyframes systemLoaderSaturation {
  0%, 12%, 100% { filter: grayscale(1) saturate(0); }
  31% { filter: grayscale(.35) saturate(.7); }
  51%, 72% { filter: grayscale(0) saturate(1); }
  88% { filter: grayscale(.55) saturate(.45); }
}

/* Messages shown on the two dark system themes. */
.database-console .information-banner-host,
.db-admin-page .information-banner-host,
.logistics-console .information-banner-host { position: fixed; z-index: 1200; top: 18px; right: 18px; display: grid; width: min(430px, calc(100vw - 36px)); gap: 9px; }
.database-console .information-banner,
.db-admin-page .information-banner,
.logistics-console .information-banner { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; padding: 15px; border: 1px solid color-mix(in srgb, var(--system-accent) 42%, #243448); border-left: 3px solid var(--system-accent); border-radius: 11px; color: var(--system-text); background: var(--system-panel); box-shadow: 0 18px 45px rgba(0,0,0,.32); }
.database-console .information-window-icon,
.db-admin-page .information-window-icon,
.logistics-console .information-window-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: #fff; background: var(--system-accent); font-weight: 850; }
.information-window-copy { min-width: 0; }
.database-console .information-window-overline,
.db-admin-page .information-window-overline,
.logistics-console .information-window-overline { color: var(--system-accent-bright); font-size: 8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.database-console .information-window-copy h2,
.db-admin-page .information-window-copy h2,
.logistics-console .information-window-copy h2 { margin: 4px 0 6px; color: var(--system-text); font-size: 15px; }
.database-console .information-window-copy p,
.db-admin-page .information-window-copy p,
.logistics-console .information-window-copy p { margin: 0; color: var(--system-muted); font-size: 10px; line-height: 1.55; white-space: pre-line; }
.database-console .information-window-close,
.db-admin-page .information-window-close,
.logistics-console .information-window-close { width: 28px; height: 28px; padding: 0; border: 1px solid var(--system-line); border-radius: 7px; color: var(--system-muted); background: transparent; cursor: pointer; }
.database-console .information-modal,
.db-admin-page .information-modal,
.logistics-console .information-modal { width: min(600px, calc(100% - 28px)); padding: 0; border: 0; background: transparent; }
.database-console .information-modal::backdrop,
.db-admin-page .information-modal::backdrop,
.logistics-console .information-modal::backdrop { background: rgba(2,5,10,.78); }
.database-console .information-modal-card,
.db-admin-page .information-modal-card,
.logistics-console .information-modal-card { display: grid; justify-items: center; padding: 34px; border: 1px solid var(--system-line); border-top: 3px solid var(--system-accent); border-radius: 14px; color: var(--system-text); background: var(--system-panel); box-shadow: 0 30px 90px rgba(0,0,0,.45); text-align: center; }
.database-console .information-modal .information-window-icon,
.db-admin-page .information-modal .information-window-icon,
.logistics-console .information-modal .information-window-icon { width: 52px; height: 52px; margin-bottom: 18px; }
.database-console .information-confirm-button,
.db-admin-page .information-confirm-button,
.logistics-console .information-confirm-button { min-width: 160px; min-height: 43px; margin-top: 22px; }

/* Fenêtres d’information disponibles dans tous les univers. */
.information-banner-host {
  position: fixed;
  z-index: 1200;
  top: 18px;
  right: 18px;
  display: grid;
  width: min(440px, calc(100vw - 36px));
  gap: 10px;
}
.information-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--system-line, #e2e8f0) !important;
  border-left: 4px solid var(--system-accent, #4f46e5) !important;
  border-radius: 16px !important;
  color: var(--system-text, #0f172a) !important;
  background: var(--system-panel, #fff) !important;
  box-shadow: 0 20px 50px rgba(15,23,42,.16) !important;
}
.information-window-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px !important;
  color: #fff !important;
  background: var(--system-accent, #4f46e5) !important;
  font-weight: 900;
}
.information-window-overline { color: var(--system-accent, #4f46e5) !important; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.information-window-copy h2 { margin: 4px 0 6px; color: var(--system-text, #0f172a) !important; font-size: 16px; }
.information-window-copy p { margin: 0; color: var(--system-muted, #64748b) !important; font-size: 12px; line-height: 1.55; white-space: pre-line; }
.information-window-close {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--system-line, #e2e8f0) !important;
  border-radius: 9px !important;
  color: var(--system-muted, #64748b) !important;
  background: #fff !important;
  cursor: pointer;
}
.information-modal { width: min(620px, calc(100% - 28px)); padding: 0; border: 0; background: transparent; }
.information-modal::backdrop { background: rgba(15,23,42,.68) !important; backdrop-filter: none !important; }
.information-modal-card {
  display: grid;
  justify-items: center;
  padding: 36px;
  border: 1px solid var(--system-line, #e2e8f0) !important;
  border-top: 4px solid var(--system-accent, #4f46e5) !important;
  border-radius: 22px !important;
  color: var(--system-text, #0f172a) !important;
  background: var(--system-panel, #fff) !important;
  box-shadow: 0 30px 90px rgba(15,23,42,.24) !important;
  text-align: center;
}
.information-modal .information-window-icon { width: 54px; height: 54px; margin-bottom: 18px; }
.information-confirm-button { min-width: 160px; min-height: 44px; margin-top: 22px; }

@media (max-width: 640px) {
  .system-loading-monogram { width: 76px; height: 76px; border-radius: 17px !important; font-size: 25px; }
}

/* Centre de notifications commun à tous les espaces Navigea. */
.navigea-notification-center { position: relative; z-index: 1150; flex: 0 0 auto; }
.navigea-notification-center.is-floating { position: fixed; top: 18px; right: 18px; }
.navigea-notification-trigger {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, .42);
  border-radius: 14px;
  color: #0f172a;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
  cursor: pointer;
}
.navigea-notification-trigger svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.navigea-notification-badge { position: absolute; top: -6px; right: -6px; display: grid; min-width: 21px; height: 21px; padding: 0 5px; place-items: center; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #ef4444; font-size: 10px; font-weight: 900; }
.navigea-notification-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(430px, calc(100vw - 28px));
  max-height: min(620px, calc(100vh - 90px));
  overflow: hidden;
  border: 1px solid #dbe3ee;
  border-radius: 18px;
  color: #0f172a;
  background: #fff;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .22);
}
.navigea-notification-panel[hidden] { display: none !important; }
.navigea-notification-panel > header { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.navigea-notification-panel > header div { display: grid; gap: 2px; }
.navigea-notification-panel > header span { color: #6366f1; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.navigea-notification-panel > header strong { color: #0f172a; font-size: 18px; }
.navigea-notification-panel > header button { padding: 8px 10px; border: 0; color: #4f46e5; background: transparent; font-size: 12px; font-weight: 850; cursor: pointer; }
.navigea-notification-list { display: grid; max-height: 510px; overflow-y: auto; }
.navigea-notification-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 15px 16px; border-bottom: 1px solid #edf2f7; cursor: pointer; }
.navigea-notification-item.is-unread { background: #eef2ff; }
.navigea-notification-item.is-read { opacity: .72; background: #fff; }
.navigea-notification-item:hover { background: #f8fafc; }
.navigea-notification-tone { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #fff; background: #6366f1; font-weight: 900; }
.navigea-notification-item[data-tone="success"] .navigea-notification-tone { background: #059669; }
.navigea-notification-item[data-tone="warning"] .navigea-notification-tone { background: #d97706; }
.navigea-notification-item[data-tone="urgent"] .navigea-notification-tone { background: #dc2626; }
.navigea-notification-item > div { display: grid; min-width: 0; gap: 5px; }
.navigea-notification-item > div > span { color: #64748b; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.navigea-notification-item > div > strong { color: #0f172a; font-size: 14px; }
.navigea-notification-item p { margin: 0; color: #475569; font-size: 12px; line-height: 1.5; white-space: pre-line; }
.navigea-notification-item small { color: #4f46e5; font-size: 10px; font-weight: 800; }
.navigea-notification-empty { margin: 0; padding: 34px 20px; color: #64748b; text-align: center; }

@media (max-width: 640px) {
  .navigea-notification-panel { position: fixed; top: 70px; right: 14px; left: 14px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .system-loading-screen,
  .system-loading-monogram,
  .system-loading-track::after { animation-duration: .01ms; animation-iteration-count: 1; }
}