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

:root {
   --font-sans: "IBM Plex Sans", "Open Sans", "Nunito", sans-serif;
   --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

   --bg-page: #f2f3f2;
   --bg-surface: #ffffff;

   --n-0: #ffffff;
   --n-25: #fafbfa;
   --n-50: #f4f5f4;
   --n-100: #eceeec;
   --n-200: #d8dcd9;
   --n-300: #b9beb8;
   --n-400: #8e938c;
   --n-600: #4f554e;

   --fg-1: #151a16;
   --fg-2: #2b312c;
   --fg-3: #667069;
   --fg-4: #89928a;

   --border-subtle: #e2e5e2;
   --border-default: #d0d6d1;
   --border-strong: #b9c0ba;

   --ng-green-50: #e9f5e8;
   --ng-green-100: #d7eed4;
   --ng-green-200: #b8dfb3;
   --ng-green-300: #93cb8b;
   --ng-green-500: #117f17;
   --ng-green-600: #0e6b13;
   --ng-green-700: #0b5710;

   --ng-orange-50: #fdf3e4;
   --ng-orange-100: #f9e2bd;
   --ng-orange-200: #f3c97f;
   --ng-orange-500: #f79306;
   --ng-orange-600: #e07f05;
   --ng-orange-700: #be6704;

   --ng-teal-50: #e8f3f2;
   --ng-teal-500: #3a9894;

   --ng-blue-50: #e8f0fa;
   --ng-blue-500: #3f7ecf;

   --ng-gold-50: #f8f1de;
   --ng-gold-500: #c29224;

   --danger: #b23a24;
   --danger-bg: #fdecea;
   --danger-border: #f5c8c1;
   --info-border: #bfd3ef;

   --fg-on-green: #f8fcf8;
   --ink: #121613;

   --radius-pill: 999px;
   --radius-lg: 14px;
   --radius-xl: 18px;

   --dur-fast: 130ms;
   --dur-base: 220ms;
   --ease-out: cubic-bezier(.2,.8,.2,1);

   --shadow-xs: 0 1px 2px rgba(18, 22, 19, 0.08);
   --shadow-sm: 0 6px 14px rgba(18, 22, 19, 0.12);
   --shadow-lg: 0 20px 40px rgba(18, 22, 19, 0.16);
   --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
   --shadow-focus: 0 0 0 3px rgba(17, 127, 23, 0.16);
}

/* =============================================================================
   App shell
   ============================================================================= */
.ng-app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; background: var(--bg-page); }

.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-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; gap: 16px; margin-bottom: 20px; }
.ng-page-head > div:first-child { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.ng-page-head > div:last-child { flex-shrink: 0; }
.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); }
.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.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-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; }

/* 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; }

/* 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 > 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); }
.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-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; }

/* 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; }
.ng-form-actions { display: flex; gap: 10px; margin-top: 24px; }

/* Détail (fiches) */
.ng-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; }
.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-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 { 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); }
@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: #8E938C; 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: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; }
  .ng-detail-grid { grid-template-columns: 1fr; }

  /* 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: #f8f1de; }
.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(17, 127, 23, 0.14) 0%, transparent 52%),
      linear-gradient(132deg, #f3f8f4 0%, #edf3f7 44%, #f5efe4 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(17, 127, 23, 0.35) 0%, rgba(17, 127, 23, 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(247, 147, 6, 0.28) 0%, rgba(247, 147, 6, 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(17, 127, 23, 0.10) 0%, transparent 52%),
      linear-gradient(180deg, #f4f8f4 0%, #f7f5ef 60%, #f1f4f8 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: #FEF2F2;
   border: 1px solid #FECACA;
   color: #7F1D1D;
}
.ng-candidate-edit-error-ic {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: #FEE2E2;
   color: #B91C1C;
   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: #991B1B;
}
.ng-candidate-edit-error-msg {
   font-size: 13px;
   margin: 0;
   color: #B91C1C;
   line-height: 1.5;
}

/* Card */
.ng-candidate-edit-card {
   overflow: hidden;
   border-radius: var(--radius-lg, 14px);
   background: var(--bg-surface, #FFFFFF);
   border: 1px solid var(--border-1, #E5E7EB);
   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-1, #E5E7EB);
   background: var(--n-25, #FAFAFA);
}
.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: #FFFFFF;
   border: 1px solid var(--border-1, #E5E7EB);
}
.ng-candidate-edit-meta-item .k {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--fg-4, #6B7280);
   font-weight: 600;
   margin-bottom: 2px;
}
.ng-candidate-edit-meta-item .v {
   font-size: 13px;
   color: var(--fg-1, #111827);
   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, #FAFAFA);
   border: 1px solid var(--border-1, #E5E7EB);
   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: #EFF6FF;
   color: #1D4ED8;
}
.ng-candidate-edit-section-ic.success {
   background: #ECFDF5;
   color: #047857;
}
.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, #111827);
}
.ng-candidate-edit-section-sub {
   font-size: 12.5px;
   color: var(--fg-3, #4B5563);
   margin: 0;
}

/* Select & errors */
.ng-candidate-edit-select.is-error,
.ng-input.is-error {
   border-color: #FCA5A5 !important;
   background: #FEF2F2;
}
.ng-field-error {
   font-size: 12px;
   color: #B91C1C;
   margin: 6px 0 0;
   font-weight: 500;
}

/* Attribution box */
.ng-candidate-edit-attribution {
   padding: 12px 14px;
   border-radius: 10px;
   background: #FFFFFF;
   border: 1px dashed var(--border-1, #E5E7EB);
   display: flex;
   flex-direction: column;
   gap: 4px;
}
.ng-candidate-edit-attribution .k {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--fg-4, #6B7280);
   font-weight: 600;
}
.ng-candidate-edit-attribution .v {
   font-size: 15px;
   font-weight: 700;
   color: var(--ng-green-7, #047857);
}
.ng-candidate-edit-attribution .s {
   font-size: 12px;
   color: var(--fg-4, #6B7280);
   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: #FFF7ED;
   border: 1px solid #FED7AA;
   color: #7C2D12;
}
.ng-candidate-edit-note-ic {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 8px;
   background: #FFEDD5;
   color: #C2410C;
   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-4, #6B7280);
   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: #f2faf2; }
.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: #f2faf2; 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, #14231a); }
.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: entered vs processed dossiers per day */
.ng-daychart { display: flex; align-items: flex-end; gap: 6px; height: 200px; }
.ng-daychart-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.ng-daychart-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.ng-daychart-bar { position: relative; flex: 1; max-width: 18px; min-height: 2px; border-radius: 4px 4px 0 0; }
.ng-daychart-bar.entered { background: var(--ng-green-500); }
.ng-daychart-bar.processed { background: var(--ng-orange-500); }
.ng-daychart-bar em { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; font-style: normal; font-weight: 700; color: var(--fg-3); }
.ng-daychart-label { font-size: 10.5px; color: var(--fg-4); white-space: nowrap; }
.ng-day-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* 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, #e6e8e4); }
.ng-lookup-art .bar.strong { fill: var(--ng-green-500); opacity: 0.85; }
.ng-lookup-art .chip { fill: #e3f3e3; }
.ng-lookup-art .chip.alt { fill: #ffe9cc; }
.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); }

/* 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; }
.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: #c9cfca; 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; }

/* 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, #eaf6ea); 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; }

@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; }
}