/* ==========================================================================
   Neka Paie — système visuel
   Direction : éditorial chaleureux. Papier, encre brune, orange brûlé.
   Titres en Fraunces, texte en Instrument Sans, chiffres et références en
   IBM Plex Mono. Pas de dégradés, pas d'ombres portées décoratives.

   Les noms de classes historiques (np-card, badge-*-np, alert-*-np…) sont
   conservés : seules leurs apparences changent.
   ========================================================================== */

:root {
    /* Papier & encre */
    --paper:        #f6f1e8;
    --paper-deep:   #ede5d7;
    --sheet:        #fffcf6;
    --ink:          #2b2119;
    --ink-soft:     #54473c;
    --ink-faint:    #8b7d6f;
    --rule:         #e2d7c6;
    --rule-strong:  #c9b9a2;

    /* Accent : orange brûlé, réservé aux actions et à l'état actif */
    --accent:       #b9470f;
    --accent-deep:  #8f350a;
    --accent-tint:  #f4e2d4;

    /* États, désaturés pour rester dans la gamme */
    --ok:           #4a6b35;  --ok-tint:      #e6ead8;
    --wait:         #9a6a12;  --wait-tint:    #f3e7cc;
    --ko:           #a0322a;  --ko-tint:      #f3ddd7;
    --note:         #355f7a;  --note-tint:    #dfe8ed;
    --plum:         #6b4a6e;  --plum-tint:    #ece1ea;

    --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --sans:  'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
    --mono:  'IBM Plex Mono', ui-monospace, Menlo, monospace;

    --radius:    4px;
    --radius-sm: 3px;

    /* Alias historiques — utilisés en ligne dans certaines pages */
    --np-orange: var(--accent);
    --np-orange-dark: var(--accent-deep);
    --np-orange-light: var(--accent);
    --np-dark: var(--ink);
    --np-darker: var(--ink);
    --np-ink: var(--ink);
    --np-body: var(--ink-soft);
    --np-muted: var(--ink-faint);
    --np-border: var(--rule);
    --np-border-soft: var(--rule);
    --np-bg: var(--paper);
    --np-bg-soft: var(--paper-deep);
    --np-code-bg: #2b2119;
    --np-purple: var(--plum);
    --np-success: var(--ok);
    --np-warning: var(--wait);
    --np-danger: var(--ko);
    --np-info: var(--note);
    --np-gradient: var(--accent);
    --np-gradient-dark: var(--ink);
    --np-shadow-sm: none;
    --np-shadow: none;
    --np-shadow-lg: 0 1px 0 var(--rule);
    --np-radius: var(--radius);
    --c-primary: var(--accent);
    --c-secondary: var(--ink);
    --c-accent: var(--accent);
    --c-om: var(--accent);

    /* Bootstrap */
    --bs-body-font-family: var(--sans);
    --bs-body-color: var(--ink-soft);
    --bs-body-bg: var(--paper);
    --bs-border-color: var(--rule);
    --bs-link-color: var(--accent);
    --bs-link-color-rgb: 185, 71, 15;
    --bs-link-hover-color: var(--accent-deep);
    --bs-link-hover-color-rgb: 143, 53, 10;
    --bs-primary: var(--accent);
    --bs-primary-rgb: 185, 71, 15;
    --bs-secondary-color: var(--ink-faint);
    --bs-emphasis-color: var(--ink);
    --bs-heading-color: var(--ink);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius);
}

/* ---------- Base ---------- */

html { font-size: 15px; }

body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink-soft);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01";
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
    font-variation-settings: "opsz" 48;
}
h5, h6, .h5, .h6 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }

strong, b { color: var(--ink); font-weight: 600; }

hr { border-color: var(--rule); opacity: 1; }

::selection { background: var(--accent-tint); color: var(--ink); }

.text-muted, .text-secondary { color: var(--ink-faint) !important; }
.text-success { color: var(--ok) !important; }
.text-danger  { color: var(--ko) !important; }
.text-warning { color: var(--wait) !important; }
.text-info    { color: var(--note) !important; }
.text-primary { color: var(--accent) !important; }
.bg-light     { background-color: var(--paper-deep) !important; }
.bg-white     { background-color: var(--sheet) !important; }
.border       { border-color: var(--rule) !important; }

.small, small { font-size: 0.86em; }

/* Chiffres : alignés et lisibles en colonne */
.num, .stat-value, .table-np td.text-end, td.text-end, .amount {
    font-variant-numeric: tabular-nums lining-nums;
}

/* Petites capitales — remplacent les libellés en MAJUSCULES espacées */
.smallcaps {
    font-variant: all-small-caps;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--ink-faint);
}

/* Les pictogrammes restants passent au second plan */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands { color: inherit; opacity: 0.75; }

/* ---------- Code ---------- */

code, .code-inline, kbd {
    font-family: var(--mono);
    font-size: 0.86em;
    background: var(--paper-deep);
    color: var(--ink);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
}
a code { color: var(--accent); }
kbd { border: 1px solid var(--rule-strong); box-shadow: none; }

pre, pre.code-block {
    font-family: var(--mono);
    font-size: 0.84rem;
    line-height: 1.6;
    background: #2b2119;
    color: #efe6d8;
    padding: 16px 18px;
    border-radius: var(--radius);
    overflow-x: auto;
    position: relative;
    border: 0;
}
pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
pre.bg-light { background: var(--paper-deep) !important; color: var(--ink); }
pre.code-block .lang {
    position: absolute; top: 8px; right: 12px;
    font-size: 0.72rem; color: rgba(239,230,216,.45);
    font-variant: all-small-caps; letter-spacing: .06em;
}

/* ---------- Boutons ---------- */

.btn {
    font-family: var(--sans);
    font-weight: 500;
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.95rem;
    box-shadow: none !important;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn-sm { padding: 0.25rem 0.65rem; font-size: 0.86rem; }
.btn-lg { padding: 0.65rem 1.3rem; }

.btn-np-primary, .btn-primary {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fffaf3;
}
.btn-np-primary:hover, .btn-np-primary:focus,
.btn-primary:hover, .btn-primary:focus {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fffaf3;
}

.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-dark:hover { background: #000; border-color: #000; color: var(--paper); }

.btn-light, .btn-outline-secondary, .btn-secondary, .btn-outline-dark {
    background: var(--sheet);
    border: 1px solid var(--rule-strong);
    color: var(--ink);
}
.btn-light:hover, .btn-outline-secondary:hover, .btn-secondary:hover, .btn-outline-dark:hover {
    background: var(--paper-deep);
    border-color: var(--ink-faint);
    color: var(--ink);
}
.btn-outline-primary { border: 1px solid var(--accent); color: var(--accent); background: transparent; }
.btn-outline-primary:hover { background: var(--accent); color: #fffaf3; border-color: var(--accent); }

.btn-success, .btn-outline-success:hover { background: var(--ok); border-color: var(--ok); color: #fffaf3; }
.btn-outline-success { border-color: var(--ok); color: var(--ok); }
.btn-danger, .btn-outline-danger:hover { background: var(--ko); border-color: var(--ko); color: #fffaf3; }
.btn-outline-danger { border-color: var(--ko); color: var(--ko); }
.btn-warning, .btn-outline-warning:hover { background: var(--wait); border-color: var(--wait); color: #fffaf3; }
.btn-outline-warning { border-color: var(--wait); color: var(--wait); }
.btn-info, .btn-outline-info:hover { background: var(--note); border-color: var(--note); color: #fffaf3; }
.btn-outline-info { border-color: var(--note); color: var(--note); }
.btn-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Formulaires ---------- */

.form-label, label { color: var(--ink); font-weight: 500; font-size: 0.93rem; }
.form-text { color: var(--ink-faint); }

.form-control, .form-select {
    background-color: var(--sheet);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-family: var(--sans);
}
.form-control::placeholder { color: #b3a594; }
.form-control:focus, .form-select:focus {
    background-color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}
.form-control[readonly], .form-control:disabled, .form-select:disabled { background-color: var(--paper-deep); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-tint); border-color: var(--accent); }
.input-group-text { background: var(--paper-deep); border-color: var(--rule-strong); color: var(--ink-soft); }

/* ---------- Cartes ---------- */

.np-card, .card {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: none;
    margin-bottom: 24px;
}
.card-header, .card-footer { background: transparent; border-color: var(--rule); }

.np-card-header {
    padding: 16px 22px 14px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.np-card-header h3, .np-card-header h4, .np-card-header h5 {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.12rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.np-card-body { padding: 20px 22px; }

/* Indicateurs : une rangée de chiffres séparés par des filets, sans tuiles */
.np-stat-card {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 16px 20px 15px;
    height: 100%;
    position: relative;
}
.np-stat-card::before {
    content: "";
    position: absolute;
    left: 20px; top: 0;
    width: 22px; height: 2px;
    background: var(--rule-strong);
}
.np-stat-card.orange::before  { background: var(--accent); }
.np-stat-card.success::before { background: var(--ok); }
.np-stat-card.warning::before { background: var(--wait); }
.np-stat-card.danger::before  { background: var(--ko); }
.np-stat-card.info::before    { background: var(--note); }
.np-stat-card.purple::before  { background: var(--plum); }
.np-stat-card .stat-icon { display: none; }
.np-stat-card .stat-label {
    font-variant: all-small-caps;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-faint);
    margin-bottom: 4px;
    text-transform: none;
}
.np-stat-card .stat-value {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 4px;
    font-variation-settings: "opsz" 96;
}
.np-stat-card .stat-value small { font-family: var(--sans); }
.np-stat-card .stat-trend { font-size: 0.85rem; color: var(--ink-faint); }
.np-stat-card .stat-trend.up { color: var(--ok); }
.np-stat-card .stat-trend.down { color: var(--ko); }

/* ---------- Pastilles de statut ---------- */

.badge-np-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.84rem;
    padding: 1px 8px 1px 7px;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    background: var(--paper-deep);
    color: var(--ink-soft);
}
.badge-np-status::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.badge-success-np   { background: var(--ok-tint);   color: var(--ok); }
.badge-warning-np   { background: var(--wait-tint); color: var(--wait); }
.badge-danger-np    { background: var(--ko-tint);   color: var(--ko); }
.badge-info-np      { background: var(--note-tint); color: var(--note); }
.badge-secondary-np { background: var(--paper-deep); color: var(--ink-faint); }
.badge-dark-np      { background: var(--paper-deep); color: var(--ink); }
.badge-purple-np    { background: var(--plum-tint); color: var(--plum); }

.badge {
    font-family: var(--sans);
    font-weight: 500;
    border-radius: var(--radius-sm);
    letter-spacing: 0;
}
.badge.bg-success   { background: var(--ok-tint) !important; color: var(--ok) !important; }
.badge.bg-danger    { background: var(--ko-tint) !important; color: var(--ko) !important; }
.badge.bg-warning   { background: var(--wait-tint) !important; color: var(--wait) !important; }
.badge.bg-info      { background: var(--note-tint) !important; color: var(--note) !important; }
.badge.bg-secondary { background: var(--paper-deep) !important; color: var(--ink-soft) !important; }
.badge.bg-primary   { background: var(--accent-tint) !important; color: var(--accent-deep) !important; }
.badge.bg-dark      { background: var(--ink) !important; color: var(--paper) !important; }
.badge.bg-light     { background: var(--paper-deep) !important; color: var(--ink) !important; }

/* ---------- Tableaux ---------- */

.table-np, .table {
    width: 100%;
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink-soft);
    --bs-table-border-color: var(--rule);
    --bs-table-hover-bg: var(--paper);
    --bs-table-striped-bg: rgba(237,229,215,.45);
    color: var(--ink-soft);
}
.table-np thead th, .table thead th {
    background: transparent;
    font-family: var(--sans);
    font-variant: all-small-caps;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-faint);
    text-transform: none;
    border-bottom: 1px solid var(--rule-strong);
    padding: 10px 16px 8px;
    white-space: nowrap;
}
.table-np tbody td, .table tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--rule);
    font-size: 0.93rem;
    vertical-align: middle;
}
.table-np tbody tr:last-child td { border-bottom: 0; }
.table-np tbody tr:hover { background: var(--paper); }
.table-np td code, .table td code { background: transparent; padding: 0; color: var(--ink); }
.table-np a code { color: var(--accent); }
.table-sm td, .table-sm th { padding: 7px 10px !important; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
}
.dataTables_wrapper .dataTables_info { color: var(--ink-faint); font-size: 0.86rem; }
.page-link { color: var(--ink); background: var(--sheet); border-color: var(--rule); }
.page-link:hover { color: var(--accent); background: var(--paper-deep); border-color: var(--rule); }
.page-item.active .page-link, .active > .page-link { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.page-link:focus { box-shadow: 0 0 0 3px var(--accent-tint); }

/* ---------- Alertes : un filet, pas de bandeau coloré ---------- */

.alert {
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    background: var(--sheet);
    color: var(--ink-soft);
    padding: 12px 16px;
}
.alert-np { border: 1px solid var(--rule); border-left-width: 1px; }
.alert-success, .alert-success-np { background: var(--ok-tint);   border-color: #cdd6b8; color: #344d25; }
.alert-danger,  .alert-danger-np, .alert-error, .alert-error-np
                                  { background: var(--ko-tint);   border-color: #e6c3ba; color: #7c241e; }
.alert-warning, .alert-warning-np { background: var(--wait-tint); border-color: #e4d1a6; color: #6f4c0c; }
.alert-info,    .alert-info-np    { background: var(--note-tint); border-color: #c4d4de; color: #284a60; }
.alert-light   { background: var(--paper-deep); }
.alert strong, .alert b { color: inherit; }
.alert hr { border-color: currentColor; opacity: .2; }
.alert code { background: rgba(255,255,255,.55); }

/* ---------- Divers Bootstrap ---------- */

.dropdown-menu {
    background: var(--sheet);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(43,33,25,.08);
    padding: 4px;
    font-size: 0.93rem;
}
.dropdown-item { border-radius: var(--radius-sm); color: var(--ink); padding: 6px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--paper-deep); color: var(--ink); }
.dropdown-item.active, .dropdown-item:active { background: var(--accent); color: #fffaf3; }
.dropdown-divider { border-color: var(--rule); }

.nav-tabs { border-bottom: 1px solid var(--rule-strong); gap: 4px; }
.nav-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent;
    color: var(--ink-faint); font-weight: 500;
    padding: 8px 12px; margin-bottom: -1px; border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.nav-tabs .nav-link.active { background: transparent; color: var(--ink); border-bottom-color: var(--accent); }
.nav-pills .nav-link { color: var(--ink-soft); border-radius: var(--radius-sm); }
.nav-pills .nav-link.active { background: var(--ink); color: var(--paper); }

.list-group-item { background: var(--sheet); border-color: var(--rule); color: var(--ink-soft); }
.list-group-item.active { background: var(--ink); border-color: var(--ink); }

.modal-content { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.modal-header, .modal-footer { border-color: var(--rule); }

.progress { background: var(--paper-deep); border-radius: 999px; height: 6px; }
.progress-bar { background: var(--accent); }

.accordion-item { background: var(--sheet); border-color: var(--rule); }
.accordion-button { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); background: var(--sheet); }
.accordion-button:not(.collapsed) { background: var(--paper); color: var(--ink); box-shadow: inset 0 -1px 0 var(--rule); }
.accordion-button:focus { box-shadow: 0 0 0 3px var(--accent-tint); }

details > summary { cursor: pointer; }

.select2-container--bootstrap-5 .select2-selection { background: var(--sheet); border-color: var(--rule-strong); border-radius: var(--radius-sm); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }

.copy-btn { cursor: pointer; color: var(--ink-faint); }
.copy-btn:hover { color: var(--accent); }

/* ==========================================================================
   Gabarit de l'application (back-office)
   ========================================================================== */

.np-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 248px;
    background: var(--paper-deep);
    border-right: 1px solid var(--rule);
    color: var(--ink-soft);
    z-index: 1000;
    overflow-y: auto;
    padding-bottom: 32px;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-strong) transparent;
}

.np-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 22px 18px;
    color: var(--ink);
    text-decoration: none;
}
.np-sidebar-brand .np-wordmark {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
    font-variation-settings: "opsz" 144;
}
.np-sidebar-brand .np-wordmark em { font-style: italic; font-weight: 400; color: var(--accent); }
.np-sidebar-brand .subtitle {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.np-sidebar-section-title {
    padding: 20px 22px 4px;
    font-variant: all-small-caps;
    letter-spacing: 0.06em;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink-faint);
}

.np-sidebar-nav { list-style: none; padding: 0; margin: 0; }
.np-sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 10px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.35;
    transition: background-color .12s, color .12s;
}
.np-sidebar-nav li a:hover { background: rgba(43,33,25,.05); color: var(--ink); }
.np-sidebar-nav li a.active {
    background: var(--sheet);
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--accent);
}

.np-nav-group > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 10px;
    padding: 6px 12px;
    cursor: pointer;
    list-style: none;
    font-size: 0.95rem;
    color: var(--ink-soft);
    border-radius: var(--radius-sm);
    user-select: none;
}
.np-nav-group > summary::-webkit-details-marker { display: none; }
.np-nav-group > summary::after {
    content: "";
    margin-left: auto;
    width: 6px; height: 6px;
    border-right: 1.5px solid var(--ink-faint);
    border-bottom: 1.5px solid var(--ink-faint);
    transform: rotate(-45deg);
    transition: transform .15s;
}
.np-nav-group[open] > summary::after { transform: rotate(45deg); }
.np-nav-group > summary:hover { background: rgba(43,33,25,.05); color: var(--ink); }
.np-nav-group.has-active > summary { color: var(--ink); font-weight: 600; }
.np-nav-group .np-nav-dot, .np-nav-group .np-nav-count { display: none; }
.np-nav-group .np-sidebar-nav { margin: 2px 0 6px; }
.np-nav-group .np-sidebar-nav li a { padding-left: 26px; font-size: 0.92rem; }

.np-main { margin-left: 248px; min-height: 100vh; display: flex; flex-direction: column; }

.np-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 40px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 100;
}
.np-topbar h1 {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink-faint);
    letter-spacing: 0;
}
.np-topbar .user-menu { display: flex; align-items: center; gap: 12px; }

.np-topbar .env-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border: 1px solid #e4d1a6;
    background: var(--wait-tint);
    color: var(--wait);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
}
.np-topbar .env-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.np-topbar .env-badge.prod { border-color: #cdd6b8; background: var(--ok-tint); color: var(--ok); }

.np-user-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 3px 8px 3px 3px;
    color: var(--ink);
    font-size: 0.93rem;
}
.np-user-toggle:hover, .np-user-toggle[aria-expanded="true"] { border-color: var(--rule-strong); background: var(--sheet); }
.np-user-initial {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 0.85rem;
    font-weight: 500;
}

.merchant-badge {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px 0 0;
    margin-right: 4px;
    border-right: 1px solid var(--rule);
}
.merchant-badge-logo, .merchant-badge-initial {
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--rule);
    background: var(--sheet);
}
.merchant-badge-initial {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-weight: 600; color: var(--accent);
}
.merchant-badge-text { line-height: 1.2; }
.merchant-badge-name { font-size: 0.9rem; font-weight: 600; color: var(--ink); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merchant-badge-meta { font-size: 0.8rem; color: var(--ink-faint); }
.merchant-badge-meta .is-sandbox { color: var(--wait); }
.merchant-badge-meta .is-live { color: var(--ok); }

.np-content { padding: 32px 40px 24px; flex: 1; max-width: 1360px; width: 100%; }

.np-page-title {
    font-family: var(--serif);
    font-size: 2.1rem;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 4px;
    font-variation-settings: "opsz" 144;
}
.np-page-subtitle {
    color: var(--ink-faint);
    font-size: 1rem;
    max-width: 68ch;
    margin-bottom: 28px;
}

.np-footer {
    padding: 18px 40px 26px;
    font-size: 0.84rem;
    color: var(--ink-faint);
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Bouton menu (mobile) */
.np-mobile-toggle {
    display: none;
    background: none;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    color: var(--ink);
    width: 34px; height: 34px;
    margin-right: 12px;
    padding: 0;
    align-items: center;
    justify-content: center;
}
.np-mobile-toggle span, .np-mobile-toggle span::before, .np-mobile-toggle span::after {
    display: block; width: 14px; height: 1.5px; background: currentColor; position: relative;
}
.np-mobile-toggle span::before, .np-mobile-toggle span::after { content: ""; position: absolute; left: 0; }
.np-mobile-toggle span::before { top: -5px; }
.np-mobile-toggle span::after { top: 5px; }

.np-sidebar-close {
    display: none;
    position: absolute;
    top: 18px; right: 14px;
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    line-height: 1;
}

.np-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(43,33,25,.35);
    z-index: 999;
}
.np-sidebar-overlay.open { display: block; }

@media (max-width: 991px) {
    .np-sidebar { width: 280px; max-width: 86vw; transform: translateX(-100%); transition: transform .25s ease; }
    .np-sidebar.open { transform: none; box-shadow: 0 0 40px rgba(43,33,25,.18); }
    .np-sidebar-close { display: flex; align-items: center; justify-content: center; }
    .np-main { margin-left: 0; }
    .np-mobile-toggle { display: inline-flex; }
    .np-topbar { padding: 10px 16px; }
    .np-content { padding: 22px 16px; }
    .np-footer { padding: 16px; }
    body.np-no-scroll { overflow: hidden; }

    .np-card-body:has(table), .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-np, .np-card-body table.table { min-width: 600px; }
}
.table-responsive .table-np { min-width: 600px; }

@media (max-width: 575px) {
    .np-topbar h1 { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .np-card-body { padding: 16px; }
    .np-card-header { padding: 14px 16px 12px; }
    .np-page-title { font-size: 1.65rem; }
    .merchant-badge-text, .np-user-name { display: none; }
    .merchant-badge { border-right: 0; padding-right: 0; }
}

/* ==========================================================================
   Pages publiques (accueil, connexion, paiement, développeurs)
   ========================================================================== */

.np-public { background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; }

.np-public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1160px;
    width: 100%;
    margin: 0 auto;
    padding: 22px 24px;
}
.np-public-header nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.np-public-header nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.96rem; }
.np-public-header nav a:hover { color: var(--ink); text-decoration: underline; }

.np-wordmark {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
    font-variation-settings: "opsz" 144;
}
.np-wordmark em { font-style: italic; font-weight: 400; color: var(--accent); }
a.np-wordmark:hover { color: var(--ink); }

.np-wrap { max-width: 1160px; width: 100%; margin: 0 auto; padding: 0 24px; }
.np-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

.np-kicker {
    font-variant: all-small-caps;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 1rem;
    color: var(--accent);
}

.np-display {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.3rem, 5vw, 3.9rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
    font-variation-settings: "opsz" 144;
}
.np-display em { font-style: italic; color: var(--accent); }

.np-lede { font-size: 1.16rem; color: var(--ink-soft); max-width: 58ch; }

.np-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.np-sheet {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

/* Carte d'authentification / de statut, centrée */
.np-auth {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 34px 34px 28px;
}
.np-auth h1, .np-auth h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.85rem;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.np-public-footer {
    margin-top: auto;
    border-top: 1px solid var(--rule);
    padding: 22px 24px 28px;
    font-size: 0.86rem;
    color: var(--ink-faint);
}
.np-public-footer .np-wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0; }
.np-public-footer a { color: var(--ink-soft); }