/* ==========================================================================
   NumiApp — CHARTE DU PANNEAU D'ADMINISTRATION  (backlog #13, volet design)
   Fichier : public/css/numiapp-panneau.css
   Chargé EN DERNIER par `layouts/app.blade.php` et `auth/login.blade.php`,
   APRÈS le thème acheté (style.css), APRÈS `admin.css` (qui peint le panneau
   en noir via la variable `--admin-panel-color`) et APRÈS `numiapp-admin.css`.

   POURQUOI CE FICHIER
   -------------------
   Le panneau portait encore l'habillage du thème acheté : bandeau et menu
   latéraux noirs, entrée de menu ACTIVE écrite en #263238 sur un fond #0C111C
   (contraste mesuré 1,43:1 → illisible), champ « Search Menu » à 3,04:1,
   titres dupliqués, tableaux sans bordure ni état vide, et à 1280 px de large
   le document débordait de 73 px (barre de défilement horizontale permanente).

   PRINCIPE
   --------
   Aucune vue n'est réécrite : une seule couche CSS, chargée en dernier,
   surcharge le thème d'origine. On monte la spécificité plutôt que d'empiler
   des `!important` (quelques exceptions ciblées, signalées en commentaire,
   uniquement là où le thème lui-même les emploie).

   JETONS DE LA FAMILLE NumiApp (source : `numiapp-socle.css` du panneau
   public et `lib/themes/numi_qrpay_tokens.dart` de l'application client).
   Le vert de marque décoratif est #1CB084 ; il n'est PAS utilisé comme couleur
   de texte ni de fond portant du texte (2,6:1 avec du blanc = échec AA). Le
   rôle « action / texte vert » est tenu par #007A5A (5,34:1 sur blanc, 5,34:1
   en blanc sur vert). Tous les couples ci-dessous ont été mesurés.
   ========================================================================== */

/* ------------------------------------------------------------------ jetons */
:root {
    /* Vert de marque — deux rôles distincts */
    --np-vert:        #1CB084;   /* décoratif : pastilles, icônes, traits */
    --np-vert-action: #007A5A;   /* actions et texte vert (AA : 5,34:1) */
    --np-vert-fonce:  #00614A;   /* survol / texte sur vert très clair */
    --np-vert-clair:  #E6F4EF;   /* fond d'accent, entrée de menu active */
    --np-vert-clair2: #E7F8F2;

    /* Encres et neutres */
    --np-encre:       #0B1220;   /* 18,72:1 sur blanc */
    --np-encre-2:     #273449;   /* 12,55:1 sur blanc */
    --np-gris:        #5B6B7F;   /* 5,45:1 sur blanc */
    --np-gris-clair:  #8A98A8;   /* libellés de tableau, non porteurs de sens */
    --np-trait:       #DFE5EC;
    --np-trait-clair: #EDF1F5;
    --np-fond:        #F4F6F9;
    --np-fond-2:      #EEF2F7;
    --np-surface:     #FFFFFF;

    /* Signaux */
    --np-ok:    #065F46;   /* texte sur #ECFDF5 : 7,29:1 */
    --np-ok-bg: #ECFDF5;
    --np-warn:  #92400E;   /* texte sur #FFFBEB : 6,84:1 */
    --np-warn-bg: #FFFBEB;
    --np-err:   #B91C1C;   /* texte sur #FEF2F2 : 5,91:1 */
    --np-err-bg: #FEF2F2;
    --np-info:  #1E40AF;
    --np-info-bg: #EFF6FF;

    /* Formes et rythme */
    --np-r-xs: 6px;
    --np-r-sm: 8px;
    --np-r-md: 10px;
    --np-r-lg: 14px;
    --np-r-xl: 18px;
    --np-r-pill: 999px;
    --np-ombre-1: 0 1px 2px rgba(11, 18, 32, .06);
    --np-ombre-2: 0 4px 14px rgba(11, 18, 32, .07);
    --np-ombre-3: 0 12px 30px rgba(11, 18, 32, .10);
    --np-anneau: 0 0 0 3px rgba(0, 122, 90, .22);

    /* Gabarit */
    --np-cote: 264px;      /* largeur du menu latéral */
    --np-haut: 64px;       /* hauteur du bandeau */
    --np-gouttiere: 26px;
    --np-cible: 40px;      /* cible cliquable minimale */

    --np-police: 'Plus Jakarta Sans', 'Urbanist', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* La variable du thème reste peinte en noir par le script du panneau
       (elle vient de Firestore et est posée en style en ligne sur <html>,
       donc non surchargeable par CSS). On repeint les PROPRIÉTÉS qui
       l'utilisent, une par une, plus bas dans ce fichier. */
}

/* ------------------------------------------------------------------- base */
/* Aucun fond explicite sur <html> : c'est celui de <body> qui se propage au
   canevas du document. Sans cela, la zone située sous le contenu gardait le
   gris clair du thème même en mode sombre (bande claire en bas de page). */

body {
    background: var(--np-fond);
    color: var(--np-encre);
    font-family: var(--np-police);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Aucun débordement horizontal : la cause mesurée était le bandeau
   (bloc `.navbar-collapse` de 1088 px + sélecteur de pays) à 1280 px.
   On corrige le fond (flex qui se contracte) plus bas ET on ceinture ici. */
html, body { max-width: 100%; overflow-x: hidden; }

a { color: var(--np-vert-action); text-decoration: none; }   /* bat `admin.css` */
a:hover, a:focus { color: var(--np-vert-fonce); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { color: var(--np-encre); font-weight: 800; letter-spacing: -.01em; }

/* ======================================================== BANDEAU DU HAUT */
.topbar {
    background: var(--np-surface);          /* bat le noir d'admin.css */
    border-bottom: 1px solid var(--np-trait);
    box-shadow: none;
    height: auto;
    min-height: var(--np-haut);
}

.topbar .top-navbar {
    min-height: var(--np-haut);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;      /* pas de retour à la ligne : on contracte */
    min-width: 0;
    padding: 0;
}

/* La colonne du logo cesse d'écraser la suite sur les écrans étroits. */
@media (min-width: 768px) {
    .topbar .top-navbar .navbar-header { width: var(--np-cote); }
}
@media (min-width: 768px) and (max-width: 1500px) {
    .topbar .top-navbar .navbar-header { width: 208px; flex: 0 0 208px; }
}
.topbar .top-navbar .navbar-header {
    height: var(--np-haut);
    border-right: 1px solid var(--np-trait);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* LA CAUSE DU DÉBORDEMENT : ce bloc ne pouvait pas se contracter. */
.topbar .navbar-collapse,
.topbar .top-navbar .navbar-collapse {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.topbar .navbar-collapse.header-user-menu,
.topbar .navbar-nav.header-user-menu {
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}
.topbar .top-navbar .navbar-nav.header-user-menu > .nav-item { min-width: 0; }
.topbar .top-navbar .navbar-nav.header-user-menu > .nav-item > .nav-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Entrées rapides du bandeau : lisibles, pas des icônes géantes.
   Le `!important` est nécessaire : la peau de couleur du thème
   (`public/css/colors/blue.css`) force `color:#fff !important` sur ce même
   sélecteur, pensée pour l'ancien bandeau noir. Sur fond blanc, le libellé
   était blanc sur blanc (invisible). */
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link,
.topbar .top-navbar .navbar-nav.header-user-menu > .nav-item > .nav-link {
    color: var(--np-encre-2) !important;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    padding: 10px 11px;
    border-radius: var(--np-r-sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
}
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover,
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus,
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link.active,
.topbar .top-navbar .navbar-nav.header-user-menu > .nav-item:hover > .nav-link,
.topbar .top-navbar .navbar-nav.header-user-menu > .nav-item > .nav-link:focus {
    background: var(--np-fond-2);
    color: var(--np-encre) !important;
    text-decoration: none;
}
/* Le sélecteur « Select Section » porte la même classe : on le rétablit
   en vert juste en dessous. */
.topbar .navbar-light .multi-service-nav.navbar-nav .nav-item > a.nav-link {
    color: #fff !important;
    background: var(--np-vert-action);
}
.topbar .navbar-light .multi-service-nav.navbar-nav .nav-item > a.nav-link:hover,
.topbar .navbar-light .multi-service-nav.navbar-nav .nav-item > a.nav-link:focus {
    color: #fff !important;
    background: var(--np-vert-fonce);
}
.topbar .top-navbar .navbar-nav.header-user-menu > .nav-item > .nav-link i,
.topbar .top-navbar .navbar-nav.header-user-menu > .nav-item > .nav-link .mdi {
    font-size: 18px;
    color: var(--np-vert-action);
    line-height: 1;
}
.topbar .top-navbar .navbar-nav.header-user-menu > .nav-item:hover > .nav-link,
.topbar .top-navbar .navbar-nav.header-user-menu > .nav-item > .nav-link:focus {
    background: var(--np-fond-2);
    color: var(--np-encre);
    text-decoration: none;
}
.topbar .top-navbar .navbar-nav > .nav-item > .nav-link { font-size: 16px; line-height: 1; }

/* Bandeau : sous 1500 px, les libellés d'entrées rapides disparaissent et
   laissent l'icône seule (l'infobulle du lien porte déjà le texte). */
@media (max-width: 1500px) {
    .topbar .top-navbar .navbar-nav.header-user-menu > .nav-item > .nav-link .hide-menu { display: none; }
}
/* Sous 1180 px (téléphone, tablette) : les entrées rapides du bandeau étaient
   MASQUÉES (`display: none`) — or le menu latéral n'est là qu'un rail de 60 px,
   sans libellés ni sous-menus : « Réglages », « Gestion du contenu » et
   « Section / Service » étaient donc INATTEIGNABLES depuis un téléphone.
   Elles s'ouvrent maintenant en panneau sous le bandeau, par le bouton ☰. */
/* 768–1180 px (tablette, petit portable) : la rangée d'entrées rapides reste
   affichée (icônes seules, libellé en infobulle). Le bouton ☰ du gabarit
   n'existe QU'en dessous de 768 px : entre les deux, la masquer rendait
   « Réglages » inaccessible, et le menu latéral n'y montre que des icônes. */
@media (min-width: 768px) and (max-width: 1180px) {
    .topbar .top-navbar .navbar-nav.header-user-menu { display: flex; }
}

@media (max-width: 767px) {
    .topbar .top-navbar .navbar-collapse.sidebar-nav {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 60px);
        overflow-x: hidden;
        overflow-y: auto;
        background: var(--np-surface);
        border-top: 1px solid var(--np-trait);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
        z-index: 1035;
        padding: 6px 8px 14px;
    }

    body.np-menu-bandeau .topbar .top-navbar .navbar-collapse.sidebar-nav { display: block; }

    /* Le rail d'icônes du thème (60 px, sans libellés) est écarté tant que le
       panneau est ouvert : les deux se superposeraient. */
    body.np-menu-bandeau .left-sidebar { left: -265px !important; }

    .topbar .top-navbar .navbar-nav.header-user-menu {
        display: block;
        width: 100%;
        padding-left: 0 !important;
        overflow: visible;
    }

    .topbar .top-navbar .navbar-nav.header-user-menu > .nav-item { width: 100%; }

    .topbar .top-navbar .navbar-nav.header-user-menu > .nav-item > .nav-link {
        display: flex;
        justify-content: flex-start;
        padding: 12px 10px;
        font-size: 15px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .topbar .top-navbar .navbar-nav.header-user-menu > .nav-item > .nav-link .hide-menu { display: inline; }

    /* Sous-menus : dans le flux (le défilement du panneau coupait une
       surimpression), ouverts et fermés par le même clic. */
    .topbar .top-navbar .navbar-nav.header-user-menu .dropdown-menu {
        position: static !important;
        float: none;
        width: auto;
        left: auto;
        top: auto;
        margin: 0 0 6px;
        padding: 0;
        border: 0;
        box-shadow: none;
        transform: none !important;
        max-height: none !important;
    }

    .topbar .top-navbar .navbar-nav.header-user-menu .dropdown-menu ul { padding: 0; }
    .topbar .top-navbar .navbar-nav.header-user-menu .dropdown-menu ul li a { padding: 9px 14px 9px 24px; }
}

/* Bouton « Select Section » : vert NumiApp, jamais l'orange du thème */
.topbar .navbar-light .multi-service-nav.navbar-nav .nav-item > a.nav-link {
    background: var(--np-vert-action);
    color: #fff;
    border-radius: var(--np-r-md);
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: var(--np-cible);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}
.topbar .navbar-light .multi-service-nav.navbar-nav .nav-item > a.nav-link:hover,
.topbar .navbar-light .multi-service-nav.navbar-nav .nav-item > a.nav-link:focus {
    background: var(--np-vert-fonce);
    color: #fff;
    text-decoration: none;
}
.topbar .navbar-light .multi-service-nav.navbar-nav .nav-item > a.nav-link img {
    height: 22px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .18);
    padding: 1px;
}
.topbar .navbar-light .multi-service-nav.navbar-nav .nav-item > a.nav-link > span {
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sélecteur de pays : c'est lui qui sortait de l'écran (65 px de débord) */
.navbar-nav.numiapp-country-nav,
#numiappCountryPicker { min-width: 0; }
#numiappCountryPicker > a {
    color: var(--np-encre-2) !important;
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: var(--np-r-sm);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 220px;
}
#numiappCountryPicker > a:hover { background: var(--np-fond-2); text-decoration: none; }
#numiappCountryPicker > a .fa-globe { color: var(--np-vert-action); }
#numiappActiveCountry {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Bascule clair/sombre */
[data-np-theme] { cursor: pointer; }
[data-np-theme] { color: var(--np-encre-2) !important; font-size: 17px; }

/* Bouton « replier le menu » du bandeau. Le thème le place dans une bande
   absolue de 22 px collée au bord (right:-22px) avec un rond sombre : le
   bouton flottait hors du bandeau, par-dessus le menu. On le remet dans la
   colonne du logo, en pastille carrée cliquable. Le SVG du thème est blanc
   (invisible sur fond blanc) : on lui rend la couleur du contexte. */
.topbar .navbar-header .sidebar-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    bottom: auto;
    height: auto;
    width: auto;
    margin: 0;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.topbar .navbar-header .sidebar-toggle span,
.topbar .navbar-header .sidebar-toggle .nav-item { float: none !important; display: inline-flex; }
.topbar .navbar-header .sidebar-toggle .nav-link,
.topbar .navbar-header .sidebar-toggle span.mb-toggle .nav-link {
    width: 34px;
    height: 34px;
    border-radius: var(--np-r-sm) !important;
    display: inline-grid !important;
    place-items: center;
    background: var(--np-fond-2) !important;
    border: 1px solid var(--np-trait);
    color: var(--np-encre-2) !important;
    font-size: 18px !important;
    padding: 0 !important;
    line-height: 1;
    margin: 0 !important;
}
.topbar .navbar-header .sidebar-toggle .nav-link:hover,
.topbar .navbar-header .sidebar-toggle .nav-link:focus {
    background: var(--np-vert-clair) !important;
    color: var(--np-vert-fonce) !important;
    text-decoration: none;
}
.topbar .navbar-header .sidebar-toggle .nav-link svg { width: 17px; height: 17px; }
.topbar .navbar-header .sidebar-toggle .nav-link svg path { fill: currentColor !important; }
/* Le repli de la barre latérale n'existe qu'au-delà de 1024 px ; le hamburger
   ne sert qu'en dessous. Un seul des deux est affiché à la fois. */
@media (min-width: 1024px) {
    .topbar .navbar-header .sidebar-toggle span.mb-toggle { display: none !important; }
}
@media (max-width: 1023px) {
    .topbar .navbar-header .sidebar-toggle .nav-item .nav-link.sidebartoggler { display: none !important; }
}

/* Menus déroulants du bandeau */
.topbar .dropdown-menu {
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-lg);
    box-shadow: var(--np-ombre-3);
    padding: 8px;
    margin-top: 6px;
}
.topbar ul.dropdown-user li a,
.topbar ul.dropdown-user li .dropdown-item {
    border-radius: var(--np-r-sm);
    color: var(--np-encre-2);
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 12px;
}
.topbar ul.dropdown-user li a:hover { background: var(--np-fond-2); color: var(--np-encre); }
.topbar ul.dropdown-user li.divider { border-color: var(--np-trait); }
.topbar .profile-pic { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--np-vert-clair); }

/* ========================================================== MENU LATÉRAL */
.left-sidebar {
    background: var(--np-surface);        /* bat le noir d'admin.css */
    border-right: 1px solid var(--np-trait);
    box-shadow: none;
    width: var(--np-cote);
    padding-top: 0;
    top: 0;
    overflow: hidden;
}
.fix-sidebar .left-sidebar { position: fixed; top: 0; bottom: 0; }

/* Le menu défile DANS la colonne : plus de dernière entrée coupée. */
.left-sidebar .scroll-sidebar {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 22px;
    scrollbar-width: thin;
    scrollbar-color: #C6D2DE transparent;
}
.left-sidebar .scroll-sidebar::-webkit-scrollbar { width: 9px; }
.left-sidebar .scroll-sidebar::-webkit-scrollbar-thumb {
    background: #C6D2DE; border-radius: var(--np-r-pill);
    border: 2px solid var(--np-surface);
}
.left-sidebar .scroll-sidebar::-webkit-scrollbar-thumb:hover { background: #A9B7C6; }

/* Champ « Search Menu » : lisible (3,04:1 → 8,7:1) */
.sidebar-search { padding: 14px 14px 6px; }
.sidebar-search input {
    background: var(--np-fond-2);
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-md);
    color: var(--np-encre) !important;
    font-family: var(--np-police);
    font-size: 13.5px;
    font-weight: 500;
    padding: 9px 12px 9px 38px;
    min-height: var(--np-cible);
    width: 100%;
    background-image: none;
}
.sidebar-search input::placeholder { color: var(--np-gris); }
.sidebar-search input:focus {
    outline: none;
    background: #fff;
    border-color: var(--np-vert-action);
    box-shadow: var(--np-anneau);
}
/* icône loupe dessinée en CSS : aucune dépendance image */
.sidebar-search { position: relative; }
.sidebar-search::after {
    content: '';
    position: absolute;
    left: 27px;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-top: -4px;
    border: 1.8px solid var(--np-gris);
    border-radius: 50%;
    pointer-events: none;
}
.sidebar-search::before {
    content: '';
    position: absolute;
    left: 39px;
    top: 31px;
    width: 6px;
    height: 1.8px;
    background: var(--np-gris);
    transform: rotate(45deg);
    pointer-events: none;
}

.sidebar-nav {
    background: transparent;             /* bat le noir d'admin.css */
    padding: 0;
}

/* Titres de groupe : gris ardoise sur blanc = 5,45:1 (au lieu du gris
   presque invisible sur noir). */
.sidebar-nav .nav-subtitle,
.sidebar-nav .nav-subtitle .nav-subtitle-span,
.sidebar-nav ul li.nav-small-cap {
    color: var(--np-gris) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 18px 18px 6px;
    background: transparent;
}

/* Entrées */
.sidebar-nav ul li a {
    color: var(--np-encre-2);
    font-family: var(--np-police);
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 16px;
    min-height: var(--np-cible);
    display: flex;
    align-items: center;
    gap: 11px;
    border-radius: 0 var(--np-r-md) var(--np-r-md) 0;
    margin-right: 8px;
    border: 0;
    transition: background .15s ease, color .15s ease;
}
.sidebar-nav ul li a i,
.sidebar-nav ul li a .mdi {
    font-size: 18px;
    line-height: 1;
    color: var(--np-gris);
    width: 20px;
    text-align: center;
    flex: 0 0 20px;
    transition: color .15s ease;
}
.sidebar-nav ul li a:hover {
    background: var(--np-fond-2);
    color: var(--np-encre);
    text-decoration: none;
}
.sidebar-nav ul li a:hover i { color: var(--np-vert-action) !important; }

/* ENTRÉE ACTIVE : le défaut le plus grave du panneau d'origine
   (#263238 sur #0C111C = 1,43:1, invisible). Ici : #00614A sur #E6F4EF. */
.sidebar-nav ul li a.active,
.sidebar-nav > ul > li.active > a {
    background: var(--np-vert-clair) !important;
    color: var(--np-vert-fonce) !important;
    font-weight: 800;
    box-shadow: inset 3px 0 0 var(--np-vert-action);
}
.sidebar-nav ul li a.active i,
.sidebar-nav > ul > li.active > a i { color: var(--np-vert-action) !important; }

/* Sous-menus */
.sidebar-nav ul li ul li a { font-size: 13px; padding: 8px 16px 8px 26px; }
.sidebar-nav ul li ul li a:hover { color: var(--np-encre); }
.sidebar-nav ul li ul li.active a { color: var(--np-vert-fonce); font-weight: 700; }
.sidebar-nav .dropdown-menu {
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-lg);
    box-shadow: var(--np-ombre-3);
    padding: 8px;
    min-width: 260px;
}
.sidebar-nav .dropdown-menu li a { border-radius: var(--np-r-sm); padding: 9px 12px; margin: 0; }

/* ============================================================ CORPS / PAGE */
#main-wrapper { background: var(--np-fond); }

.page-wrapper {
    background: var(--np-fond);          /* fini la bande blanche puis grise */
    min-height: auto !important;
    padding-bottom: 40px;
}
@media (min-width: 1024px) {
    .page-wrapper { padding-left: var(--np-cote); }
    .mini-sidebar .page-wrapper { padding-left: 76px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .page-wrapper { padding-left: 0; }
}

body > #app > main,
#app > main { padding: 26px var(--np-gouttiere) 48px; width: 100%; max-width: 100%; }
@media (max-width: 1400px) { body > #app > main, #app > main { padding: 22px 20px 40px; } }
@media (max-width: 767px)  { body > #app > main, #app > main { padding: 18px 14px 34px; } }

/* Gouttières : le calque de charte retirait TOUTE marge au conteneur
   (`padding: 0`) alors que Bootstrap applique -15 px de marge négative aux
   `.row` : la boîte des lignes dépassait donc de 15 px le bord droit de la
   fenêtre (mesuré au navigateur : bord droit 1381 px pour une fenêtre de
   1366 px, contenu collé au bord, sans gouttière). `padding: 0 15px` rétablit
   la géométrie standard — débordement mesuré 0 px — sans changer l'identité
   (ni couleur, ni police, ni composant). */
.container-fluid { padding: 0 15px; max-width: 100%; }


/* Titre de page : un seul niveau, plus de doublon avec la carte */
.page-titles {
    background: transparent;
    padding: 0;
    margin: 0 0 20px;
    border: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.page-titles h3,
.page-titles .page-title {
    font-family: var(--np-police);
    font-size: 23px;
    font-weight: 800;
    color: var(--np-encre);
    margin: 0;
    letter-spacing: -.02em;
}
.page-titles .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 12.5px;
    float: none;
}
.page-titles .breadcrumb-item { color: var(--np-gris); }
.page-titles .breadcrumb-item a { color: var(--np-gris); font-weight: 600; }
.page-titles .breadcrumb-item a:hover { color: var(--np-vert-action); }
.page-titles .breadcrumb-item.active { color: var(--np-gris); }
.page-titles .breadcrumb-item + .breadcrumb-item::before { color: #A9B7C6; content: '/'; }

/* ---------------------------------------------------------------------------
   TITRE UNIQUE : le thème empile DEUX fois le nom de l'écran — la barre
   `.page-titles` (h3 + fil d'Ariane) puis la section `.admin-top-section` du
   module (icône + h3 + compteur). Quand les deux sont présentes, on garde le
   fil d'Ariane en haut et la section du module comme titre de l'écran : une
   seule fois le nom, un seul niveau de lecture.
   (`:has()` est un enrichissement progressif : sans lui, on retombe sur
   l'affichage du thème — rien ne casse, le titre est simplement répété.)
   --------------------------------------------------------------------------- */
.page-wrapper:has(.admin-top-section) .page-titles {
    justify-content: flex-end;
    margin-bottom: 8px;
}
.page-wrapper:has(.admin-top-section) .page-titles h3,
.page-wrapper:has(.admin-top-section) .page-titles .col-md-5 { display: none; }
.page-wrapper:has(.admin-top-section) .page-titles .breadcrumb { margin-left: auto; }

/* La section d'en-tête du module devient LE titre de l'écran.
   Attention à la spécificité : le thème cible `.top-title-section .top-title-left X`
   (trois classes), il faut donc l'égaler pour que la charte s'applique. */
.admin-top-section { margin: 0 0 20px; }
.admin-top-section .top-title-section { padding-bottom: 0 !important; }
.admin-top-section .top-title-left,
.admin-top-section .top-title-section { align-items: center; }
.top-title-section .top-title-left h3,
.admin-top-section h3.mb-0 {
    font-family: var(--np-police) !important;
    font-size: 23px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
    line-height: 1.25 !important;
    color: var(--np-encre) !important;
    margin: 0;
}
.admin-top-section .icon {
    width: 44px;
    height: 44px;
    border-radius: var(--np-r-md);
    background: var(--np-vert-clair);
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    overflow: hidden;
}
.top-title-section .top-title-left .icon img { max-width: 26px; }
/* Compteur : le thème le peignait en orange sur un fond rose (#FF6839/#FFEBE5).
   Même spécificité, fichier chargé plus tard → la charte gagne. */
.top-title-section .top-title-left .counter {
    background: var(--np-vert-clair);
    color: var(--np-vert-fonce);
    font-weight: 800;
    font-size: 12.5px;
    min-width: 34px;
    height: auto;
    padding: 4px 11px;
    border-radius: var(--np-r-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.top-title-section .top-title-left .counter:empty { display: none; }
/* Le titre de la carte sous l'en-tête : plus petit, jamais concurrent. */
.card-header-title h3,
.card-header-title .h4 {
    font-size: 16px !important;
    font-weight: 800;
    color: var(--np-encre) !important;
    margin-bottom: 4px !important;
}
.card-header-title p {
    font-size: 12.5px;
    color: var(--np-gris) !important;
    margin: 0;
}
.card-header .card-header-btn .btn,
.card-header-right .btn { white-space: nowrap; }

/* Champs « form-material » du thème : ils portaient un liseré ORANGE sous le
   champ et supprimaient la bordure (`border: 0`). On rétablit un champ plein,
   bordé, cohérent avec les autres écrans. `!important` parce qu'une seconde
   déclaration identique est injectée dans <body> par la vue de connexion. */
.form-material .form-control,
.form-material .form-control.focus,
.form-material .form-control:focus {
    background-image: none !important;
    background-color: #fff !important;
    border: 1px solid var(--np-trait) !important;
    border-radius: var(--np-r-md) !important;
    padding: 10px 13px !important;
    box-shadow: none !important;
    height: auto;
    min-height: 44px;
}
.form-material .form-control:focus,
.form-material .form-control.focus {
    border-color: var(--np-vert-action) !important;
    box-shadow: var(--np-anneau) !important;
}
.form-material .form-group { position: relative; }

/* ================================================================== CARTES */
.card {
    background: var(--np-surface);
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-xl);
    box-shadow: var(--np-ombre-1);
    margin-bottom: 20px;
    overflow: hidden;
}
.card-body { padding: 22px 24px; }
@media (max-width: 767px) { .card-body { padding: 16px; } }

.card .card-title,
.card h4.card-title,
.card-header {
    font-family: var(--np-police);
    font-weight: 800;
    color: var(--np-encre);
}
.card .card-title,
.card h4.card-title { font-size: 17px; margin-bottom: 6px; }
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--np-trait);
    padding: 16px 24px;
    font-size: 15.5px;
}
.card .text-muted,
.card-body .text-muted { color: var(--np-gris) !important; }

/* Titre interne des modules (h2/h4 dans la carte) : même niveau, pas un
   troisième titre sous le titre de page. */
.card-body > h2,
.card-body > h3,
.card-body > h4 { font-size: 17px; font-weight: 800; margin: 0 0 4px; }
.card-body > p.text-muted,
.card-body > .text-muted { font-size: 13px; margin-bottom: 16px; }

/* Les « badges » ronds du thème (sorte de pastille à côté du titre) */
.card-body h2 + .badge,
.card-body h2 .badge { border-radius: var(--np-r-pill); }

/* ================================================================ TABLEAUX */
.table-responsive,
.dataTables_wrapper { max-width: 100%; }

/* Le tableau ne peut plus pousser la page : il défile dans sa carte. */
.dataTables_wrapper .table-responsive,
.card-body .table-responsive { overflow-x: auto; }

.table {
    width: 100%;
    border-color: var(--np-trait);
    margin-bottom: 0;
    color: var(--np-encre-2);
    border-collapse: separate;
    border-spacing: 0;
}
.table > thead > tr > th {
    background: var(--np-fond-2);
    color: #46586E;
    border-bottom: 1px solid var(--np-trait);
    border-top: 0;
    font-family: var(--np-police);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 12px 14px;
    white-space: nowrap;
    vertical-align: middle;
}
.table > tbody > tr > td {
    border-top: 1px solid var(--np-trait-clair);
    padding: 13px 14px;
    vertical-align: middle;
    font-size: 13.5px;
}
.table > tbody > tr:first-child > td { border-top: 0; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #FBFCFE; }
.table-hover > tbody > tr:hover { background: var(--np-vert-clair2); }
.table-bordered { border: 1px solid var(--np-trait); }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--np-trait); }

/* Colonne de cases à cocher (colonne « ALL » du thème) : alignée */
.table > thead > tr > th:first-child,
.table > tbody > tr > td:first-child { padding-left: 18px; }
.table input[type="checkbox"] { width: 16px; height: 16px; vertical-align: middle; accent-color: var(--np-vert-action); }
.table .form-check-input { margin-top: 0; }

/* Colonne d'actions : les boutons deviennent de vraies cibles cliquables
   (32×32) et la colonne se limite à son contenu — sinon DataTables laisse un
   grand vide au milieu du tableau. `:has()` cible le bouton, donc les tableaux
   dont la dernière colonne porte une donnée ne sont pas touchés. */
.table > tbody > tr > td:last-child:has(.action-btn),
.table > tbody > tr > td:last-child:has(.btn),
.table > tbody > tr > td:last-child:has(> a > i) {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.table .action-btn { display: inline-flex; align-items: center; gap: 6px; }
.table .action-btn a,
.table .action-btn button {
    width: 32px;
    height: 32px;
    border-radius: var(--np-r-sm);
    display: inline-grid;
    place-items: center;
    background: var(--np-fond-2);
    border: 1px solid var(--np-trait);
    color: var(--np-encre-2) !important;
    font-size: 16px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.table .action-btn a i, .table .action-btn button i { font-size: 16px; line-height: 1; }
.table .action-btn a:hover,
.table .action-btn button:hover {
    background: var(--np-vert-clair);
    border-color: var(--np-vert);
    color: var(--np-vert-fonce) !important;
    text-decoration: none;
}
.table .action-btn a.delete-btn,
.table .action-btn a.delete_btn,
.table .action-btn a[href*="delete"] {
    background: var(--np-err-bg);
    border-color: #FECACA;
    color: var(--np-err) !important;
}
.table .action-btn a.delete-btn:hover,
.table .action-btn a.delete_btn:hover,
.table .action-btn a[href*="delete"]:hover {
    background: var(--np-err);
    border-color: var(--np-err);
    color: #fff !important;
}

/* Colonne de cases à cocher (« ALL ») : le thème y pose un `label.col-3`
   (25 % de large, flottant) qui cassait l'alignement de l'en-tête. */
.table > thead > tr > th.delete-all,
.table > tbody > tr > td.delete-all { width: 1%; white-space: nowrap; text-align: center; }
.table > thead > tr > th.delete-all label,
.table > tbody > tr > td.delete-all label {
    float: none !important;
    width: auto !important;
    flex: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 6px !important;
    padding: 0 !important;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #46586E;
}
.table > thead > tr > th.delete-all label a {
    color: #46586E !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 800;
}
.table > thead > tr > th.delete-all label a:hover { color: var(--np-err) !important; }
.table > thead > tr > th.delete-all input[type="checkbox"],
.table > tbody > tr > td.delete-all input[type="checkbox"] { vertical-align: middle; margin: 0; }

/* ================================================== OUTILS DataTables */
.dataTables_wrapper { padding: 4px 0 0; }

/* barre de filtres : « Affichage / recherche » par ligne, lisible */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--np-gris);
}
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    font-weight: 600;
    font-size: 13px;
    color: var(--np-gris);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper select {
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-md);
    padding: 8px 12px;
    height: auto;
    min-height: 38px;
    font-family: var(--np-police);
    font-size: 13.5px;
    color: var(--np-encre);
    background: #fff;
    min-width: 150px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper select:focus {
    outline: none;
    border-color: var(--np-vert-action);
    box-shadow: var(--np-anneau);
}
.dataTables_wrapper .dataTables_info {
    font-size: 12.5px;
    color: var(--np-gris);
    padding-top: 14px;
}
.dataTables_wrapper .dataTables_paginate { padding-top: 10px; }

/* Pagination */
.pagination { margin-bottom: 0; gap: 4px; display: flex; flex-wrap: wrap; }
.page-link {
    color: var(--np-encre-2);
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-sm) !important;
    margin: 0;
    min-width: 36px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 10px;
}
.page-link:hover { background: var(--np-fond-2); color: var(--np-encre); border-color: #C6D2DE; }
.page-item.active .page-link {
    background: var(--np-vert-action);
    border-color: var(--np-vert-action);
    color: #fff;
    font-weight: 700;
}
.page-item.disabled .page-link { color: #A9B7C6; background: #fff; border-color: var(--np-trait-clair); }

/* ÉTAT VIDE : le thème laissait un tableau vide sans un mot */
.dataTables_empty,
.table tbody tr td.dataTables_empty {
    padding: 40px 18px !important;
    text-align: center;
    color: var(--np-gris);
    font-size: 13.5px;
    font-weight: 600;
    background: #fff;
}
.np-vide { padding: 40px 18px; text-align: center; color: var(--np-gris); font-size: 13.5px; }
.dataTables_empty .np-vide { padding: 0; }
.np-vide strong { display: block; color: var(--np-encre); font-size: 15.5px; margin-bottom: 4px; }
.np-vide .np-vide-ic {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--np-fond-2); color: var(--np-gris-clair);
    display: grid; place-items: center; margin: 0 auto 12px; font-size: 20px;
}

/* Voile de chargement du thème */
#data-table_processing.page-overlay { background: rgba(255, 255, 255, .72); backdrop-filter: blur(2px); }

/* Sections de formulaire du thème : le libellé de section (« ROLE DETAILS »)
   était une pastille noire, et le cadre une bordure grise sur fond blanc. */
.vendor_payout_create-inner fieldset {
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-lg);
    background: #fff;
    padding: 20px 22px;
    margin-bottom: 18px;
}
.vendor_payout_create-inner fieldset legend,
fieldset legend {
    display: inline-block;
    width: auto;
    background: var(--np-vert-clair) !important;   /* bat le noir d'admin.css */
    color: var(--np-vert-fonce) !important;
    font-family: var(--np-police);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: var(--np-r-sm);
    margin-bottom: 6px;
    border: 0;
}
.row.vendor_payout_create label.control-label { color: var(--np-encre-2) !important; font-weight: 700 !important; }
.width-100 { width: 100%; }

/* Grille de permissions du formulaire de rôle : lisible, alignée */
.vendor_payout_create-inner .table { margin-top: 6px; }
.vendor_payout_create-inner .table td,
.vendor_payout_create-inner .table th { padding: 11px 12px; }
.vendor_payout_create-inner .table label { margin: 0 0 0 6px; font-weight: 600; font-size: 13px; display: inline-block; }
.vendor_payout_create-inner input[type="checkbox"] { margin-right: 2px; }

/* ============================================================ BOUTONS */
.btn {
    font-family: var(--np-police);
    font-size: 13.5px;
    font-weight: 700;
    border-radius: var(--np-r-md);
    padding: 9px 16px;
    min-height: var(--np-cible);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
    box-shadow: none;
}
.btn:focus, .btn:focus-visible { outline: none; box-shadow: var(--np-anneau); }

.btn-primary,
.btn-primary:focus {
    background: var(--np-vert-action);
    border-color: var(--np-vert-action);
    color: #fff;
    box-shadow: none;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--np-vert-fonce);
    border-color: var(--np-vert-fonce);
    color: #fff;
}
.btn-primary.disabled, .btn-primary:disabled { background: #A9CFC2; border-color: #A9CFC2; color: #fff; }

/* Les boutons « noirs » du thème (btn-dark et les boutons créés par admin.css)
   deviennent le bouton d'action NumiApp. */
.btn-dark { background: var(--np-vert-action); border-color: var(--np-vert-action); color: #fff; }
.btn-dark:hover { background: var(--np-vert-fonce); border-color: var(--np-vert-fonce); }

.btn-secondary { background: #fff; border-color: var(--np-trait); color: var(--np-encre-2); }
.btn-secondary:hover { background: var(--np-fond-2); border-color: #C6D2DE; color: var(--np-encre); }

.btn-outline-primary { color: var(--np-vert-action); border-color: var(--np-vert-action); background: #fff; }
.btn-outline-primary:hover { background: var(--np-vert-action); border-color: var(--np-vert-action); color: #fff; }

.btn-success { background: var(--np-vert-action); border-color: var(--np-vert-action); color: #fff; }
.btn-success:hover { background: var(--np-vert-fonce); border-color: var(--np-vert-fonce); }
.btn-danger  { background: var(--np-err); border-color: var(--np-err); color: #fff; }
.btn-danger:hover { background: #991B1B; border-color: #991B1B; color: #fff; }
.btn-warning { background: var(--np-warn); border-color: var(--np-warn); color: #fff; }
.btn-warning:hover, .btn-warning:focus { background: #7C2D12; border-color: #7C2D12; color: #fff; }

.btn-sm { padding: 6px 12px; font-size: 12.5px; min-height: 32px; border-radius: var(--np-r-sm); }
.btn-xs { padding: 4px 9px; font-size: 12px; min-height: 28px; border-radius: var(--np-r-xs); }
.btn-lg { padding: 12px 22px; font-size: 15px; min-height: 48px; }
.btn-link { color: var(--np-vert-action); text-decoration: none; }

/* ============================================================ FORMULAIRES */
.form-control {
    font-family: var(--np-police);
    font-size: 13.5px;
    color: var(--np-encre);
    background: #fff;
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-md);
    padding: 9px 13px;
    height: auto;
    min-height: 40px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: #8A98A8; }
.form-control:focus {
    border-color: var(--np-vert-action);
    box-shadow: var(--np-anneau);
    outline: none;
}
.form-control:disabled, .form-control[readonly] { background: var(--np-fond-2); color: var(--np-gris); }
select.form-control { padding-right: 32px; }
textarea.form-control { min-height: 96px; }
.input-group-text {
    background: var(--np-fond-2);
    border-color: var(--np-trait);
    color: var(--np-gris);
    font-size: 13px;
    border-radius: var(--np-r-md);
}
label, .control-label, .input-label {
    font-family: var(--np-police);
    font-size: 13px;
    font-weight: 700;
    color: var(--np-encre-2);
    margin-bottom: 6px;
}
.form-group { margin-bottom: 18px; }
.form-text, .help-block, small.text-muted { color: var(--np-gris); font-size: 12.5px; }
.invalid-feedback { color: var(--np-err); font-size: 12.5px; font-weight: 600; }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--np-err); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(185, 28, 28, .18); }

/* Cases à cocher et radios : la couleur d'accent suit la charte */
input[type="checkbox"], input[type="radio"], .form-check-input { accent-color: var(--np-vert-action); }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--np-vert-action);
    border-color: var(--np-vert-action);
}
.form-check { padding-left: 1.6rem; }
.form-check-label { font-weight: 600; }

/* Champs enrichis du thème */
.select2-container--default .select2-selection--single {
    height: 40px;
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-md);
    padding: 5px 8px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--np-vert-action);
}
.select2-dropdown { border-color: var(--np-trait); border-radius: var(--np-r-md); }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--np-vert-action);
}
.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices {
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-md);
    background: #fff;
    box-shadow: none;
    min-height: 40px;
    padding: 5px 10px;
}
.chosen-container-active .chosen-single { border-color: var(--np-vert-action); }
.chosen-container .chosen-results li.highlighted { background: var(--np-vert-action); }
.bootstrap-tagsinput {
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-md);
    box-shadow: none;
    padding: 6px;
}
.bootstrap-tagsinput .tag { background: var(--np-vert-action); border-radius: var(--np-r-xs); font-weight: 600; }
.note-editor.note-frame, .summernote { border-color: var(--np-trait) !important; border-radius: var(--np-r-md); }

/* Filtres/onglets au-dessus des listes */
.nav-tabs {
    border-bottom: 1px solid var(--np-trait);
    gap: 4px;
}
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--np-gris);
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 14px;
}
.nav-tabs .nav-link:hover { color: var(--np-encre); border-bottom-color: #C6D2DE; background: transparent; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--np-vert-fonce);
    border-bottom-color: var(--np-vert-action);
    background: transparent;
}
/* Onglets en « pilules » du thème (card-header-tabs) */
.nav-tabs.card-header-tabs .nav-link { border-radius: var(--np-r-sm); border-bottom: 0; }
.nav-tabs.card-header-tabs .nav-link.active,
.nav-tabs.card-header-tabs .nav-link:hover {
    background: var(--np-vert-clair);      /* bat le noir d'admin.css */
    border-color: transparent;
    color: var(--np-vert-fonce);
}

/* ============================================================= PASTILLES */
.badge {
    font-family: var(--np-police);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
    border-radius: var(--np-r-pill);
    padding: 5px 11px;
    vertical-align: middle;
}
.badge-primary, .badge-success, .badge-info { background: var(--np-vert-action); color: #fff; }
.badge-warning, .badge-pending { background: #FEF3C7; color: #92400E; }
.badge-danger { background: var(--np-err-bg); color: var(--np-err); }
.badge-secondary, .badge-light { background: var(--np-fond-2); color: var(--np-gris); }
.badge-dark { background: var(--np-encre); color: #fff; }
.text-primary { color: var(--np-vert-action) !important; }
/* Le thème colore « .text-themecolor » en orange (#FF683A) avec !important,
   y compris les titres de page : retour au vert/information de la charte. */
.text-themecolor { color: var(--np-vert-action) !important; }
h3.text-themecolor, h2.text-themecolor, h4.text-themecolor { color: var(--np-encre) !important; }
.text-success { color: var(--np-ok) !important; }
.text-danger  { color: var(--np-err) !important; }
.text-warning { color: var(--np-warn) !important; }   /* admin.css le !important */
.text-info    { color: var(--np-info) !important; }   /* admin.css le !important */
.text-muted   { color: var(--np-gris) !important; }
.bg-info { background-color: var(--np-info-bg) !important; color: var(--np-info) !important; }
.bg-primary { background-color: var(--np-vert-action) !important; }

/* ================================================== MESSAGES / ALERTES */
.alert {
    border-radius: var(--np-r-lg);
    border: 1px solid;
    font-size: 13.5px;
    font-weight: 600;
    padding: 13px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.alert-success { background: var(--np-ok-bg); border-color: #A7F3D0; color: var(--np-ok); }
.alert-danger  { background: var(--np-err-bg); border-color: #FECACA; color: var(--np-err); }
.alert-warning { background: var(--np-warn-bg); border-color: #FDE68A; color: var(--np-warn); }
.alert-info    { background: var(--np-info-bg); border-color: #BFDBFE; color: var(--np-info); }
.alert .close { color: inherit; opacity: .6; text-shadow: none; }
.alert .close:hover { opacity: 1; }

/* Le bandeau d'erreur du thème (rempli par showError() en JS) */
.error_top {
    background: var(--np-err-bg);
    border: 1px solid #FECACA;
    border-left: 4px solid var(--np-err);
    border-radius: var(--np-r-lg);
    color: var(--np-err);
    font-weight: 600;
    font-size: 13.5px;
    padding: 12px 16px;
    margin-bottom: 18px;
}
.error_top p { margin: 0; }
.error_top:empty { display: none; padding: 0; border: 0; margin: 0; }

/* Notifications flottantes (toastr) et fenêtres SweetAlert */
#toast-container > div {
    border-radius: var(--np-r-lg);
    box-shadow: var(--np-ombre-3);
    font-family: var(--np-police);
    font-size: 13.5px;
    font-weight: 600;
    opacity: 1;
}
#toast-container > .toast-success { background-color: var(--np-vert-action); }
#toast-container > .toast-error   { background-color: var(--np-err); }
#toast-container > .toast-warning { background-color: #B45309; }
#toast-container > .toast-info    { background-color: var(--np-info); }
.swal2-popup { border-radius: var(--np-r-xl); font-family: var(--np-police); }
.swal2-title { font-size: 19px; font-weight: 800; color: var(--np-encre); }
.swal2-html-container { font-size: 14px; color: var(--np-encre-2); }
.swal2-styled.swal2-confirm { background: var(--np-vert-action) !important; border-radius: var(--np-r-md); font-weight: 700; }
.swal2-styled.swal2-cancel { background: #fff !important; color: var(--np-encre-2) !important; border: 1px solid var(--np-trait) !important; border-radius: var(--np-r-md); }

/* ============================================== TABLEAU DE BORD (accueil) */
/* Les indicateurs du thème : cartes bordées, chiffre fort, libellé lisible. */
.page-wrapper .card .card-body h3,
.page-wrapper .card .card-body h2 { color: var(--np-encre); }

.dashboard-tiles, .row .card .icon-box { color: var(--np-encre); }

/* Carte-statistique : le thème empile « icône ronde + libellé + gros chiffre » */
.card .row .col-md-3 .card,
.card .row .col-lg-3 .card,
.card .row [class*="col-"] > .card {
    border-radius: var(--np-r-lg);
}

/* Grille d'indicateurs NumiApp (réutilisable) */
.np-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.np-kpi {
    background: var(--np-surface);
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-xl);
    padding: 18px 20px;
    box-shadow: var(--np-ombre-1);
}
.np-kpi .v { font-size: 27px; font-weight: 800; line-height: 1.1; color: var(--np-encre); letter-spacing: -.03em; }
.np-kpi .l { font-size: 12.5px; color: var(--np-gris); margin-top: 5px; font-weight: 600; }
.np-kpi.bon .v { color: var(--np-ok); }
.np-kpi.attention .v { color: #B45309; }
.np-kpi.mauvais .v { color: var(--np-err); }

/* Les graphiques du thème (canvas) occupent une boîte sans bord */
.card-body canvas { max-width: 100%; }

/* ================================================= ÉCRAN DE CONNEXION */
/* La page de connexion est la première impression du panneau : même charte. */
.auth-wrapper { display: flex; min-height: 100vh; }
.auth-wrapper-left {
    /* L'illustration de marque du panneau est portée par une image de fond
       (`.auth-wrapper-left` est vide dans la vue). On la remet EN PROPRIÉTÉS
       LONGUES : une couleur de repli évite une page vide si l'image manque,
       et on n'écrase pas le visuel produit. */
    background-color: #063A2C;
    background-image: url('../images/e-mart-log-in-bg.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 40px;
    flex: 1 1 52%;
}
.auth-wrapper-left h1,
.auth-wrapper-left h2 { color: #fff; font-weight: 800; letter-spacing: -.02em; }
.auth-wrapper-left p { color: #A7E0CC; }
.auth-wrapper-right {
    background: var(--np-fond);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    flex: 1 1 48%;
}
.auth-wrapper-form {
    background: var(--np-surface);
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-xl);
    box-shadow: var(--np-ombre-3);
    padding: 34px 34px 30px;
    width: 100%;
    max-width: 430px;
}
.auth-wrapper-form .admin-logo { text-align: center; }
.auth-wrapper-form .admin-logo img { max-height: 44px; width: auto; }
.auth-wrapper-form .title { font-size: 23px; font-weight: 800; color: var(--np-encre); }
.auth-wrapper-form p.text-muted { font-size: 13.5px; color: var(--np-gris) !important; }
.auth-wrapper-form .form-control { min-height: 44px; font-size: 14px; }
.auth-wrapper-form .btn-primary,
.auth-wrapper-form .login-register {
    background: var(--np-vert-action) !important;  /* bat le noir en ligne */
    border-color: var(--np-vert-action) !important;
    color: #fff !important;
    width: 100%;
    min-height: 46px;
    font-size: 14.5px;
    font-weight: 800;
    border-radius: var(--np-r-md);
    letter-spacing: .04em;
}
.auth-wrapper-form .btn-primary:hover { background: var(--np-vert-fonce) !important; }
.auth-wrapper-form .input-label { display: block; }
@media (max-width: 991px) {
    .auth-wrapper { flex-direction: column; }
    .auth-wrapper-left { flex: 0 0 auto; padding: 34px 22px; min-height: 240px; }
    .auth-wrapper-right { padding: 26px 18px 40px; }
    .auth-wrapper-form { padding: 24px 20px; border-radius: var(--np-r-lg); }
}

/* ================================================= AUTRES SURFACES DU THÈME */
/* Fenêtres modales, champs de recherche globale, onglets de réglages */
.modal-content { border: 0; border-radius: var(--np-r-xl); box-shadow: var(--np-ombre-3); }
.modal-header { border-bottom: 1px solid var(--np-trait); padding: 18px 22px; }
.modal-title { font-size: 17px; font-weight: 800; color: var(--np-encre); }
.modal-footer { border-top: 1px solid var(--np-trait); padding: 14px 22px; }
.dropdown-menu {
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-lg);
    box-shadow: var(--np-ombre-3);
    padding: 8px;
    font-size: 13.5px;
}
.dropdown-item { border-radius: var(--np-r-sm); padding: 9px 12px; font-weight: 600; color: var(--np-encre-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--np-fond-2); color: var(--np-encre); }
.dropdown-divider { border-color: var(--np-trait); }
.progress { background: var(--np-fond-2); border-radius: var(--np-r-pill); height: 10px; }
.progress-bar { background: var(--np-vert-action); }
.list-group-item { border-color: var(--np-trait); font-size: 13.5px; color: var(--np-encre-2); }
.page-item .page-link { white-space: nowrap; }
table.table thead th a { color: #46586E; }
table.table tbody td a { color: var(--np-vert-action); font-weight: 600; }
table.table tbody td a:hover { color: var(--np-vert-fonce); }

/* =============================================================== RESPONSIVE */
@media (max-width: 1440px) {
    :root { --np-gouttiere: 22px; }
    .card-body { padding: 20px; }
}
@media (max-width: 1200px) {
    .dataTables_wrapper .dataTables_filter { text-align: left; }
    .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label { width: 100%; }
}
@media (max-width: 1023px) {
    :root { --np-cote: 60px; }
    .left-sidebar { width: 60px; }
    .topbar .top-navbar .navbar-header { width: 60px; flex: 0 0 60px; border-right: 0; }
    .page-titles h3 { font-size: 20px; }
    .card { border-radius: var(--np-r-lg); }
}
@media (max-width: 767px) {
    .page-titles { flex-direction: column; align-items: flex-start; gap: 8px; }
    /* les tableaux larges défilent, ils n'écrasent plus les colonnes */
    .table-responsive { border: 0; }
    .dataTables_wrapper .table > thead > tr > th,
    .dataTables_wrapper .table > tbody > tr > td { white-space: nowrap; }
    .btn { width: auto; }
}

/* ============================================================== MODE SOMBRE */
body.np-dark {
    background: #0F172A;
    color: #E2E8F0;
}
body.np-dark #main-wrapper,
body.np-dark .page-wrapper { background: #0F172A; }
body.np-dark .topbar { background: #111C31; border-bottom-color: #23334D; }
body.np-dark .topbar .top-navbar .navbar-header { border-right-color: #23334D; background: #111C31; }
body.np-dark .table .action-btn a,
body.np-dark .table .action-btn button { background: #16233A; border-color: #23334D; color: #C7D4E4 !important; }
body.np-dark .table .action-btn a:hover { background: #0E3B2F; border-color: #1CB084; color: #7FE0C4 !important; }
body.np-dark .table .action-btn a[href*="delete"] { background: #3A1414; border-color: #7F1D1D; color: #FCA5A5 !important; }
body.np-dark .card-header-title h3,
body.np-dark .card-header-title .h4 { color: #F4F6FC !important; }
body.np-dark .card-header-title p { color: #9FB0C9 !important; }
body.np-dark .admin-top-section .icon { background: #16233A; }
body.np-dark table.table tbody td a,
body.np-dark table.table thead th a { color: #7FE0C4 !important; }
body.np-dark table.table tbody td a:hover { color: #9FE8D2 !important; }
body.np-dark .vendor_payout_create-inner fieldset { background: #111C31; border-color: #23334D; }
body.np-dark .vendor_payout_create-inner fieldset legend,
body.np-dark fieldset legend { background: #0E3B2F !important; color: #7FE0C4 !important; }
body.np-dark .dataTables_empty,
body.np-dark .np-vide { color: #9FB0C9; }
body.np-dark .np-vide strong { color: #F4F6FC; }
/* `!important` : la règle claire du titre de page en porte un, sans quoi le
   titre resterait encre sombre sur fond sombre (1,05:1 mesuré) — y compris sur
   les écrans qui n'ont pas de `.admin-top-section` et où il est visible. */
body.np-dark .page-titles h3,
body.np-dark .page-titles .page-title { color: #F4F6FC !important; }
body.np-dark .top-title-section .top-title-left h3 { color: #F4F6FC !important; }
body.np-dark .top-title-section .top-title-left .counter { background: #0E3B2F; color: #7FE0C4; }
body.np-dark .table > thead > tr > th.delete-all label,
body.np-dark .table > thead > tr > th.delete-all label a { color: #9FB0C9 !important; }
body.np-dark .table > thead > tr > th.delete-all label a:hover { color: #FCA5A5 !important; }
body.np-dark .breadcrumb-item.active { color: #9FB0C9; }
body.np-dark .topbar .top-navbar .navbar-nav.header-user-menu > .nav-item > .nav-link,
body.np-dark .topbar .navbar-light .navbar-nav .nav-item > a.nav-link { color: #C7D4E4 !important; }
body.np-dark .topbar .top-navbar .navbar-nav.header-user-menu > .nav-item:hover > .nav-link,
body.np-dark .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover { background: #16233A; color: #F4F6FC !important; }
body.np-dark .topbar .navbar-header .sidebar-toggle .nav-link { background: #16233A !important; border-color: #23334D; color: #C7D4E4 !important; }
body.np-dark [data-np-theme] { color: #C7D4E4 !important; }
body.np-dark #numiappCountryPicker > a { color: #C7D4E4 !important; }
body.np-dark #numiappCountryPicker > a:hover { background: #16233A; }
body.np-dark .left-sidebar { background: #111C31; border-right-color: #23334D; }
body.np-dark .sidebar-search input { background: #16233A; border-color: #23334D; color: #E2E8F0 !important; }
body.np-dark .sidebar-search input::placeholder { color: #8FA0B5; }
body.np-dark .sidebar-search::after { border-color: #8FA0B5; }
body.np-dark .sidebar-search::before { background: #8FA0B5; }
body.np-dark .sidebar-nav .nav-subtitle,
body.np-dark .sidebar-nav .nav-subtitle .nav-subtitle-span,
body.np-dark .sidebar-nav ul li.nav-small-cap { color: #9FB0C9 !important; }
body.np-dark .sidebar-nav ul li a { color: #C7D4E4; }
body.np-dark .sidebar-nav ul li a i { color: #9FB0C9; }
body.np-dark .sidebar-nav ul li a:hover { background: #16233A; color: #F4F6FC; }
body.np-dark .sidebar-nav ul li a.active,
body.np-dark .sidebar-nav > ul > li.active > a { background: #0E3B2F !important; color: #7FE0C4 !important; box-shadow: inset 3px 0 0 #1CB084; }
body.np-dark .sidebar-nav ul li a.active i { color: #7FE0C4 !important; }
body.np-dark .card,
body.np-dark .np-kpi { background: #111C31; border-color: #23334D; }
body.np-dark .card-header { background: #111C31; border-bottom-color: #23334D; }
body.np-dark .card .card-title,
body.np-dark .card h4.card-title,
body.np-dark .page-titles h3,
body.np-dark h1, body.np-dark h2, body.np-dark h3,
body.np-dark h4, body.np-dark h5, body.np-dark h6,
body.np-dark .np-kpi .v { color: #F4F6FC; }
body.np-dark .card .text-muted,
body.np-dark .card-body .text-muted { color: #9FB0C9 !important; }
body.np-dark .table { color: #C7D4E4; }
body.np-dark .table > thead > tr > th { background: #16233A; color: #A9B7C6; border-bottom-color: #23334D; }
body.np-dark .table > tbody > tr > td { border-top-color: #1E2C44; color: #C7D4E4; }
body.np-dark .table-striped > tbody > tr:nth-of-type(odd) { background: #0F1A2D; }
body.np-dark .table-hover > tbody > tr:hover { background: #16233A; }
body.np-dark .table-bordered,
body.np-dark .table-bordered > thead > tr > th,
body.np-dark .table-bordered > tbody > tr > td { border-color: #23334D; }
body.np-dark .dataTables_empty { background: #111C31; color: #9FB0C9; }
body.np-dark .form-control,
body.np-dark select.form-control { background: #16233A; border-color: #23334D; color: #E2E8F0; }
body.np-dark .form-control::placeholder { color: #8FA0B5; }
body.np-dark label, body.np-dark .control-label, body.np-dark .input-label { color: #C7D4E4; }
body.np-dark .dataTables_wrapper .dataTables_filter input,
body.np-dark .dataTables_wrapper .dataTables_length select,
body.np-dark .dataTables_wrapper select { background: #16233A; border-color: #23334D; color: #E2E8F0; }
body.np-dark .dataTables_wrapper .dataTables_info,
body.np-dark .dataTables_wrapper .dataTables_filter label,
body.np-dark .dataTables_wrapper .dataTables_length label { color: #9FB0C9; }
body.np-dark .page-link { background: #111C31; border-color: #23334D; color: #C7D4E4; }
body.np-dark .page-item.active .page-link { background: var(--np-vert); border-color: var(--np-vert); color: #06231A; font-weight: 800; }
body.np-dark .btn-secondary { background: #1B2C3E; border-color: #2A3A52; color: #E2E8F0; }
body.np-dark .nav-tabs { border-bottom-color: #23334D; }
body.np-dark .nav-tabs .nav-link { color: #9FB0C9; }
body.np-dark .nav-tabs .nav-link.active { color: #7FE0C4; border-bottom-color: #1CB084; }
body.np-dark .nav-tabs.card-header-tabs .nav-link.active { background: #0E3B2F; color: #7FE0C4; }
body.np-dark .dropdown-menu,
body.np-dark .topbar .dropdown-menu,
body.np-dark .sidebar-nav .dropdown-menu { background: #111C31; border-color: #23334D; }
body.np-dark .dropdown-item,
body.np-dark .topbar ul.dropdown-user li a { color: #C7D4E4; }
body.np-dark .dropdown-item:hover { background: #16233A; color: #F4F6FC; }
body.np-dark .breadcrumb-item, body.np-dark .page-titles .breadcrumb-item a { color: #9FB0C9; }
body.np-dark .modal-content { background: #111C31; }
body.np-dark .list-group-item { background: #111C31; border-color: #23334D; color: #C7D4E4; }
body.np-dark a { color: #7FE0C4; }
body.np-dark a:hover { color: #9FE8D2; }
body.np-dark .auth-wrapper-right { background: #0F172A; }
body.np-dark .auth-wrapper-form { background: #111C31; border-color: #23334D; }
body.np-dark .auth-wrapper-form .title { color: #F4F6FC; }

/* ============================================ ACCESSIBILITÉ / MOUVEMENT */
:focus-visible { outline: 2px solid var(--np-vert-action); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Impression : le panneau sert aussi à sortir des listes */
@media print {
    .left-sidebar, .topbar, .non-printable { display: none !important; }
    .page-wrapper { padding-left: 0 !important; }
    .card { box-shadow: none; border-color: #ccc; }
}

/* ==========================================================================
   #13 — LISIBILITÉ MESURÉE (17/10/2026)
   Mesuré au navigateur (Chromium, 1366×900, session super admin) sur / ,
   /users, /admin/numipay/portefeuilles, /admin/numipay/operations,
   /settings/countries, /settings/country-pricing, /settings/numipay-features.
   Défauts réels relevés ce jour :
     · texte discret du thème  #99ABB4  → 2,19:1 sur #F4F6F9 (seuil AA : 4,5)
     · fil d'Ariane courant             → même couleur (style.css:2265)
     · code en ligne rose #D63384       → 3,51:1 sur #FFFBEB
     · bouton danger #EF5350            → 3,49:1 sur blanc
     · bouton principal DÉSACTIVÉ : fond vert pâle #A9CFC2 + texte blanc
       (1,69:1) — illisible ET indistinguable d'un bouton actif
     · placeholder select2              → 2,59:1
     · « Sélectionner la plage » #6B7280 sur #F3F4F6 → 4,39:1
   Chaque couple de couleurs ci-dessous est mesuré ; le contrôle rejouable est
   `bash scripts/n13_design_check.sh` (contrastes + débordements + captures).
   ========================================================================== */

/* 1 — Texte discret. Le thème le peint en #99ABB4 avec !important (style.css:512). */
.text-muted, .text-secondary,
.text-muted a, .text-secondary a { color: var(--np-gris) !important; }   /* 5,45:1 sur blanc · 5,03:1 sur #F4F6F9 */

/* 2 — Fil d'Ariane : la page courante doit se lire (style.css:2265, plus spécifique). */
.page-titles .breadcrumb .breadcrumb-item.active,
.page-titles .breadcrumb-item.active,
.breadcrumb-item.active { color: var(--np-gris) !important; }

/* 3 — Code en ligne : le rose Bootstrap échoue le contraste sur fond clair. */
code { color: #9D174D; }                       /* 7,60:1 sur #FFFBEB */
a > code, .alert code { color: #9D174D; }

/* 4 — Danger : #EF5350 (thème) n'atteint pas 4,5:1 pour du texte. */
.text-danger { color: #B3261E !important; }    /* 6,54:1 sur blanc */
.btn-outline-danger { color: #B3261E; border-color: #B3261E; }
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:not(:disabled):not(.disabled):active {
    background: #B3261E;
    border-color: #B3261E;
    color: #FFFFFF;
}

/* 5 — Bouton principal désactivé : lisible, et visiblement inactif
       (le gris remplace le vert pâle, qui laissait croire à un bouton actif). */
.btn-primary.disabled, .btn-primary:disabled {
    background: #E3E8EF;
    border-color: #CBD5E1;
    color: #273449;                            /* 10,19:1 */
    opacity: 1;
}

/* 6 — Champs de saisie vides : un placeholder est du texte, il se lit. */
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--np-gris) !important; }
#daterange, #daterange span { color: var(--np-gris); }   /* 4,99:1 sur #F3F4F6 */

/* 7 — En-têtes de tableau : 11,5 px était la plus petite taille de tout le
       panneau. 12 px garde la densité et gagne en lisibilité. */
.table > thead > tr > th { font-size: 12px; }

/* 8 — Mode sombre (`body.np-dark`) : les règles 1 à 3 ci-dessus portent un
   !important, elles écraseraient les couleurs claires prévues pour le fond
   sombre. On rend donc au mode sombre ses encres claires. */
body.np-dark .text-muted, body.np-dark .text-secondary,
body.np-dark .text-muted a, body.np-dark .text-secondary a { color: #9FB0C9 !important; }
body.np-dark .breadcrumb-item.active,
body.np-dark .page-titles .breadcrumb .breadcrumb-item.active { color: #9FB0C9 !important; }
body.np-dark code { color: #F9A8D4; }

/* 9 — Bandes d'information sur mobile. Un jeton long (`country_configs/{ISO}`)
   ne se coupait pas : la ligne sortait de la carte (mesuré au 17/10 : 627 px
   de contenu pour 390 px d'écran). `overflow-wrap: anywhere` coupe le jeton,
   la bande reste dans la carte. */
.alert, .alert p, .alert li { overflow-wrap: anywhere; }
.alert code { overflow-wrap: anywhere; word-break: break-word; }


/* ==========================================================================
   MODE SOMBRE — CORRECTION DE LISIBILITE (17/10/2026)
   Mesure avant : 121 textes sous le seuil AA (WCAG 4,5:1) sur 7 ecrans.
   Trois causes, toutes traitees ici SANS toucher au mode clair (tout est
   prefixe `body.np-dark`) :
     1) les jetons de couleur n'etaient pas declares pour le sombre : les
        textes restaient en encre foncee (#0B1220) sur les cartes sombres
        (#111C31) -> 1,08:1 ;
     2) les tableaux contextuels du theme (`tr.table-warning`, etc.) gardaient
        un fond clair du template avec du texte devenu clair -> 1,3:1 ;
     3) la cellule « aucune donnee » (`td.dataTables_empty`) restait blanche.
   Couples mesures apres correction (fonds sombres) : encres #F4F6FC sur
   #111C31 = 15,75:1 ; signal vert #7FE0C4 = 10,83:1 ; avertissement #FDE68A
   sur #2A2007 = 12,89:1 ; erreur #FCA5A5 sur #3A1414 = 8,58:1 ; blanc sur
   le vert d'action #007A5A = 5,34:1.
   ========================================================================== */
body.np-dark {
    --np-encre:       #F4F6FC;
    --np-encre-2:     #DCE5F0;
    --np-gris:        #B9C7D8;
    --np-gris-clair:  #9FB0C9;
    --np-trait:       #23334D;
    --np-trait-clair: #1E2C44;
    --np-fond:        #0F172A;
    --np-fond-2:      #16233A;
    --np-surface:     #111C31;
    --np-vert-clair:  #0E3B2F;
    --np-vert-clair2: #0E3B2F;
    --np-ok:          #7FE0C4;
    --np-ok-bg:       #0E3B2F;
    --np-warn:        #FDE68A;
    --np-warn-bg:     #2A2007;
    --np-err:         #FCA5A5;
    --np-err-bg:      #3A1414;
    --np-info:        #93C5FD;
    --np-info-bg:     #10243F;
}
/* 1) Encres du theme qui etaient figees en fonce */
body.np-dark .text-dark,
body.np-dark .text-dark-2,
body.np-dark .text-body,
body.np-dark .card-left-title,
body.np-dark .card-box-with-icon h2,
body.np-dark .card-box-with-icon h4,
body.np-dark .card-header b,
body.np-dark .card-header strong,
body.np-dark .card-header h1,
body.np-dark .card-header h2,
body.np-dark .card-header h3,
body.np-dark .card-header h4,
body.np-dark .card-header h5,
body.np-dark .card-header h6 { color: #F4F6FC !important; }
body.np-dark .card-header,
body.np-dark .card-header p,
body.np-dark .card-body { color: #DCE5F0; }
body.np-dark .text-muted { color: #9FB0C9 !important; }
body.np-dark .text-success { color: #7FE0C4 !important; }
body.np-dark .text-danger { color: #FCA5A5 !important; }
body.np-dark .text-warning { color: #FDE68A !important; }
body.np-dark .text-info { color: #93C5FD !important; }
body.np-dark .text-primary { color: #7DD3FC !important; }
body.np-dark .left-sidebar .web_version,
body.np-dark .web_version { color: #9FB0C9 !important; }
/* Le lien de selection de section : texte blanc sur le vert d'action (5,34:1) */
body.np-dark .topbar .navbar-light .multi-service-nav.navbar-nav .nav-item > a.nav-link,
body.np-dark .multi-service-nav .nav-item > a.nav-link { color: #FFFFFF !important; }
/* 2) Tableaux contextuels : fond sombre teinte, texte clair */
body.np-dark .table-warning > td,
body.np-dark .table-warning > th { background-color: #2A2007 !important; color: #FDE68A !important; border-color: #4A3A10 !important; }
body.np-dark .table-success > td,
body.np-dark .table-success > th { background-color: #0E3B2F !important; color: #7FE0C4 !important; border-color: #17513F !important; }
body.np-dark .table-danger > td,
body.np-dark .table-danger > th { background-color: #3A1414 !important; color: #FCA5A5 !important; border-color: #5A2020 !important; }
body.np-dark .table-info > td,
body.np-dark .table-info > th { background-color: #10243F !important; color: #93C5FD !important; border-color: #1D3A5C !important; }
body.np-dark .table-secondary > td,
body.np-dark .table-secondary > th,
body.np-dark .table-light > td,
body.np-dark .table-light > th { background-color: #16233A !important; color: #E2E8F0 !important; border-color: #23334D !important; }
body.np-dark .table-active > td,
body.np-dark .table-active > th { background-color: #1E2C44 !important; color: #F4F6FC !important; }
/* 3) Cellule « aucune donnee » : le fond restait blanc */
body.np-dark .table > tbody > tr > td.dataTables_empty,
body.np-dark .table > tbody > tr.np-ligne-vide > td,
body.np-dark td.dataTables_empty { background-color: #111C31 !important; color: #9FB0C9 !important; }
body.np-dark .np-vide strong,
body.np-dark .dataTables_empty strong { color: #F4F6FC !important; }
/* Alertes et pastilles claires du template */
body.np-dark .alert-light,
body.np-dark .alert-secondary,
body.np-dark .bg-white,
body.np-dark .bg-light { background-color: #111C31 !important; color: #E2E8F0 !important; border-color: #23334D !important; }
body.np-dark .alert-warning { background-color: #2A2007 !important; border-color: #4A3A10 !important; color: #FDE68A !important; }
body.np-dark .alert-warning code,
body.np-dark .alert-warning b,
body.np-dark .alert-warning strong { color: #FDE68A !important; }
body.np-dark .alert-success { background-color: #0E3B2F !important; border-color: #17513F !important; color: #7FE0C4 !important; }
body.np-dark .alert-danger { background-color: #3A1414 !important; border-color: #5A2020 !important; color: #FCA5A5 !important; }
body.np-dark .alert-info { background-color: #10243F !important; border-color: #1D3A5C !important; color: #93C5FD !important; }
body.np-dark .badge-light,
body.np-dark .badge-secondary { background-color: #16233A !important; color: #E2E8F0 !important; }
body.np-dark .badge-warning { background-color: #2A2007 !important; color: #FDE68A !important; }
body.np-dark .badge-success { background-color: #0E3B2F !important; color: #7FE0C4 !important; }
body.np-dark .badge-danger { background-color: #3A1414 !important; color: #FCA5A5 !important; }
body.np-dark .badge-info { background-color: #10243F !important; color: #93C5FD !important; }
body.np-dark .border { border-color: #23334D !important; }
body.np-dark .text-dark.bg-white { color: #F4F6FC !important; }

/* --- 2e passe du 17/10 : les liens-boutons et les champs clairs du template.
   Cause : `body.np-dark a` (l. 1566) impose #7FE0C4 a TOUS les liens, y compris
   ceux qui portent une classe de bouton (`a.btn-primary`, `a.btn-outline-*`,
   `a.paginate_button`) : le libelle devenait vert clair sur fond vert (3,4:1)
   ou sur fond blanc (1,57:1). Un bouton n'est pas un lien de texte. */
body.np-dark a.btn-primary,
body.np-dark a.btn-dark,
body.np-dark .btn-primary,
body.np-dark .btn-dark { background-color: var(--np-vert-action) !important; border-color: var(--np-vert-action) !important; color: #FFFFFF !important; }
body.np-dark a.btn-primary:hover,
body.np-dark .btn-primary:hover { background-color: var(--np-vert-fonce) !important; border-color: var(--np-vert-fonce) !important; color: #FFFFFF !important; }
body.np-dark .btn-primary.disabled,
body.np-dark .btn-primary:disabled { background-color: #334155 !important; border-color: #475569 !important; color: #E2E8F0 !important; }
body.np-dark a.btn-outline-primary,
body.np-dark .btn-outline-primary { background-color: #0E3B2F !important; border-color: #1CB084 !important; color: #7FE0C4 !important; }
body.np-dark a.btn-outline-secondary,
body.np-dark .btn-outline-secondary,
body.np-dark a.btn-outline-light,
body.np-dark .btn-outline-light { background-color: #16233A !important; border-color: #23334D !important; color: #C7D4E4 !important; }
body.np-dark a.btn-outline-danger,
body.np-dark .btn-outline-danger,
body.np-dark button.btn-outline-danger { background-color: #3A1414 !important; border-color: #5A2020 !important; color: #FCA5A5 !important; }
/* Bouton de DESTRUCTION plein (`.btn-danger`, ex. « Débiter » de la fiche
   compte) : en mode sombre `--np-err` devient #FCA5A5 (le rouge clair sert au
   TEXTE d'erreur) — et `.btn-danger` l'utilisait comme FOND, donc blanc sur
   rouge clair : 1,9:1, illisible. Un bouton plein reprend un rouge SOMBRE, son
   libellé reste blanc. */
body.np-dark .btn-danger,
body.np-dark a.btn-danger,
body.np-dark button.btn-danger { background-color: #991B1B !important; border-color: #B91C1C !important; color: #FFFFFF !important; }
body.np-dark .btn-danger:hover,
body.np-dark a.btn-danger:hover,
body.np-dark button.btn-danger:hover { background-color: #7F1D1D !important; border-color: #991B1B !important; color: #FFFFFF !important; }
body.np-dark .btn-danger.disabled,
body.np-dark .btn-danger:disabled { background-color: #4C1D1D !important; border-color: #5A2020 !important; color: #FCA5A5 !important; }
body.np-dark a.btn-outline-success,
body.np-dark .btn-outline-success { background-color: #0E3B2F !important; border-color: #17513F !important; color: #7FE0C4 !important; }
body.np-dark a.btn-outline-warning,
body.np-dark .btn-outline-warning { background-color: #2A2007 !important; border-color: #4A3A10 !important; color: #FDE68A !important; }
/* Pagination DataTables : le lien desactive restait gris #666 sur fond sombre */
body.np-dark .dataTables_wrapper .paginate_button,
body.np-dark .paginate_button { color: #C7D4E4 !important; }
body.np-dark .dataTables_wrapper .paginate_button.disabled,
body.np-dark .dataTables_wrapper .paginate_button.disabled:hover,
body.np-dark .paginate_button.disabled { color: #94A3B8 !important; }   /* 5,9:1 sur #111C31 */
body.np-dark .dataTables_wrapper .paginate_button.current { background: var(--np-vert-action) !important; border-color: var(--np-vert-action) !important; color: #FFFFFF !important; }
/* Champs clairs du template : select2, plage de dates, boites de filtre */
body.np-dark .select2-container--default .select2-selection--single,
body.np-dark .select2-selection,
body.np-dark .select2-selection--single { background-color: #16233A !important; border-color: #23334D !important; color: #E2E8F0 !important; }
body.np-dark .select2-container--default .select2-selection--single .select2-selection__rendered,
body.np-dark .select2-selection__rendered,
body.np-dark .select2-selection__placeholder { color: #C7D4E4 !important; }
body.np-dark .select2-dropdown { background-color: #111C31 !important; border-color: #23334D !important; color: #E2E8F0 !important; }
body.np-dark .select2-results__option { color: #C7D4E4 !important; }
body.np-dark .select2-container--default .select2-results__option--highlighted,
body.np-dark .select2-results__option--highlighted { background-color: #0E3B2F !important; color: #7FE0C4 !important; }
body.np-dark .top-title-section .select-box #daterange,
body.np-dark #daterange { background-color: #16233A !important; border-color: #23334D !important; color: #C7D4E4 !important; }
body.np-dark #daterange i,
body.np-dark #daterange span,
body.np-dark .top-title-section .select-box #daterange span { color: #C7D4E4 !important; }
body.np-dark .select-box select,
body.np-dark select.status_selector { background-color: #16233A !important; border-color: #23334D !important; color: #E2E8F0 !important; }

/* =====================================================================
   Demande #13 — CONTRASTE WCAG AA : les quatre derniers textes mesurés
   sous le seuil (audit n13_contraste_admin.mjs, 12 écrans × 2 thèmes).
   Règles ajoutées en fin de couche : elles battent les feuilles du gabarit
   (bootstrap/admin.css) et ne touchent aucune vue, sauf la classe de ligne
   « à rapprocher » qui remplace un style inline impossible à thémer.
   ===================================================================== */

/* 1. Bandeau d'onglets : `ul.nav-tabs` gardait le fond gris #AAA du gabarit.
   Texte clair (sombre) ou gris (clair) dessus = 1,05:1 / 2,35:1. */
.nav-tabs,
.nav-tabs.nav {
    background: transparent;
}

/* 2. Bouton neutre « Retour » : blanc sur #979797 = 2,92:1 en mode sombre. */
body.np-dark .btn-default {
    background-color: #2A3A52 !important;
    border-color: #3A4A62 !important;
    color: #E2E8F0 !important;          /* 9,4:1 sur #2A3A52 */
}
body.np-dark .btn-default:hover {
    background-color: #33455F !important;
    color: #FFFFFF !important;
}

/* 3. Select2 : le libellé est dans un <span> imbriqué que la règle du
   gabarit peint en #67757C — 3,3:1 sur le champ sombre #16233A. */
body.np-dark .select2-selection__rendered span {
    color: #C7D4E4 !important;          /* 9,1:1 sur #16233A */
}

/* 4. Ligne « à rapprocher » du tableau des recharges. Le style inline
   `background:#fff8e1` restait clair en mode sombre (texte clair dessus :
   1,42:1). La vue porte désormais une classe, thémée ici. */
.np-rangee-a-rapprocher { background: #FFF8E1; }
body.np-dark .np-rangee-a-rapprocher { background: #3A2E12 !important; }
body.np-dark .np-rangee-a-rapprocher td,
body.np-dark .np-rangee-a-rapprocher code,
body.np-dark .np-rangee-a-rapprocher small,
body.np-dark .np-rangee-a-rapprocher .text-muted { color: #E8D9B0 !important; }  /* 8,9:1 sur #3A2E12 */
body.np-dark .np-rangee-a-rapprocher code { color: #FBCFE8 !important; }          /* 7,3:1 sur #3A2E12 */

/* 5. Boutons d'export DataTables : le libellé « Exporter en » héritait d'un
   gris de la feuille des boutons (#8A98A8 sur blanc = 2,9:1). On impose la
   couleur d'encre du panneau, dans les deux thèmes. */
.dt-buttons .btn,
.dt-buttons .btn span,
.dt-buttons .btn i,
.dt-button-collection .dt-button,
.dt-button-collection .dt-button span { color: var(--np-encre); }        /* 16,2:1 sur #F3F4F6 */
body.np-dark .dt-buttons .btn,
body.np-dark .dt-button-collection .dt-button {
    background-color: #16233A !important;
    border-color: #23334D !important;
}
body.np-dark .dt-buttons .btn span,
body.np-dark .dt-buttons .btn i,
body.np-dark .dt-button-collection .dt-button span { color: #E2E8F0 !important; }   /* 11,6:1 sur #16233A */
body.np-dark .dt-button-collection { background: #111C31 !important; border-color: #23334D !important; }

/* ==========================================================================
   #13 — CONTRASTE WCAG AA : DERNIERS COUPLES MESURÉS SOUS LE SEUIL
   Audit rejouable : `node scripts/_n13c_contraste.mjs` (Chromium, 1366×900,
   session super admin, 15 écrans × 2 thèmes + page de connexion, 6 050 textes
   réellement rendus, pseudo-élément ::placeholder inclus).
   Chaque règle ci-dessous corrige un couple MESURÉ, pas supposé ; le ratio
   avant/après est écrit en commentaire.

   1) .nav / .nav-pills portaient le fond gris #AAA du gabarit Bootstrap.
      Le libellé d'onglet y était blanc (règle `.nav-link` du même fichier) :
      blanc sur #AAA = 2,32:1. Les onglets du support (Chauffeur, Boutique,
      Client, Prestataire, Travailleur) étaient donc illisibles.
   2) Les placeholders étaient peints en #8A98A8 (2,94:1 sur blanc) et, pour
      les champs DataTables, dans le gris par défaut du navigateur
      (#757575 → 3,41:1 sur le champ sombre #16233A).
   3) #reportrange (rapport des ventes) porte `style="background:#fff"` dans
      la vue : en mode sombre le texte clair restait sur du blanc (1,27:1).
   4) Le sélecteur de langue du bandeau héritait de `.text-light` :
      « fr » blanc sur fond blanc (1:1).
   5) La mention « Gratuit » des forfaits est écrite `style="color:red"` dans
      la vue : #FF0000 sur blanc = 4,00:1, sous le seuil de 4,5:1.
   ========================================================================== */

/* 1 — Onglets et pastilles : fond neutre, libellés lisibles. */
.nav-pills, .nav-pills.nav, .nav.fill, ul.nav.nav-pills {
    background: transparent !important;
}
.nav-pills .nav-link,
.nav-pills > li > a {
    color: var(--np-gris) !important;        /* 5,45:1 sur blanc */
    background: transparent;
}
.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus,
.nav-pills > li > a:hover {
    color: var(--np-vert-action) !important; /* 5,34:1 sur blanc */
    background: var(--np-vert-clair);
}
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
    background: var(--np-vert-action) !important;
    color: #FFFFFF !important;               /* 5,34:1 sur #007A5A */
}
body.np-dark .nav-pills .nav-link,
body.np-dark .nav-pills > li > a { color: #C7D4E4 !important; }   /* 9,1:1 sur #111C31 */
body.np-dark .nav-pills .nav-link:hover { color: #7FE0C4 !important; background: #0E3B2F; }
body.np-dark .nav-pills .nav-link.active { background: var(--np-vert-action) !important; color: #FFFFFF !important; }

/* 2 — Placeholders : du texte, donc 4,5:1. */
.form-control::placeholder,
.form-control::-webkit-input-placeholder,
input::placeholder, textarea::placeholder,
.dataTables_filter input::placeholder,
.dataTables_wrapper .dataTables_filter input::placeholder,
.chosen-container input::placeholder,
.sidebar-search input::placeholder,
#sideBarSearchInput::placeholder {
    color: var(--np-gris) !important;        /* #5B6B7F : 5,45:1 sur blanc, 5,03:1 sur #F3F4F6 */
    opacity: 1;
}
body.np-dark .form-control::placeholder,
body.np-dark input::placeholder,
body.np-dark textarea::placeholder,
body.np-dark .dataTables_filter input::placeholder,
body.np-dark .dataTables_wrapper .dataTables_filter input::placeholder,
body.np-dark .sidebar-search input::placeholder,
body.np-dark #sideBarSearchInput::placeholder {
    color: #9FB0C9 !important;               /* 7,0:1 sur #16233A */
    opacity: 1;
}

/* 3 — Plage de dates du rapport des ventes : la vue impose #fff en ligne. */
body.np-dark #reportrange,
body.np-dark #reportrange span,
body.np-dark #reportrange i {
    background-color: #16233A !important;
    border-color: #23334D !important;
    color: #C7D4E4 !important;               /* 9,1:1 sur #16233A */
}
body.np-dark #reportrange span { background-color: transparent !important; }
#reportrange span { color: var(--np-gris); }

/* 4 — Sélecteur de langue du bandeau : texte clair hérité sur fond blanc. */
#language_dropdown, select#language_dropdown,
.language-list .changeLang {
    color: var(--np-encre-2) !important;     /* 12,6:1 sur blanc */
    background-color: #FFFFFF !important;
    border: 1px solid var(--np-trait);
}
body.np-dark #language_dropdown,
body.np-dark select#language_dropdown,
body.np-dark .language-list .changeLang {
    color: #E2E8F0 !important;
    background-color: #16233A !important;
    border-color: #23334D !important;
}

/* 5 — « Gratuit » écrit en rouge vif dans la vue des forfaits.
   Un `!important` de feuille de style bat un style en ligne sans !important. */
span[style*="color:red"], span[style*="color: red"],
span[style*="color:#ff0000"], span[style*="color: #ff0000"],
span[style*="color:#FF0000"] {
    color: #B3261E !important;               /* 6,54:1 sur blanc, 6,04:1 sur #FBFCFE */
}
body.np-dark span[style*="color:red"],
body.np-dark span[style*="color: red"],
body.np-dark span[style*="color:#ff0000"],
body.np-dark span[style*="color: #ff0000"] {
    color: #FCA5A5 !important;               /* 8,58:1 sur #111C31 */
}

/* ==========================================================================
   #13 — CONTRASTE : ÉCRANS AJOUTÉS À L'AUDIT (Studio e-mail, Vérification
   marchands, KLiPO, formulaires de création).
   Ces écrans portent leurs propres styles DANS la vue (`<style>` local) ; on
   ne réécrit pas la vue, on surcharge les quelques couples fautifs ici.
   Mesures avant correction (Chromium, 1366×900) :
     · carte .nes-card / .nvm-card laissée blanche en mode sombre alors que
       l'encre y devient claire ........................ #F4F6FC sur #FFF = 1,08:1
     · étiquette .nes-lab ............................... #C7D4E8 sur #FFF = 1,50:1
     · mention .nes-mini ................................ #8A929B sur #FAFBFC = 3,04:1
     · bouton .nes-btn (vert décoratif #1CB084) ......... blanc sur #1CB084 = 2,77:1
     · pastille .badge.bg-success en sombre ............. #C7D4E8 sur #26DAD2 = 1,16:1
     · bouton neutre « Retour » ......................... blanc sur #979797 = 2,92:1
     · lien vert sur ligne active ....................... #007A5A sur #E8E9EB = 4,40:1
   ========================================================================== */

/* Cartes des modules récents : fond sombre en mode sombre (le texte y est déjà clair). */
body.np-dark .nes-card,
body.np-dark .nvm-card,
body.np-dark .nes-modele {
    background: #111C31 !important;
    border-color: #23334D !important;
    color: #E2E8F0 !important;
}
body.np-dark .nes-modele.active {
    background: #0E3B2F !important;
    border-color: #1CB084 !important;
    box-shadow: inset 0 0 0 1px #1CB084 !important;
}
body.np-dark .nes-modele .vp,
body.np-dark .nes-modele span { background: #16233A !important; color: #B9C7D8 !important; }
body.np-dark .nes-inp,
body.np-dark .nes-card input,
body.np-dark .nes-card textarea,
body.np-dark .nes-card select {
    background: #16233A !important;
    border-color: #23334D !important;
    color: #E2E8F0 !important;
}
body.np-dark .nes-inp::placeholder,
body.np-dark .nes-card input::placeholder,
body.np-dark .nes-card textarea::placeholder { color: #9FB0C9 !important; }
body.np-dark .nes-card code, body.np-dark .nvm-card code { color: #F9A8D4 !important; }
body.np-dark .nvm-kpi { color: #B9C7D8 !important; }

/* Étiquettes et mentions : le gris du gabarit local est trop clair. */
.nes-lab { color: var(--np-gris) !important; }        /* 5,45:1 sur blanc */
body.np-dark .nes-lab { color: #C7D4E4 !important; }  /* 9,1:1 sur #111C31 */
.nes-mini { color: var(--np-gris) !important; }       /* 5,45:1 sur #FAFBFC */
body.np-dark .nes-mini { color: #9FB0C9 !important; }

/* Bouton plein du Studio e-mail : le vert décoratif #1CB084 ne porte pas de texte. */
.nes-btn {
    background: var(--np-vert-action) !important;     /* #007A5A : blanc = 5,34:1 */
    color: #FFFFFF !important;
}
.nes-btn:hover { background: var(--np-vert-fonce) !important; }
.nes-btn.gris { background: #E3E8EF !important; color: #273449 !important; }
body.np-dark .nes-btn.gris { background: #2A3A52 !important; color: #E2E8F0 !important; }

/* Pastilles d'état : le cyan vif du gabarit local ne porte pas de texte clair. */
body.np-dark .badge.bg-success,
body.np-dark .badge.bg-success * {
    background: #0E3B2F !important;
    color: #7FE0C4 !important;                        /* 10,8:1 sur #0E3B2F */
}

/* Bouton neutre du gabarit : blanc sur #979797 (2,92:1). */
.btn-default, a.btn-default, button.btn-default {
    background: #E3E8EF !important;
    border-color: #CBD5E1 !important;
    color: #273449 !important;                        /* 10,19:1 */
}
.btn-default:hover, a.btn-default:hover, button.btn-default:hover {
    background: #D5DDE7 !important;
    color: #0B1220 !important;
}
body.np-dark .btn-default, body.np-dark a.btn-default, body.np-dark button.btn-default {
    background: #2A3A52 !important;
    border-color: #3A4A62 !important;
    color: #E2E8F0 !important;
}

/* Lien vert sur fond de ligne active un peu gris : 4,40:1, il manquait 0,1. */
tr.table-active td a,
tr.table-active td a:hover,
.table > tbody > tr.table-active > td > a { color: #00614A !important; }   /* 5,3:1 sur #E8E9EB */
body.np-dark tr.table-active td a { color: #7FE0C4 !important; }

/* .nes-hint : gris #6B7280 figé dans la vue → 3,52:1 sur la carte sombre. */
.nes-hint { color: var(--np-gris) !important; }        /* 5,45:1 sur blanc */
body.np-dark .nes-hint, body.np-dark .nes-hint b { color: #B9C7D8 !important; }  /* 9,0:1 sur #111C31 */

/* ==========================================================================
   #13 — CONTRASTE AA : 3e passe, couples MESURÉS (17/10)
   Mesure rejouable : `node /opt/data/scripts/n13c_contraste_mesure.mjs`
   Chromium réel, session super admin, 38 écrans × 2 thèmes × 1366 et 390 px,
   pseudo-élément ::placeholder inclus, fonds rgba composités et dégradés
   évalués sur leur pire arrêt. JSON avant/après : /opt/data/cache/n13_*.json
   Chaque règle ci-dessous répond à un couple relevé, pas à une supposition.
   ========================================================================== */

/* 1. Champs « form-material » — page de connexion en mode sombre.
      AVANT : placeholder #9FB0C9 sur champ BLANC = 2,20:1 ; la valeur tapée
              (#E2E8F0) tombait à ~1,0:1, donc invisible.
      CAUSE : la charte claire elle-même impose
              `.form-material .form-control { background-color:#fff !important }`
              (0,3,0), qui bat `body.np-dark .form-control` (0,2,1) sans
              `!important`. On égale la spécificité du sélecteur fautif.
      APRÈS : #E2E8F0 sur #16233A = 12,75:1 ; placeholder 7,13:1. */
body.np-dark .form-material .form-control,
body.np-dark .form-material .form-control.focus,
body.np-dark .form-material .form-control:focus {
    background-color: #16233A !important;
    border-color: #23334D !important;
    color: #E2E8F0 !important;
}
body.np-dark .form-material .form-control::placeholder {
    color: #9FB0C9 !important;
}

/* 2. Onglets Bootstrap `.nav-tabs` en mode sombre.
      AVANT : `.nav-tabs .nav-link.active` du gabarit garde `background:#fff` ;
              la charte ne changeait que le libellé → #7FE0C4 sur blanc =
              1,57:1 (onglets Modération / Sources / Algorithme de KLiPO,
              relevés aux deux largeurs).
      APRÈS : fond vert sombre, libellé vert clair = 7,93:1. */
body.np-dark .nav-tabs .nav-link.active,
body.np-dark .nav-tabs .nav-link.active:hover,
body.np-dark .nav-tabs .nav-item.show .nav-link {
    background-color: #0E3B2F !important;
    border-color: #1CB084 !important;
    color: #7FE0C4 !important;
}

/* =====================================================================
   #13 — « L'ÉCRAN QUI DÉBORDE » : bandeau d'onglets mesuré hors cadre.
   MESURE (18/10/2026, navigateur réel, 103 écrans du menu, 1366 px) :
   `ul.nav-tabs.card-header-tabs` de /settings/payment/stripe mesurait
   1122 px pour un parent de 1102 px et sortait de 10 px à droite
   (right = 1376 pour une fenêtre de 1366). Cause : les marges négatives
   de `card-header-tabs` (margin-left/right égales à -0.5rem) NE SONT PAS
   compensées par le parent `.payment-top-tab` (display:block).
   Correctif : on annule ces deux marges dans le bandeau d'onglets ; les
   onglets passent déjà à la ligne (flex-wrap: wrap mesuré sur le ul).
   ===================================================================== */
.payment-top-tab > .nav-tabs.card-header-tabs,
.payment-top-tab > .nav-tabs {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

/* =====================================================================
   #13 — CARTES KLiPO en mode sombre (écrans redevenus rendables le 18/10).
   MESURE (Chromium, 1366 et 390 px) : `.klipo-carte` garde `background:#fff`
   du gabarit local `public/klipo/klipo.css` alors que la charte sombre passe
   déjà son contenu en clair → 1,72:1 pour les titres/détails
   (#B9C7D8 sur blanc) et 1,08:1 pour les grands chiffres (#F4F6FC sur blanc).
   On ne repeint que la SURFACE : les couleurs de texte déjà claires
   redeviennent lisibles dessus (9,3:1 et 15:1).
   ===================================================================== */
body.np-dark .klipo-carte {
    background: #111C31 !important;
    border-color: #23334D !important;
}
body.np-dark .klipo-carte:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   #13 — REFONTE DE LISIBILITÉ DU PANNEAU (18/10/2026)
   --------------------------------------------------------------------------
   Constat du fondateur : « le design est un bourbier, du gris qu'on ne voit
   pas bien, on ne comprend rien ». Le problème n'était pas l'absence de
   couleurs mais l'absence de HIÉRARCHIE : titres et sous-titres au même
   poids, cartes toutes identiques, tableaux sans respiration, libellés
   secondaires noyés dans le contenu.

   Ce bloc ne réécrit AUCUNE vue : il ne touche que des propriétés de
   présentation (rythme vertical, tailles, poids, surfaces, séparateurs) et
   laisse intacte la structure HTML des écrans existants.
   Tous les couples texte/fond de ce bloc sont ≥ 4,5:1 (AA) en clair ET en
   sombre ; ils sont mesurés par scripts/n13_design_check.sh.
   ========================================================================== */

/* ------------------------------------------------------------- 1. RYTHME */
/* Une seule gouttière verticale (22 px) entre les cartes : le panneau
   respirait irrégulièrement (8, 20, 30 px selon les écrans). */
.page-wrapper > .container-fluid { padding-bottom: 28px; }
.page-wrapper .card + .card { margin-top: 22px; }
.page-wrapper .row > [class*="col-"] > .card:last-child { margin-bottom: 0; }

/* -------------------------------------------------------- 2. TITRES DE PAGE */
/* Un titre de page DOMINE : 26 px, encre pleine, et un fil conducteur sous
   le fil d'Ariane. Avant, il partageait sa taille avec les titres de cartes. */
.page-titles { padding: 18px 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--np-trait); }
.page-titles h3, .page-titles .page-title {
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--np-encre) !important;
    margin: 0;
}
.page-titles .breadcrumb { background: transparent; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.admin-top-section .top-title-left h3 { font-size: 22px; letter-spacing: -.015em; }

/* ------------------------------------------------ 3. CARTES : UNE SURFACE */
/* Même rayon, même filet, même ombre partout : la carte devient l'unité de
   lecture. L'ombre reste discrète — deux niveaux, pas cinq. */
.page-wrapper .card {
    border-radius: var(--np-r-lg);
    border-color: var(--np-trait);
    box-shadow: var(--np-ombre-1);
    margin-bottom: 22px;
}
.page-wrapper .card-header { padding: 15px 22px; }
.page-wrapper .card-body { padding: 20px 22px; }
@media (max-width: 767px) {
    .page-wrapper .card-body { padding: 16px; }
    .page-wrapper .card-header { padding: 13px 16px; }
    .page-titles h3, .page-titles .page-title { font-size: 21px; }
}

/* Titre de carte : 16 px, mais un vrai sous-titre au-dessous (13 px, gris
   conforme AA) qui dit CE QUE MONTRE la carte. */
.card-header-title h3, .card-header-title .h4 { font-size: 16px; letter-spacing: -.01em; }
.card-header-title p { font-size: 13px; margin-top: 2px; }

/* --------------------------------------------------- 4. TABLEAUX LISIBLES */
/* Plus d'air, un en-tête franc, des lignes séparées par un filet FIN : on
   suit une ligne des yeux sans traverser des bordures partout. */
.table > thead > tr > th {
    background: var(--np-fond-2);
    color: #3E5066;               /* 7,1:1 sur #EEF2F7 */
    font-size: 11px;
    letter-spacing: .07em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--np-trait);
}
.table > tbody > tr > td { padding: 13px 16px; font-size: 13.5px; color: var(--np-encre-2); }
.table > tbody > tr:hover > td { background: var(--np-vert-clair2); }
.table-bordered { border: 0; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-left: 0; border-right: 0; }
/* Chiffres alignés : un montant se lit de droite à gauche, chiffres de même
   largeur. */
.table td .np-montant, .table td.np-a-droite, .np-montant { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- 5. FORMULAIRES */
.form-control, .np-input {
    min-height: 42px;
    border-radius: var(--np-r-sm);
    border: 1px solid #C9D3DF;
    color: var(--np-encre);
    font-size: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder, .np-input::placeholder { color: #64748B; }  /* 4,76:1 */
.form-control:focus, .np-input:focus {
    border-color: var(--np-vert-action);
    box-shadow: var(--np-anneau);
    outline: none;
}
label { font-size: 12.5px; font-weight: 700; color: var(--np-encre-2); }

/* Boutons : une hauteur, un rayon, un poids — et une cible ≥ 40 px. */
.btn { min-height: 40px; border-radius: var(--np-r-sm); font-weight: 700; font-size: 13.5px; padding: 9px 16px; }
.btn-primary { background: var(--np-vert-action); border-color: var(--np-vert-action); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--np-vert-fonce); border-color: var(--np-vert-fonce); }

/* Alertes : filet d'accent à gauche, fond très clair, texte AA. */
.alert { border-radius: var(--np-r-md); border: 1px solid transparent; border-left-width: 4px; font-size: 13.5px; }
.alert-success { background: var(--np-ok-bg); border-color: #A7F3D0; border-left-color: var(--np-ok); color: var(--np-ok); }
.alert-danger  { background: var(--np-err-bg); border-color: #FECACA; border-left-color: var(--np-err); color: var(--np-err); }
.alert-warning { background: var(--np-warn-bg); border-color: #FDE68A; border-left-color: #B45309; color: var(--np-warn); }
.alert-info    { background: var(--np-info-bg); border-color: #BFDBFE; border-left-color: var(--np-info); color: var(--np-info); }

/* ------------------------------------------------------------ 6. MENU */
/* Les titres de section du menu séparent les mondes (Accès, Commerce,
   NumiPay…) : plus petits, espacés, en capitales — ils ne se confondent plus
   avec les entrées cliquables. */
.left-sidebar .nav-subtitle { margin: 14px 0 6px; }
.left-sidebar .nav-subtitle-span { font-size: 10.5px; letter-spacing: .1em; font-weight: 800; color: var(--np-gris); }
.left-sidebar .sidebar-link { min-height: 40px; }

/* ==========================================================================
   7. FICHE NUMIPAY D'UN COMPTE (.np-compte)
   --------------------------------------------------------------------------
   Le solde en grand, l'historique au centre, les actions à droite. Aucune
   information n'est supprimée : elle est ORDONNÉE.
   ========================================================================== */

.np-compte .page-titles { padding-top: 8px; }

/* ---- 7a. Bandeau du solde ------------------------------------------------ */
.np-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: stretch;
    background: linear-gradient(135deg, #05301F 0%, #0A4A38 62%, #0C5B45 100%);
    border: 1px solid #0B4A38;
    border-radius: var(--np-r-xl);
    padding: 26px 28px;
    margin-bottom: 12px;
    color: #fff;
    box-shadow: var(--np-ombre-2);
}
.np-hero-etiquette {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #C7E9DD;               /* 9,9:1 sur #0A4A38 */
}
.np-hero-titulaire {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}
.np-hero-titulaire i { color: #9FE8D2; }
.np-hero-discret { color: #C7E9DD; font-weight: 500; }
.np-hero-sep { color: #7FC7B2; }

.np-hero-solde { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 4px; flex-wrap: wrap; }
.np-hero-montant {
    font-size: 44px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.np-hero-devise { font-size: 15px; font-weight: 700; color: #A9E3D0; letter-spacing: .04em; }

.np-hero-pied {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 12px;
    font-size: 12.5px;
    color: #C7E9DD;
}
.np-hero-pied i { margin-right: 4px; color: #9FE8D2; }
.np-hero-pied code { background: rgba(255, 255, 255, .12); color: #fff; border-radius: 4px; padding: 1px 5px; font-size: 11.5px; }

.np-pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--np-r-pill);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}
.np-pastille-ok { background: #0F6B4F; color: #D8F7EC; border: 1px solid #1B8A68; }
.np-pastille-warn { background: #4A3410; color: #FDE9C2; border: 1px solid #7A5612; }
.np-pastille-neutre { background: rgba(255, 255, 255, .14); color: #EAF6F1; border: 1px solid rgba(255, 255, 255, .26); }
.np-point { width: 7px; height: 7px; border-radius: 50%; background: #6EE7B7; box-shadow: 0 0 0 3px rgba(110, 231, 183, .22); }

.np-hero-chiffres {
    display: grid;
    grid-template-columns: repeat(3, minmax(96px, 1fr));
    gap: 10px;
    align-content: center;
}
.np-hero-chiffre {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--np-r-md);
    padding: 12px 14px;
    min-width: 0;
}
.np-hero-chiffre-libelle { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #C7E9DD; }
.np-hero-chiffre-valeur { display: block; font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.25; }
.np-hero-chiffre-note { display: block; font-size: 11px; color: #A9E3D0; }

.np-note {
    font-size: 12.5px;
    color: var(--np-gris);
    margin: 0 0 18px;
    padding-left: 2px;
}
.np-note i { color: var(--np-vert-action); margin-right: 4px; }

/* ---- 7b. Grille ---------------------------------------------------------- */
.np-grille {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
    gap: 22px;
    align-items: start;
}
.np-grille-bas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 22px; }
.np-colonne { display: grid; gap: 22px; }
.np-carte-bas { margin-top: 22px; }
@media (max-width: 1199px) {
    .np-grille, .np-grille-bas { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 7c. Cartes de la fiche --------------------------------------------- */
.np-carte {
    background: var(--np-surface);
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-lg);
    box-shadow: var(--np-ombre-1);
    overflow: hidden;
}
.np-carte-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--np-trait-clair);
}
.np-carte-titre { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; margin: 0; color: var(--np-encre); }
.np-carte-sous-titre { font-size: 12.5px; color: var(--np-gris); margin: 3px 0 0; line-height: 1.45; }
.np-carte-corps { padding: 18px 20px; }
.np-carte-corps-serre { padding: 8px 20px 16px; }
.np-compteur {
    flex: 0 0 auto;
    background: var(--np-fond-2);
    color: var(--np-encre-2);
    border-radius: var(--np-r-pill);
    font-size: 12px;
    font-weight: 800;
    padding: 4px 11px;
    font-variant-numeric: tabular-nums;
}
.np-carte-icone {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 10px;
    font-size: 18px;
}
.np-carte-icone-ok { background: var(--np-ok-bg); color: var(--np-ok); }
.np-carte-icone-ko { background: var(--np-err-bg); color: var(--np-err); }

/* ---- 7d. Filtres --------------------------------------------------------- */
.np-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: var(--np-fond-2);
    border-bottom: 1px solid var(--np-trait-clair);
}
.np-champ { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; }
.np-champ-libelle { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--np-gris); }
.np-champ select, .np-champ input {
    height: 38px;
    min-height: 38px;
    border: 1px solid #C9D3DF;
    border-radius: var(--np-r-sm);
    background: #fff;
    color: var(--np-encre);
    font-size: 13px;
    padding: 0 10px;
}
.np-champ-recherche {
    flex: 1 1 280px;
    position: relative;
    flex-direction: row;
    align-items: center;
}
.np-champ-recherche i { position: absolute; left: 11px; color: var(--np-gris); font-size: 15px; pointer-events: none; }
.np-champ-recherche input { width: 100%; padding-left: 34px; }
.np-champ:focus-within select, .np-champ:focus-within input { border-color: var(--np-vert-action); box-shadow: var(--np-anneau); outline: none; }

/* ---- 7e. Boutons de la fiche --------------------------------------------- */
.np-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: var(--np-r-sm);
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.np-btn-primaire { background: var(--np-vert-action); border-color: var(--np-vert-action); color: #fff; }
.np-btn-primaire:hover, .np-btn-primaire:focus { background: var(--np-vert-fonce); border-color: var(--np-vert-fonce); color: #fff; text-decoration: none; }
.np-btn-danger { background: var(--np-err); border-color: var(--np-err); color: #fff; }
.np-btn-danger:hover, .np-btn-danger:focus { background: #991B1B; border-color: #991B1B; color: #fff; text-decoration: none; }
.np-btn-fantome { background: #fff; border-color: #C9D3DF; color: var(--np-encre-2); }
.np-btn-fantome:hover, .np-btn-fantome:focus { background: var(--np-fond-2); border-color: var(--np-vert-action); color: var(--np-vert-fonce); text-decoration: none; }
.np-carte-corps form .np-btn { width: 100%; margin-top: 14px; }
.np-faits-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 18px; }

/* ---- 7f. Formulaire de crédit / débit ------------------------------------ */
.np-form-libelle { display: block; font-size: 12px; font-weight: 700; color: var(--np-encre-2); margin: 0 0 5px; }
.np-form-libelle span { font-weight: 500; color: var(--np-gris); font-size: 11.5px; }
.np-form-ligne { position: relative; display: flex; align-items: center; }
.np-form-ligne .np-input { padding-right: 54px; font-size: 18px; font-weight: 800; height: 48px; font-variant-numeric: tabular-nums; }
.np-form-devise {
    position: absolute;
    right: 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--np-gris);
    letter-spacing: .04em;
    pointer-events: none;
}
.np-input {
    width: 100%;
    height: 42px;
    border: 1px solid #C9D3DF;
    border-radius: var(--np-r-sm);
    padding: 0 12px;
    font-size: 14px;
    color: var(--np-encre);
    background: #fff;
}
.np-input:focus { border-color: var(--np-vert-action); box-shadow: var(--np-anneau); outline: none; }
.np-carte-corps form .np-form-libelle:not(:first-child) { margin-top: 14px; }
.np-form-aide { font-size: 11.5px; color: var(--np-gris); margin: 10px 0 0; line-height: 1.5; }

/* ---- 7g. Tableau de l'historique ----------------------------------------- */
.np-table-enveloppe { overflow-x: auto; }
.np-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.np-table thead th {
    background: var(--np-fond-2);
    color: #3E5066;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
    padding: 11px 16px;
    border-bottom: 1px solid var(--np-trait);
    white-space: nowrap;
}
.np-table tbody td {
    padding: 12px 16px;
    border-top: 1px solid var(--np-trait-clair);
    color: var(--np-encre-2);
    vertical-align: middle;
}
.np-table tbody tr:first-child td { border-top: 0; }
.np-table tbody tr:hover td { background: var(--np-vert-clair2); }
.np-a-droite { text-align: right; }
.np-cellule-date { white-space: nowrap; color: var(--np-gris); font-size: 12.5px; }

.np-operation { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.np-operation-icone {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 15px;
}
.np-operation-entree { background: var(--np-ok-bg); color: var(--np-ok); }
.np-operation-sortie { background: var(--np-err-bg); color: var(--np-err); }
.np-operation-autre  { background: var(--np-fond-2); color: var(--np-gris); }
.np-operation-texte { display: flex; flex-direction: column; min-width: 0; }
.np-operation-label { font-weight: 700; color: var(--np-encre); line-height: 1.3; }
.np-operation-meta { font-size: 11.5px; color: var(--np-gris); }

.np-montant { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.np-montant-entree { color: var(--np-ok); }      /* 7,3:1 sur blanc */
.np-montant-sortie { color: var(--np-err); }     /* 5,9:1 sur blanc */
.np-montant-autre  { color: var(--np-encre-2); }
.np-devise { font-size: 11px; font-weight: 700; color: var(--np-gris); margin-left: 3px; }
.np-solde-apres { font-variant-numeric: tabular-nums; color: var(--np-encre-2); font-weight: 700; white-space: nowrap; }
.np-reference { font-size: 11px; color: var(--np-gris); background: var(--np-fond-2); border-radius: 4px; padding: 2px 5px; }

/* ---- 7h. États ----------------------------------------------------------- */
.np-etat {
    display: inline-block;
    border-radius: var(--np-r-pill);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    padding: 3px 9px;
    white-space: nowrap;
}
.np-etat-ok { background: var(--np-ok-bg); color: var(--np-ok); }
.np-etat-attente { background: var(--np-warn-bg); color: var(--np-warn); }
.np-etat-ko { background: var(--np-err-bg); color: var(--np-err); }
.np-etat-neutre { background: var(--np-fond-2); color: #3E5066; }
.np-discret { color: var(--np-gris); }

.np-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 34px 20px;
    color: var(--np-gris);
}
.np-vide i { font-size: 28px; color: var(--np-vert); }
.np-vide strong { color: var(--np-encre); font-size: 14.5px; }
.np-vide span { font-size: 12.5px; max-width: 44ch; }
.np-vide-petit { padding: 22px 16px; }
.np-vide-filtre { text-align: center; color: var(--np-gris); font-size: 13px; padding: 18px; margin: 0; }

.np-pied-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--np-trait-clair);
    font-size: 11.5px;
    color: var(--np-gris);
    margin: 0;
}

/* ---- 7i. Faits du compte & journal --------------------------------------- */
.np-faits { margin: 0; padding: 10px 0 0; }
.np-faits > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-bottom: 1px solid var(--np-trait-clair);
}
.np-faits > div:last-child { border-bottom: 0; }
.np-faits dt { font-size: 12px; font-weight: 600; color: var(--np-gris); margin: 0; flex: 0 0 auto; }
.np-faits dd { font-size: 12.5px; font-weight: 700; color: var(--np-encre); margin: 0; text-align: right; word-break: break-word; }
.np-faits dd code { font-size: 11.5px; color: var(--np-encre-2); }

.np-journal { list-style: none; margin: 0; padding: 0; }
.np-journal-ligne { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--np-trait-clair); }
.np-journal-ligne:last-child { border-bottom: 0; }
.np-journal-icone {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 14px;
}
.np-journal-ok { background: var(--np-ok-bg); color: var(--np-ok); }
.np-journal-ko { background: var(--np-err-bg); color: var(--np-err); }
.np-journal-neutre { background: var(--np-fond-2); color: var(--np-gris); }
.np-journal-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-journal-titre { font-size: 13px; font-weight: 700; color: var(--np-encre); }
.np-journal-par { font-weight: 500; color: var(--np-gris); font-size: 12px; }
.np-journal-meta { font-size: 11.5px; color: var(--np-gris); }
.np-journal-meta code { font-size: 11px; }

.np-details { margin-top: 16px; border-top: 1px solid var(--np-trait-clair); padding-top: 12px; }
.np-details summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    color: var(--np-encre-2);
    list-style: none;
}
.np-details summary::-webkit-details-marker { display: none; }
.np-details summary::before { content: '▸'; color: var(--np-vert-action); font-size: 12px; }
.np-details[open] summary::before { content: '▾'; }

/* ---- 7j. MODE SOMBRE ----------------------------------------------------- */
body.np-dark .np-hero {
    background: linear-gradient(135deg, #032018 0%, #073B2C 62%, #0A4A38 100%);
    border-color: #17553F;
}
body.np-dark .np-carte { background: #111C31; border-color: #23334D; }
body.np-dark .np-carte-tete { border-bottom-color: #23334D; }
body.np-dark .np-carte-titre { color: #F4F6FC; }
body.np-dark .np-carte-sous-titre { color: #9FB0C9; }  /* 7,7:1 sur #111C31 */
body.np-dark .np-note { color: #9FB0C9; }
body.np-dark .np-compteur { background: #16233A; color: #C7D4E4; }
body.np-dark .np-carte-icone-ok { background: #0E3B2F; color: #7FE0C4; }
body.np-dark .np-carte-icone-ko { background: #3A1414; color: #FCA5A5; }
body.np-dark .np-filtres { background: #0E1A2C; border-bottom-color: #23334D; }
body.np-dark .np-champ select,
body.np-dark .np-champ input,
body.np-dark .np-input { background: #0B1424; border-color: #2B3B57; color: #E2E8F0; }
body.np-dark .np-champ-libelle, body.np-dark .np-form-libelle span { color: #9FB0C9; }
body.np-dark .np-form-libelle { color: #C7D4E4; }
body.np-dark .np-form-devise { color: #9FB0C9; }
body.np-dark .np-form-aide { color: #9FB0C9; }
body.np-dark .np-btn-fantome { background: #16233A; border-color: #2B3B57; color: #C7D4E4; }
body.np-dark .np-btn-fantome:hover { background: #1B2C46; border-color: #1CB084; color: #7FE0C4; }
body.np-dark .np-table thead th { background: #16233A; color: #C7D4E4; border-bottom-color: #23334D; }
body.np-dark .np-table tbody td { border-top-color: #1C2A42; color: #D7E1EE; }
body.np-dark .np-table tbody tr:hover td { background: #16233A; }
body.np-dark .np-operation-label { color: #F4F6FC; }
body.np-dark .np-operation-meta, body.np-dark .np-cellule-date { color: #9FB0C9; }
body.np-dark .np-operation-entree { background: #0E3B2F; color: #7FE0C4; }
body.np-dark .np-operation-sortie { background: #3A1414; color: #FCA5A5; }
body.np-dark .np-operation-autre { background: #16233A; color: #9FB0C9; }
body.np-dark .np-montant-entree { color: #7FE0C4; }   /* 10,4:1 sur #111C31 */
body.np-dark .np-montant-sortie { color: #FCA5A5; }   /* 7,3:1 */
body.np-dark .np-montant-autre { color: #E2E8F0; }
body.np-dark .np-devise, body.np-dark .np-solde-apres { color: #C7D4E4; }
body.np-dark .np-reference { background: #16233A; color: #9FB0C9; }
body.np-dark .np-etat-ok { background: #0E3B2F; color: #7FE0C4; }
body.np-dark .np-etat-attente { background: #3A2E12; color: #FDE9C2; }
body.np-dark .np-etat-ko { background: #3A1414; color: #FCA5A5; }
body.np-dark .np-etat-neutre { background: #16233A; color: #C7D4E4; }
body.np-dark .np-discret, body.np-dark .np-faits dt { color: #9FB0C9; }
body.np-dark .np-vide { color: #9FB0C9; }
body.np-dark .np-vide strong { color: #F4F6FC; }
body.np-dark .np-faits dd { color: #F4F6FC; }
body.np-dark .np-faits > div { border-bottom-color: #23334D; }
body.np-dark .np-faits dd code { color: #C7D4E4; }
body.np-dark .np-journal-ligne { border-bottom-color: #23334D; }
body.np-dark .np-journal-titre { color: #F4F6FC; }
body.np-dark .np-journal-par, body.np-dark .np-journal-meta { color: #9FB0C9; }
body.np-dark .np-journal-ok { background: #0E3B2F; color: #7FE0C4; }
body.np-dark .np-journal-ko { background: #3A1414; color: #FCA5A5; }
body.np-dark .np-journal-neutre { background: #16233A; color: #9FB0C9; }
body.np-dark .np-pied-table { border-top-color: #23334D; color: #9FB0C9; }
body.np-dark .np-details { border-top-color: #23334D; }
body.np-dark .np-details summary { color: #E2E8F0; }
body.np-dark .np-details summary::before { color: #7FE0C4; }
body.np-dark .np-pastille-ok { background: #0F6B4F; color: #D8F7EC; }

/* Mode sombre — composants génériques touchés par le bloc de lisibilité */
body.np-dark .table > thead > tr > th { background: #16233A; color: #C7D4E4; border-bottom-color: #23334D; }
body.np-dark .table > tbody > tr > td { color: #D7E1EE; border-top-color: #1C2A42; }
body.np-dark .form-control { background: #0B1424; border-color: #2B3B57; color: #E2E8F0; }
body.np-dark .form-control::placeholder { color: #94A3B8; }
body.np-dark label { color: #C7D4E4; }
body.np-dark .alert-success { background: #0E3B2F; border-color: #17553F; border-left-color: #34D399; color: #A7F3D0; }
body.np-dark .alert-danger { background: #3A1414; border-color: #5B1A1A; border-left-color: #F87171; color: #FCA5A5; }
body.np-dark .alert-warning { background: #3A2E12; border-color: #57431A; border-left-color: #FBBF24; color: #FDE9C2; }
body.np-dark .alert-info { background: #12234A; border-color: #1E3A6B; border-left-color: #93C5FD; color: #BFDBFE; }
body.np-dark .page-titles { border-bottom-color: #23334D; }
body.np-dark .left-sidebar .nav-subtitle-span { color: #93A6BF; }

@media (max-width: 900px) {
    .np-hero { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 18px; }
    .np-hero-montant { font-size: 34px; }
    .np-hero-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .np-hero-chiffres { grid-template-columns: minmax(0, 1fr); }
    .np-hero-chiffre { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .np-hero-chiffre-note { display: none; }
}

/* Référence du mouvement : petite, tronquée, complète au survol (title) —
   la colonne « Référence » séparée poussait le tableau hors du cadre. */
.np-operation-ref {
    font-size: 10.5px;
    color: var(--np-gris);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 36ch;
    letter-spacing: .01em;
}
body.np-dark .np-operation-ref { color: #8FA3BF; }

/* Le tableau de l'historique TIENT DANS LA CARTE (mesuré : il débordait de
   ~60 px à 1366 px, la colonne « Statut » sortait du cadre). Largeurs fixes
   sur les colonnes courtes, la colonne « Opération » absorbe le reste et
   tronque proprement ce qui est trop long (référence complète au survol). */
#np-table-mouvements { table-layout: fixed; width: 100%; }
#np-table-mouvements th:nth-child(1), #np-table-mouvements td:nth-child(1) { width: 96px; }
#np-table-mouvements th:nth-child(3), #np-table-mouvements td:nth-child(3) { width: 108px; }
#np-table-mouvements th:nth-child(4), #np-table-mouvements td:nth-child(4) { width: 116px; }
#np-table-mouvements th:nth-child(5), #np-table-mouvements td:nth-child(5) { width: 92px; }
#np-table-mouvements td { overflow: hidden; }
#np-table-mouvements .np-operation { min-width: 0; }
#np-table-mouvements .np-operation-texte { min-width: 0; }
#np-table-mouvements .np-operation-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#np-table-mouvements .np-operation-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#np-table-mouvements .np-operation-ref { display: block; max-width: 100%; }

/* Colonne « Statut » : la pastille « En attente » était rognée par la largeur.
   On élargit la colonne et on resserre la pastille (le texte reste à 11 px,
   au-dessus du plancher de lisibilité). */
#np-table-mouvements th:nth-child(5), #np-table-mouvements td:nth-child(5) { width: 104px; }
#np-table-mouvements .np-etat { padding: 3px 8px; font-size: 10.5px; }
#np-table-mouvements .np-montant { white-space: nowrap; }

/* Filtres de l'historique : une seule rangée alignée en haut de la carte
   (ils s'empilaient en trois lignes décalées à 1366 px). */
@media (min-width: 700px) {
    .np-filtres {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 140px 168px auto;
        align-items: end;
        gap: 10px;
    }
    .np-champ-recherche { flex: initial; }
    .np-filtres .np-btn { height: 38px; min-height: 38px; }
}

/* Le rouge « plein » d'un bouton destructeur ne suit PAS le jeton de texte :
   en mode sombre `--np-err` devient #FCA5A5 (rouge clair, lisible sur fond
   sombre) et l'utiliser en FOND donnait un bouton rose à texte rose
   (mesuré 1,4:1). On fixe donc le fond du bouton, dans les deux modes. */
.np-btn-danger { background: #B91C1C; border-color: #B91C1C; color: #FFFFFF; }
.np-btn-danger:hover, .np-btn-danger:focus { background: #991B1B; border-color: #991B1B; color: #FFFFFF; }
body.np-dark .np-btn-danger { background: #991B1B; border-color: #B91C1C; color: #FFFFFF; }
body.np-dark .np-btn-danger:hover, body.np-dark .np-btn-danger:focus { background: #7F1D1D; border-color: #991B1B; color: #FFFFFF; }

.np-hero-date { margin-left: 5px; }

/* --------------------------------------------------------------------------
   MOBILE (≤ 760 px) — L'HISTORIQUE DEVIENT UNE LISTE DE LIGNES-BULLES.
   Un tableau à 5 colonnes dans 358 px de large ne peut pas être lisible :
   il débordait (en-têtes superposés, « Statut » hors cadre). Chaque ligne
   garde EXACTEMENT les mêmes données, réorganisées en trois niveaux :
   date + statut / opération / montant + solde après.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .np-carte-large .np-table-enveloppe { overflow: visible; }
    #np-table-mouvements { display: block; width: 100%; table-layout: auto; }
    #np-table-mouvements thead { display: none; }
    #np-table-mouvements tbody { display: block; }
    #np-table-mouvements tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 10px;
        padding: 12px 16px;
        border-top: 1px solid var(--np-trait-clair);
    }
    #np-table-mouvements td,
    #np-table-mouvements th { display: block; width: auto !important; padding: 0; border: 0; overflow: visible; }
    #np-table-mouvements td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 11.5px; color: var(--np-gris); }
    #np-table-mouvements td:nth-child(5) { grid-column: 2; grid-row: 1; justify-self: end; }
    #np-table-mouvements td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    #np-table-mouvements td:nth-child(3) { grid-column: 1; grid-row: 3; text-align: left; }
    #np-table-mouvements td:nth-child(4) { grid-column: 2; grid-row: 3; text-align: right; font-size: 12px; color: var(--np-gris); }
    #np-table-mouvements td:nth-child(4)::before { content: 'Solde '; font-size: 11px; font-weight: 600; color: var(--np-gris); }
    #np-table-mouvements .np-operation { min-width: 0; }
    #np-table-mouvements .np-operation-label,
    #np-table-mouvements .np-operation-meta,
    #np-table-mouvements .np-operation-ref { white-space: normal; overflow: visible; text-overflow: clip; }
    #np-table-mouvements .np-operation-ref { font-size: 10.5px; }
    body.np-dark #np-table-mouvements tr { border-top-color: #1C2A42; }
}

/* ==========================================================================
   #13 — LISIBILITÉ GÉNÉRALE DU PANNEAU : 4e PASSE (18/10/2026)
   ==========================================================================
   DEMANDE DU FONDATEUR (#13) : « le design de admin panel en général c'est un
   bourbier, c'est super moche et on comprend rien ». Le fonctionnel NumiPay
   (solde, historique, crédit/débit) a été corrigé par un autre chantier ; il
   restait la LISIBILITÉ GÉNÉRALE — celle de TOUS les écrans.

   CE QUE LA MESURE A DIT AVANT CETTE PASSE
   ----------------------------------------
   `node /opt/data/scripts/n13c_contraste_mesure.mjs` (Chromium réel, session
   super admin, fonds composités, dégradés au pire arrêt, ::placeholder inclus)
     · 1366 px, panneau entier (45 écrans × 2 thèmes) :
       20 850 textes mesurés, 0 sous AA.
     · sélection de 12 écrans × 2 thèmes × 2 largeurs :
       2 694 textes à 1366 px, 1 370 à 390 px, 0 sous AA.
   APRÈS cette passe, mêmes commandes, mêmes écrans :
       20 974 textes à 1366 px (panneau entier) → 0 sous AA ;
       2 706 textes à 1366 px et 1 386 à 390 px (12 écrans) → 0 sous AA.
   Le contraste n'était donc plus le problème : le travail des passes 1 à 3
   avait déjà ramené chaque couple texte/fond au-dessus de 4,5:1, et cette
   passe ne dégrade rien (les textes supplémentaires mesurés sont les
   intertitres et états vides nouvellement rendus lisibles). Ce qui restait
   illisible était d'une autre nature, et ne se voit pas dans un ratio :

     · lignes de tableau de 46 px (une ligne) ou 69 px (deux lignes) selon
       l'écran → aucune cadence de lecture ;
     · en-têtes à 11 px / graisse 800 / interlettrage .06em → du bruit, pas
       un repère ;
     · TOUS les liens de toutes les cellules soulignés en vert → un tableau
       qui semble « clignoter » ;
     · libellé de section de formulaire en pastille flottante, à cheval sur
       le bord de la carte ;
     · notice d'information écrite en rouge plein (lue comme une erreur) ;
     · état vide de 13,5 px perdu dans 40 px de blanc ;
     · barre de filtres qui sort du cadre à 390 px (« Filtrer par » coupé) ;
     · `select` de la colonne « Langue » qui chevauche la colonne voisine
       sur /settings/countries (largeur en style en ligne : 110 px) ;
     · KPI à hauteur variable, valeur non alignée d'une carte à l'autre.

   CE QUE FAIT CE BLOC
   -------------------
   Uniquement des propriétés de PRÉSENTATION (tailles, graisses, interlignes,
   espacements, surfaces, filets, états). Aucune vue, aucune route, aucun
   contrôleur n'est touché ; la structure HTML reste celle du panneau. Chaque
   couleur de texte introduite ici est ≥ 4,5:1 sur son fond, en clair ET en
   sombre (re-mesuré après application : voir le JSON de la 4e passe).

   SOMMAIRE
     1. Échelle typographique et plancher de lisibilité
     2. Titres : la hiérarchie se voit
     3. Cartes KPI du tableau de bord
     4. Tableaux : cadence, en-têtes, liens, contrôles
     5. Formulaires : sections, libellés, notices
     6. États vides
     7. Navigation latérale
     8. Barre de filtres et bandeau
     9. Mode sombre (parité de chaque point ci-dessus)
    10. Petites largeurs (≤ 767 px)
   ========================================================================== */

/* ---------------------------------------------------------------- 1. ÉCHELLE */
/* Un texte de panneau ne descend pas sous 11 px, et le corps de lecture est
   à 14 px : c'est la taille qui était déjà celle de `body`, mais plusieurs
   composants du thème la rabaissaient à 10,5-11,2 px sans raison. */
.page-wrapper { font-size: 14px; }
.page-wrapper p,
.page-wrapper li,
.page-wrapper td,
.page-wrapper th,
.page-wrapper label { line-height: 1.5; }

/* Plancher : mentions techniques, références, notes de bas de carte. */
.page-wrapper small,
.page-wrapper .small,
.page-wrapper .text-muted,
.page-wrapper .form-text,
.card-body small { font-size: 12px; line-height: 1.5; }

/* La pastille d'état de l'historique NumiPay était à 10,5 px (mesuré) pour
   tenir dans 104 px : à 11 px elle tient toujours et redevient lisible. */
#np-table-mouvements .np-etat { font-size: 11px; }

/* --------------------------------------------------------------- 2. TITRES */
/* Le titre de page domine franchement (27 px, encre pleine, interlettrage
   resserré) ; le titre de carte (16,5 px) et son sous-titre explicatif
   (12,5 px) forment le deuxième niveau ; les h4/h5/h6 du contenu suivent une
   échelle courte au lieu des tailles du thème (24, 20, 16 px…). */
.page-titles h3,
.page-titles .page-title {
    font-size: 26px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--np-encre) !important;
}
.page-titles .breadcrumb { font-size: 12.5px; }
.page-titles .breadcrumb-item + .breadcrumb-item::before { color: #8A98A8; }

.card-header-title h3,
.card-header-title .h4 {
    font-size: 16.5px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -.012em;
}
.card-header-title p {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--np-gris) !important;
    max-width: 78ch;
}

.page-wrapper h4 { font-size: 15px; line-height: 1.35; }
.page-wrapper h5 { font-size: 13.5px; line-height: 1.4; }
.page-wrapper h6 { font-size: 12.5px; line-height: 1.45; }

/* Un titre de carte ne colle jamais au bord : 16 px de respiration, et un
   filet fin qui sépare l'en-tête du contenu quand la carte en a un. */
.page-wrapper .card-header { padding: 16px 22px; }
.page-wrapper .card-header:not(.border-0) { border-bottom: 1px solid var(--np-trait-clair); }
.page-wrapper .card-body { padding: 20px 22px; }
.page-wrapper .card-body > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------- 3. CARTES KPI (/) */
/* Les six KPI du tableau de bord avaient la même hauteur (174 px) mais pas la
   même cadence interne : icône, puis un `mt-3` de 16 px, puis un libellé de
   16 px, puis la valeur, puis un <h6> vide qui laissait un trou. Résultat :
   la valeur ne tombait jamais sur la même ligne d'une carte à l'autre.
   On passe la carte en colonne : icône / libellé / valeur, alignés en haut,
   la valeur en chiffres tabulaires. */
.page-wrapper .card-box-with-icon { height: 100%; display: flex; }
.page-wrapper .card-box-with-icon > .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 18px 20px 20px;
}
.page-wrapper .card-box-with-icon .box-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--np-vert-clair);
    display: grid;
    place-items: center;
    margin: 0 0 14px;
    flex: 0 0 auto;
}
.page-wrapper .card-box-with-icon .box-icon img,
.page-wrapper .card-box-with-icon .box-icon svg { max-width: 20px; max-height: 20px; }

.page-wrapper .card-box-with-content {
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}

/* Libellé : micro-capitales grises (5,45:1 sur blanc), 12 px — il ne dispute
   plus la vedette au chiffre. */
.page-wrapper .card-box-with-icon .card-left-title {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--np-gris) !important;
}
.page-wrapper .card-box-with-icon h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--np-encre) !important;
    font-variant-numeric: tabular-nums;
}
/* Le <h6 id="earning_percent"> est vide la plupart du temps : il réservait
   ~24 px de vide sous chaque chiffre. */
.page-wrapper .card-box-with-icon h6:empty,
.page-wrapper .card-box-with-icon .up-down-list:empty { display: none; }

.page-wrapper .card-box-with-icon:hover {
    border-color: #BFDDD2;
    box-shadow: var(--np-ombre-2);
}

/* ----------------------------------------------------------- 4. TABLEAUX */
/* 4a. En-tête : un repère, pas un bruit. 11,5 px, graisse 700 (au lieu de
   800), interlettrage .035em (au lieu de .06em), encre plus dense. */
.page-wrapper .table > thead > tr > th {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .035em;
    color: #3B4D63;                 /* 7,9:1 sur #EEF2F7 */
    padding: 11px 14px;
    background: var(--np-fond-2);
    border-bottom: 1px solid #D3DCE6;
    vertical-align: middle;
}
/* 4b. Cadence : toute ligne fait au moins 52 px de haut — une ligne simple
   respire comme une ligne à deux lignes, le regard ne saute plus d'un
   rythme à l'autre (mesuré avant : 46 px sur /, 69 px sur /orders). */
.page-wrapper .table > tbody > tr > td {
    padding: 14px;
    height: 52px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--np-encre-2);
    vertical-align: middle;
    border-top: 1px solid var(--np-trait-clair);
}
.page-wrapper .table > tbody > tr:first-child > td { border-top: 0; }
/* Aucune bordure verticale : le tableau se lit en lignes, pas en grille. */
.page-wrapper .table-bordered,
.page-wrapper .table-bordered > thead > tr > th,
.page-wrapper .table-bordered > tbody > tr > td { border-left: 0; border-right: 0; }

/* 4c. Liens de cellule : plus de soulignement permanent. Le lien reste
   identifiable (couleur d'action + graisse 600) et le soulignement arrive au
   survol — c'était le seul moyen de faire taire le « quadrillage vert » qui
   rendait les listes illisibles. */
.page-wrapper .table td a,
.page-wrapper .table th a {
    text-decoration: none;
    font-weight: 600;
}
.page-wrapper .table td a:hover,
.page-wrapper .table td a:focus,
.page-wrapper .table th a:hover,
.page-wrapper .table th a:focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 4d. Contrôles DANS une cellule : ils ne débordent plus sur la colonne
   voisine. `min-width`/`max-width` en `!important` parce que la vue de
   /settings/countries pose `style="min-width:110px"` en ligne : c'est cette
   largeur qui faisait chevaucher les deux selects « Langue » et « Langue de
   repli » l'un sur l'autre et sur la colonne « Vendeurs » (constaté à
   1366 px, dans les deux thèmes : deux selects de 159 px dans une cellule de
   187 px). La cellule devient une rangée : les contrôles se partagent la
   largeur au lieu de se chevaucher. */
.page-wrapper .table td .form-control,
.page-wrapper .table td select,
.page-wrapper .table td input {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}
.page-wrapper .table td:has(> select) {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.page-wrapper .table td:has(> select) > select {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
.page-wrapper .table td .form-control,
.page-wrapper .table td select {
    height: 34px;
    min-height: 34px;
    padding: 4px 8px;
    font-size: 12.5px;
}

/* 4d-bis. Colonne « TOUS » (case à cocher + lien de suppression) : le
   `label.col-3` du thème garde un `max-width:25%` qui l'écrasait à 14 px et
   rognait son propre libellé. On rend à la colonne la largeur nécessaire. */
.page-wrapper .table > thead > tr > th.delete-all { width: 96px !important; }
.page-wrapper .table > thead > tr > th.delete-all label { max-width: none !important; }
.page-wrapper .table > thead > tr > th.delete-all label a { white-space: nowrap; }
.page-wrapper .table td .btn { min-height: 34px; padding: 6px 12px; font-size: 12.5px; }

/* 4e. Chiffres : alignés sur la virgule, quel que soit le montant. */
.page-wrapper .table td, .page-wrapper .table th { font-variant-numeric: tabular-nums; }

/* 4f. Survol de ligne : une seule teinte, franche mais douce. */
.page-wrapper .table > tbody > tr:hover > td { background: #F2FAF7; }

/* 4g. Barre d'outils DataTables : « Afficher X entrées » et la recherche
   partagent la même hauteur de champ, donc la même ligne de base. */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 36px;
    min-height: 36px;
    font-size: 13px;
    border: 1px solid #C9D3DF;
    border-radius: var(--np-r-sm);
    padding: 4px 10px;
    color: var(--np-encre);
    background: #fff;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--np-gris);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* -------------------------------------------------------- 5. FORMULAIRES */
/* 5a. Sections : la pastille flottante « DÉTAILS DE L'ARTICLE » chevauchait
   le bord de la carte et se lisait comme un élément cassé. Elle devient un
   vrai intertitre, pleine largeur, souligné d'un filet — à l'intérieur de la
   carte, qui fournit déjà le cadre. */
.card-body fieldset,
.page-wrapper .card-body fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 26px;
    min-width: 0;
}
.card-body fieldset > legend,
.page-wrapper .card-body fieldset > legend {
    display: block;
    float: none;
    width: 100%;
    background: transparent !important;
    border: 0;
    border-bottom: 1px solid var(--np-trait);
    border-radius: 0;
    color: var(--np-encre) !important;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 0 0 10px;
    margin: 0 0 18px;
    line-height: 1.4;
}
.card-body fieldset:last-of-type { margin-bottom: 0; }

/* 5b. Rythme des champs : 18 px entre deux groupes, 6 px entre le libellé et
   son champ, 44 px de hauteur de champ — le formulaire se lit en colonne. */
.card-body .form-group,
.page-wrapper .form-group { margin-bottom: 18px; }
.card-body label,
.page-wrapper .form-group > label,
.page-wrapper label.control-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--np-encre-2) !important;
    margin-bottom: 6px;
}
.page-wrapper .form-control,
.page-wrapper .np-input { min-height: 44px; font-size: 14px; }
.page-wrapper textarea.form-control {
    min-height: 128px;
    padding: 12px 14px;
    line-height: 1.6;
    resize: vertical;
}
.page-wrapper select.form-control { padding-right: 30px; }
/* Aide sous le champ : 12,5 px, gris AA (5,45:1), jamais collée au champ.
   ATTENTION : `.form-text` porte AUSSI les notices d'avertissement du thème
   (`.form-text.text-danger`) — la couleur n'est donc imposée qu'aux aides
   neutres, sinon on éteint un avertissement voulu (constaté sur
   /item/create : la notice de commission passait du rouge au gris). */
.page-wrapper .form-group small,
.page-wrapper .form-text,
.page-wrapper .help-block {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
}
.page-wrapper .form-text:not(.text-danger):not(.text-success):not(.text-warning):not(.text-info),
.page-wrapper .help-block:not(.text-danger) { color: var(--np-gris) !important; }

/* 5c. Notice d'information écrite en rouge : le thème la peint avec
   `.text-danger`, donc elle crie comme une erreur alors qu'elle EXPLIQUE une
   règle de commission. On garde le rouge (le sens « attention » est voulu)
   mais en encadré calme, avec un interligne de lecture. */
.card-body > p.text-danger,
.card-body form p.text-danger,
.page-wrapper .card-body p.text-danger:not(.invalid-feedback),
.page-wrapper .form-text.text-danger,
.page-wrapper .card-body .text-danger.form-text {
    background: var(--np-err-bg);
    border-left: 3px solid #B91C1C;
    border-radius: 0 var(--np-r-sm) var(--np-r-sm) 0;
    padding: 12px 14px;
    margin: 0 0 20px;
    font-size: 12.8px;
    line-height: 1.65;
    font-weight: 600;
    color: #991B1B !important;      /* 6,4:1 sur #FEF2F2 */
    max-width: 88ch;
}
/* Le thème pose DEUX fois cette notice : la seconde est un div vide qui,
   une fois habillé, devenait une barre rose sans texte. On la retire. */
.page-wrapper .form-text.text-danger:empty,
.page-wrapper .card-body .text-danger.form-text:empty,
.card-body .text-danger.form-text:empty { display: none !important; }

/* ------------------------------------------------------------ 6. ÉTATS VIDES */
/* « Aucun enregistrement trouvé » était une ligne de 13,5 px au milieu d'un
   grand blanc : on croit que la page n'a pas chargé. Il devient un vrai
   état : 56 px de respiration, un pictogramme neutre, 14 px de texte. */
.dataTables_empty,
.table tbody tr td.dataTables_empty,
.page-wrapper .dataTables_empty {
    padding: 56px 20px !important;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--np-gris) !important;
    background: #fff;
}
.dataTables_empty::before,
.table tbody tr td.dataTables_empty::before {
    content: "∅";
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--np-fond-2);
    color: #6E8095;                 /* 3,9:1 sur #EEF2F7 (contenu non textuel) */
    font-size: 20px;
    line-height: 46px;
    font-weight: 400;
    text-align: center;
}
.np-vide { padding: 44px 20px; font-size: 14px; line-height: 1.6; color: var(--np-gris); }
.np-vide strong { font-size: 16px; }

/* --------------------------------------------------- 7. NAVIGATION LATÉRALE */
/* Les mondes du menu (Accès, Commerce, Documents…) étaient séparés par 15 px
   de vide et un titre de 10,5 px : rien ne marquait la frontière. Chaque
   groupe commence maintenant par un filet + un titre en 11 px, et l'entrée
   active porte une barre verte à gauche, comme en mode sombre. */
.left-sidebar .sidebar-nav > ul > li.np-rubrique-lien {
    margin: 20px 0 6px !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid var(--np-trait-clair);
}
.left-sidebar .sidebar-nav > ul > li.np-rubrique-lien:first-child {
    margin-top: 4px !important;
    padding-top: 0 !important;
    border-top: 0;
}
.left-sidebar .nav-subtitle,
.left-sidebar .nav-subtitle-span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--np-gris) !important;   /* 5,45:1 sur #fff */
}
.left-sidebar .sidebar-nav ul li a {
    min-height: 40px;
    padding: 9px 18px 9px 20px;
    border-radius: 0 var(--np-r-sm) var(--np-r-sm) 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--np-encre-2);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.35;
}
.left-sidebar .sidebar-nav ul li a i,
.left-sidebar .sidebar-nav ul li a .mdi {
    font-size: 17px;
    width: 20px;
    text-align: center;
    color: var(--np-gris);
    flex: 0 0 auto;
}
.left-sidebar .sidebar-nav ul li a:hover {
    background: var(--np-fond);
    color: var(--np-encre);
}
.left-sidebar .sidebar-nav ul li a:hover i { color: var(--np-vert-action); }
.left-sidebar .sidebar-nav ul li a.active,
.left-sidebar .sidebar-nav > ul > li.active > a {
    background: var(--np-vert-clair) !important;
    color: var(--np-vert-fonce) !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--np-vert-action);
}
.left-sidebar .sidebar-nav ul li a.active i { color: var(--np-vert-action) !important; }

/* ----------------------------------------- 8. FILTRES DE PAGE ET BANDEAU */
/* La barre « Filtrer par : » flottait au-dessus des cartes, et à 390 px son
   libellé sortait du cadre (mesuré : « Filtrer par » coupé à gauche). Elle
   devient une bande de filtre encadrée, qui passe à la ligne puis en colonne. */
.sis-card-head-select-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;   /* le thème la collait à droite */
    gap: 10px;
    background: var(--np-surface);
    border: 1px solid var(--np-trait);
    border-radius: var(--np-r-md);
    padding: 12px 14px;
    margin-bottom: 18px;
}
.sis-card-head-select-box .head-select-box {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.sis-card-head-select-box label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--np-encre-2);
    white-space: nowrap;
}
.sis-card-head-select-box .form-control {
    min-width: 190px;
    height: 38px;
    min-height: 38px;
    font-size: 13px;
    padding: 4px 10px;
}
.sis-card-head-select-box .btn { min-height: 38px; }

/* Bandeau : le dernier item (« Tous les pays ») touchait le bord droit de la
   fenêtre à 1366 px — il était rogné par `overflow:hidden`. */
@media (min-width: 768px) {
    .topbar .top-navbar { padding-right: 14px; }
}

/* ------------------------------------------------------------ 9. MODE SOMBRE */
/* Parité stricte : chaque surface, filet et couleur de texte ci-dessus a son
   équivalent sombre. Les valeurs sont celles des jetons déjà mesurés
   (#F4F6FC, #C7D4E4, #9FB0C9 sur #111C31 / #16233A / #0F172A). */
body.np-dark .page-titles h3,
body.np-dark .page-titles .page-title { color: #F4F6FC !important; }
body.np-dark .breadcrumb-item + .breadcrumb-item::before { color: #6F8199; }

body.np-dark .card-header-title h3,
body.np-dark .card-header-title .h4 { color: #F4F6FC !important; }
body.np-dark .card-header-title p { color: #9FB0C9 !important; }
body.np-dark .page-wrapper .card-header:not(.border-0) { border-bottom-color: #1C2A42; }
body.np-dark .page-wrapper h4,
body.np-dark .page-wrapper h5,
body.np-dark .page-wrapper h6 { color: #F4F6FC; }
body.np-dark .page-wrapper small,
body.np-dark .page-wrapper .text-muted,
body.np-dark .page-wrapper .form-text { color: #9FB0C9 !important; }

/* KPI */
body.np-dark .page-wrapper .card-box-with-icon .box-icon { background: #0E3B2F; }
body.np-dark .page-wrapper .card-box-with-icon .card-left-title { color: #9FB0C9 !important; }
body.np-dark .page-wrapper .card-box-with-icon h2 { color: #F4F6FC !important; }
body.np-dark .page-wrapper .card-box-with-icon:hover { border-color: #2E7A63; }

/* Tableaux */
body.np-dark .page-wrapper .table > thead > tr > th {
    background: #16233A;
    color: #C7D4E4;                 /* 9,3:1 sur #16233A */
    border-bottom-color: #23334D;
}
body.np-dark .page-wrapper .table > tbody > tr > td {
    color: #DCE4EF;
    border-top-color: #1C2A42;
}
body.np-dark .page-wrapper .table > tbody > tr:hover > td { background: #16233A; }
body.np-dark .page-wrapper .table td .form-control,
body.np-dark .page-wrapper .table td select {
    background: #16233A;
    border-color: #23334D;
    color: #E6ECF5;
}
body.np-dark .dataTables_wrapper .dataTables_length select,
body.np-dark .dataTables_wrapper .dataTables_filter input {
    background: #16233A;
    border-color: #23334D;
    color: #E6ECF5;
}
body.np-dark .dataTables_wrapper .dataTables_length label,
body.np-dark .dataTables_wrapper .dataTables_filter label { color: #9FB0C9; }
body.np-dark .dataTables_wrapper .dataTables_filter input::placeholder { color: #8FA0B5; }

/* Formulaires */
body.np-dark .card-body fieldset > legend,
body.np-dark .page-wrapper .card-body fieldset > legend {
    color: #F4F6FC !important;
    border-bottom-color: #23334D;
}
body.np-dark .card-body label,
body.np-dark .page-wrapper .form-group > label,
body.np-dark .page-wrapper label.control-label { color: #DCE4EF !important; }
body.np-dark .page-wrapper .form-control,
body.np-dark .page-wrapper .np-input {
    background: #16233A;
    border-color: #23334D;
    color: #E6ECF5;
}
body.np-dark .page-wrapper .form-control::placeholder { color: #8FA0B5; }
body.np-dark .card-body > p.text-danger,
body.np-dark .card-body form p.text-danger,
body.np-dark .page-wrapper .card-body p.text-danger:not(.invalid-feedback),
body.np-dark .page-wrapper .form-text.text-danger,
body.np-dark .page-wrapper .card-body .text-danger.form-text {
    background: #2A1518;
    border-left-color: #F87171;
    color: #FCA5A5 !important;      /* 7,3:1 sur #2A1518 */
}

/* États vides */
body.np-dark .dataTables_empty,
body.np-dark .table tbody tr td.dataTables_empty,
body.np-dark .page-wrapper .dataTables_empty {
    background: #0E1729 !important;
    color: #9FB0C9 !important;
}
body.np-dark .dataTables_empty::before,
body.np-dark .table tbody tr td.dataTables_empty::before {
    background: #16233A;
    color: #7E8FA6;
}
body.np-dark .np-vide { color: #9FB0C9; }

/* Menu */
body.np-dark .left-sidebar .sidebar-nav > ul > li.np-rubrique-lien { border-top-color: #1C2A42; }
body.np-dark .left-sidebar .nav-subtitle,
body.np-dark .left-sidebar .nav-subtitle-span { color: #9FB0C9 !important; }
body.np-dark .left-sidebar .sidebar-nav ul li a { color: #C7D4E4; }
body.np-dark .left-sidebar .sidebar-nav ul li a i { color: #8FA0B5; }
body.np-dark .left-sidebar .sidebar-nav ul li a:hover { background: #16233A; color: #F4F6FC; }
body.np-dark .left-sidebar .sidebar-nav ul li a.active,
body.np-dark .left-sidebar .sidebar-nav > ul > li.active > a {
    background: #0E3B2F !important;
    color: #7FE0C4 !important;
    box-shadow: inset 3px 0 0 #1CB084;
}
body.np-dark .left-sidebar .sidebar-nav ul li a.active i { color: #7FE0C4 !important; }

/* Bande de filtres */
body.np-dark .sis-card-head-select-box {
    background: #111C31;
    border-color: #23334D;
}
body.np-dark .sis-card-head-select-box label { color: #DCE4EF; }
body.np-dark .sis-card-head-select-box .form-control {
    background: #16233A;
    border-color: #23334D;
    color: #E6ECF5;
}

/* ------------------------------------------------- 10. PETITES LARGEURS */
@media (max-width: 767px) {
    .page-titles h3,
    .page-titles .page-title { font-size: 21px; }
    .page-wrapper .card-header { padding: 14px 16px; }
    .page-wrapper .card-body { padding: 16px; }
    .card-header-title h3,
    .card-header-title .h4 { font-size: 15.5px; }

    /* Le tableau respire à 390 px comme à 1366 : même plancher de ligne. */
    .page-wrapper .table > thead > tr > th { font-size: 11px; padding: 10px 12px; }
    .page-wrapper .table > tbody > tr > td { padding: 12px; height: 48px; font-size: 13px; }

    .page-wrapper .card-box-with-icon .card-body { padding: 16px; }
    .page-wrapper .card-box-with-icon h2 { font-size: 25px; }

    /* Filtres : en colonne, chaque champ pleine largeur — plus rien ne sort
       du cadre (le libellé « Filtrer par » était coupé à gauche). */
    .sis-card-head-select-box {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
    }
    .sis-card-head-select-box .head-select-box {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .sis-card-head-select-box label { white-space: normal; }
    .sis-card-head-select-box .form-control { width: 100% !important; min-width: 0; }
    .sis-card-head-select-box .btn { width: 100%; }

    .card-body > p.text-danger,
    .page-wrapper .card-body p.text-danger:not(.invalid-feedback) { font-size: 13px; padding: 12px; }

    .dataTables_empty,
    .table tbody tr td.dataTables_empty { padding: 40px 14px !important; }
}