/* ═══════════════════════════════════════════════════════════════════════════
   N'DRI Crypto-Tax Suite — cadre applicatif commun
   ---------------------------------------------------------------------------
   Feuille unique des pages de la suite (voir PUBLIEES dans _vpsdata/_check_links.py).
   Elle fournit trois choses, dans cet ordre :

     1. LE CADRE   — barre latérale de navigation groupée par métier, barre
                     supérieure avec fil d'Ariane et état de l'index.
     2. LES OUTILS — panneaux, tableaux denses, indicateurs, badges d'état :
                     le vocabulaire visuel d'un poste de travail administratif.
     3. LES PAGES  — remise à plat des classes héritées (.ndri-hero, .ndri-main,
                     .ndri-note…) utilisées par le guide et les notes, pour que
                     toutes les pages partagent la même typographie.

   Le cadre est injecté par js/suite-bar.js : cette feuille ne suppose donc
   aucune balise particulière dans le HTML des pages.

   Convention de nommage : tout est préfixé `ndri-`, ou utilise les classes
   `pg-`, `panel`, `tbl`, `kpi`, `tag`, `btn` définies ici, pour ne pas entrer en
   collision avec les feuilles internes des pages (certaines déclarent encore
   `header a { color: … !important }`).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Encre et surfaces */
  --ink: #10233a;
  --ink-2: #3d5269;
  --ink-3: #6b7d92;
  --ink-4: #93a3b6;
  --canvas: #f2f5f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --line: #dde5ee;
  --line-2: #eef2f7;

  /* Chrome applicatif */
  --nav-bg: #0c1a2b;
  --nav-line: rgba(255, 255, 255, .075);
  --nav-ink: #c3cfdd;
  --nav-ink-2: #7e93ab;

  /* Accents et états */
  --accent: #1f5fbf;
  --accent-2: #174b98;
  --accent-weak: #e9f1fb;
  --ok: #0e7a4d;
  --ok-weak: #e7f6ee;
  --warn: #8f5a00;
  --warn-weak: #fdf3e0;
  --err: #a32626;
  --err-weak: #fdecec;

  /* Mesures */
  --nav-w: 246px;
  --top-h: 52px;
  --r: 5px;
  --r-lg: 8px;

  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* Parcours de démonstration en trois minutes (accueil FR et EN).
   Trois étapes, une seule promesse : chaque étape dit quoi ouvrir, quoi saisir,
   ce qui s'affiche et ce qui vient de données réelles. */
.demo-band {
  margin: 0 0 1.1rem;
  padding: 1.1rem 1.15rem 1.15rem;
  background: linear-gradient(135deg, #0c1a2b 0%, #11263d 58%, #0f3157 100%);
  border: 1px solid #1b3550;
  border-radius: var(--r-lg);
  color: #dbe7f4;
}
.demo-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1.4rem; justify-content: space-between; }
.demo-kicker {
  margin: 0 0 .2rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7fa9d6;
}
.demo-band h2 {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.25;
  color: #fff;
  letter-spacing: -.01em;
}
.demo-band .demo-lede { margin: .35rem 0 0; max-width: 760px; font-size: .79rem; line-height: 1.6; color: #b9cadc; }
.demo-band .demo-lede b { color: #fff; }
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .55rem;
  border: 1px solid rgba(122, 178, 239, .35);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .61rem;
  color: #bcd7f4;
  white-space: nowrap;
}
.demo-badge .dot { background: #4ade80; }
.demo-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin-top: .95rem;
}
.demo-step {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .8rem .82rem .82rem;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 7px;
  min-width: 0;
}
.demo-step-h { display: flex; align-items: center; gap: .5rem; }
.demo-num {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #e8f1fc;
  color: #12345b;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
}
.demo-step-h b { color: #fff; font-size: .8rem; line-height: 1.25; }
.demo-time {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .58rem;
  color: #8fb5dc;
  white-space: nowrap;
}
.demo-step p { margin: 0; font-size: .72rem; line-height: 1.55; color: #c2d3e4; }
.demo-step p b { color: #fff; font-weight: 600; }
.demo-step .demo-do { color: #a9c4df; }
.demo-step .demo-do code {
  font-family: var(--mono);
  font-size: .66rem;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 3px;
  padding: .04rem .28rem;
  color: #eaf3ff;
  overflow-wrap: anywhere;
}
.demo-real {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: auto;
  padding-top: .4rem;
  font-size: .63rem;
  color: #9bd8b6;
}
.demo-real::before { content: "●"; font-size: .5rem; color: #4ade80; }
.demo-real.demo-mixed { color: #f3cf8b; }
.demo-real.demo-mixed::before { color: #f5b642; }
.demo-open {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .15rem;
  font-size: .7rem;
  font-weight: 600;
  color: #8ec5ff;
  text-decoration: none;
}
.demo-open:hover { color: #fff; text-decoration: underline; }
.demo-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .66rem;
  color: #93abc3;
}
.demo-foot b { color: #dbe7f4; }
.demo-foot a { color: #9ecbff; }
@media (max-width: 980px) {
  .demo-steps { grid-template-columns: 1fr; }
  .demo-step { display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; }
  .demo-step-h, .demo-step p { grid-column: 1 / -1; }
  .demo-real { margin-top: 0; }
  .demo-open { justify-self: end; }
}
@media (max-width: 560px) {
  .demo-band { padding: .9rem .8rem 1rem; }
  .demo-band h2 { font-size: 1.02rem; }
  .demo-step { display: flex; }
  .demo-open { align-self: flex-start; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   1. CADRE APPLICATIF
   ───────────────────────────────────────────────────────────────────────────── */

html.has-app { background: var(--canvas); }
html.has-app body { background: var(--canvas); }

/* Conteneur du cadre. Attention : `.ndri-app` est déjà pris par les fiches
   d'application de la partie 3 — le cadre utilise donc `.ndri-suite`. */
.ndri-suite {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  font-family: var(--ui);
}

/* ── Barre latérale ────────────────────────────────────────────────────────── */

.ndri-app-nav {
  position: sticky;
  top: 0;
  align-self: flex-start;
  width: var(--nav-w);
  flex: 0 0 var(--nav-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--nav-bg);
  border-right: 1px solid #16273d;
  color: var(--nav-ink);
  font-size: 13px;
  line-height: 1.35;
  z-index: 80;
}

.ndri-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 14px 13px;
  border-bottom: 1px solid var(--nav-line);
  text-decoration: none;
}
.ndri-logo-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.ndri-logo-t { display: flex; flex-direction: column; min-width: 0; }
.ndri-logo-t b {
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .005em;
  white-space: nowrap;
}
.ndri-logo-t i {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nav-ink-2);
  margin-top: 3px;
  white-space: nowrap;
}

.ndri-nav-org {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px 12px;
  border-bottom: 1px solid var(--nav-line);
}
.ndri-nav-org .k {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #63788f;
  font-weight: 700;
}
.ndri-nav-org .v { font-size: 11.5px; color: #a9bbcd; }

.ndri-nav { flex: 1 1 auto; padding: 10px 8px 6px; }
.ndri-nav-group { margin-bottom: 13px; }
.ndri-nav-group > p {
  margin: 0 0 4px;
  padding: 0 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5e7590;
}
.ndri-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  border-left: 2px solid transparent;
  color: var(--nav-ink);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.ndri-nav-item:hover { background: rgba(255, 255, 255, .055); color: #fff; }
.ndri-nav-item:focus-visible { outline: 2px solid #5b93e8; outline-offset: -2px; }
.ndri-nav-item.is-active {
  background: rgba(56, 132, 255, .15);
  border-left-color: #4b8df0;
  color: #fff;
  font-weight: 600;
}
.ndri-nav-k {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  color: #64809c;
  letter-spacing: .02em;
}
.ndri-nav-item.is-active .ndri-nav-k { color: #8fb7ea; }

/* Sous-navigation dépliable — sections du hub de recherche (H-02) */
.ndri-nav-sub {
  margin: 2px 0 6px 10px;
  padding-left: 8px;
  border-left: 1px solid var(--nav-line);
}
.ndri-nav-sub > summary {
  list-style: none;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6e87a1;
}
.ndri-nav-sub > summary::-webkit-details-marker { display: none; }
.ndri-nav-sub > summary::marker { content: ""; }
.ndri-nav-sub > summary::before {
  content: "▸";
  display: inline-block;
  width: 10px;
  margin-right: 4px;
  color: #5e7590;
}
.ndri-nav-sub[open] > summary::before { content: "▾"; }
.ndri-nav-sub > summary:hover { color: #fff; background: rgba(255, 255, 255, .055); }
.ndri-nav-sub > summary:focus-visible { outline: 2px solid #5b93e8; outline-offset: -2px; }
.ndri-nav-sub ul { list-style: none; margin: 2px 0 0; padding: 0; }
.ndri-nav-sub li { margin: 0; }
.ndri-nav-sub a {
  display: block;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--nav-ink-2);
  font-size: 11.5px;
  line-height: 1.3;
  text-decoration: none;
}
.ndri-nav-sub a:hover { background: rgba(255, 255, 255, .055); color: #fff; }
.ndri-nav-sub a:focus-visible { outline: 2px solid #5b93e8; outline-offset: -2px; }

.ndri-nav-foot {
  margin-top: auto;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--nav-line);
}
.ndri-who {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .04);
}
.ndri-avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: #1e3450;
  color: #dbe6f2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}
.ndri-who span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ndri-who b { color: #e6edf5; font-size: 11.5px; font-weight: 600; }
.ndri-who i { font-style: normal; font-size: 10.5px; color: var(--nav-ink-2); }

/* ── Colonne de contenu + barre supérieure ────────────────────────────────── */

.ndri-app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ndri-app-top {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--top-h);
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.ndri-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--ink-3);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.ndri-crumbs li { display: flex; align-items: center; gap: 6px; }
.ndri-crumbs li + li::before { content: '/'; color: #c4d0de; }
.ndri-crumbs a { color: var(--ink-3); text-decoration: none; }
.ndri-crumbs a:hover { color: var(--ink); }
.ndri-crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

.ndri-top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ndri-env {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #52698a;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 7px;
  white-space: nowrap;
}
.ndri-index-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #34503f;
  background: #f1f7f3;
  border: 1px solid #cfe3d8;
  border-radius: 3px;
  padding: 3px 8px;
  white-space: nowrap;
  cursor: help;
}
.ndri-index-pill[data-state="warn"] {
  color: #6d4a08;
  background: var(--warn-weak);
  border-color: #f0dcb4;
}
.ndri-top-link {
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
}
.ndri-top-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ndri-top-sep { width: 1px; height: 20px; background: var(--line); }

.ndri-app-page {
  flex: 1 1 auto;
  min-width: 0;
  padding: 22px 24px 56px;
}
.ndri-app-page > .pg,
.ndri-app-page > .ndri-main,
.ndri-app-page > .ndri-hero { max-width: 1320px; margin-left: auto; margin-right: auto; }

/* ── Bouton de menu (mobile) et voile ─────────────────────────────────────── */

.ndri-burger {
  display: none;
  width: 32px;
  height: 32px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}
.ndri-burger span { display: block; width: 15px; height: 2px; background: var(--ink-2); }
.ndri-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9, 19, 33, .45);
  z-index: 110;
}

@media (max-width: 1080px) {
  .ndri-app-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: auto;
    transform: translateX(-100%);
    transition: transform .18s ease-out;
    box-shadow: 12px 0 32px -12px rgba(9, 19, 33, .5);
    z-index: 120;
  }
  html.ndri-nav-open .ndri-app-nav { transform: none; }
  html.ndri-nav-open .ndri-scrim { display: block; }
  .ndri-burger { display: inline-flex; }
  .ndri-app-page { padding: 16px 14px 48px; }
  .ndri-app-top { padding: 0 12px; gap: 10px; }
  .ndri-env, .ndri-top-sep { display: none; }
}
@media (max-width: 720px) {
  .ndri-index-pill { display: none; }
  .ndri-crumbs li:not([aria-current="page"]) { display: none; }
  /* Le groupe est masqué : son séparateur ne doit pas rester orphelin. */
  .ndri-crumbs li + li::before { content: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. COMPOSANTS DE POSTE DE TRAVAIL
   ───────────────────────────────────────────────────────────────────────────── */

/* ── En-tête de page ──────────────────────────────────────────────────────── */

.pg { font-family: var(--ui); color: var(--ink); }
.pg-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.pg-eyebrow {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pg-title {
  margin: 0;
  font-family: var(--ui);
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -.012em;
  line-height: 1.2;
  color: var(--ink);
}
.pg-title .pg-ver {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 5px;
  vertical-align: 4px;
  margin-left: 6px;
}
.pg-sub {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 78ch;
}
.pg-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 2px;
}

/* Barre de contexte sous le titre (index, instance, empreinte) */
.pg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0;
  padding: 9px 0 0;
  font-size: 11.5px;
  color: var(--ink-3);
}
.pg-meta b { color: var(--ink-2); font-weight: 600; }
.pg-meta .mono { font-family: var(--mono); font-size: 11px; }
.pg-meta .sep { color: #cfd9e4; }

/* ── Boutons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 12px;
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); border-color: #c9d5e2; color: var(--ink); }
.btn-quiet { background: transparent; color: var(--accent); padding-left: 0; padding-right: 0; }
.btn-quiet:hover { text-decoration: underline; }
.btn-sm { font-size: 11.5px; padding: 5px 9px; }
.btn-block { display: flex; justify-content: center; width: 100%; }
.btn:focus-visible { outline: 2px solid #5b93e8; outline-offset: 2px; }

/* ── Indicateurs ──────────────────────────────────────────────────────────── */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 18px 0 20px;
}
.kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 15px 14px;
  background: var(--surface);
}
.kpi-l {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kpi-v {
  font-family: var(--ui);
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi-m { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }

/* ── Badges et pastilles ──────────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.6;
  padding: 0 6px;
  border-radius: 3px;
  border: 1px solid #d6e0ea;
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag--ok { border-color: #c6e3d3; background: var(--ok-weak); color: var(--ok); }
.tag--warn { border-color: #ecd6ac; background: var(--warn-weak); color: var(--warn); }
.tag--err { border-color: #f0cfcf; background: var(--err-weak); color: var(--err); }
.tag--info { border-color: #cadcf4; background: var(--accent-weak); color: var(--accent-2); }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
  flex: 0 0 6px;
  display: inline-block;
}
.dot--ok { background: #17a06a; box-shadow: 0 0 0 3px rgba(23, 160, 106, .12); }
.dot--warn { background: #d0912a; box-shadow: 0 0 0 3px rgba(208, 145, 42, .14); }
.dot--err { background: #cc3f3f; box-shadow: 0 0 0 3px rgba(204, 63, 63, .12); }

/* ── Panneaux ─────────────────────────────────────────────────────────────── */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
}
.panel-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line-2);
  background: var(--surface);
}
.panel-h h2 {
  margin: 0;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .002em;
  color: var(--ink);
}
.panel-h p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
}
.panel-h-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  padding-top: 3px;
}
.panel-link {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 3px;
}
.panel-link:hover { text-decoration: underline; }
.panel-b { padding: 14px 15px; }
.panel-b--flush { padding: 0; }
.panel-b > :first-child { margin-top: 0; }
.panel-b > :last-child { margin-bottom: 0; }
.panel-f {
  padding: 9px 15px;
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ── Tableaux ─────────────────────────────────────────────────────────────── */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  color: var(--ink-2);
}
.tbl thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 7px 12px;
  white-space: nowrap;
}
.tbl tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
  line-height: 1.45;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #fafcfe; }
.tbl a { color: var(--accent); text-decoration: none; font-weight: 500; }
.tbl a:hover { text-decoration: underline; }
.tbl .mono { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .nowrap { white-space: nowrap; }
.tbl-sub {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.35;
  margin-top: 1px;
}
.tbl--apps td:first-child { width: 54px; }

/* ── Mise en page ─────────────────────────────────────────────────────────── */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}
.grid-split {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px) {
  .grid-split { grid-template-columns: minmax(0, 1fr); }
}
.grid-2 > .panel, .grid-split > .panel { margin-bottom: 0; }
.grid-2, .grid-split { margin-bottom: 16px; }

/* ── Listes de données ────────────────────────────────────────────────────── */

.kv { margin: 0; }
.kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px dotted #e3eaf3;
  font-size: 12px;
}
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-3); }
.kv dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}
.kv dd.mono { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--ink-2); }

.list-check, .doclist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-check li {
  position: relative;
  padding: 5px 0 5px 20px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}
.list-check li:last-child { border-bottom: 0; }
.list-check li::before {
  position: absolute;
  left: 0;
  top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}
.list-check li[data-k="ok"]::before { content: '✓'; color: var(--ok); }
.list-check li[data-k="no"]::before { content: '✕'; color: #c2683a; }
.list-check li[data-k="info"]::before { content: '·'; color: var(--ink-4); }

.doclist li { border-bottom: 1px solid var(--line-2); }
.doclist li:last-child { border-bottom: 0; }
.doclist a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 15px;
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: none;
}
.doclist a:hover { background: var(--surface-2); color: var(--accent); }
.doclist .mono { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }

/* ── Chaîne de traitement (catalogue) ─────────────────────────────────────── */

.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.flow > div {
  background: var(--surface);
  padding: 11px 13px;
}
.flow .k {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.flow .t {
  margin: 3px 0 2px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink);
}
.flow .d { font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }

/* ── Pied de page ─────────────────────────────────────────────────────────── */

.pg-foot {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.pg-foot .mono { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }

/* ─────────────────────────────────────────────────────────────────────────────
   3. PAGES HÉRITÉES (guide, notes, cas pratique, app)
   Les classes ci-dessous existaient avant le cadre applicatif. Elles sont
   conservées — le HTML des pages n'est pas réécrit — mais rendues au langage
   visuel du poste de travail : fond blanc, filets fins, titres sobres.
   ───────────────────────────────────────────────────────────────────────────── */

.ndri-shell { font-family: var(--ui); }

.ndri-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 24px 56px;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.6;
}
.ndri-wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

.ndri-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 20px 0 16px;
  font-family: var(--ui);
}
.ndri-hero h1 {
  margin: 0;
  font-family: var(--ui);
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -.012em;
  line-height: 1.2;
  color: var(--ink);
}
.ndri-eyebrow {
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ndri-lede {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 82ch;
}
.ndri-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}
.ndri-runline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 18px;
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  font-size: 11.5px;
  color: var(--ink-3);
}
.ndri-runline strong { color: var(--ink-2); font-weight: 600; }
.ndri-runline strong[data-meta="fp"], .ndri-runline .mono {
  font-family: var(--mono);
  font-size: 10.5px;
}

.ndri-section-title {
  margin: 22px 0 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.ndri-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 12px;
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.ndri-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.ndri-btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.ndri-btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink-2) !important; }
.ndri-btn-ghost:hover { background: var(--surface-2); border-color: #c9d5e2; color: var(--ink) !important; }

.ndri-note {
  background: #fdf8ee;
  border: 1px solid #ecdcbc;
  border-left: 3px solid #d6a33c;
  border-radius: 0 var(--r) var(--r) 0;
  padding: 10px 13px;
  font-size: 12px;
  line-height: 1.6;
  color: #6b4c12;
  margin: 14px 0;
}
.ndri-note strong { color: #573c0a; }

.ndri-chain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 16px;
}
.ndri-chain .ndri-step { padding: 10px 13px; border-right: 1px solid var(--line-2); }
.ndri-chain .ndri-step-k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}
.ndri-chain .ndri-step-v { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.ndri-chain .ndri-step-m { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; }

.ndri-files {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.ndri-files li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 13px;
  border-bottom: 1px solid var(--line-2);
  font-size: 12px;
}
.ndri-files li:last-child { border-bottom: 0; }
.ndri-files .ndri-file-name { font-weight: 600; color: var(--ink); }
.ndri-files .ndri-file-desc { color: var(--ink-3); font-size: 11.5px; }
.ndri-files a { color: var(--accent); text-decoration: none; }
.ndri-files a:hover { text-decoration: underline; }

.ndri-apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
}
.ndri-app {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ndri-app h3 { font-size: 13px; font-weight: 650; color: var(--ink); margin: 0; }
.ndri-app p { font-size: 12px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.ndri-app .ndri-app-head { display: flex; align-items: center; gap: 8px; }
.ndri-app .ndri-app-ico { font-size: 15px; }
.ndri-app .ndri-ver {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 4px;
}
.ndri-app .ndri-open { font-size: 11.5px; font-weight: 600; color: var(--accent); text-decoration: none; }

.ndri-foot {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 14px 0 20px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-3);
  font-family: var(--ui);
}
.ndri-foot a { color: var(--ink-2); }
.ndri-foot .ndri-mono, .ndri-mono { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }

/* ─────────────────────────────────────────────────────────────────────────────
   4. RACCORDS POUR LES PAGES OUTIL
   Le traceur et le moteur fiat ont leur propre barre d'onglets, écrite pour un
   fond sombre. Sous le cadre applicatif, ces barres deviennent des barres de
   page claires : c'est la seule chrome sombre qui restait en haut de l'écran,
   et elle doublait la navigation latérale.
   ───────────────────────────────────────────────────────────────────────────── */

/* Traceur — #site-header (barre d'onglets de la page) */
html.has-app #site-header {
  position: static !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 9px 16px !important;
  gap: 8px 16px !important;
  border-radius: 0 !important;
}
html.has-app #site-header [style*="#e6edf3"] {
  color: var(--ink) !important;
  font-family: var(--ui) !important;
  font-size: 15px !important;
  letter-spacing: -.005em;
}
html.has-app #site-header [style*="#8b949e"] { color: var(--ink-3) !important; }
html.has-app #site-header a[style] {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink-2) !important;
}
html.has-app #site-header .tab-btn {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  border-radius: var(--r) !important;
  font-size: 11.5px !important;
  padding: 5px 10px !important;
  box-shadow: none !important;
}
html.has-app #site-header .tab-btn:hover {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: #c9d5e2 !important;
}
html.has-app #site-header .tab-btn.active {
  background: var(--accent-weak) !important;
  border-color: #bcd2ef !important;
  color: var(--accent-2) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* Moteur fiat-crypto — .header (barre d'onglets de la page) */
html.has-app .ndri-app-page > .header {
  position: static !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
  padding: 9px 16px !important;
}
html.has-app .ndri-app-page > .header .brand-name {
  color: var(--ink) !important;
  font-family: var(--ui) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -.005em;
}
html.has-app .ndri-app-page > .header .brand-sub { color: var(--ink-3) !important; }
html.has-app .ndri-app-page > .header .brand-icon {
  border-radius: var(--r) !important;
  background: #eef3f9 !important;
  box-shadow: none !important;
  font-size: 15px !important;
}
html.has-app .ndri-app-page > .header .hn-btn {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  font-size: 11.5px !important;
  box-shadow: none !important;
}
html.has-app .ndri-app-page > .header .hn-btn:hover {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-color: #c9d5e2 !important;
}
html.has-app .ndri-app-page > .header .hn-btn.active {
  background: var(--accent-weak) !important;
  border-color: #bcd2ef !important;
  color: var(--accent-2) !important;
  box-shadow: none !important;
}
html.has-app .ndri-app-page > .header .back-link {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  font-size: 11.5px !important;
}
html.has-app .ndri-app-page > .header .back-link:hover {
  background: var(--surface-2) !important;
  color: var(--accent) !important;
  border-color: #bcd2ef !important;
}
.ndri-top-lang {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface);
}
.ndri-top-lang-btn {
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--ink-3);
  background: transparent;
  border: 0;
  padding: 5px 7px;
  cursor: pointer;
}
.ndri-top-lang-btn + .ndri-top-lang-btn { border-left: 1px solid var(--line); }
.ndri-top-lang-btn:hover { background: var(--surface-2); color: var(--ink); }
.ndri-top-lang-btn.is-on { background: var(--accent-weak); color: var(--accent-2); }
.ndri-top-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  padding: 0;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
}
.ndri-top-gear:hover { background: var(--surface-2); color: var(--ink); }
.ndri-top-lang-btn:focus-visible,
.ndri-top-gear:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Le sélecteur flottant des pages bilingues est remplacé par celui de la barre. */
html.has-app .ndri-app-page > .lang-toggle-float { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   5. IMPRESSION
   ───────────────────────────────────────────────────────────────────────────── */

@media print {
  .ndri-app-nav,
  .ndri-app-top,
  .ndri-scrim,
  .ndri-burger { display: none !important; }
  .ndri-suite { display: block !important; min-height: 0 !important; }
  .ndri-app-main { display: block !important; }
  .ndri-app-page { padding: 0 !important; }
  html.has-app,
  html.has-app body { background: #fff !important; }
  .panel, .tbl, .kpis { break-inside: avoid; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. RÉGLAGES GÉNÉRAUX
   ───────────────────────────────────────────────────────────────────────────── */

/* Les pages de la suite n'embarquent pas de remise à zéro : le cadre la porte. */
html.has-app body { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.55; }
.pg, .pg *, .pg *::before, .pg *::after { box-sizing: border-box; }
.pg .mono, .pg code, .pg kbd { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.pg .nowrap { white-space: nowrap; }
.pg-meta .dot { vertical-align: 1px; margin-right: 3px; }

.pg-foot a { color: var(--accent); text-decoration: none; }
.pg-foot a:hover { text-decoration: underline; }
.pg-foot b { color: var(--ink-2); font-weight: 600; }

/* Les pages héritées posent parfois un fond propre sur <body> : le cadre le
   neutralise pour que la colonne de travail garde la même teinte partout. */
html.has-app body > .ndri-suite { background: var(--canvas); }
.ndri-suite, .ndri-suite * { box-sizing: border-box; }
.tbl td.mono { white-space: nowrap; }