/* =============================================================================
   iFutur — Administration · STYLES DE COMPOSANTS
   Toutes les classes .ng-* de l'app vivent ici. Importe les tokens.
   ============================================================================= */

/* Tokens: the values of delta-nation/colors_and_type.css, the single source of truth. Change them there first. */
:root {
   /* The interface only has a light design: native controls (checkboxes, radios, scrollbars) must not turn dark with the OS */
   color-scheme: light;
   --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
   /* No monospace font in the design system: references and codes stay in Open Sans */
   --font-mono: var(--font-sans);

   --ng-green-50:  #E8F3E8;
   --ng-green-100: #CDE6CE;
   --ng-green-200: #9DCD9F;
   --ng-green-300: #5FAF62;
   --ng-green-400: #2E9233;
   --ng-green-500: #127914;
   --ng-green-600: #0E6510;
   --ng-green-700: #0A4F0C;
   --ng-green-800: #073908;

   --ng-orange-50:  #FFF4E5;
   --ng-orange-100: #FFE4C2;
   --ng-orange-200: #FFCD8F;
   --ng-orange-300: #FFB152;
   --ng-orange-400: #FF9D27;
   --ng-orange-500: #FF8C00;
   --ng-orange-600: #E07700;
   --ng-orange-700: #B35E00;
   --ng-orange-800: #8A4700;

   --n-0:   #FFFFFF;
   --n-25:  #F7F8F8;
   --n-50:  #F1F3F2;
   --n-100: #E7EAE8;
   --n-200: #D8DCD9;
   --n-300: #C0C6C2;
   --n-400: #949B97;
   --n-500: #6B726E;
   --n-600: #4D534F;
   --n-700: #343935;
   --n-800: #20231F;
   --n-900: #121613;

   --ink:   #121613;
   --ink-2: #20231F;

   --ng-teal-500: #2D8C86;  --ng-teal-50: #E4F1EF;
   --ng-blue-500: #2C6DB5;  --ng-blue-50: #E5EFF9;
   --ng-gold-500: #BE8A1F;  --ng-gold-50: #FAF1D8;

   --ok:        var(--ng-green-600);
   --ok-bg:     var(--ng-green-50);
   --ok-border: var(--ng-green-200);

   --pending:        var(--ng-orange-600);
   --pending-bg:     var(--ng-orange-50);
   --pending-border: var(--ng-orange-200);

   --danger:        #B23A24;
   --danger-bg:     #F8E7E1;
   --danger-border: #E8BCAD;
   --info-border:   #bfd3ef;

   --fg-1: var(--n-900);
   --fg-2: var(--n-700);
   --fg-3: var(--n-500);
   --fg-4: var(--n-400);
   --fg-on-orange: var(--ink);
   --fg-on-green:  #FFFFFF;
   --fg-on-dark:   #EEF1EF;

   --bg-page:    #FAFBFA;
   --bg-surface: var(--n-0);
   --bg-sunken:  var(--n-50);
   --bg-inverse: var(--ink);

   --border-subtle:  var(--n-100);
   --border-default: var(--n-200);
   --border-strong:  var(--n-300);

   --radius-xs: 3px;
   --radius-sm: 6px;
   --radius-md: 9px;
   --radius-lg: 13px;
   --radius-xl: 18px;
   --radius-pill: 999px;

   --shadow-xs: 0 1px 1px rgba(18, 22, 19, 0.04);
   --shadow-sm: 0 1px 2px rgba(18, 22, 19, 0.06), 0 1px 1px rgba(18, 22, 19, 0.04);
   --shadow-md: 0 4px 12px rgba(18, 22, 19, 0.06), 0 1px 2px rgba(18, 22, 19, 0.04);
   --shadow-lg: 0 12px 28px rgba(18, 22, 19, 0.10), 0 2px 4px rgba(18, 22, 19, 0.04);
   --shadow-inset: inset 0 1px 2px rgba(18, 22, 19, 0.06);
   --shadow-focus: 0 0 0 3px rgba(18, 121, 20, 0.26);

   --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
   --dur-fast: 120ms;
   --dur-base: 200ms;
}

/* =============================================================================
   App shell
   ============================================================================= */
.ng-app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: var(--bg-page); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'pnum' 1, 'lnum' 1; }

.ng-side { background: var(--n-0); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; padding: 0; position: sticky; top: 0; height: 100vh; }
.ng-brand { display: flex; align-items: center; gap: 11px; height: 60px; padding: 0 18px; box-sizing: border-box; border-bottom: 1px solid var(--border-subtle); }
.ng-brand-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ng-brand-app { font-weight: 800; font-size: 16px; color: var(--fg-1); letter-spacing: -0.01em; }
.ng-brand-gov { font-size: 10.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; white-space: nowrap; }

.ng-nav { padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.ng-nav-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-4); padding: 14px 10px 6px; font-weight: 700; }
.ng-nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; color: var(--fg-2); font-size: 13.5px; cursor: pointer; font-weight: 500; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.ng-nav-item:hover { background: var(--n-50); color: var(--fg-1); }
.ng-nav-item.active { background: var(--ng-green-500); color: #fff; font-weight: 700; border-radius: 10px; box-shadow: var(--shadow-sm); }
.ng-nav-item.active:hover { background: var(--ng-green-600); }
.ng-nav-item.active .lucide { color: #fff; }
.ng-nav-item .lucide { width: 17px; height: 17px; color: var(--fg-4); flex-shrink: 0; }
.ng-nav-item .count { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--fg-4); font-variant-numeric: tabular-nums; }
.ng-nav-item.active .count { color: rgba(255, 255, 255, 0.85); }
.ng-nav-item .chev-x { margin-left: auto; width: 15px; height: 15px; color: var(--fg-4); transition: transform var(--dur-fast) var(--ease-out); }
.ng-nav-item.open .chev-x { transform: rotate(180deg); }
.ng-nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; }
.ng-nav-item.child { padding-left: 36px; font-size: 13px; }
.ng-nav-item.child .lucide { width: 15px; height: 15px; }

.ng-side-foot { position: relative; padding: 12px 14px; border-top: 1px solid var(--border-subtle); }
.ng-user-btn { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 8px; border-radius: 9px; cursor: pointer; font-family: inherit; text-align: left; }
.ng-user-btn:hover { background: var(--n-50); }
.ng-user-name { font-size: 13.5px; font-weight: 700; color: var(--fg-1); line-height: 1.3; }
.ng-user-role { font-size: 12px; color: var(--fg-3); line-height: 1.3; }
.ng-user-btn .chev { margin-left: auto; color: var(--fg-4); width: 16px; height: 16px; flex-shrink: 0; }
.ng-user-menu { position: absolute; left: 14px; right: 14px; bottom: calc(100% - 4px); background: #fff; border: 1px solid var(--border-default); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; }
.ng-user-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--fg-1); border-radius: 8px; cursor: pointer; text-align: left; }
.ng-user-item:hover { background: var(--n-50); }
.ng-user-item .lucide { width: 16px; height: 16px; color: var(--fg-3); flex-shrink: 0; }
.ng-user-item.danger { color: var(--danger); }
.ng-user-item.danger .lucide { color: var(--danger); }
.ng-user-menu hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 5px 4px; }

.ng-main { display: flex; flex-direction: column; min-width: 0; }
.ng-top { height: 60px; border-bottom: 1px solid rgba(216, 220, 217, 0.6); background: rgba(255, 255, 255, 0.66); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); display: flex; align-items: center; gap: 14px; padding: 0 18px; position: sticky; top: 0; z-index: 20; }
.ng-proj { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--border-default); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; color: var(--fg-1); cursor: pointer; }
.ng-proj .lucide { width: 15px; height: 15px; color: var(--fg-4); }
.ng-search { flex: 1; max-width: 380px; position: relative; }
.ng-search input { width: 100%; box-sizing: border-box; padding: 8px 12px 8px 34px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--n-25); font-size: 13px; font-family: inherit; box-shadow: var(--shadow-inset); }
.ng-search input:focus { outline: none; border-color: var(--ng-green-500); box-shadow: var(--shadow-focus), var(--shadow-inset); }
.ng-search .lucide { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--fg-4); }
.ng-top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ng-iconbtn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-2); cursor: pointer; position: relative; }
.ng-iconbtn:hover { background: var(--n-50); }
.ng-iconbtn .lucide { width: 18px; height: 18px; }
.ng-iconbtn .ping { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--ng-orange-500); border: 1.5px solid #fff; }

.ng-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; background: var(--ng-green-100); color: var(--ng-green-700); border: 1px solid var(--ng-green-200); }
.ng-avatar.orange { background: var(--ng-orange-100); color: var(--ng-orange-700); border-color: var(--ng-orange-200); }
.ng-avatar.neutral { background: var(--n-100); color: var(--n-600); border-color: var(--n-200); }
.ng-avatar.sm { width: 28px; height: 28px; font-size: 10.5px; }

.ng-page { padding: 28px 22px 48px; width: 100%; box-sizing: border-box; margin: 0 auto; }
.ng-page-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.ng-page-head > div:first-child { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; flex: 1 1 320px; min-width: 0; }
.ng-page-head > div:last-child { flex-shrink: 0; }
.ng-page-head > form:only-child { margin-left: auto; }
.ng-page-title { font-size: 27px; font-weight: 800; color: var(--fg-1); letter-spacing: -0.02em; }
.ng-page-sub { font-size: 14px; color: var(--fg-3); margin-top: 0; }

/* Empty state (pages à construire) */
.ng-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 440px; text-align: center; color: var(--fg-3); }
.ng-empty .ic { width: 56px; height: 56px; border-radius: 14px; background: var(--n-50); border: 1px solid var(--border-subtle); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-4); }
.ng-empty .ic .lucide { width: 26px; height: 26px; }
.ng-empty h3 { font-size: 18px; font-weight: 700; color: var(--fg-1); }
.ng-empty p { font-size: 13.5px; max-width: 360px; margin: 0; }

/* =============================================================================
   Buttons
   ============================================================================= */
.ng-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; line-height: 1; padding: 10px 15px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); white-space: nowrap; }
.ng-btn .lucide { width: 15px; height: 15px; }
.ng-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ng-btn-primary { background: var(--ng-green-500); color: var(--fg-on-green); border-color: var(--ng-green-600); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), var(--shadow-xs); }
.ng-btn-primary:hover { background: var(--ng-green-600); }
.ng-btn-primary:active { background: var(--ng-green-700); transform: translateY(1px); }
.ng-btn-green { background: var(--ng-green-500); color: var(--fg-on-green); border-color: var(--ng-green-600); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), var(--shadow-xs); }
.ng-btn-green:hover { background: var(--ng-green-600); }
.ng-btn-green:active { background: var(--ng-green-700); transform: translateY(1px); }
.ng-btn-accent { background: var(--ng-orange-500); color: var(--ink); border-color: var(--ng-orange-600); box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), var(--shadow-xs); }
.ng-btn-accent:hover { background: var(--ng-orange-600); }
.ng-btn-accent:active { background: var(--ng-orange-700); color: #fff; transform: translateY(1px); }
.ng-btn-secondary { background: #fff; color: var(--fg-1); border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.ng-btn-secondary:hover { background: var(--n-25); border-color: var(--border-strong); }
.ng-btn-ghost { background: transparent; color: var(--fg-2); }
.ng-btn-ghost:hover { background: var(--n-50); }
.ng-btn-danger { background: #fff; color: var(--danger); border-color: var(--danger-border); }
.ng-btn-danger:hover { background: var(--danger-bg); }
/* Soft buttons: the tint says what the action does (put back, look at, set aside) */
.ng-btn-soft-green { background: var(--ng-green-50); color: var(--ng-green-700); border-color: var(--ng-green-200); }
.ng-btn-soft-green:hover { background: var(--ng-green-100, var(--ng-green-200)); }
.ng-btn-soft-orange { background: var(--ng-orange-50); color: var(--ng-orange-700); border-color: var(--ng-orange-200); }
.ng-btn-soft-orange:hover { background: var(--ng-orange-100, var(--ng-orange-200)); }
.ng-btn-soft-red { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.ng-btn-soft-red:hover { background: var(--danger-border); }
.ng-btn-sm { padding: 7px 11px; font-size: 12.5px; border-radius: 8px; }

/* =============================================================================
   Badges / statuts
   ============================================================================= */
.ng-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid; line-height: 1.45; white-space: nowrap; }
.ng-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.ng-badge.ok      { background: var(--ng-green-50);  color: var(--ng-green-700);  border-color: var(--ng-green-200); }
.ng-badge.ok .dot { background: var(--ng-green-500); }
.ng-badge.pending      { background: var(--ng-orange-50);  color: var(--ng-orange-700);  border-color: var(--ng-orange-200); }
.ng-badge.pending .dot { background: var(--ng-orange-500); }
.ng-badge.danger      { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.ng-badge.danger .dot { background: var(--danger); }
.ng-badge.neutral      { background: var(--n-50); color: var(--n-600); border-color: var(--n-200); }
.ng-badge.neutral .dot { background: var(--n-400); }
.ng-badge.treasury      { background: var(--ng-gold-50); color: var(--ng-orange-800); border-color: var(--ng-orange-200); }
.ng-badge.treasury .dot { background: var(--ng-gold-500); }
.ng-badge.info      { background: #fff; color: var(--fg-2); border-color: var(--border-default); }

/* =============================================================================
   Cards & surfaces
   ============================================================================= */
.ng-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 13px; box-shadow: var(--shadow-xs); }
.ng-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); }
.ng-card-title { font-size: 15.5px; font-weight: 700; color: var(--fg-1); }
.ng-card-sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.ng-link { color: var(--ng-green-600); font-size: 13px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; background: none; border: 0; font-family: inherit; padding: 0; }
.ng-link:hover { color: var(--ng-green-700); }
.ng-link .lucide { width: 14px; height: 14px; }

/* Héro — carte verte pleine (aplat, sans dégradé) */
.ng-hero-card { background: var(--ng-green-600); border-radius: var(--radius-xl); padding: 28px 34px 30px; color: #fff; margin-bottom: 16px; }
.ng-hero-card .eyebrow { color: rgba(255,255,255,0.72); }
.ng-hero-val { font-size: 56px; font-weight: 800; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 14px; }
.ng-hero-val .cur { color: #fff; font-weight: 800; }
.ng-hero-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; background: rgba(255,255,255,0.16); color: #fff; font-weight: 700; font-size: 13.5px; padding: 8px 14px; border-radius: var(--radius-pill); }
.ng-hero-badge .lucide { width: 16px; height: 16px; }

/* Tuiles KPI — couleurs pleines + pastille d'icône translucide (tableau de bord) */
.ng-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ng-kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
/* Tuile cliquable : toutes les tuiles d'une rangée ont la hauteur de la plus haute */
.ng-kpi-link { display: flex; text-decoration: none; color: inherit; }
.ng-kpi-link > .ng-stat-tile { flex: 1; min-width: 0; }
.ng-stat-tile { border-radius: var(--radius-lg); padding: 18px; color: #fff; box-shadow: var(--shadow-xs); }
.ng-stat-tile.green  { background: var(--ng-green-500); }
.ng-stat-tile.orange { background: var(--ng-orange-500); }
.ng-stat-tile.teal   { background: var(--ng-teal-500); }
.ng-stat-tile.gold   { background: var(--ng-gold-500); }
.ng-stat-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ng-stat-tile-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.92); line-height: 1.35; }
.ng-stat-tile-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.18); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ng-stat-tile-ic .lucide { width: 16px; height: 16px; }
.ng-stat-tile-val { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 14px; line-height: 1; }
.ng-stat-tile-sub { font-size: 12.5px; color: rgba(255,255,255,0.82); font-weight: 600; margin-top: 8px; }
.ng-stat-tile-split { list-style: none; margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,0.28); display: grid; gap: 4px; }
.ng-stat-tile-split li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,0.9); font-weight: 600; }
.ng-stat-tile-split strong { font-size: 15px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
/* Détail en petits caractères, à droite du chiffre */
.ng-stat-tile-valrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; }
.ng-stat-tile-valrow .ng-stat-tile-val { margin-top: 0; }
.ng-stat-tile-inline { list-style: none; margin: 0; padding: 0; text-align: right; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,0.88); font-weight: 600; }
.ng-stat-tile-inline strong { margin-left: 6px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

/* KPI cards — fond neutre + pastille de couleur devant le libellé (Statistiques, galerie) */
.ng-kpi { background: #fff; border: 1px solid var(--border-subtle); border-radius: 13px; padding: 16px; position: relative; box-shadow: var(--shadow-xs); }
.ng-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Le libellé porte une pastille colorée (le ton) ; neutre par défaut */
.ng-kpi-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-3); font-weight: 600; }
.ng-kpi-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--n-300); flex-shrink: 0; }
.ng-kpi.green  .ng-kpi-label::before { background: var(--ng-green-500); }
.ng-kpi.orange .ng-kpi-label::before { background: var(--ng-orange-500); }
.ng-kpi.danger .ng-kpi-label::before { background: var(--danger); }
.ng-kpi-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--n-50); color: var(--fg-4); flex-shrink: 0; }
.ng-kpi-ic .lucide { width: 16px; height: 16px; }
.ng-kpi-val { font-size: 26px; font-weight: 800; color: var(--fg-1); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 12px; line-height: 1; }
.ng-kpi-meta { font-size: 12px; color: var(--fg-3); margin-top: 7px; font-variant-numeric: tabular-nums; }
.ng-kpi-meta strong { font-weight: 700; color: var(--fg-2); }

/* Mini compteurs — pastille d'icône colorée à gauche */
.ng-counters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.ng-counter { background: #fff; border: 1px solid var(--border-subtle); border-radius: 13px; padding: 14px 16px; display: flex; align-items: center; gap: 13px; box-shadow: var(--shadow-xs); }
.ng-counter .c-label { font-size: 12.5px; color: var(--fg-3); font-weight: 600; }
.ng-counter .c-val { font-size: 24px; font-weight: 800; color: var(--fg-1); font-variant-numeric: tabular-nums; line-height: 1; margin-top: 4px; }
.ng-counter .c-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--n-50); color: var(--fg-4); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ng-counter .c-ic.green  { background: var(--ng-green-50);  color: var(--ng-green-600); }
.ng-counter .c-ic.orange { background: var(--ng-orange-50); color: var(--ng-orange-600); }
.ng-counter .c-ic.teal   { background: var(--ng-teal-50);   color: var(--ng-teal-500); }
.ng-counter .c-ic.blue   { background: var(--ng-blue-50);   color: var(--ng-blue-500); }
.ng-counter .c-ic.gold   { background: var(--ng-gold-50);   color: var(--ng-gold-500); }
.ng-counter .c-ic .lucide { width: 19px; height: 19px; }

/* =============================================================================
   Tables
   ============================================================================= */
.ng-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.ng-tbl thead th { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; text-align: left; padding: 11px 18px; background: var(--n-25); border-bottom: 1px solid var(--border-subtle); }
.ng-tbl thead th.num { text-align: right; }
.ng-tbl tbody td { padding: 12px 18px; border-bottom: 1px solid var(--border-subtle); color: var(--fg-1); }
.ng-tbl tbody tr:last-child td { border-bottom: 0; }
.ng-tbl tbody tr:hover td { background: var(--n-25); }
.ng-tbl tbody tr.clickable { cursor: pointer; }
.ng-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.ng-tbl td .sub { color: var(--fg-3); font-size: 12px; }
.ng-tbl td.date { color: var(--fg-3); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ng-tbl .ref { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-3); }
.ng-row-name { display: flex; align-items: center; gap: 11px; }
.ng-row-name-label { font-size: 14px; font-weight: 600; color: var(--fg-1); }

/* Alert list (stock faible) — en-tête orangé doux, sans filet latéral */
.ng-alert-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 13px; box-shadow: var(--shadow-xs); overflow: hidden; }
.ng-alert-card .ng-card-head { background: var(--ng-orange-50); }
.ng-alert-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-bottom: 1px solid var(--border-subtle); }
.ng-alert-row:last-child { border-bottom: 0; }
.ng-alert-row:hover { background: var(--ng-orange-50); }
.ng-alert-name { font-weight: 700; color: var(--fg-1); font-size: 13.5px; }
.ng-alert-loc { font-size: 12.5px; color: var(--fg-3); margin-top: 1px; }
.ng-alert-qty { text-align: right; }
.ng-alert-qty .q { font-weight: 800; color: var(--danger); font-variant-numeric: tabular-nums; font-size: 14px; }
.ng-alert-qty .s { font-size: 11.5px; color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* =============================================================================
   Stepper (workflow horizontal)
   ============================================================================= */
.ng-stepper { display: flex; align-items: flex-start; gap: 0; }
.ng-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; }
.ng-step .bar { position: absolute; top: 17px; height: 2px; background: var(--n-200); left: -50%; right: 50%; z-index: 0; }
.ng-step:first-child .bar { display: none; }
.ng-step.done .bar, .ng-step.current .bar { background: var(--ng-green-500); }
.ng-step .node { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--n-200); display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; color: var(--fg-4); font-weight: 800; font-size: 13px; }
.ng-step .node .lucide { width: 17px; height: 17px; }
.ng-step.done .node { background: var(--ng-green-500); border-color: var(--ng-green-600); color: #fff; }
.ng-step.current .node { background: #fff; border-color: var(--ng-orange-500); color: var(--ng-orange-600); box-shadow: 0 0 0 4px var(--ng-orange-50); }
.ng-step .s-label { font-size: 12.5px; font-weight: 700; color: var(--fg-1); margin-top: 10px; }
.ng-step.todo .s-label { color: var(--fg-4); }
.ng-step .s-meta { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }

/* Timeline verticale (multi-acteurs) */
.ng-tl { display: flex; flex-direction: column; }
.ng-tl-item { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.ng-tl-item:last-child { padding-bottom: 0; }
.ng-tl-line { position: absolute; left: 16px; top: 34px; bottom: -2px; width: 2px; background: var(--border-default); }
.ng-tl-item:last-child .ng-tl-line { display: none; }
.ng-tl-ic { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; z-index: 1; border: 2px solid; }
.ng-tl-ic .lucide { width: 15px; height: 15px; }
.ng-tl-ic.ok { background: var(--ng-green-50); border-color: var(--ng-green-200); color: var(--ng-green-600); }
.ng-tl-ic.pending { background: var(--ng-orange-50); border-color: var(--ng-orange-200); color: var(--ng-orange-600); }
.ng-tl-ic.danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.ng-tl-ic.neutral { background: var(--n-50); border-color: var(--n-200); color: var(--fg-4); }
.ng-tl-body { flex: 1; padding-top: 2px; min-width: 0; }
.ng-tl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ng-tl-title { font-size: 13.5px; font-weight: 700; color: var(--fg-1); }
.ng-tl-actor { font-size: 12.5px; margin-top: 1px; }
.ng-tl-actor .by { color: var(--ng-orange-700); font-weight: 600; }
.ng-tl-time { font-size: 11.5px; color: var(--fg-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ng-tl-note { font-size: 13px; color: var(--fg-2); margin-top: 4px; }
.ng-tl-quote { font-size: 13px; color: var(--fg-2); margin-top: 8px; padding: 9px 13px; background: var(--n-25); border: 1px solid var(--border-subtle); border-radius: 9px; font-style: italic; }

/* Key-value detail */
.ng-kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--border-subtle); font-size: 13px; }
.ng-kv:last-child { border-bottom: 0; }
.ng-kv .k { color: var(--fg-3); }
.ng-kv .v { color: var(--fg-1); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ng-kv .v.mono { font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; }

/* Validators list */
.ng-validator { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.ng-validator:last-child { border-bottom: 0; }
.ng-validator .vn { font-size: 13.5px; font-weight: 700; color: var(--fg-1); }
.ng-validator .vr { font-size: 12px; color: var(--fg-3); }

/* Chips / filtres */
.ng-chips { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ng-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-default); background: #fff; color: var(--fg-2); cursor: pointer; font-family: inherit; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out); }
.ng-chip:hover { background: var(--n-25); }
.ng-chip.active { background: var(--ng-green-500); border-color: var(--ng-green-600); color: #fff; }
.ng-chip .n { font-variant-numeric: tabular-nums; color: var(--fg-4); font-weight: 700; }
.ng-chip.active .n { color: var(--ng-green-100); }

/* KPI ton danger (rupture de stock) — la pastille du libellé porte le ton ;
   la valeur reste en rouge brique pour signaler le risque */
.ng-kpi.danger .ng-kpi-val { color: var(--danger); }

/* Champs / selects */
.ng-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ng-field { display: flex; flex-direction: column; gap: 6px; }
.ng-field[hidden] { display: none; }
.ng-field > label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-3); }
.ng-select { position: relative; }
.ng-select select { appearance: none; -webkit-appearance: none; width: 100%; padding: 9px 34px 9px 12px; border: 1px solid var(--border-default); border-radius: 9px; background: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--fg-1); cursor: pointer; box-shadow: var(--shadow-inset); }
.ng-select select:focus { outline: none; border-color: var(--ng-green-500); box-shadow: var(--shadow-focus); }
.ng-select .chev { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--fg-4); width: 15px; height: 15px; }

/* Graphiques — barres horizontales */
.ng-hbars { display: flex; flex-direction: column; gap: 13px; }
.ng-hbar { display: grid; grid-template-columns: 92px 1fr 86px; align-items: center; gap: 12px; }
.ng-hbar .lbl { font-size: 12px; font-weight: 700; color: var(--fg-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-hbar .track { height: 18px; background: var(--n-50); border-radius: 6px; overflow: hidden; border: 1px solid var(--border-subtle); }
.ng-hbar .fill { display: block; height: 100%; border-radius: 6px 0 0 6px; transition: width var(--dur-base) var(--ease-out); }
.ng-hbar .val { font-size: 12.5px; font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ng-legend { display: flex; gap: 16px; align-items: center; }
.ng-legend .item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-2); font-weight: 600; }
.ng-legend .sw { width: 12px; height: 12px; border-radius: 3px; }

/* Inputs texte / date */
.ng-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--border-default); border-radius: 9px; background: #fff; font-family: inherit; font-size: 13.5px; color: var(--fg-1); box-shadow: var(--shadow-inset); }
.ng-input::placeholder { color: var(--fg-4); }
.ng-input:focus { outline: none; border-color: var(--ng-green-500); box-shadow: var(--shadow-focus); }
/* Locked values (e.g. averages taken from the BAC system): visibly not editable */
.ng-input[readonly] { background: var(--bg-page); color: var(--fg-2); cursor: not-allowed; box-shadow: none; }
.ng-locked-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 9px; background: var(--bg-page); color: var(--fg-2); font-size: 12.5px; line-height: 1.45; }
.ng-locked-note svg { flex: none; margin-top: 1px; }
.ng-input.with-ic { padding-left: 36px; }
.ng-input-wrap { position: relative; }
.ng-input-wrap > .lucide { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--fg-4); }

/* Sélecteur de projet (menu) */
.ng-proj-wrap { position: relative; }
.ng-proj-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 248px; background: #fff; border: 1px solid var(--border-default); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; }
.ng-proj-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--fg-4); padding: 9px 10px 4px; }
.ng-proj-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--fg-1); border-radius: 8px; cursor: pointer; text-align: left; }
.ng-proj-item:hover { background: var(--n-50); }
.ng-proj-item .pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--n-300); flex-shrink: 0; }
.ng-proj-item.sel .pdot { background: var(--ng-green-500); }
.ng-proj-item .chk { margin-left: auto; color: var(--ng-green-600); width: 15px; height: 15px; }

/* Fil d'Ariane */
.ng-crumb { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12.5px; }
.ng-crumb .crumb-link { background: none; border: 0; padding: 0; font-family: inherit; font-size: inherit; color: var(--fg-3); font-weight: 600; cursor: pointer; }
.ng-crumb .crumb-link:hover { color: var(--ng-green-700); }
.ng-crumb .crumb-cur { color: var(--fg-1); font-weight: 700; }
.ng-crumb .sep { width: 13px; height: 13px; color: var(--fg-4); flex-shrink: 0; }

/* Panneau de filtres repliable */
.ng-filterpanel { overflow: hidden; }
.ng-filter-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 18px; background: none; border: 0; font-family: inherit; cursor: pointer; }
.ng-filter-head:hover { background: var(--n-25); }
.ng-filter-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--fg-1); }
.ng-filter-title .lucide { width: 16px; height: 16px; color: var(--fg-3); }
.ng-filter-toggle { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--ng-green-600); }
.ng-filter-toggle .lucide { width: 15px; height: 15px; }
.ng-filter-body { padding: 16px 18px 18px; border-top: 1px solid var(--border-subtle); }

/* Menu d'actions de ligne (portail, position fixe) */
.ng-rowmenu { position: fixed; min-width: 178px; background: #fff; border: 1px solid var(--border-default); border-radius: 11px; box-shadow: var(--shadow-lg); padding: 5px; z-index: 200; font-family: var(--font-sans); }
.ng-rowmenu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--fg-1); border-radius: 7px; cursor: pointer; text-align: left; }
.ng-rowmenu-item:hover { background: var(--n-50); }
.ng-rowmenu-item .lucide { width: 15px; height: 15px; color: var(--fg-3); }
.ng-rowmenu-item.danger { color: var(--danger); }
.ng-rowmenu-item.danger .lucide { color: var(--danger); }
.ng-rowmenu hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 4px 2px; }
.ng-actions { display: inline-flex; align-items: center; }
.ng-actions-trigger .lucide { width: 16px; height: 16px; color: var(--fg-2); }
.ng-tbl td:has(> .ng-actions) { width: 1%; text-align: right; white-space: nowrap; }
.ng-actions-trigger { cursor: pointer; border-color: var(--border-strong); background: var(--bg-surface); }
.ng-actions-trigger:hover, .ng-actions-trigger[aria-expanded="true"] { background: var(--n-50); border-color: var(--n-400); }
.ng-tbl thead th:has(> .sr-only:only-child) { width: 1%; }
.ng-rowmenu-item[data-turbo-method] { text-decoration: none; }

/* Pagination */
.ng-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--border-subtle); background: var(--n-25); }
.ng-pagination .pp { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--fg-3); font-weight: 600; }
.ng-pagination .ng-select.sm select { padding: 6px 30px 6px 10px; font-size: 12.5px; box-shadow: var(--shadow-xs); }
.ng-pagination .ng-select.sm .chev { right: 9px; width: 14px; height: 14px; }
.ng-pagination .nav { display: flex; align-items: center; gap: 12px; }
.ng-pagination .rng { font-size: 12.5px; color: var(--fg-3); font-weight: 600; }
.pg-btn { width: 32px; height: 32px; border: 1px solid var(--border-default); background: #fff; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fg-2); }
.pg-btn:hover:not(:disabled) { background: var(--n-50); }
.pg-btn:disabled { opacity: .4; cursor: default; }
.pg-btn .lucide { width: 16px; height: 16px; }
.ng-ic-inline { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; }
.pg-btn { text-decoration: none; font-size: 12.5px; font-weight: 600; font-family: inherit; }
.pg-btn.current { background: var(--ng-green-500); border-color: var(--ng-green-600); color: var(--fg-on-green); cursor: default; }
.ng-pagination .nav { gap: 6px; }
.ng-pagination .pg-gap { color: var(--fg-4); padding: 0 2px; }

/* Formulaires */
.ng-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ng-form-grid .col-2 { grid-column: span 2; }
.ng-hint { font-size: 12px; color: var(--fg-4); margin-top: 5px; }
textarea.ng-input { resize: vertical; min-height: 88px; line-height: 1.5; }
/* A short list (a few lines): as high as its rows */
textarea.ng-input.ng-input-list { min-height: 0; }
.ng-form-actions { display: flex; gap: 10px; margin-top: 24px; }
.ng-form-actions.end { justify-content: flex-end; margin-top: 20px; gap: 8px; }
.ng-border-top { border-top: 1px solid var(--border-subtle); }
.ng-text-danger { color: var(--danger); }
.ng-text-warning { color: var(--ng-orange-700); }
.ng-text-ok { color: var(--ng-green-700); }

/* Détail (fiches) */
.ng-detail-field .k { font-size: 12px; color: var(--fg-3); font-weight: 600; margin-bottom: 3px; }
.ng-detail-field .v { font-size: 15px; color: var(--fg-1); font-weight: 600; }
.ng-detail-field .vsub { font-size: 12px; color: var(--fg-4); margin-top: 2px; }
.ng-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; }
.ng-detail-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ng-detail-grid .ng-detail-wide { grid-column: 1 / -1; }
.ng-detail-field { margin: 0; min-width: 0; }
.ng-detail-field dt, .ng-detail-field dd { margin: 0; }
.ng-detail-field .vsub { display: inline; margin-left: 4px; }
@media (max-width: 860px) { .ng-detail-grid, .ng-detail-grid-3 { grid-template-columns: 1fr; } }
.ng-section-title { font-size: 15px; font-weight: 700; color: var(--fg-1); margin: 0 0 12px; }
.ng-limit-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--n-25); border: 1px solid var(--border-subtle); border-radius: 10px; font-size: 13.5px; }
.ng-limit-row .ln { font-weight: 700; color: var(--fg-1); }
.ng-limit-row .lv { color: var(--fg-3); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Swatch (fondations) */
.ng-sw { border-radius: 10px; height: 64px; border: 1px solid rgba(18,22,19,0.10); display: flex; align-items: flex-end; padding: 7px 9px; }
.ng-sw .hex { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; }

/* =============================================================================
   Notifications (toasts) — glissent depuis le haut, disparaissent après 3 s
   ============================================================================= */
.ng-notice-stack { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.ng-notice {
  display: flex; align-items: flex-start; gap: 11px; width: 380px; max-width: calc(100vw - 32px);
  padding: 12px 12px 12px 14px; border-radius: 12px; background: #fff;
  border: 1px solid var(--border-default); box-shadow: var(--shadow-lg);
  pointer-events: auto; animation: ng-notice-in var(--dur-base) var(--ease-out);
}
.ng-notice.is-leaving, .ng-notice.flash-hiding { animation: ng-notice-out 220ms var(--ease-out) forwards; }
.ng-notice-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--n-50); color: var(--fg-4); }
.ng-notice-ic .lucide { width: 17px; height: 17px; }
.ng-notice-body { flex: 1; min-width: 0; }
.ng-notice-title { font-size: 13.5px; font-weight: 700; color: var(--fg-1); line-height: 1.3; }
.ng-notice-msg { font-size: 12.5px; color: var(--fg-3); margin-top: 1px; line-height: 1.4; }
.ng-notice-close { flex-shrink: 0; width: 24px; height: 24px; border: 0; background: none; border-radius: 6px; color: var(--fg-4); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ng-notice-close:hover { background: var(--n-50); color: var(--fg-2); }
.ng-notice-close .lucide { width: 15px; height: 15px; }
/* Tons */
.ng-notice.success { border-color: var(--ng-green-200); }
.ng-notice.success .ng-notice-ic { background: var(--ng-green-50); color: var(--ng-green-600); }
.ng-notice.info { border-color: var(--info-border); }
.ng-notice.info .ng-notice-ic { background: var(--ng-blue-50); color: var(--ng-blue-500); }
.ng-notice.error { border-color: var(--danger-border); }
.ng-notice.error .ng-notice-ic { background: var(--danger-bg); color: var(--danger); }
.ng-notice.warning { border-color: var(--ng-orange-200); }
.ng-notice.warning .ng-notice-ic { background: var(--ng-orange-50); color: var(--ng-orange-700); }
.ng-notice { position: relative; overflow: hidden; --notice-tone: var(--n-400); }
.ng-notice.success { --notice-tone: var(--ng-green-500); }
.ng-notice.info { --notice-tone: var(--ng-blue-500); }
.ng-notice.error { --notice-tone: var(--danger); }
.ng-notice.warning { --notice-tone: var(--ng-orange-500); }
.ng-notice-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--border-subtle); }
.ng-notice-progress .flash-progress { height: 100%; width: 100%; background: var(--notice-tone); }
@keyframes ng-notice-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ng-notice-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-14px); } }

/* =============================================================================
   Écran de connexion (verrou côté client) + mini-jeu de pied de page
   ============================================================================= */
.dn-auth { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 24px 0; overflow-y: auto;
  background: radial-gradient(circle at 30% 20%, rgba(18,121,20,0.14) 0%, transparent 55%), var(--ink); }
.dn-auth-card { flex-shrink: 0; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-surface); border-radius: 16px; padding: 34px 32px 30px;
  box-shadow: 0 32px 64px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04); }
.dn-auth-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--ng-green-700); }
.dn-auth-title { margin: 2px 0 0; font-size: 24px; font-weight: 800; color: var(--fg-1); letter-spacing: -0.01em; line-height: 1.15; }
.dn-auth-sub { margin: 4px 0 10px; color: var(--fg-3); font-size: 13.5px; line-height: 1.5; }
.dn-auth-label { font-size: 12px; font-weight: 700; color: var(--fg-2); margin-bottom: -6px; }
.dn-auth-input { font-family: var(--font-sans); font-size: 14px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 10px; background: #fff; box-shadow: var(--shadow-inset); outline: none; transition: border-color 120ms, box-shadow 120ms; }
.dn-auth-input:focus { border-color: var(--ng-green-500); box-shadow: var(--shadow-inset), var(--shadow-focus); }
.dn-auth-input.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(178,58,36,0.18); }
.dn-auth-err { color: var(--danger); font-size: 12.5px; margin-top: -4px; font-weight: 600; }
.dn-auth-btn { background: var(--ng-green-500); color: #fff; border: 1px solid var(--ng-green-600); border-radius: 10px; padding: 11px 16px; font-weight: 700; font-size: 14px; cursor: pointer; margin-top: 6px; transition: background 120ms, transform 120ms; font-family: inherit; }
.dn-auth-btn:hover { background: var(--ng-green-600); }
.dn-auth-btn:active { background: var(--ng-green-700); transform: translateY(1px); }
.dn-game { margin-top: auto; width: 100%; max-width: 980px; display: flex; flex-direction: column; }
.dn-game-canvas { width: 100%; height: auto; display: block; background: var(--ink); border: 1px solid rgba(255,255,255,0.08); border-bottom: 0; border-radius: 14px 14px 0 0; image-rendering: pixelated; }
.dn-game-hud { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-top: 0; border-radius: 0 0 14px 14px; padding: 12px 18px 14px; color: rgba(255,255,255,0.72); font-size: 12px; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.dn-game-hud-title { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ng-green-300); }
.dn-game-hud-mission { color: rgba(238,241,239,0.85); font-weight: 500; text-align: center; max-width: 720px; }
.dn-game-hud-mission b { color: #fff; font-weight: 700; }
.dn-game-hud-controls { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; color: rgba(255,255,255,0.65); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; }
.dn-game-hud-tip { font-size: 11px; color: rgba(255,255,255,0.45); font-style: italic; text-align: center; }
.dn-game-hud kbd { font-family: var(--font-mono); background: rgba(46,146,51,0.14); border: 1px solid rgba(46,146,51,0.30); padding: 2px 7px; border-radius: 4px; font-size: 11px; color: var(--ng-green-300); margin-right: 4px; }
/* Bouton de déconnexion (pied de la barre latérale du navigateur) */
.ds-signout { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--n-400); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 0; }
.ds-signout:hover { color: #fff; }
.ds-signout i[data-lucide] { width: 14px; height: 14px; }

/* =============================================================================
   Responsive — mobile & tablette (barre latérale en tiroir, grilles empilées)
   ============================================================================= */
.ng-menu-btn { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: -2px; border: 1px solid var(--border-default); border-radius: 8px; background: #fff; color: var(--fg-1); cursor: pointer; flex-shrink: 0; }
.ng-menu-btn .lucide { width: 18px; height: 18px; }
.ng-scrim { display: none; }

@media (max-width: 860px) {
  /* Barre latérale en tiroir hors-écran */
  .ng-app { grid-template-columns: 1fr; }
  .ng-side { position: fixed; top: 0; left: 0; height: 100vh; width: 280px; max-width: 84vw;
    transform: translateX(-100%); transition: transform var(--dur-base) var(--ease-out);
    z-index: 80; box-shadow: var(--shadow-lg); }
  .ng-side.is-open { transform: translateX(0); }
  .ng-scrim { display: block; position: fixed; inset: 0; background: rgba(18,22,19,0.45); z-index: 70; }
  .ng-menu-btn { display: inline-flex; }

  /* Topbar */
  .ng-top { padding: 0 14px; gap: 10px; }
  .ng-search { display: none; }
  .ng-proj { max-width: 50vw; overflow: hidden; }

  /* Contenu */
  .ng-page { padding: 16px 14px 36px; }
  .ng-page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .ng-page-head > div:first-child { flex: 0 0 auto; }
  .ng-page-head > form:only-child { margin-left: 0; }
  .ng-page-head > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
  .ng-page-title { font-size: 22px; }

  /* Grilles → empilées */
  .ng-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ng-counters { grid-template-columns: repeat(2, 1fr); }
  .ng-split { grid-template-columns: 1fr !important; }
  .ng-filters { grid-template-columns: 1fr; }
  .ng-form-grid { grid-template-columns: 1fr; }
  .ng-form-grid .col-2 { grid-column: auto; }
  
  /* Héro */
  .ng-hero-card { padding: 22px 20px 24px; }
  .ng-hero-val { font-size: 38px; }

  /* Tableaux : défilement horizontal dans leur carte */
  .ng-card:has(> .ng-tbl) { overflow-x: auto !important; }
  .ng-card > .ng-tbl { min-width: 600px; }

  /* Stepper : défilement horizontal si besoin */
  .ng-stepper { overflow-x: auto; padding-bottom: 4px; }
  .ng-step { min-width: 92px; }
}

@media (max-width: 520px) {
  .ng-kpi-grid { grid-template-columns: 1fr; }
  .ng-counters { grid-template-columns: 1fr; }
  .ng-pagination { flex-direction: column; gap: 10px; align-items: stretch; }
  .ng-pagination .nav { justify-content: space-between; }
}

/* =============================================================================
    Dashboard admin (refonte inspirée des maquettes)
    ============================================================================= */
.ng-dashboard { display: flex; flex-direction: column; gap: 16px; }
.ng-dashboard-head { margin-bottom: 0; }
.ng-dashboard-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ng-dashboard-head-actions .ng-chip { margin-bottom: 0; }

.ng-hero-card-dashboard { margin-bottom: 0; }

.ng-dashboard-kpis,
.ng-dashboard-counters,
.ng-dashboard-split-lg,
.ng-dashboard-split-sm {
   animation: ng-fade-rise 360ms var(--ease-out) both;
}

.ng-dashboard-kpis { animation-delay: 40ms; }
.ng-dashboard-counters { animation-delay: 80ms; }
.ng-dashboard-split-lg { animation-delay: 120ms; }
.ng-dashboard-split-sm { animation-delay: 160ms; }

.ng-dashboard-split-lg { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
.ng-dashboard-split-sm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ng-dashboard-chart,
.ng-dashboard-bars,
.ng-dashboard-activity { min-height: 100%; }
.ng-dashboard-card-body { padding: 18px 20px; }

.ng-dashboard .ng-hbar { grid-template-columns: 120px 1fr 72px; }
.ng-dashboard .ng-hbar .lbl { font-size: 12.5px; }

.ng-dashboard-activity .ng-card-head { background: var(--ng-gold-50); }
.ng-dashboard-activity .ng-alert-row { background: #fff; }
.ng-dashboard-activity .ng-alert-row:hover { background: var(--n-25); }

@keyframes ng-fade-rise {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (max-width: 1200px) {
   .ng-dashboard-split-lg,
   .ng-dashboard-split-sm {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 860px) {
   .ng-dashboard-head-actions { width: 100%; }
   .ng-dashboard-head-actions .ng-btn { width: 100%; justify-content: center; }
   .ng-dashboard .ng-hbar { grid-template-columns: 88px 1fr 64px; }
}

/* =============================================================================
    BAC verification page
    ============================================================================= */
.ng-bac-page {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 28px 16px;
   background:
      radial-gradient(circle at 84% 18%, rgba(58, 152, 148, 0.18) 0%, transparent 48%),
      radial-gradient(circle at 12% 88%, rgba(18, 121, 20, 0.14) 0%, transparent 52%),
      linear-gradient(132deg, var(--ng-green-50) 0%, var(--ng-blue-50) 44%, var(--ng-gold-50) 100%);
   position: relative;
   overflow: hidden;
}

.ng-bac-orb {
   position: absolute;
   border-radius: 999px;
   filter: blur(2px);
   opacity: 0.64;
   pointer-events: none;
}

.ng-bac-orb-a {
   width: 270px;
   height: 270px;
   top: -92px;
   right: -82px;
   background: radial-gradient(circle at 30% 30%, rgba(18, 121, 20, 0.35) 0%, rgba(18, 121, 20, 0.08) 64%, transparent 100%);
}

.ng-bac-orb-b {
   width: 220px;
   height: 220px;
   bottom: -86px;
   left: -70px;
   background: radial-gradient(circle at 55% 45%, rgba(255, 140, 0, 0.28) 0%, rgba(255, 140, 0, 0.07) 62%, transparent 100%);
}

.ng-bac-card {
   width: min(540px, 100%);
   background: rgba(255, 255, 255, 0.92);
   border: 1px solid rgba(255, 255, 255, 0.78);
   border-radius: 22px;
   box-shadow: 0 26px 46px rgba(24, 39, 30, 0.18);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   padding: 24px;
   position: relative;
   z-index: 1;
   animation: ng-bac-enter 360ms var(--ease-out) both;
}

.ng-bac-head {
   text-align: center;
   margin-bottom: 20px;
}

.ng-bac-logo {
   width: auto;
   height: 58px;
   margin: 0 auto 10px;
}

.ng-bac-head h1 {
   margin: 0;
   color: var(--fg-1);
   font-size: 26px;
   font-weight: 800;
   letter-spacing: -0.02em;
}

.ng-bac-head p {
   margin: 8px auto 0;
   max-width: 430px;
   color: var(--fg-3);
   font-size: 13.5px;
   line-height: 1.55;
}

.ng-bac-alert {
   display: grid;
   grid-template-columns: 34px 1fr;
   gap: 12px;
   border: 1px solid var(--info-border);
   background: linear-gradient(180deg, rgba(232, 240, 250, 0.62) 0%, rgba(232, 243, 242, 0.5) 100%);
   border-radius: 13px;
   padding: 12px;
   margin-bottom: 16px;
}

.ng-bac-alert-ic {
   width: 34px;
   height: 34px;
   border-radius: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   color: var(--ng-blue-500);
   border: 1px solid rgba(191, 211, 239, 0.9);
}

.ng-bac-alert-ic .lucide {
   width: 18px;
   height: 18px;
}

.ng-bac-alert h3 {
   margin: 1px 0 5px;
   color: var(--fg-1);
   font-size: 14px;
   font-weight: 800;
}

.ng-bac-alert p {
   margin: 0;
   color: var(--fg-2);
   font-size: 12.7px;
   line-height: 1.55;
}

.ng-bac-form {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.ng-bac-form .ng-field > label {
   text-transform: none;
   letter-spacing: 0;
   font-size: 12.5px;
   color: var(--fg-2);
}

.ng-bac-actions {
   margin-top: 6px;
}

.ng-bac-submit {
   width: 100%;
   justify-content: center;
   padding: 12px 15px;
   font-size: 14px;
}

.ng-bac-help {
   margin-top: 18px;
   border-top: 1px dashed var(--border-default);
   padding-top: 14px;
}

.ng-bac-help h4 {
   margin: 0;
   font-size: 14px;
   color: var(--fg-1);
   font-weight: 800;
}

.ng-bac-help p {
   margin: 7px 0 10px;
   color: var(--fg-3);
   font-size: 12.5px;
}

.ng-bac-help ul {
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.ng-bac-help li {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--fg-2);
   font-size: 12.8px;
}

.ng-bac-help li .lucide {
   width: 15px;
   height: 15px;
   color: var(--ng-green-600);
   flex-shrink: 0;
}

@keyframes ng-bac-enter {
   from {
      opacity: 0;
      transform: translateY(14px) scale(0.985);
   }

   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

@media (max-width: 640px) {
   .ng-bac-page {
      padding: 14px;
      align-items: flex-start;
   }

   .ng-bac-card {
      padding: 18px;
      border-radius: 18px;
      margin-top: 8px;
   }

   .ng-bac-head h1 {
      font-size: 22px;
   }

   .ng-bac-alert {
      grid-template-columns: 30px 1fr;
      gap: 10px;
      padding: 10px;
   }

   .ng-bac-alert-ic {
      width: 30px;
      height: 30px;
      border-radius: 9px;
   }
}

/* =============================================================================
   Request form (Nouvelle / Modifier demande) — design clair, moderne, responsive
   ============================================================================= */
.ng-request-page {
   min-height: 100vh;
   padding: 28px 16px 48px;
   background:
      radial-gradient(circle at 88% 12%, rgba(58, 152, 148, 0.14) 0%, transparent 46%),
      radial-gradient(circle at 6% 92%, rgba(18, 121, 20, 0.10) 0%, transparent 52%),
      linear-gradient(180deg, var(--ng-green-50) 0%, var(--n-25) 60%, var(--ng-blue-50) 100%);
}

.ng-request-wrap {
   max-width: 880px;
   margin: 0 auto;
}

.ng-request-card {
   background: #fff;
   border: 1px solid var(--border-subtle);
   border-radius: 18px;
   box-shadow: var(--shadow-sm);
   padding: 28px 28px 24px;
   animation: ng-fade-rise 360ms var(--ease-out) both;
}

.ng-request-head {
   text-align: center;
   margin-bottom: 18px;
}

.ng-request-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 11.5px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: var(--ng-green-700);
   background: var(--ng-green-50);
   border: 1px solid var(--ng-green-200);
   padding: 5px 11px;
   border-radius: 999px;
}
.ng-request-eyebrow .lucide,
.ng-request-eyebrow [data-lucide] { width: 14px; height: 14px; }

.ng-request-title {
   margin: 12px 0 6px;
   font-size: 24px;
   font-weight: 800;
   color: var(--fg-1);
   letter-spacing: -0.02em;
   line-height: 1.2;
}

.ng-request-sub {
   margin: 0 auto;
   max-width: 540px;
   color: var(--fg-3);
   font-size: 13.5px;
   line-height: 1.55;
}

.ng-request-alert {
   display: grid;
   grid-template-columns: 36px 1fr;
   gap: 12px;
   border: 1px solid var(--info-border);
   background: linear-gradient(180deg, rgba(232, 240, 250, 0.6) 0%, rgba(232, 243, 242, 0.45) 100%);
   border-radius: 13px;
   padding: 13px 14px;
   margin-bottom: 20px;
}

.ng-request-alert-ic {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   color: var(--ng-blue-500);
   border: 1px solid rgba(191, 211, 239, 0.9);
}
.ng-request-alert-ic .lucide,
.ng-request-alert-ic [data-lucide] { width: 18px; height: 18px; }

.ng-request-alert-title {
   margin: 2px 0 6px;
   font-size: 13.5px;
   font-weight: 700;
   color: var(--fg-1);
}

.ng-request-alert-list {
   margin: 0;
   padding-left: 18px;
   color: var(--fg-2);
   font-size: 12.8px;
   line-height: 1.55;
   display: flex;
   flex-direction: column;
   gap: 3px;
}

/* Form layout */
.ng-request-form {
   display: flex;
   flex-direction: column;
   gap: 18px;
}

.ng-request-type { margin-bottom: 4px; }

.ng-request-select {
   appearance: none;
   -webkit-appearance: none;
   width: 100%;
   padding: 10px 36px 10px 13px;
   border: 1px solid var(--border-default);
   border-radius: 10px;
   background: #fff;
   font-family: inherit;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--fg-1);
   cursor: pointer;
   box-shadow: var(--shadow-inset);
   transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ng-request-select:focus {
   outline: none;
   border-color: var(--ng-green-500);
   box-shadow: var(--shadow-focus), var(--shadow-inset);
}
.ng-request-select.is-error {
   border-color: var(--danger);
   box-shadow: 0 0 0 3px rgba(178, 58, 36, 0.16);
}

/* Field labels — clear, not uppercase, light look */
.ng-request-form .ng-field > label,
.ng-request-section .ng-field > label {
   text-transform: none;
   letter-spacing: 0;
   font-size: 13px;
   font-weight: 600;
   color: var(--fg-2);
}

.ng-request-section { display: flex; flex-direction: column; gap: 20px; }
.ng-request-block {
   background: var(--n-25);
   border: 1px solid var(--border-subtle);
   border-radius: 14px;
   padding: 18px 18px 16px;
   display: flex;
   flex-direction: column;
   gap: 14px;
}
.ng-request-block-title {
   margin: 0 0 4px;
   font-size: 14px;
   font-weight: 700;
   color: var(--fg-1);
   letter-spacing: -0.005em;
}

/* Inputs override pour rester clairs (jamais d'effet sombre) */
.ng-request-section .ng-input,
.ng-request-form .ng-input {
   background: #fff;
   color: var(--fg-1);
   border-color: var(--border-default);
   border-radius: 10px;
   padding: 10px 12px;
}
.ng-request-section .ng-input::placeholder { color: var(--fg-4); }
.ng-request-section .ng-input:focus,
.ng-request-form .ng-input:focus {
   border-color: var(--ng-green-500);
   box-shadow: var(--shadow-focus);
}
.ng-request-section textarea.ng-input { min-height: 110px; line-height: 1.55; }

/* Read-only display "champ" (excellence) */
.ng-readonly {
   display: block;
   width: 100%;
   box-sizing: border-box;
   padding: 10px 12px;
   border: 1px dashed var(--border-default);
   border-radius: 10px;
   background: #fff;
   font-size: 13.5px;
   color: var(--fg-2);
   font-weight: 600;
   min-height: 40px;
}

/* Radios */
.ng-radio-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.ng-radio {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13.5px;
   font-weight: 600;
   color: var(--fg-2);
   cursor: pointer;
}
.ng-radio input[type="radio"] {
   appearance: none;
   -webkit-appearance: none;
   width: 18px;
   height: 18px;
   border: 1.5px solid var(--border-strong);
   border-radius: 50%;
   background: #fff;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ng-radio input[type="radio"]::after {
   content: "";
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--ng-green-500);
   transform: scale(0);
   transition: transform 140ms var(--ease-out);
}
.ng-radio input[type="radio"]:checked { border-color: var(--ng-green-500); }
.ng-radio input[type="radio"]:checked::after { transform: scale(1); }
.ng-radio input[type="radio"]:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

/* File attachments */
.ng-file-input {
   padding: 8px 12px;
   font-size: 13px;
   color: var(--fg-2);
   background: #fff;
   cursor: pointer;
}
.ng-file-input::file-selector-button {
   margin-right: 10px;
   padding: 6px 12px;
   border-radius: 8px;
   border: 1px solid var(--border-default);
   background: var(--n-50);
   color: var(--fg-1);
   font-weight: 600;
   font-size: 12.5px;
   cursor: pointer;
   transition: background var(--dur-fast) var(--ease-out);
}
.ng-file-input::file-selector-button:hover { background: var(--n-100); }

.ng-file-current {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 6px;
   padding: 9px 12px;
   border-radius: 10px;
   border: 1px solid var(--ng-green-200);
   background: var(--ng-green-50);
   color: var(--ng-green-700);
   font-size: 13px;
   font-weight: 600;
}
.ng-file-current-ic {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--ng-green-600);
   flex-shrink: 0;
}
.ng-file-current-ic .lucide,
.ng-file-current-ic [data-lucide] { width: 16px; height: 16px; }
.ng-file-current-name {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.ng-file-replace {
   border: 0;
   background: none;
   color: var(--ng-green-700);
   font-weight: 700;
   font-size: 12px;
   text-decoration: underline;
   cursor: pointer;
   font-family: inherit;
}
.ng-file-replace:hover { color: var(--ng-green-600); }
.ng-file-cancel {
   margin-top: 4px;
   border: 0;
   background: none;
   color: var(--fg-4);
   font-size: 12px;
   text-decoration: underline;
   cursor: pointer;
   font-family: inherit;
}
.ng-file-cancel:hover { color: var(--fg-2); }

/* Submit */
.ng-request-actions {
   display: flex;
   justify-content: flex-end;
   margin-top: 4px;
}
.ng-request-submit {
   width: 100%;
   justify-content: center;
   padding: 12px 18px;
   font-size: 14px;
   border-radius: 11px;
}

@media (min-width: 640px) {
   .ng-request-submit { width: auto; min-width: 200px; }
}

@media (max-width: 640px) {
   .ng-request-page { padding: 14px 12px 36px; }
   .ng-request-card { padding: 20px 16px 18px; border-radius: 16px; }
   .ng-request-title { font-size: 21px; }
   .ng-request-alert { grid-template-columns: 32px 1fr; padding: 10px 12px; }
   .ng-request-alert-ic { width: 32px; height: 32px; border-radius: 9px; }
   .ng-request-block { padding: 14px 14px 12px; border-radius: 12px; }
}

/* =============================================================================
   Request show page — détails d'une demande, layout responsive 2 colonnes
   ============================================================================= */
.ng-request-show {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 22px;
   animation: ng-fade-rise 360ms var(--ease-out) both;
}

.ng-request-show-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 18px;
   flex-wrap: wrap;
}
.ng-request-show-head-left { min-width: 0; flex: 1 1 320px; }
.ng-request-show-head-right { flex-shrink: 0; }

.ng-request-show-title {
   margin: 12px 0 6px;
   font-size: 26px;
   font-weight: 800;
   color: var(--fg-1);
   letter-spacing: -0.02em;
   line-height: 1.2;
   text-transform: uppercase;
}

.ng-request-show-ref {
   margin: 0;
   color: var(--fg-3);
   font-size: 13.5px;
}
.ng-request-show-ref-val {
   color: var(--fg-1);
   font-weight: 700;
   font-family: var(--font-mono);
   font-size: 13px;
}

.ng-request-show-head-right .ng-badge {
   padding: 6px 14px;
   font-size: 13px;
}
.ng-request-show-head-right .ng-badge .lucide,
.ng-request-show-head-right .ng-badge [data-lucide] { width: 14px; height: 14px; }

.ng-request-show-grid {
   display: grid;
   grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
   gap: 18px;
   align-items: start;
}

.ng-request-show-main {
   display: flex;
   flex-direction: column;
   gap: 18px;
   min-width: 0;
}

.ng-request-show-side {
   display: flex;
   flex-direction: column;
   gap: 18px;
   min-width: 0;
}

.ng-request-show-card { overflow: hidden; }
.ng-request-show-card.sticky { position: sticky; top: 20px; }

.ng-request-show-card .ng-card-head { padding: 16px 22px; }
.ng-request-show-card .ng-card-title {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 15px;
}
.ng-request-card-ic {
   width: 30px;
   height: 30px;
   border-radius: 9px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--ng-green-50);
   color: var(--ng-green-600);
   border: 1px solid var(--ng-green-200);
   flex-shrink: 0;
}
.ng-request-card-ic.accent {
   background: var(--ng-orange-50);
   color: var(--ng-orange-600);
   border-color: var(--ng-orange-200);
}
.ng-request-card-ic .lucide,
.ng-request-card-ic[data-lucide] { width: 16px; height: 16px; }

.ng-request-show-card-body { padding: 18px 22px 20px; }

/* Actions row */
.ng-request-show-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}
.ng-request-show-action {
   width: 100%;
   justify-content: center;
   padding: 11px 16px;
   font-size: 13.5px;
   border-radius: 11px;
}

/* Detail field overrides for show */
.ng-request-show-card .ng-detail-field .k { font-size: 12px; }
.ng-request-show-card .ng-detail-field .v { font-size: 14px; font-weight: 700; color: var(--fg-1); }
.ng-request-show-divider {
   height: 1px;
   background: var(--border-subtle);
   margin: 18px 0 6px;
}

/* Workflow timeline */
.ng-request-flow { display: flex; flex-direction: column; gap: 12px; }
.ng-request-flow-item {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 12px 14px;
   border: 1px solid var(--border-subtle);
   border-radius: 13px;
   background: #fff;
   transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ng-request-flow-item:hover { background: var(--n-25); }

.ng-request-flow-ic {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--n-50);
   color: var(--fg-4);
   border: 1px solid var(--border-subtle);
   flex-shrink: 0;
}
.ng-request-flow-ic .lucide,
.ng-request-flow-ic [data-lucide] { width: 20px; height: 20px; }

.ng-request-flow-item.done .ng-request-flow-ic {
   background: var(--ng-green-50);
   color: var(--ng-green-600);
   border-color: var(--ng-green-200);
}
.ng-request-flow-item.done.info .ng-request-flow-ic {
   background: var(--ng-blue-50);
   color: var(--ng-blue-500);
   border-color: var(--info-border);
}
.ng-request-flow-item.danger .ng-request-flow-ic {
   background: var(--danger-bg);
   color: var(--danger);
   border-color: var(--danger-border);
}

.ng-request-flow-body { flex: 1; min-width: 0; }
.ng-request-flow-title {
   font-size: 14px;
   font-weight: 700;
   color: var(--fg-1);
   line-height: 1.3;
}
.ng-request-flow-meta {
   font-size: 12.5px;
   color: var(--fg-3);
   margin-top: 2px;
   line-height: 1.45;
}
.ng-request-flow-item .ng-badge { flex-shrink: 0; }

/* Rejection panel */
.ng-request-reject {
   display: grid;
   grid-template-columns: 38px 1fr;
   gap: 12px;
   padding: 14px 16px;
   border-radius: 14px;
   background: var(--danger-bg);
   border: 1px solid var(--danger-border);
}
.ng-request-reject-ic {
   width: 38px;
   height: 38px;
   border-radius: 11px;
   background: #fff;
   color: var(--danger);
   border: 1px solid var(--danger-border);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}
.ng-request-reject-ic .lucide,
.ng-request-reject-ic [data-lucide] { width: 18px; height: 18px; }
.ng-request-reject-title {
   margin: 2px 0 4px;
   font-size: 13.5px;
   font-weight: 700;
   color: var(--danger);
}
.ng-request-reject-msg {
   margin: 0;
   font-size: 13px;
   color: var(--danger);
   line-height: 1.55;
}

/* Sidebar — payments list */
.ng-request-payments { display: flex; flex-direction: column; gap: 12px; }
.ng-request-payment {
   border: 1px solid var(--border-subtle);
   border-radius: 12px;
   background: var(--n-25);
   padding: 12px 14px;
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.ng-request-payment-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
}
.ng-request-payment-amount {
   font-size: 15px;
   font-weight: 800;
   color: var(--fg-1);
   font-variant-numeric: tabular-nums;
}
.ng-request-payment-date {
   margin: 0;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   color: var(--fg-3);
   font-size: 12.5px;
   font-weight: 600;
}
.ng-request-payment-date .lucide,
.ng-request-payment-date [data-lucide] { width: 14px; height: 14px; color: var(--fg-4); }

/* Sidebar — payment box */
.ng-request-pay-amount {
   border: 1px solid var(--ng-green-200);
   background: var(--ng-green-50);
   border-radius: 14px;
   padding: 18px 14px;
   text-align: center;
   margin-bottom: 16px;
}
.ng-request-pay-amount-label {
   margin: 0 0 6px;
   font-size: 12.5px;
   font-weight: 600;
   color: var(--ng-green-700);
   text-transform: uppercase;
   letter-spacing: 0.08em;
}
.ng-request-pay-amount-val {
   margin: 0;
   font-size: 30px;
   font-weight: 800;
   color: var(--ng-green-700);
   letter-spacing: -0.02em;
   font-variant-numeric: tabular-nums;
}
.ng-request-pay-btn {
   width: 100%;
   justify-content: center;
   padding: 13px 16px;
   font-size: 14px;
   border-radius: 11px;
}
.ng-request-pay-secure {
   margin: 12px 0 0;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   color: var(--fg-4);
   font-size: 12px;
   font-weight: 600;
}
.ng-request-pay-secure .lucide,
.ng-request-pay-secure [data-lucide] { width: 14px; height: 14px; }

/* Responsive — show */
@media (max-width: 960px) {
   .ng-request-show-grid { grid-template-columns: 1fr; }
   .ng-request-show-card.sticky { position: static; }
}

@media (max-width: 640px) {
   .ng-request-show-title { font-size: 22px; }
   .ng-request-show-head { gap: 12px; }
   .ng-request-show-actions { grid-template-columns: 1fr; }
   .ng-request-show-card .ng-card-head,
   .ng-request-show-card-body { padding: 14px 16px; }
   .ng-request-flow-item { padding: 11px 12px; gap: 10px; flex-wrap: wrap; }
   .ng-request-flow-item .ng-badge { margin-left: 54px; }
}

/* =============================================================================
   Request index (user-facing) — fournit l'arrière-plan + container en dehors
   du layout admin. Hérite des styles ng-page, ng-candidates, ng-tbl, etc.
   ============================================================================= */
.ng-requests-index-page {
   min-height: 100vh;
   background: var(--bg-page);
}
.ng-requests-index { max-width: 1280px; margin: 0 auto; }

/* =============================================================================
   Candidate edit (profil) — design clair, responsive, sans effet sombre.
   ============================================================================= */
.ng-candidate-edit {
   max-width: 980px;
   margin: 0 auto;
   padding: 24px 16px 48px;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.ng-candidate-edit-head {
   display: flex;
   flex-direction: column;
   gap: 8px;
   text-align: left;
}
.ng-candidate-edit-title {
   font-family: var(--font-display, inherit);
   font-size: 28px;
   line-height: 1.15;
   font-weight: 700;
   color: var(--fg-1);
   margin: 0;
}
.ng-candidate-edit-sub {
   color: var(--fg-3);
   font-size: 14px;
   line-height: 1.5;
   margin: 0;
   max-width: 640px;
}

/* Error alert */
.ng-candidate-edit-error {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 14px 16px;
   border-radius: var(--radius-md, 12px);
   background: var(--danger-bg);
   border: 1px solid var(--danger-border);
   color: var(--danger);
}
.ng-candidate-edit-error-ic {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: var(--danger-bg);
   color: var(--danger);
   flex-shrink: 0;
}
.ng-candidate-edit-error-ic .lucide,
.ng-candidate-edit-error-ic [data-lucide] { width: 18px; height: 18px; }
.ng-candidate-edit-error-title {
   font-size: 14px;
   font-weight: 700;
   margin: 0 0 2px;
   color: var(--danger);
}
.ng-candidate-edit-error-msg {
   font-size: 13px;
   margin: 0;
   color: var(--danger);
   line-height: 1.5;
}

/* Card */
.ng-candidate-edit-card {
   overflow: hidden;
   border-radius: var(--radius-lg, 14px);
   background: var(--bg-surface);
   border: 1px solid var(--border-default);
   box-shadow: var(--shadow-1, 0 1px 2px rgba(15, 23, 42, .05));
}
.ng-candidate-edit-card-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   padding: 18px 20px;
   border-bottom: 1px solid var(--border-default);
   background: var(--n-25);
}
.ng-candidate-edit-meta {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   min-width: 260px;
}
.ng-candidate-edit-meta-item {
   padding: 10px 12px;
   border-radius: 10px;
   background: var(--bg-surface);
   border: 1px solid var(--border-default);
}
.ng-candidate-edit-meta-item .k {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--fg-3);
   font-weight: 600;
   margin-bottom: 2px;
}
.ng-candidate-edit-meta-item .v {
   font-size: 13px;
   color: var(--fg-1);
   font-weight: 600;
}

/* Body */
.ng-candidate-edit-body {
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 18px;
}
.ng-candidate-edit-form {
   display: flex;
   flex-direction: column;
   gap: 18px;
}

/* Sections */
.ng-candidate-edit-section {
   padding: 16px;
   border-radius: 12px;
   background: var(--n-25);
   border: 1px solid var(--border-default);
   display: flex;
   flex-direction: column;
   gap: 14px;
}
.ng-candidate-edit-section-head {
   display: flex;
   align-items: flex-start;
   gap: 12px;
}
.ng-candidate-edit-section-ic {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 10px;
   flex-shrink: 0;
}
.ng-candidate-edit-section-ic.info {
   background: var(--ng-blue-50);
   color: var(--ng-blue-500);
}
.ng-candidate-edit-section-ic.success {
   background: var(--ng-green-50);
   color: var(--ng-green-700);
}
.ng-candidate-edit-section-ic .lucide,
.ng-candidate-edit-section-ic [data-lucide] { width: 18px; height: 18px; }

.ng-candidate-edit-section-title {
   font-size: 15px;
   font-weight: 700;
   margin: 0 0 2px;
   color: var(--fg-1);
}
.ng-candidate-edit-section-sub {
   font-size: 12.5px;
   color: var(--fg-3);
   margin: 0;
}

/* Select & errors */
.ng-candidate-edit-select.is-error,
.ng-input.is-error {
   border-color: var(--danger-border) !important;
   background: var(--danger-bg);
}
.ng-field-error {
   font-size: 12px;
   color: var(--danger);
   margin: 6px 0 0;
   font-weight: 500;
}

/* Attribution box */
.ng-candidate-edit-attribution {
   padding: 12px 14px;
   border-radius: 10px;
   background: var(--bg-surface);
   border: 1px dashed var(--border-default);
   display: flex;
   flex-direction: column;
   gap: 4px;
}
.ng-candidate-edit-attribution .k {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--fg-3);
   font-weight: 600;
}
.ng-candidate-edit-attribution .v {
   font-size: 15px;
   font-weight: 700;
   color: var(--ng-green-7, var(--ng-green-700));
}
.ng-candidate-edit-attribution .s {
   font-size: 12px;
   color: var(--fg-3);
   margin: 2px 0 0;
}

/* Info note */
.ng-candidate-edit-note {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 12px 14px;
   border-radius: 10px;
   background: var(--ng-orange-50);
   border: 1px solid var(--ng-orange-200);
   color: var(--ng-orange-800);
}
.ng-candidate-edit-note-ic {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 8px;
   background: var(--ng-orange-100);
   color: var(--ng-orange-700);
   flex-shrink: 0;
}
.ng-candidate-edit-note-ic .lucide,
.ng-candidate-edit-note-ic [data-lucide] { width: 16px; height: 16px; }
.ng-candidate-edit-note p {
   font-size: 13px;
   line-height: 1.5;
   margin: 0;
}

/* Actions */
.ng-candidate-edit-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding-top: 4px;
   flex-wrap: wrap;
}
.ng-candidate-edit-back,
.ng-candidate-edit-submit {
   display: inline-flex;
   align-items: center;
   gap: 8px;
}
.ng-candidate-edit-back .lucide,
.ng-candidate-edit-back [data-lucide] { width: 16px; height: 16px; }

/* Hints */
.ng-hint {
   font-size: 12px;
   color: var(--fg-3);
   margin: 6px 0 0;
}

/* Responsive — candidate edit */
@media (max-width: 860px) {
   .ng-candidate-edit-card-head { flex-direction: column; align-items: stretch; }
   .ng-candidate-edit-meta { width: 100%; }
}

@media (max-width: 640px) {
   .ng-candidate-edit { padding: 16px 12px 36px; }
   .ng-candidate-edit-title { font-size: 22px; }
   .ng-candidate-edit-meta { grid-template-columns: 1fr; }
   .ng-candidate-edit-actions {
      flex-direction: column-reverse;
      align-items: stretch;
   }
   .ng-candidate-edit-back,
   .ng-candidate-edit-submit { justify-content: center; width: 100%; }
   .ng-candidate-edit-body { padding: 16px; }
   .ng-candidate-edit-section { padding: 14px; }
}

/* Commission: lookup frame shows a loader while the BAC answers */
@keyframes ng-spin { to { transform: rotate(360deg); } }
turbo-frame#dossier_lookup { display: block; position: relative; min-height: 120px; }
turbo-frame#dossier_lookup > * { transition: opacity 0.15s ease; }
turbo-frame#dossier_lookup[busy] > * { opacity: 0.45; pointer-events: none; }
turbo-frame#dossier_lookup[busy]::after {
  content: ""; position: absolute; top: 96px; left: 50%; width: 34px; height: 34px; margin-left: -17px;
  border-radius: 50%; border: 3px solid var(--border-default); border-top-color: var(--ng-green-500);
  animation: ng-spin 0.7s linear infinite;
}

/* Commission: live averages and report card preview */
.ng-live { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.ng-live-item { border: 1px solid var(--border-subtle); background: var(--n-25); border-radius: 13px; padding: 12px 14px; }
.ng-live-item .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-3); }
.ng-live-item .v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg-1); }
.ng-live-item.accent { border-color: var(--ng-green-500); background: var(--ng-green-50); }
.ng-live-item.accent .v { color: var(--ng-green-700); }

.ng-preview { position: fixed; inset: 0; margin: auto; border: 0; padding: 0; border-radius: 18px; width: min(960px, 94vw); height: min(86vh, 900px); box-shadow: var(--shadow-md); background: #fff; }
.ng-preview::backdrop { background: rgba(18, 22, 19, 0.55); }
.ng-preview[open] { display: flex; flex-direction: column; }
.ng-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); }
.ng-preview-title { font-weight: 700; }
.ng-preview-body { position: relative; flex: 1; overflow: auto; background: var(--n-50); display: flex; align-items: flex-start; justify-content: center; }
.ng-preview-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.ng-preview-image { max-width: 100%; height: auto; cursor: zoom-in; }
.ng-preview-image.zoomed { max-width: none; cursor: zoom-out; }
.ng-preview-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--n-50); z-index: 1; }
.ng-preview-loader[hidden] { display: none; }
.ng-preview-loader span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border-default); border-top-color: var(--ng-green-500); animation: ng-spin 0.7s linear infinite; }

/* Commission: inline report card next to the BAC data */
.ng-eyebrow-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-3); }
.ng-btn.active { border-color: var(--ng-green-500); background: var(--ng-green-50); color: var(--ng-green-700); }
.ng-preview-inline { position: relative; margin-top: 10px; height: 380px; border: 1px solid var(--border-subtle); border-radius: 13px; overflow: hidden; background: var(--n-50); }
.ng-preview-inline-body { width: 100%; height: 100%; overflow: auto; display: flex; justify-content: center; align-items: flex-start; }
.ng-select.sm select { padding: 6px 30px 6px 10px; font-size: 12.5px; }
.ng-select.sm .chev { right: 9px; width: 14px; height: 14px; }

/* Commission: confirmation modal */
.ng-modal { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: 94vh; border: 0; padding: 0; border-radius: 18px; width: min(480px, 94vw); box-shadow: var(--shadow-md); background: #fff; color: var(--fg-1); }
.ng-modal::backdrop { background: rgba(18, 22, 19, 0.55); }
.ng-modal-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.ng-modal-title { font-size: 17px; font-weight: 700; }
.ng-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Commission dashboard: motivating hero, progress ring and team rankings */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }

.ng-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 16px 22px; margin-bottom: 14px; border-radius: 16px; color: #fff; background: var(--ng-green-500); box-shadow: var(--shadow-sm); }
.ng-hero-main { flex: 1 1 380px; min-width: 0; }
.ng-hero-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ng-hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; opacity: 0.8; }
.ng-hero-eyebrow .lucide, .ng-hero-chip .lucide, .ng-hero-btn .lucide { width: 14px; height: 14px; flex-shrink: 0; }
.ng-hero-title { font-size: clamp(19px, 2vw, 24px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.ng-hero-msg { font-size: 14px; margin-top: 2px; opacity: 0.92; }
.ng-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; }
.ng-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ng-hero-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.24); }
.ng-hero-chip strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.ng-hero-chip.hot { background: var(--ng-orange-500); border-color: var(--ng-orange-500); color: var(--ink); }
.ng-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ng-hero-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); transition: background var(--dur-fast) var(--ease-out); }
.ng-hero-btn:hover { background: rgba(255, 255, 255, 0.16); }
.ng-hero-btn.primary { background: #fff; color: var(--ng-green-700); border-color: #fff; }
.ng-hero-btn.primary:hover { background: var(--ng-green-50); }

.ng-ring { --size: 88px; flex-shrink: 0; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, 0.22) 0); }
.ng-ring-in { width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ng-green-700); }
.ng-ring-val { font-size: 11px; font-weight: 700; opacity: 0.9; line-height: 1; }
.ng-ring-val strong { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ng-ring-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-top: 2px; }

.ng-leader-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--ng-green-50); color: var(--ng-green-600); flex-shrink: 0; }
.ng-leader-ic .lucide { width: 17px; height: 17px; }
.ng-leaderboard.processed .ng-leader-ic { background: var(--ng-orange-50); color: var(--ng-orange-600); }
.ng-leaderboard { display: flex; flex-direction: column; height: 400px; }
.ng-leaderboard > .ng-card-head { flex-shrink: 0; }
.ng-leader-list { list-style: none; margin: 0; padding: 6px 12px 10px 18px; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--n-200, var(--n-200)) transparent; }
.ng-leader { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); }
.ng-leader:last-child { border-bottom: 0; }
.ng-leader-main { flex: 1; min-width: 0; }
.ng-leader-line { display: flex; align-items: center; gap: 8px; }
.ng-leader-name { font-weight: 600; font-size: 13.5px; color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ng-leader.is-first .ng-leader-name { font-weight: 800; }
.ng-leader-count { margin-left: auto; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--fg-1); }
.ng-rank { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--fg-3); background: var(--n-50); flex-shrink: 0; }
.ng-rank .lucide { width: 14px; height: 14px; }
.ng-rank.rank-1 { background: linear-gradient(135deg, var(--ng-orange-300), var(--ng-gold-500)); color: var(--ink); box-shadow: 0 2px 8px rgba(232, 167, 18, 0.45); }
.ng-rank.rank-2 { background: linear-gradient(135deg, var(--n-100), var(--n-300)); color: var(--n-700); }
.ng-rank.rank-3 { background: linear-gradient(135deg, var(--ng-orange-200), var(--ng-orange-600)); color: var(--ink); }
.ng-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.ng-pill .lucide { width: 11px; height: 11px; }
.ng-pill.today { background: var(--ng-green-50); color: var(--ng-green-700); }
.ng-pill.streak { background: var(--ng-orange-50); color: var(--ng-orange-600); }

@media (prefers-reduced-motion: no-preference) {
  .ng-ring { animation: ng-ring-in 1.1s var(--ease-out) both; }
  .ng-leader { animation: ng-rise 0.5s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
}
@keyframes ng-ring-in { from { --p: 0; } }
@keyframes ng-rise { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1400px) {
  .ng-commission .ng-leaderboard { height: 340px; }
}

/* Commission: waiting state of the lookup (illustration, steps, activity) */
.ng-lookup-empty { display: flex; justify-content: center; padding: 48px 16px 24px; }

.ng-lookup-art svg { display: block; width: min(380px, 80vw); height: auto; }
.ng-lookup-art .sheet { fill: #fff; stroke: var(--border-default); stroke-width: 2; }
.ng-lookup-art .bar { fill: var(--n-100); }
.ng-lookup-art .bar.strong { fill: var(--ng-green-500); opacity: 0.85; }
.ng-lookup-art .chip { fill: var(--ng-green-100); }
.ng-lookup-art .chip.alt { fill: var(--ng-orange-100); }
.ng-lookup-art .scan { fill: var(--ng-green-500); opacity: 0.35; animation: ng-scan 3.2s ease-in-out infinite; }
.ng-lookup-art .lens { animation: ng-lens 3.2s ease-in-out infinite; }
.ng-lookup-art .lens-glass { fill: rgba(18, 121, 20, 0.08); }
.ng-lookup-art .lens-ring, .ng-lookup-art .lens-handle { stroke: var(--ng-green-500); stroke-width: 5; fill: none; stroke-linecap: round; }
.ng-lookup-art .tick { transform-box: fill-box; transform-origin: center; animation: ng-tick 3.2s ease-in-out infinite; }
.ng-lookup-art .tick-bg { fill: var(--ng-green-500); }
.ng-lookup-art .tick-mark { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

@keyframes ng-scan { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 0.4; } 85% { opacity: 0.4; } 100% { transform: translateY(133px); opacity: 0; } }
@keyframes ng-lens {
  0% { transform: translate(68px, 52px); }
  30% { transform: translate(118px, 84px); }
  60% { transform: translate(84px, 112px); }
  100% { transform: translate(68px, 52px); }
}
@keyframes ng-tick { 0%, 55% { transform: scale(0); } 70% { transform: scale(1.15); } 80%, 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .ng-lookup-art .scan, .ng-lookup-art .lens, .ng-lookup-art .tick { animation: none; }
  .ng-lookup-art .lens { transform: translate(100px, 84px); }
}

/* =============================================================================
    Landing hero: flat colours, split layout, photo on the right
    ============================================================================= */
.lp-hero {
  background: var(--niger-cream);
  padding: 112px 24px 72px;
  position: relative;
  overflow: clip;
}

.lp-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  max-width: 1200px;
  margin: 0 auto;
}

.lp-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font: 600 13px/1 Inter, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #14231a;
}


.lp-hero-title {
  margin: 0 0 24px;
  font: 700 clamp(2.5rem, 5.4vw, 4.5rem)/1.04 Poppins, Inter, sans-serif;
  letter-spacing: -0.035em;
  color: #14231a;
}
.lp-hero-title > span:not(.lp-word) { color: var(--niger-orange-dark); }

.lp-hero-lead {
  max-width: 34rem;
  margin: 0 0 36px;
  font: 400 1.125rem/1.65 Inter, sans-serif;
  color: #3d4a41;
}

.lp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

.lp-hero-link {
  font: 600 1rem/1 Inter, sans-serif;
  color: #14231a;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--niger-green);
  transition: color 160ms ease, border-color 160ms ease;
}
.lp-hero-link:hover { color: var(--niger-green); }

.lp-hero-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 56px;
  font: 500 0.9rem/1 Inter, sans-serif;
  color: #3d4a41;
}
.lp-hero-more:hover { color: var(--niger-orange-dark); }

.lp-hero-visual { position: relative; isolation: isolate; }

.lp-hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  object-position: 55% 40%;
  border-radius: 28px;
}
/* The photo scales inside its frame during the entrance, so it must be clipped */
.lp-hero-photo { clip-path: inset(0 round 28px); }

.lp-hero-block { position: absolute; z-index: -1; border-radius: 28px; }
.lp-hero-block-orange { inset: 28px -28px -28px 28px; background: var(--niger-orange); }
.lp-hero-block-green { width: 38%; height: 26%; left: -24px; bottom: -24px; background: var(--niger-green); border-radius: 20px; }

/* Entrance: hidden until reveal_controller animates it; the fallback shows it if JS never runs */
@media (prefers-reduced-motion: no-preference) {
  .lp-hero [data-reveal], .lp-hero [data-split], .lp-auth [data-reveal] { opacity: 0; animation: lp-reveal-fallback 0s 2.5s forwards; }
}
@keyframes lp-reveal-fallback { to { opacity: 1; } }

@media (max-width: 900px) {
  .lp-hero { padding: 96px 20px 56px; }
  .lp-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .lp-hero-more { display: none; }
  .lp-hero-block-orange { inset: 20px -12px -20px 20px; }
  .lp-hero-block-green { left: -12px; bottom: -12px; }
}

/* =============================================================================
    Landing sections below the hero: flat colours, hairlines, large type
    ============================================================================= */
.lp-section { padding: 104px 24px; position: relative; overflow: clip; }
.lp-section-white { background: #fff; }
.lp-section-cream { background: var(--niger-cream); }
.lp-section-green { background: var(--niger-green-dark); color: #fff; }
.lp-wrap { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }

/* Scroll-triggered entrance: armed by reveal_controller once Motion has loaded */
@media (prefers-reduced-motion: no-preference) {
  .lp-armed [data-reveal], .lp-armed [data-split] { opacity: 0; }
}

.lp-h2 {
  margin: 0 0 20px;
  font: 700 clamp(2rem, 3.8vw, 3.25rem)/1.1 Poppins, Inter, sans-serif;
  letter-spacing: -0.03em;
  color: #14231a;
}
.lp-h2 > span:not(.lp-word) { color: var(--niger-orange-dark); }
.lp-h2-light { color: #fff; }
.lp-h2-light > span:not(.lp-word) { color: var(--niger-orange-light); }

.lp-lead { margin: 0 0 18px; max-width: 36rem; font: 400 1.0625rem/1.7 Inter, sans-serif; color: #3d4a41; }
.lp-lead-light { color: rgba(255, 255, 255, 0.86); }

.lp-section-head { max-width: 40rem; margin-bottom: 56px; }

/* Heading on the left, content on the right */
.lp-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.lp-split-head { position: sticky; top: 112px; }

/* Services: numbered rows separated by hairlines */
.lp-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid #14231a; }
.lp-row { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 32px 0; border-bottom: 1px solid rgba(20, 35, 26, 0.18); }
.lp-row { position: relative; }
.lp-row::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--niger-orange); transform: scaleX(0); transform-origin: left; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.lp-row:hover::after { transform: scaleX(1); }
.lp-row h3, .lp-row-number { transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); }
.lp-row:hover h3 { transform: translateX(10px); }
.lp-row:hover .lp-row-number { transform: translateX(-4px); }
.lp-row-number { font: 600 1rem/1.6 Poppins, sans-serif; color: var(--niger-orange-dark); }
.lp-row h3 { margin: 0 0 8px; font: 600 1.5rem/1.25 Poppins, Inter, sans-serif; letter-spacing: -0.02em; color: #14231a; }
.lp-row p { margin: 0; font: 400 1rem/1.65 Inter, sans-serif; color: #3d4a41; max-width: 32rem; }

/* Steps: four columns topped by a rule */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.lp-step { position: relative; padding-top: 24px; border-top: 3px solid #14231a; }
.lp-armed .lp-step { border-top-color: rgba(20, 35, 26, 0.15); }
.lp-armed .lp-step::before { content: ""; position: absolute; top: -3px; left: 0; width: 100%; height: 3px; background: #14231a; transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.lp-armed .lp-step.is-in::before { transform: scaleX(1); }
.lp-step-number { display: block; margin-bottom: 20px; font: 700 4rem/1 Poppins, sans-serif; letter-spacing: -0.04em; color: var(--niger-orange); }
.lp-step h3 { margin: 0 0 10px; font: 600 1.2rem/1.3 Poppins, Inter, sans-serif; color: #14231a; }
.lp-step p { margin: 0; font: 400 0.975rem/1.65 Inter, sans-serif; color: #3d4a41; }

/* About: photo on the left with flat colour block */
.lp-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 80px; align-items: center; }
.lp-about-visual { position: relative; isolation: isolate; }
.lp-about-photo { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 46% 50%; border-radius: 28px; }
.lp-about-block { inset: 28px 28px -28px -28px; background: var(--niger-green); }

.lp-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin: 36px 0 0; }
.lp-value { padding-top: 16px; border-top: 2px solid var(--niger-orange); }
.lp-value dt { margin-bottom: 6px; font: 600 1.05rem/1.3 Poppins, Inter, sans-serif; color: #14231a; }
.lp-value dd { margin: 0; font: 400 0.95rem/1.6 Inter, sans-serif; color: #3d4a41; }

/* Contact band */
.lp-hero-link-light { color: #fff; border-bottom-color: var(--niger-orange-light); }
.lp-hero-link-light:hover { color: var(--niger-orange-light); }
.lp-contact { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.35); }
.lp-contact li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.lp-contact span { font: 600 0.8rem/1.9 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.lp-contact a, .lp-contact p { margin: 0; font: 600 1.35rem/1.5 Poppins, Inter, sans-serif; color: #fff; }
.lp-contact a:hover { color: var(--niger-orange-light); }

/* Footer */
.lp-footer { position: relative; overflow: clip; background: var(--niger-cream); color: #3d4a41; padding: 88px 24px 28px; }
.lp-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; }
.lp-footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 700 1.35rem/1 Poppins, sans-serif; color: #14231a; }
.lp-footer-logo { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; }
.lp-footer-about { max-width: 24rem; margin: 0; line-height: 1.7; }
.lp-footer h3 { margin: 0 0 18px; font: 600 0.8rem/1 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #14231a; }
.lp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-footer li a { position: relative; display: inline-block; color: #3d4a41; transition: color 160ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.lp-footer li a:hover { color: var(--niger-orange-dark); transform: translateX(6px); }

/* Oversized decorative wordmark, cropped by the bottom edge of the band */
.lp-footer-wordmark { margin: 48px 0 -0.1em; font: 800 clamp(5.5rem, 24vw, 21rem)/0.8 Poppins, sans-serif; letter-spacing: -0.05em; text-align: center; color: #14231a; opacity: 0.06; user-select: none; white-space: nowrap; }

.lp-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(20, 35, 26, 0.18); }
.lp-footer-legal { margin: 0; font-size: 0.85rem; }
.lp-footer-top { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1.5px solid #14231a; border-radius: 999px; font: 600 0.85rem/1 Inter, sans-serif; color: #14231a; transition: background 200ms ease, color 200ms ease; }
.lp-footer-top svg { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.lp-footer-top:hover { background: #14231a; color: var(--niger-cream); }
.lp-footer-top:hover svg { transform: translateY(-3px); }

@media (max-width: 900px) {
  .lp-section { padding: 72px 20px; }
  .lp-split, .lp-about { grid-template-columns: 1fr; gap: 40px; }
  .lp-split-head { position: static; }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .lp-values { grid-template-columns: 1fr; }
  .lp-about-block { inset: 16px 16px -16px -16px; }
  .lp-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .lp-footer-grid > :first-child { grid-column: 1 / -1; }
  .lp-row { grid-template-columns: 48px 1fr; }
  .lp-contact li { grid-template-columns: 1fr; gap: 4px; }
}

/* =============================================================================
    Landing backgrounds: woven pattern, rotating sun and floating shapes
    ============================================================================= */
.lp-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Saharan-weave inspired lattice; drawn in ink on light sections, in white on the green one */
.lp-bg-pattern {
  position: absolute;
  inset: -60px 0;
  opacity: 0.075;
  background-size: 72px 72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%2314231a' stroke-width='1.4'%3E%3Cpath d='M36 6 66 36 36 66 6 36Z'/%3E%3Cpath d='M36 22 50 36 36 50 22 36Z'/%3E%3Cpath d='M36 32 40 36 36 40 32 36Z' fill='%2314231a'/%3E%3Cpath d='M0 0h8M0 0v8M72 0h-8M72 0v8M0 72h8M0 72v-8M72 72h-8M72 72v-8'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to left, #000 15%, transparent 75%);
  mask-image: linear-gradient(to left, #000 15%, transparent 75%);
}
.lp-bg-dark .lp-bg-pattern {
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M36 6 66 36 36 66 6 36Z'/%3E%3Cpath d='M36 22 50 36 36 50 22 36Z'/%3E%3Cpath d='M36 32 40 36 36 40 32 36Z' fill='%23ffffff'/%3E%3Cpath d='M0 0h8M0 0v8M72 0h-8M72 0v8M0 72h8M0 72v-8M72 72h-8M72 72v-8'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to right, #000 15%, transparent 75%);
  mask-image: linear-gradient(to right, #000 15%, transparent 75%);
}

/* Sun of the flag: orange disc with rays, turning slowly */
.lp-sun { position: absolute; top: 50%; right: -220px; width: 780px; height: 780px; margin-top: -390px; color: var(--niger-orange); opacity: 0.17; }
.lp-sun-svg { display: block; width: 100%; height: 100%; animation: lp-spin 90s linear infinite; }
.lp-bg-dark .lp-sun { right: auto; left: -260px; color: var(--niger-orange-light); opacity: 0.2; }
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* Floating outlines and dots */
.lp-float { position: absolute; display: block; animation: lp-float 9s ease-in-out infinite; }
.lp-float-ring { width: 120px; height: 120px; border: 3px solid var(--niger-orange); border-radius: 50%; opacity: 0.3; top: 22%; left: 46%; }
.lp-float-diamond { width: 64px; height: 64px; border: 3px solid var(--niger-green); transform: rotate(45deg); opacity: 0.28; bottom: 14%; left: 42%; animation-delay: -3s; }
.lp-float-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--niger-orange); opacity: 0.35; top: 62%; right: 8%; animation-delay: -6s; }
.lp-bg-dark .lp-float-ring { border-color: #fff; opacity: 0.22; left: auto; right: 12%; top: 16%; }
.lp-bg-dark .lp-float-diamond { border-color: var(--niger-orange-light); left: auto; right: 34%; bottom: 12%; }
.lp-bg-dark .lp-float-dot { background: #fff; opacity: 0.3; right: auto; left: 8%; top: 20%; }
@keyframes lp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }

/* Below the hero the shapes stay at the edges so they never sit on the text */
.lp-section .lp-float-ring { left: auto; right: 2%; top: 8%; width: 84px; height: 84px; }
.lp-section .lp-float-diamond { left: auto; right: 3%; bottom: 6%; width: 48px; height: 48px; }
.lp-section .lp-float-dot { right: auto; left: 1.5%; top: 46%; width: 20px; height: 20px; }
.lp-section .lp-bg-dark .lp-sun, .lp-bg-dark .lp-sun { opacity: 0.14; }

/* Words of a split title rise from behind a mask */
.lp-word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0; margin: -0.1em 0; }
.lp-word-inner { display: inline-block; will-change: transform; }

@media (max-width: 900px) {
  .lp-sun { width: 520px; height: 520px; margin-top: -260px; right: -260px; opacity: 0.14; }
  .lp-bg-dark .lp-sun { left: -300px; }
  .lp-float-ring { width: 72px; height: 72px; left: auto; right: 8%; top: 12%; }
  .lp-float-diamond { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-sun-svg, .lp-float { animation: none; }
}

/* =============================================================================
    Landing navbar: transparent on top, solid once scrolled, progress line, mobile menu
    ============================================================================= */
.lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background 250ms ease, border-color 250ms ease, box-shadow 250ms ease; }
.lp-nav.is-scrolled { background: rgba(255, 255, 255, 0.96); border-bottom-color: rgba(20, 35, 26, 0.1); box-shadow: 0 6px 24px rgba(20, 35, 26, 0.06); }
.lp-nav-inner { max-width: 1200px; height: 72px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: height 250ms ease; }
.lp-nav.is-scrolled .lp-nav-inner { height: 64px; }

.lp-nav-brand { display: inline-flex; align-items: center; gap: 12px; color: #14231a; }
.lp-nav-logo { width: 42px; height: 42px; border-radius: 999px; object-fit: cover; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); }
.lp-nav-brand:hover .lp-nav-logo { transform: rotate(-12deg) scale(1.06); }
.lp-nav-name { display: flex; flex-direction: column; line-height: 1.1; }
.lp-nav-name strong { font: 700 1.25rem/1 Poppins, sans-serif; letter-spacing: -0.02em; }
.lp-nav-name small { margin-top: 3px; font: 500 0.66rem/1.2 Inter, sans-serif; letter-spacing: 0.04em; color: #5b675f; white-space: nowrap; }
@media (max-width: 1100px) { .lp-nav-name small { display: none; } }

.lp-nav-menu { display: flex; align-items: center; flex: 1; justify-content: space-between; gap: 32px; }
.lp-nav-links { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 6px; }
.lp-nav-links a { position: relative; display: block; padding: 8px 14px; font: 500 0.95rem/1 Inter, sans-serif; color: #3d4a41; transition: color 160ms ease; }
.lp-nav-links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--niger-orange); transform: scaleX(0); transform-origin: left; transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1); }
.lp-nav-links a:hover, .lp-nav-links a[aria-current] { color: #14231a; }
.lp-nav-links a:hover::after, .lp-nav-links a[aria-current]::after { transform: scaleX(1); }

.lp-nav-actions { display: flex; align-items: center; gap: 18px; }
.lp-nav-login { font: 600 0.95rem/1 Inter, sans-serif; color: #14231a; transition: color 160ms ease; }
.lp-nav-login:hover { color: var(--niger-orange-dark); }
.lp-nav-lookup { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px solid var(--niger-orange); border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: #14231a; font: 600 0.9rem/1 Inter, sans-serif; white-space: nowrap; flex-shrink: 0; transition: background-color 160ms ease, color 160ms ease; }
.lp-nav-lookup:hover, .lp-nav-lookup:focus-visible { outline: none; background: var(--niger-orange); color: #fff; }
.lp-nav-lookup-short { display: none; }
@media (max-width: 520px) { .lp-nav-lookup { padding: 8px 12px; font-size: 0.85rem; } .lp-nav-lookup-long { display: none; } .lp-nav-lookup-short { display: inline; } .lp-nav-inner { gap: 10px; } }

/* Reading progress */
.lp-nav-progress { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--niger-orange); transform: scaleX(var(--lp-progress, 0)); transform-origin: left; }

.lp-nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.lp-nav-toggle span { display: block; width: 22px; height: 2px; background: #14231a; border-radius: 2px; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease; }
.lp-nav[data-open] .lp-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-nav[data-open] .lp-nav-toggle span:nth-child(2) { opacity: 0; }
.lp-nav[data-open] .lp-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .lp-nav-inner { height: 64px; padding: 0 20px; }
  .lp-nav-name small { display: none; }
  .lp-nav-toggle { display: flex; }
  .lp-nav[data-open] { background: #fff; }
  .lp-nav-menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 24px; background: #fff; border-bottom: 1px solid rgba(20, 35, 26, 0.1); box-shadow: 0 16px 24px rgba(20, 35, 26, 0.08); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms; }
  .lp-nav[data-open] .lp-nav-menu { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .lp-nav-links { flex-direction: column; margin: 0; gap: 0; }
  .lp-nav-links a { padding: 16px 0; font-size: 1.05rem; border-bottom: 1px solid rgba(20, 35, 26, 0.08); }
  .lp-nav-links a::after { display: none; }
  .lp-nav-links a[aria-current] { color: var(--niger-orange-dark); }
  .lp-nav-actions { padding-top: 20px; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-nav, .lp-nav-inner, .lp-nav-logo, .lp-nav-links a::after, .lp-footer li a { transition: none; }
}

/* The footer keeps its pattern but no floating shapes over the columns */
.lp-footer .lp-float { display: none; }

/* =============================================================================
    Authentication pages: photo panel on the left, form on the right
    ============================================================================= */
.lp-auth { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); min-height: 100vh; background: #fff; font-family: Inter, sans-serif; }

.lp-auth-visual { position: relative; overflow: clip; background: var(--niger-cream); padding: 40px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.lp-auth-brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; color: #14231a; }
.lp-auth-photo { position: relative; z-index: 1; width: min(100%, 520px); margin: 0 auto; }
.lp-auth-quote { position: relative; z-index: 1; margin: 0; font: 700 clamp(1.6rem, 2.6vw, 2.4rem)/1.12 Poppins, Inter, sans-serif; letter-spacing: -0.03em; color: #14231a; }
.lp-auth-quote span { color: var(--niger-orange-dark); }

.lp-auth-main { display: flex; flex-direction: column; padding: 32px 40px 48px; }
.lp-auth-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.lp-auth-brand-mobile { display: none; }
.lp-auth-back { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: 500 0.9rem/1 Inter, sans-serif; color: #3d4a41; transition: color 160ms ease; }
.lp-auth-back svg { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.lp-auth-back:hover { color: var(--niger-orange-dark); }
.lp-auth-back:hover svg { transform: translateX(-4px); }

.lp-auth-card { width: min(100%, 440px); margin: auto; padding: 32px 0; }

.lp-auth-head { margin-bottom: 32px; }
.lp-auth-head h1 { margin: 0 0 12px; font: 700 clamp(2rem, 3.4vw, 2.75rem)/1.08 Poppins, Inter, sans-serif; letter-spacing: -0.035em; color: #14231a; }
.lp-auth-head h1 span { color: var(--niger-orange-dark); }
.lp-auth-head p { margin: 0; font: 400 1rem/1.6 Inter, sans-serif; color: #3d4a41; }
.lp-auth-head strong { color: #14231a; }

.lp-auth-form { display: grid; gap: 20px; }
.lp-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-auth-field { display: grid; gap: 8px; }
.lp-auth-field label { font: 600 0.85rem/1.2 Inter, sans-serif; color: #14231a; }
.lp-auth-hint { margin: 0; font-size: 0.8rem; color: #5b675f; }

.lp-input { width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid rgba(20, 35, 26, 0.28); border-radius: 12px; background: #fff; font: 400 1rem/1 Inter, sans-serif; color: #14231a; transition: border-color 160ms ease, box-shadow 160ms ease; }
.lp-input::placeholder { color: #8a948d; }
.lp-input:hover { border-color: rgba(20, 35, 26, 0.5); }
.lp-input:focus { outline: none; border-color: var(--niger-orange); box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.18); }
.lp-input.is-error { border-color: #c0392b; }

.lp-phone { display: flex; align-items: stretch; }
.lp-phone-prefix { display: inline-flex; align-items: center; padding: 0 16px; border: 1.5px solid rgba(20, 35, 26, 0.28); border-right: 0; border-radius: 12px 0 0 12px; background: var(--niger-cream); font: 600 1rem/1 Inter, sans-serif; color: #14231a; }
.lp-phone .lp-input { border-radius: 0 12px 12px 0; }

.lp-auth-submit { width: 100%; margin-top: 4px; justify-content: center; cursor: pointer; }

.lp-auth-check { display: flex; align-items: flex-start; gap: 10px; font: 400 0.85rem/1.5 Inter, sans-serif; color: #3d4a41; cursor: pointer; }
.lp-auth-check input { -webkit-appearance: none; appearance: none; margin-top: 2px; width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid rgba(20, 35, 26, 0.45); border-radius: 5px; background: #fff center / 12px no-repeat; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.lp-auth-check input:checked { border-color: var(--niger-orange); background-color: var(--niger-orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
.lp-auth-check input:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.25); }
.lp-auth-check a { color: var(--niger-orange-dark); font-weight: 600; }

.lp-auth-note { margin: 28px 0 0; font-size: 0.8rem; color: #5b675f; }

.lp-auth-links { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(20, 35, 26, 0.14); display: grid; gap: 10px; justify-items: start; }
.lp-auth-links p { margin: 0; font-size: 0.9rem; color: #3d4a41; }
.lp-auth-link { font: 600 0.9rem/1.3 Inter, sans-serif; color: #14231a; border-bottom: 2px solid var(--niger-green); transition: color 160ms ease; }
.lp-auth-link:hover { color: var(--niger-green); }
.lp-auth-muted { font-size: 0.9rem; color: #8a948d; }

.lp-auth-user { display: flex; align-items: center; gap: 14px; margin: -8px 0 24px; padding: 14px 16px; border: 1.5px solid rgba(20, 35, 26, 0.14); border-radius: 14px; background: var(--niger-cream); }
.lp-auth-user > div { flex: 1; min-width: 0; display: grid; }
.lp-auth-user strong { font: 600 0.95rem/1.3 Inter, sans-serif; color: #14231a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-auth-user small { font-size: 0.8rem; color: #5b675f; }
.lp-auth-avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: var(--niger-orange); color: #fff; font: 700 1rem/1 Poppins, sans-serif; flex-shrink: 0; }
/* Find my boursier number: a page with that one goal, no photo and no decoration */
.lp-lookup-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--niger-cream); }
.lp-lookup-top { width: 100%; max-width: 640px; margin: 0 auto; padding: 20px 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-lookup-main { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 20px 20px 48px; }
.lp-lookup-panel { padding: clamp(20px, 5vw, 36px); border-radius: 20px; background: #fff; border: 1px solid rgba(20, 35, 26, 0.12); box-shadow: 0 8px 28px rgba(20, 35, 26, 0.06); }
.lp-lookup-panel .lp-auth-head { margin-bottom: 24px; }
.lp-lookup-panel .lp-auth-head h1 { font-size: clamp(1.7rem, 5vw, 2.2rem); }
/* Find my boursier number */
.lp-lookup-input { height: 60px; font-size: 1.15rem; }
.lp-lookup-results { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(20, 35, 26, 0.14); display: grid; gap: 14px; }
.lp-lookup-title { margin: 0; font: 700 1.15rem/1.3 Poppins, Inter, sans-serif; color: #14231a; }
.lp-lookup-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.lp-lookup-card { display: grid; gap: 14px; padding: 16px; border: 1.5px solid rgba(20, 35, 26, 0.14); border-radius: 14px; background: var(--niger-cream); }
.lp-lookup-who { display: grid; gap: 2px; min-width: 0; }
.lp-lookup-who strong { font: 600 1rem/1.35 Inter, sans-serif; color: #14231a; overflow-wrap: anywhere; }
.lp-lookup-who small { font-size: 0.85rem; color: #5b675f; }
.lp-lookup-number { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: #14231a; color: #fff; justify-items: start; }
.lp-lookup-number-label { font: 500 0.75rem/1.2 Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.lp-lookup-number strong { font: 700 clamp(1.6rem, 6vw, 2rem)/1.1 Poppins, Inter, sans-serif; letter-spacing: 0.08em; user-select: all; }
.lp-lookup-copy { padding: 6px 14px; border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 999px; background: transparent; color: #fff; font: 600 0.85rem/1.2 Inter, sans-serif; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.lp-lookup-copy:hover, .lp-lookup-copy:focus-visible { outline: none; background: #fff; color: #14231a; }
.lp-lookup-notice { padding: 16px; border-radius: 14px; border: 1.5px solid rgba(20, 35, 26, 0.14); background: var(--niger-cream); display: grid; gap: 6px; }
.lp-lookup-notice.is-warning { border-color: rgba(255, 140, 0, 0.55); }
.lp-lookup-notice strong { font: 600 1rem/1.3 Inter, sans-serif; color: #14231a; }
.lp-lookup-notice p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: #3d4a41; }
.lp-lookup-notice a { color: var(--niger-orange-dark); font-weight: 600; }
.lp-auth-badge { padding: 4px 10px; border-radius: 999px; background: #14231a; color: #fff; font: 600 0.7rem/1.2 Inter, sans-serif; letter-spacing: 0.04em; flex-shrink: 0; }

/* Six-digit verification code */
.lp-code { display: flex; gap: 10px; margin: 4px 0; }
.lp-code-input { flex: 1; min-width: 0; max-width: 58px; height: 62px; padding: 0; text-align: center; font: 700 1.6rem/1 Poppins, Inter, sans-serif; color: #14231a; border: 1.5px solid rgba(20, 35, 26, 0.28); border-radius: 12px; background: #fff; transition: border-color 160ms ease, box-shadow 160ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.lp-code-input:focus { outline: none; border-color: var(--niger-orange); box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.18); transform: translateY(-2px); }

@media (max-width: 900px) {
  .lp-auth { grid-template-columns: 1fr; }
  .lp-auth-visual { display: none; }
  .lp-auth-main { padding: 20px 20px 40px; }
  .lp-auth-brand-mobile { display: inline-flex; }
  .lp-auth-card { margin: 8px auto 0; padding: 24px 0; }
}

/* Toggle switch used by the admin settings */
.ng-switch { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.ng-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ng-switch-track { position: relative; flex-shrink: 0; width: 48px; height: 28px; border-radius: 999px; background: var(--n-300); transition: background 200ms ease; }
.ng-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.ng-switch input:checked + .ng-switch-track { background: var(--ng-green-500); }
.ng-switch input:checked + .ng-switch-track::after { transform: translateX(20px); }
.ng-switch input:focus-visible + .ng-switch-track { box-shadow: 0 0 0 4px rgba(18, 121, 20, 0.22); }
.ng-switch-label { display: grid; gap: 2px; }
.ng-switch-label small { color: var(--fg-3); font-size: 12.5px; }
/* Inside .ng-field the generic label style (small uppercase) must not leak onto the switch text */
.ng-field > .ng-switch { font-size: 13.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg-1); }

/* Last column of a wide table that stays visible while the table scrolls sideways */
.ng-tbl .ng-sticky-end { position: sticky; right: 0; background: #fff; box-shadow: -1px 0 0 var(--border-subtle); white-space: nowrap; }
.ng-tbl thead .ng-sticky-end { background: var(--n-25); }

/* Before / after table: rows whose value changes are highlighted */
.ng-diff-changed td { background: var(--ng-orange-50); }
.ng-diff-changed td:last-child { font-weight: 700; color: var(--ng-orange-700); }

/* Checkbox with its text, e.g. the series list of the commission settings */
.ng-check-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: 9px; background: #fff; color: var(--fg-1); font-size: 13.5px; line-height: 1.35; cursor: pointer; }
.ng-check-row:hover { border-color: var(--ng-green-500); }
.ng-check-row input { flex-shrink: 0; accent-color: var(--ng-green-600); }
.ng-check-row small { color: var(--fg-3); }
.ng-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }

/* Notice on the landing page while online applications are closed */
.lp-hero-closed { display: flex; align-items: flex-start; gap: 12px; max-width: 34rem; margin: 0 0 32px; padding: 14px 18px; border-left: 4px solid var(--niger-orange); background: #fff; font: 500 0.975rem/1.55 Inter, sans-serif; color: #14231a; }
.lp-hero-closed svg { flex-shrink: 0; margin-top: 2px; color: var(--niger-orange-dark); }

/* Commission: centred confirmation popup after a dossier is saved */
.ng-confirm { width: min(400px, 92vw); text-align: center; overflow: hidden; }
.ng-confirm[open] { animation: ng-confirm-in 360ms cubic-bezier(0.22, 1, 0.36, 1); }
.ng-confirm::backdrop { background: rgba(18, 22, 19, 0.5); animation: ng-confirm-fade 240ms ease; }
.ng-confirm-body { padding: 34px 28px 26px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ng-confirm-title { margin: 14px 0 2px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--fg-1); }
.ng-confirm-name { margin: 0; font-size: 16px; font-weight: 600; color: var(--fg-1); }
.ng-confirm-meta { margin: 0; font-size: 13px; color: var(--fg-3); }
.ng-confirm-average { margin: 18px 0 4px; padding: 12px 22px; border-radius: 14px; background: var(--ng-green-50, var(--ng-green-50)); display: grid; gap: 2px; }
.ng-confirm-average span { font-size: 12px; color: var(--fg-3); }
.ng-confirm-average strong { font-size: 30px; line-height: 1.1; font-weight: 800; color: var(--ng-green-600, var(--ng-green-500)); font-variant-numeric: tabular-nums; }
.ng-confirm-actions { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* The check draws itself: ring first, then the tick, with a small pop */
.ng-check { width: 112px; height: 112px; overflow: visible; }
.ng-check-ring { fill: none; stroke: var(--ng-green-500); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transform: rotate(-90deg); transform-origin: 60px 60px; animation: ng-check-draw 640ms 120ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.ng-check-mark { fill: none; stroke: var(--ng-green-500); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: ng-check-draw 380ms 640ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.ng-check { animation: ng-check-pop 420ms 960ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Remaining time before the popup closes by itself */
.ng-confirm-timer { display: block; height: 4px; background: var(--ng-green-500); transform-origin: left; animation: ng-confirm-timer var(--confirm-delay, 2200ms) linear forwards; }

/* Same popup for a rejection: red ring and cross */
.ng-confirm.is-rejected .ng-check-ring, .ng-confirm.is-rejected .ng-check-mark { stroke: var(--danger); }
.ng-confirm.is-rejected .ng-confirm-timer { background: var(--danger); }
@keyframes ng-check-draw { to { stroke-dashoffset: 0; } }
@keyframes ng-check-pop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ng-confirm-in { from { opacity: 0; transform: scale(0.88) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ng-confirm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ng-confirm-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .ng-confirm[open], .ng-confirm::backdrop, .ng-check, .ng-confirm-timer { animation: none; }
  .ng-check-ring, .ng-check-mark { animation: none; stroke-dashoffset: 0; }
}

/* =============================================================================
   Commission module on small or zoomed screens (about 1400 CSS px and below):
   narrower menu, tighter cards, tables and titles, so that more fits without scrolling
   ============================================================================= */
@media (max-width: 1400px) {
  .ng-commission .ng-page { padding: 18px 16px 36px; }
  .ng-commission .ng-page-head { margin-bottom: 14px; gap: 10px; }
  .ng-commission .ng-page-title { font-size: 22px; }
  .ng-commission .ng-page-sub { font-size: 13px; }
  .ng-commission .ng-card-head { padding: 11px 16px; }
  .ng-commission .ng-card-title { font-size: 14.5px; }
  .ng-commission .ng-card .p-5 { padding: 12px 16px; }
  .ng-commission .ng-card .p-4 { padding: 10px 14px; }
  .ng-commission .ng-kv { padding: 6px 0; font-size: 12.5px; }
  .ng-commission .ng-tbl { font-size: 12.5px; }
  .ng-commission .ng-tbl thead th { padding: 9px 12px; }
  .ng-commission .ng-tbl td { padding: 9px 12px; }
  .ng-commission .ng-live { gap: 8px; margin-top: 12px; }
  .ng-commission .ng-live-item { padding: 9px 12px; }
  .ng-commission .ng-live-item .v { font-size: 21px; }
  .ng-commission .ng-nav-item { padding-top: 7px; padding-bottom: 7px; }
}

@media (min-width: 861px) and (max-width: 1400px) {
  .ng-app.ng-commission { grid-template-columns: 208px 1fr; }
}

/* ---- Tom Select (searchable select): the look of .ng-select / .ng-input -------------------------------- */
.ts-wrapper { width: 100%; }
.ts-wrapper .ts-control { padding: 9px 34px 9px 12px; border: 1px solid var(--border-default); border-radius: 9px; background: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--fg-1); box-shadow: var(--shadow-inset); cursor: pointer; min-height: 0; }
.ts-wrapper .ts-control input { font-family: inherit; font-size: 13.5px; color: var(--fg-1); }
.ts-wrapper .ts-control input::placeholder { color: var(--fg-4); font-weight: 400; }
.ts-wrapper.focus .ts-control { border-color: var(--ng-green-500); box-shadow: var(--shadow-focus); }
.ts-wrapper.disabled .ts-control { background: var(--n-25); opacity: 0.7; }
.ts-dropdown { border: 1px solid var(--border-default); border-radius: 9px; box-shadow: var(--shadow-md); font-family: inherit; font-size: 13.5px; z-index: 1100; }
.ts-dropdown .option { padding: 8px 12px; }
.ts-dropdown .active { background: var(--ng-green-50); color: var(--fg-1); }
.ts-dropdown .no-results { padding: 8px 12px; color: var(--fg-4); }
/* The activation dialog lets the list of a select go beyond its edge */
.ng-modal.ng-modal-open { overflow: visible; }
/* Two short fields side by side */
.ng-modal-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ng-modal-pair > .ng-field { min-width: 0; }
/* On a small or zoomed screen the form scrolls inside the dialog, and the buttons stay in view */
.ng-modal-open .ng-modal-body { max-height: 94vh; overflow-y: auto; border-radius: 18px; }
.ng-modal-open .ng-modal-actions { position: sticky; bottom: -22px; margin: 0 -22px -22px; padding: 12px 22px 22px; background: #fff; }
/* The arrow of Tom Select replaces the one of .ng-select, and a select in error keeps its red border */
.ng-select:has(.ts-wrapper) .chev { display: none; }
.ts-wrapper.is-error .ts-control { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(178,58,36,0.18); }

/* ---- Flatpickr (date picker): the colours of the app ---------------------------------------------------- */
.flatpickr-calendar { font-family: inherit; border: 1px solid var(--border-default); border-radius: 13px; box-shadow: var(--shadow-md); z-index: 1100; }
.flatpickr-day { border-radius: 8px; }
.flatpickr-day:hover { background: var(--ng-green-50); border-color: transparent; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--ng-green-500); border-color: var(--ng-green-500); color: #fff; }
.flatpickr-day.today:not(.selected) { border-color: var(--ng-green-500); }
.flatpickr-input.datepicker-alt { cursor: pointer; }
input.flatpickr-input[type="hidden"] { display: none; }

/* Dashboard of the scholarships: the charts first, in small cards that fit as many as the width allows */
.ng-dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ng-dash-grid-wide { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.ng-dash-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ng-dash-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ng-dash-card-title { font-size: 13.5px; font-weight: 700; color: var(--fg-1); }
.ng-dash-card-sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
/* The chart takes the height the card has (cards of a row are as tall as the tallest), 210px at least */
.ng-dash-chart { flex: 1; min-height: 210px; position: relative; }
.ng-dash-chart > div { position: absolute !important; inset: 0; height: auto !important; }
.ng-dash-empty { flex: 1; min-height: 210px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; color: var(--fg-3); }
.ng-dash-rows { display: flex; flex-direction: column; }
.ng-dash-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-subtle); font-size: 13.5px; }
.ng-dash-row:first-child { border-top: 0; }
.ng-dash-row .num { font-variant-numeric: tabular-nums; font-weight: 700; }

/* The scale as a grid: a country per row, a type of bourse per column, each amount edited where it is */
.ng-rate-wrap { overflow-x: auto; }
.ng-rate-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
.ng-rate-grid th { padding: 10px 8px; text-align: right; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); background: var(--n-50); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.ng-rate-grid th:first-child, .ng-rate-grid td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; padding-left: 20px; min-width: 150px; }
.ng-rate-grid td:first-child { background: #fff; font-weight: 600; border-right: 1px solid var(--border-subtle); }
.ng-rate-grid th:first-child { z-index: 2; }
.ng-rate-grid td { padding: 4px 6px; border-bottom: 1px solid var(--border-subtle); text-align: right; }
.ng-rate-grid tbody tr:hover td { background: var(--n-50); }
.ng-rate-grid tbody tr:hover td:first-child { background: var(--n-50); }
.ng-rate-cell { position: relative; min-width: 112px; }
.ng-rate-cell form { margin: 0; }
.ng-rate-input { width: 100%; box-sizing: border-box; padding: 7px 24px 7px 8px; text-align: right; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-1); background: transparent; border: 1px solid transparent; border-radius: 8px; -moz-appearance: textfield; appearance: textfield; }
.ng-rate-input::-webkit-outer-spin-button, .ng-rate-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ng-rate-input:hover { border-color: var(--border-default); background: #fff; }
.ng-rate-input:focus { outline: none; border-color: var(--ng-green-500); background: #fff; box-shadow: var(--shadow-focus); }
.ng-rate-input.is-empty { font-weight: 400; }
.ng-rate-input.is-empty::placeholder { color: var(--n-300); }
.ng-rate-input.is-saving { opacity: 0.5; }
.ng-rate-del { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); opacity: 0; background: none; border: 0; padding: 2px; cursor: pointer; color: var(--fg-4); line-height: 0; }
.ng-rate-del svg, .ng-rate-del .lucide { width: 13px; height: 13px; }
.ng-rate-cell:hover .ng-rate-del, .ng-rate-del:focus { opacity: 1; }
.ng-rate-del:hover { color: var(--danger); }

/* The list of the boursiers: finding somebody first (a big search), the main filters at hand, the others folded away */
.ng-searchpanel { padding: 16px 18px; }
.ng-searchbar { display: flex; gap: 10px; align-items: stretch; }
.ng-searchbar-field { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--border-default); border-radius: 11px; background: #fff; box-shadow: var(--shadow-inset); }
.ng-searchbar-field:focus-within { border-color: var(--ng-green-500); box-shadow: var(--shadow-focus); }
.ng-searchbar-field .lucide { width: 18px; height: 18px; color: var(--fg-4); flex-shrink: 0; }
.ng-searchbar-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; padding: 13px 0; color: var(--fg-1); }
.ng-searchbar .ng-btn { padding-left: 22px; padding-right: 22px; }
.ng-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; }
.ng-more { margin-top: 12px; }
.ng-more > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ng-green-600); list-style: none; padding: 4px 0; }
.ng-more > summary::-webkit-details-marker { display: none; }
.ng-more > summary .lucide { width: 15px; height: 15px; }
.ng-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.ng-chips-label { font-size: 12.5px; color: var(--fg-3); }
.ng-chip-filter { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 11px; border-radius: 999px; background: var(--ng-green-50); border: 1px solid var(--ng-green-200); color: var(--ng-green-700); font-size: 12.5px; text-decoration: none; }
.ng-chip-filter:hover { background: var(--ng-green-100); }
.ng-chip-filter .lucide { width: 14px; height: 14px; }
@media (max-width: 640px) { .ng-searchbar { flex-direction: column; } }

/* A row of the list of the boursiers that unfolds its details underneath, with what can be done there */
.ng-tbl-expandable tr.ng-row-main { cursor: pointer; }
.ng-tbl-expandable tr.ng-row-main:hover td { background: var(--n-50); }
.ng-tbl-expandable tr.ng-row-main.is-open td { background: var(--n-50); }
/* While a row is unfolded the others step back (blurred), to read the one that is open; the pointer on one brings it back */
.ng-tbl-expandable > tbody > tr > td { transition: filter 0.15s, opacity 0.15s; }
.ng-tbl-expandable.has-open > tbody > tr:not(.is-open) > td { filter: blur(2.5px); opacity: 0.55; }
.ng-tbl-expandable.has-open > tbody > tr:not(.is-open):hover > td { filter: none; opacity: 1; }
.ng-row-toggle .lucide { transition: transform 0.15s; }
.ng-row-toggle[aria-expanded="true"] .lucide { transform: rotate(180deg); }
.ng-tbl-expandable tr.ng-row-detail > td { padding: 0; background: var(--n-50); border-bottom: 1px solid var(--border-default); white-space: normal; }
.ng-detail { position: relative; padding: 16px 24px 20px; display: flex; flex-direction: column; gap: 14px; font-size: 14.5px; }
.ng-detail-link { position: absolute; top: 14px; right: 24px; font-size: 14px; }
.ng-detail-person { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; padding-right: 190px; }
.ng-detail-label { font-size: 12.5px; font-weight: 600; color: var(--fg-3); }
/* The awards of the boursier as lines, like the list, nothing but what is there */
.ng-detail .ng-award-table { width: 100%; border-collapse: separate; border-spacing: 0; --strip: #fff; }
.ng-detail-on-white .ng-award-table { --strip: var(--n-50); }
.ng-detail .ng-award-table th { padding: 6px 10px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--fg-3); white-space: nowrap; background: transparent; border: 0; text-transform: none; letter-spacing: 0; }
.ng-detail .ng-award-table th:first-child { padding-left: 16px; }
.ng-detail .ng-award-table td { padding: 8px 10px; text-align: left; vertical-align: middle; border: 0; background: transparent; }
.ng-detail .ng-award-table th.num, .ng-detail .ng-award-table td.num { text-align: right; white-space: nowrap; }
/* Each award is a strip of its own (its line and its notes), apart from the next one by a little space */
.ng-detail .ng-award-table tbody.ng-award-group td { background: var(--strip); }
.ng-detail .ng-award-table tbody.ng-award-group tr.ng-award-line td { padding-top: 12px; padding-bottom: 12px; }
.ng-detail .ng-award-table tbody.ng-award-group tr.ng-award-line td:first-child { white-space: nowrap; }
.ng-detail .ng-award-table tbody.ng-award-group tr.ng-award-extra td { padding: 0 16px 12px; }
.ng-detail .ng-award-table tbody.ng-award-group td:first-child { padding-left: 16px; }
.ng-detail .ng-award-table tbody.ng-award-group td:last-child { padding-right: 16px; }
.ng-detail .ng-award-table tbody.ng-award-group tr:first-child td:first-child { border-top-left-radius: 10px; }
.ng-detail .ng-award-table tbody.ng-award-group tr:first-child td:last-child { border-top-right-radius: 10px; }
.ng-detail .ng-award-table tbody.ng-award-group tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.ng-detail .ng-award-table tbody.ng-award-group tr:last-child td:last-child { border-bottom-right-radius: 10px; }
.ng-detail .ng-award-table tbody.ng-award-spacer td { height: 10px; padding: 0; background: transparent; }
/* The unfolded part does not react to the pointer (the list's own hover would colour it like the next row) */
.ng-tbl-expandable tr.ng-row-detail:hover > td, .ng-tbl-expandable tr.ng-row-detail > td { background: var(--n-50); }
.ng-tbl-expandable .ng-award-table tbody.ng-award-group tr:hover td { background: var(--strip); }
.ng-tbl-expandable .ng-award-table tbody.ng-award-spacer tr:hover td { background: transparent; }
.ng-asked { margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--fg-3); }
.ng-detail-notes { display: flex; flex-wrap: wrap; gap: 2px 28px; font-size: 14px; color: var(--fg-1); }
.ng-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.ng-compare dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); }
.ng-compare dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 600; color: var(--fg-1); white-space: pre-line; }
.ng-award-action { text-align: right; }
.ng-award-buttons { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ng-award-buttons form { margin: 0; }

/* Import status: the verdict banner and the progress bar */
.ng-verdict { background: var(--verdict-bg); border-bottom: 1px solid var(--verdict-border); }
.ng-verdict.ok   { --verdict-bg: var(--ng-green-50);  --verdict-border: var(--ng-green-200); --verdict-fg: var(--ng-green-700); }
.ng-verdict.warn { --verdict-bg: var(--ng-orange-50); --verdict-border: var(--ng-orange-200); --verdict-fg: var(--ng-orange-700); }
.ng-verdict.stop { --verdict-bg: var(--danger-bg);    --verdict-border: var(--danger-border); --verdict-fg: var(--danger); }
.ng-verdict.info { --verdict-bg: var(--n-50);         --verdict-border: var(--n-200);         --verdict-fg: var(--n-600); }
.ng-verdict-ic { width: 28px; height: 28px; flex: none; color: var(--verdict-fg); }
.ng-verdict-title { color: var(--verdict-fg); }
.ng-progress { max-width: 460px; margin: 16px auto 0; }
.ng-progress-track { height: 12px; border-radius: var(--radius-pill); background: var(--n-100); overflow: hidden; }
.ng-progress-fill { height: 100%; background: var(--ng-green-500); transition: width 0.6s ease; }
.ng-progress-fill.indeterminate { width: 40%; animation: ng-progress-slide 1.4s ease-in-out infinite alternate; }
@keyframes ng-progress-slide { from { margin-left: 0; } to { margin-left: 60%; } }
.ng-obs-ic { width: 14px; height: 14px; vertical-align: -2px; color: var(--ng-orange-600); }

/* =============================================================================
   Réglages: une ligne par réglage (titre, explication, état, interrupteur), l'effet du réglage tel qu'il est
   (visible seulement quand il est coupé), et une barre d'enregistrement
   ============================================================================= */
.ng-settings { display: grid; gap: 16px; }
.ng-setting { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 16px 20px; border-top: 1px solid var(--border-subtle); }
.ng-card-head + .ng-setting, .ng-setting:first-child { border-top: 0; }
.ng-setting-text { min-width: 0; flex: 1; max-width: 70ch; }
.ng-setting-title { font-size: 14px; font-weight: 700; color: var(--fg-1); margin: 0; }
.ng-setting-desc { font-size: 12.5px; color: var(--fg-3); margin: 3px 0 0; }
.ng-setting-ctl { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding-top: 1px; }
.ng-setting-effect { display: none; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 9px; background: var(--ng-orange-50); border: 1px solid var(--ng-orange-200); color: var(--ng-orange-800); font-size: 12.5px; line-height: 1.45; }
.ng-setting-effect .lucide { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.ng-setting-extra { display: none; margin-top: 12px; }
.ng-setting-extra textarea.ng-input { min-height: 64px; }
.ng-setting:has(input[type="checkbox"]:not(:checked)) .ng-setting-effect { display: flex; }
.ng-setting:has(input[type="checkbox"]:not(:checked)) .ng-setting-extra { display: block; }
.ng-setting:has(input[type="checkbox"]:checked) .state-off { display: none; }
.ng-setting:has(input[type="checkbox"]:not(:checked)) .state-on { display: none; }
.ng-setting.risky-on:has(input[type="checkbox"]:not(:checked)) .ng-setting-effect, .ng-setting.risky-on:has(input[type="checkbox"]:not(:checked)) .ng-setting-extra { display: none; }
.ng-setting.risky-on:has(input[type="checkbox"]:checked) .ng-setting-effect { display: flex; }
.ng-setting.risky-on:has(input[type="checkbox"]:checked) .ng-setting-extra { display: block; }
.ng-tbl-years { max-width: 560px; }
.ng-tbl-years th:not(:first-child), .ng-tbl-years td:not(:first-child) { text-align: center; }
.ng-tbl input[type="checkbox"], .ng-tbl input[type="radio"] { accent-color: var(--ng-green-600); width: 16px; height: 16px; cursor: pointer; }
.ng-setting .ng-switch-track { width: 40px; height: 24px; }
.ng-setting .ng-switch-track::after { width: 18px; height: 18px; }
.ng-setting .ng-switch input:checked + .ng-switch-track::after { transform: translateX(16px); }
.ng-savebar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px 10px 20px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.ng-savebar.is-dirty { border-color: var(--ng-orange-200); }
.ng-savebar-state { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--fg-3); }
.ng-savebar-state .dirty { display: none; align-items: center; gap: 7px; color: var(--ng-orange-700); }
.ng-savebar-state .dirty::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ng-orange-500); }
.ng-savebar.is-dirty .ng-savebar-state .dirty { display: inline-flex; }
.ng-savebar.is-dirty .ng-savebar-state .clean { display: none; }
@media (max-width: 640px) { .ng-setting { flex-direction: column; gap: 12px; } }

/* =============================================================================
   Densité compacte (admin et commission)
   Sur un écran moyen ou bas (MacBook 1440x900, portable 1366x768, ou 1920x1080 affiché à 125-150 %), l'interface est
   ramenée à ~80 %: sidebar plus étroite, marges, tableaux, champs et boutons plus serrés. Les grands écrans gardent la
   densité de delta-nation. Tout est ici, en fin de feuille: pour changer les seuils ou les valeurs, c'est le seul
   endroit. Sous 861 px, la mise en page mobile reste celle du reste du fichier.
   ============================================================================= */
@media (min-width: 861px) and (max-width: 1440px), (min-width: 861px) and (max-height: 800px) {
  /* Coque: sidebar, barre du haut */
  .ng-app { grid-template-columns: 188px 1fr; }
  .ng-app .ng-brand, .ng-app .ng-top { height: 44px; }
  .ng-app .ng-brand { padding: 0 10px; gap: 7px; }
  .ng-app .ng-brand-app { font-size: 13px; }
  .ng-app .ng-brand-gov { font-size: 9px; }
  .ng-app .ng-nav { padding: 5px 6px; gap: 0; }
  .ng-app .ng-nav-group { padding: 7px 8px 2px; font-size: 9px; }
  .ng-app .ng-nav-item { padding: 4px 8px; gap: 7px; font-size: 11.5px; border-radius: 6px; }
  .ng-app .ng-nav-item .lucide { width: 14px; height: 14px; }
  .ng-app .ng-nav-item.child { padding-left: 26px; font-size: 11px; }
  .ng-app .ng-nav-item.child .lucide { width: 12px; height: 12px; }
  .ng-app .ng-side-foot { padding: 5px 6px; }
  .ng-app .ng-user-btn { padding: 5px 6px; }
  .ng-app .ng-user-name { font-size: 11.5px; }
  .ng-app .ng-user-role { font-size: 10px; }
  .ng-app .ng-avatar { width: 26px; height: 26px; font-size: 10px; }
  .ng-app .ng-avatar.sm { width: 22px; height: 22px; font-size: 9px; }
  .ng-app .ng-iconbtn { width: 28px; height: 28px; }
  .ng-app .ng-iconbtn .lucide { width: 14px; height: 14px; }

  /* Page: marges, titre */
  .ng-app .ng-page { padding: 12px 14px 24px; }
  .ng-app .ng-page-head { gap: 8px; margin-bottom: 10px; }
  .ng-app .ng-page-title { font-size: 18px; }
  .ng-app .ng-page-sub { font-size: 12px; }
  .ng-app .ng-crumb { margin-bottom: 4px; font-size: 11px; }

  /* Boutons, champs, filtres */
  .ng-app .ng-btn { padding: 6px 10px; font-size: 11.5px; gap: 5px; border-radius: 7px; }
  .ng-app .ng-btn .lucide { width: 13px; height: 13px; }
  .ng-app .ng-btn-sm { padding: 4px 7px; font-size: 11px; }
  .ng-app .ng-input, .ng-app .ng-select select { padding: 5px 9px; font-size: 11.5px; border-radius: 7px; }
  .ng-app .ng-select select { padding-right: 26px; }
  .ng-app .ng-input.with-ic { padding-left: 30px; }
  .ng-app .ng-field { gap: 3px; }
  .ng-app .ng-field > label { font-size: 9.5px; }
  .ng-app .ng-field > .ng-switch { font-size: 12px; }
  .ng-app .ng-switch-label small { font-size: 11px; }
  .ng-app .ng-hint { font-size: 10.5px; margin-top: 3px; }
  .ng-app .ng-filter-head { padding: 7px 12px; }
  .ng-app .ng-filter-title { font-size: 12px; }
  .ng-app .ng-filter-toggle { font-size: 11.5px; }
  .ng-app .ng-filter-body { padding: 8px 12px 10px; }
  .ng-app .ng-filters { gap: 8px; }
  .ng-app .ng-chip { padding: 3px 9px; font-size: 11px; }
  .ng-app .ng-searchpanel { padding: 8px 10px; }
  .ng-app .ng-searchbar-field { border-radius: 8px; padding: 0 10px; }
  .ng-app .ng-searchbar-field input { font-size: 12.5px; padding: 6px 0; }
  .ng-app .ng-searchbar-field .lucide { width: 16px; height: 16px; }
  .ng-app .ng-quick { gap: 8px; margin-top: 8px; }

  /* Listes déroulantes avec recherche (Tom Select) */
  /* Tom Select computes the right padding from these variables (room for the caret) */
  .ng-app .ts-wrapper { --ts-pr-caret: 14px; }
  .ng-app .ts-wrapper .ts-control { padding-top: 0; padding-bottom: 0; padding-left: 9px; height: 30px; min-height: 0; align-items: center; font-size: 11.5px; border-radius: 7px; }
  .ng-app .ts-wrapper .ts-control input { font-size: 11.5px; }
  .ng-app .ts-wrapper .ts-control, .ng-app .ts-wrapper .ts-control > * { line-height: 1.3; }
  .ng-app .ts-wrapper .ts-control > .item { padding: 0; margin: 0; }
  /* The list is opened in the body, outside .ng-app */
  .ts-dropdown { font-size: 11.5px; }
  .ts-dropdown .option, .ts-dropdown .no-results { padding: 5px 9px; }

  .ng-app .ng-setting { padding: 11px 12px; gap: 16px; }
  .ng-app .ng-setting-title { font-size: 13px; }
  .ng-app .ng-setting-desc, .ng-app .ng-setting-effect { font-size: 11.5px; }
  .ng-app .ng-savebar { padding: 8px 10px 8px 12px; }
  .ng-app .ng-savebar-state { font-size: 11.5px; }

  /* Tableaux et cartes */
  .ng-app .ng-card-head { padding: 8px 12px; }
  .ng-app .ng-card-title { font-size: 13px; }
  .ng-app .ng-card-sub { font-size: 11px; }
  .ng-app .ng-tbl { font-size: 11.5px; }
  .ng-app .ng-tbl thead th { padding: 6px 10px; font-size: 9.5px; }
  .ng-app .ng-tbl tbody td { padding: 5px 10px; }
  .ng-app .ng-tbl td .sub { font-size: 10.5px; }
  .ng-app .ng-badge { font-size: 10.5px; padding: 1px 7px; }
  .ng-app .ng-pagination { padding: 6px 10px; }
  .ng-app .pg-btn { width: 26px; height: 26px; }
  .ng-app .ng-kv { padding: 5px 0; font-size: 11.5px; }
  .ng-app .ng-detail-grid { gap: 12px 24px; }
  .ng-app .ng-detail { padding: 10px 14px 14px; gap: 10px; font-size: 12px; }
  .ng-app .ng-detail-link { top: 10px; right: 14px; font-size: 12px; }
  .ng-app .ng-detail-label { font-size: 10.5px; }
  .ng-app .ng-detail .ng-award-table th { padding: 4px 8px; font-size: 10.5px; }
  .ng-app .ng-detail .ng-award-table td { padding: 5px 8px; }
  .ng-app .ng-detail .ng-award-table tbody.ng-award-group tr.ng-award-line td { padding-top: 8px; padding-bottom: 8px; }
  .ng-app .ng-detail-notes { font-size: 12px; }
  .ng-app .ng-detail-field .k { font-size: 10.5px; margin-bottom: 2px; }
  .ng-app .ng-detail-field .v { font-size: 12.5px; }
  .ng-app .ng-detail-field .vsub { font-size: 10.5px; }
  .ng-app .ng-empty { min-height: 240px; }

  /* Tableaux de bord: tuiles et compteurs */
  .ng-app .ng-kpi-grid, .ng-app .ng-counters, .ng-app .ng-dash-grid { gap: 7px; }
  .ng-app .ng-stat-tile { padding: 10px; }
  .ng-app .ng-stat-tile-val { font-size: 18px; margin-top: 6px; }
  .ng-app .ng-stat-tile-label { font-size: 11px; }
  .ng-app .ng-stat-tile-sub { font-size: 11px; margin-top: 5px; }
  .ng-app .ng-kpi { padding: 9px; }
  .ng-app .ng-kpi-val { font-size: 18px; margin-top: 6px; }
  .ng-app .ng-counter { padding: 7px 10px; gap: 8px; }
  .ng-app .ng-counter .c-val { font-size: 17px; }
  .ng-app .ng-counter .c-ic { width: 26px; height: 26px; }
  .ng-app .ng-dash-card { padding: 9px 11px; gap: 6px; }
  .ng-app .ng-dash-card-title { font-size: 12.5px; }
  .ng-app .ng-dash-chart, .ng-app .ng-dash-empty { min-height: 160px; }
  .ng-app .ng-hero-card { padding: 12px 18px 14px; }
  .ng-app .ng-hero-val { font-size: 32px; }

  /* Fenêtres et notifications */
  .ng-modal-body { padding: 14px; gap: 9px; }
  .ng-modal-title { font-size: 14px; }
  .ng-notice { padding: 8px 8px 8px 10px; }
}

/* =============================================================================
   Formulaire dense (saisie des dossiers de poursuite)
   Une fenêtre de saisie à l'ancienne: des cadres serrés, plusieurs champs par ligne, deux colonnes de cadres quand la
   largeur le permet (une seule sinon), et la barre d'enregistrement toujours visible en bas. Pensé pour les écrans
   très agrandis des saisies: tout reste sur une page ou deux, sans défilement interminable. La grille d'un cadre fait
   6 colonnes: un champ prend .s1 à .s6 d'entre elles, et se replie quand le cadre est étroit (container query).
   ============================================================================= */
.ng-dense-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 8px; align-items: start; }
.ng-dense-stack { display: grid; gap: 8px; min-width: 0; align-content: start; }
.ng-group { container-type: inline-size; }
.ng-group-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 6px 10px; border-bottom: 1px solid var(--border-subtle); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-3); }
.ng-group-title .ng-group-hint { font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--fg-4); text-align: right; }
.ng-group-body { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 8px; padding: 8px 10px 10px; }
.ng-group-body .s1 { grid-column: span 1; }
.ng-group-body .s2 { grid-column: span 2; }
.ng-group-body .s3 { grid-column: span 3; }
.ng-group-body .s4 { grid-column: span 4; }
.ng-group-body .s6 { grid-column: span 6; }
@container (max-width: 360px) {
  .ng-group-body .s1, .ng-group-body .s2 { grid-column: span 3; }
  .ng-group-body .s4 { grid-column: span 6; }
}

.ng-dense .ng-field { gap: 2px; min-width: 0; }
.ng-dense .ng-field > label { font-size: 9.5px; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-dense .ng-input, .ng-dense .ng-select select { min-height: 28px; padding: 4px 8px; font-size: 12px; border-radius: 6px; }
.ng-dense .ng-select select { padding-right: 24px; }
.ng-dense .ng-input.with-ic { padding-left: 30px; }
.ng-dense .ng-select .chev { right: 8px; width: 13px; height: 13px; }
.ng-dense textarea.ng-input { min-height: 0; resize: vertical; }
.ng-dense .ng-field-error { margin: 0; font-size: 10.5px; }
.ng-dense .ts-wrapper { --ts-pr-caret: 14px; }
.ng-dense .ts-wrapper .ts-control { height: 28px; min-height: 0; padding: 0 8px; align-items: center; font-size: 12px; border-radius: 6px; }
.ng-dense .ts-wrapper .ts-control input { font-size: 12px; }
.ng-dense .ts-wrapper .ts-control, .ng-dense .ts-wrapper .ts-control > * { line-height: 1.3; }
.ng-dense .ts-wrapper .ts-control > .item { margin: 0; padding: 0; }

/* The buttons stay in view whatever the scroll, in a small box on the right rather than a bar across the page */
.ng-dense-actions { position: sticky; bottom: 8px; z-index: 5; justify-self: end; display: flex; gap: 6px; padding: 5px 6px; border: 1px solid var(--border-subtle); border-radius: 9px; background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12); }
.ng-dense .ng-tbl thead th { padding: 5px 10px; font-size: 9.5px; }
.ng-dense .ng-tbl tbody td { padding: 3px 10px; font-size: 12px; }
.ng-dense .ng-btn-sm { padding: 3px 8px; font-size: 11px; border-radius: 6px; }