/*
 * Portail Agent eTrésor — design system Delta Nation (scope /agent uniquement)
 */
@import url(/assets/agent/delta_nation_tokens-1469c9739051ded38224deb4f30dec6958c49c76d4563abcc0167e51a455639b.css);
@import url(/assets/agent/delta_nation_components-fdbf8da8075e88fc23606ef205c90c0a1e1a7b18c02608f9913127264d4579b7.css);

.ng-side.is-open {
  transform: translateX(0);
}

@media (max-width: 1023px) {
  .ng-side {
    position: fixed;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 200ms var(--ease-out);
  }

  .ng-scrim {
    position: fixed;
    inset: 0;
    background: rgba(18, 22, 19, 0.45);
    z-index: 40;
  }
}

.agent-brand-logo {
  display: block;
  width: 92px;
  height: auto;
  flex: 0 0 auto;
}

.agent-brand-label {
  flex: 1 1 auto;
  min-width: 0;
}

.agent-flash {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
}

.agent-flash.notice {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  color: var(--ng-green-700);
}

.agent-flash.alert {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
}

.agent-flash-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.agent-flash-card {
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 4px solid var(--fg-4);
  box-shadow: var(--shadow-lg);
  color: var(--fg-1);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  animation: agentFlashSlideInOut 5s cubic-bezier(.22, 1, .36, 1) forwards;
  pointer-events: auto;
}

.agent-flash-card.notice {
  border-left-color: var(--ng-green-600);
}

.agent-flash-card.alert {
  border-left-color: var(--danger);
}

@keyframes agentFlashSlideInOut {
  0% {
    opacity: 0;
    transform: translateX(120%);
  }

  10% {
    opacity: 1;
    transform: translateX(0);
  }

  86% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

/* Page intro (titre + sous-titre empilés) */
.ng-page-head-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ng-filter-card {
  padding: 18px;
  margin-bottom: 16px;
}

.ng-table-card {
  overflow: hidden;
}

.ng-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: var(--ng-orange-50);
  border: 1px solid var(--ng-orange-200);
  border-radius: var(--radius-lg);
}

.ng-callout-icon {
  color: var(--ng-orange-600);
  flex-shrink: 0;
  margin-top: 1px;
}

.ng-callout-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--fg-1);
}

.ng-callout-text {
  font-size: 12.5px;
  color: var(--fg-2);
  margin-top: 2px;
  line-height: 1.45;
}

.ng-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (min-width: 1024px) {
  .ng-detail-layout.has-aside {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  }
}

/* Delta Nation · pages détail agent */
.dn-detail-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--fg-3);
  margin-bottom: 16px;
}

.dn-detail-breadcrumb a {
  color: var(--fg-3);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.dn-detail-breadcrumb a:hover {
  color: var(--ng-green-600);
}

.dn-detail-breadcrumb .sep {
  color: var(--n-300);
}

.dn-detail-breadcrumb .current {
  color: var(--fg-2);
  font-weight: 600;
}

.dn-detail-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

@media (min-width: 640px) {
  .dn-detail-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.dn-detail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.dn-detail-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--fg-1);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

@media (min-width: 640px) {
  .dn-detail-title {
    font-size: 26px;
  }
}

.dn-detail-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--fg-3);
}

.dn-detail-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.dn-detail-card-head {
  border-bottom: 1px solid var(--border-subtle);
  padding: 16px 20px;
}

.dn-detail-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--fg-1);
  margin: 0;
}

.dn-detail-card-sub {
  font-size: 10.5px;
  color: var(--fg-3);
  margin: 2px 0 0;
}

.dn-detail-card-body {
  padding: 4px 20px 8px;
}

.dn-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding: 14px 0;
}

.dn-summary-row:last-child {
  border-bottom: 0;
}

.dn-summary-label {
  font-size: 13.5px;
  color: var(--fg-3);
  flex-shrink: 0;
}

.dn-summary-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-1);
  text-align: right;
}

.dn-summary-extra {
  padding: 12px 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: 4px;
}

.ng-detail-stack > * + * {
  margin-top: 16px;
}

.agent-top-title {
  font-size: 18px;
  margin: 0;
}

.ng-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.agent-kpi-spacer {
  margin-top: 16px;
}

.ng-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.agent-list {
  display: flex;
  flex-direction: column;
}

.agent-list-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-subtle);
  color: var(--fg-1);
  text-decoration: none;
}

.agent-list-row:first-child {
  border-top: 0;
}

.agent-list-row:hover {
  background: var(--n-25);
}

.agent-list-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}

.agent-list-title {
  font-size: 13.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-list-sub {
  color: var(--fg-3);
  font-size: 12px;
}

@media (max-width: 1023px) {
  .ng-split {
    grid-template-columns: 1fr;
  }
}

/* Enrôlement GOMNI — layout preview */
.ng-enrollment-layout {
  width: 100%;
}

.ng-enrollment-layout:not(.has-preview) .ng-enrollment-upload {
  width: 100%;
}

.ng-enrollment-layout.has-preview {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.ng-enrollment-preview[hidden] {
  display: none !important;
}

.ng-enrollment-upload {
  position: sticky;
  top: 16px;
  min-width: 0;
}

.ng-enrollment-upload-card {
  overflow: hidden;
}

.ng-enrollment-upload-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 32px 0;
}

.ng-enrollment-step {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--ng-green-50);
  border: 1px solid var(--ng-green-200);
  color: var(--ng-green-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ng-enrollment-upload-body {
  padding: 24px 32px 32px;
}

.ng-enrollment-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  grid-template-areas:
    "label label"
    "picker aside";
  gap: 10px 20px;
  align-items: stretch;
}

.ng-enrollment-row-label {
  grid-area: label;
  margin: 0;
}

.ng-enrollment-file-field {
  display: contents;
}

.ng-enrollment-file-field .ng-file-picker {
  grid-area: picker;
  margin-top: 0;
  min-height: 148px;
}

.ng-enrollment-upload-aside {
  grid-area: aside;
  display: flex;
  min-height: 148px;
}

.ng-enrollment-callout {
  margin: 0;
  flex: 1;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: flex-start;
}

.ng-enrollment-layout.has-preview .ng-enrollment-upload-row {
  grid-template-columns: 1fr;
  grid-template-areas:
    "label"
    "picker";
}

.ng-enrollment-layout.has-preview .ng-enrollment-upload-aside {
  display: none;
}

.ng-enrollment-layout.has-preview .ng-enrollment-upload-head {
  padding: 22px 24px 0;
}

.ng-enrollment-layout.has-preview .ng-enrollment-upload-body {
  padding: 18px 24px 24px;
}

.ng-enrollment-preview-card {
  overflow: hidden;
  min-height: 420px;
}

.ng-enrollment-preview-card .ng-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.ng-field-hint {
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 6px;
  line-height: 1.45;
}

.ng-file-drop {
  margin-top: 6px;
}

.ng-file-picker {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 10px;
  padding: 24px 28px;
  border: 1px dashed var(--ng-green-200);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--ng-green-50) 0%, #fff 100%);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ng-file-picker:has(.ng-file-picker-name.has-file) {
  border-color: var(--ng-green-200);
  background: linear-gradient(180deg, var(--ok-bg) 0%, #fff 100%);
  box-shadow: 0 0 0 4px rgba(18, 121, 20, 0.06);
}

.ng-file-picker-icon {
  color: var(--ng-green-500);
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--ng-green-100);
}

.ng-file-picker-icon .lucide {
  width: 22px;
  height: 22px;
}

.ng-file-picker-content {
  min-width: 0;
  flex: 1;
}

.ng-file-picker-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.45;
}

.ng-enrollment-layout.has-preview .ng-file-picker {
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.ng-enrollment-layout.has-preview .ng-file-picker-icon {
  width: 36px;
  height: 36px;
}

.ng-enrollment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.ng-enrollment-layout.has-preview .ng-enrollment-actions {
  margin-top: 16px;
}

.ng-enrollment-actions .ng-btn-accent {
  flex: 1 1 auto;
}

.ng-enrollment-actions .ng-btn-accent:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ng-file-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ng-file-picker-name {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--fg-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ng-file-picker-name.has-file {
  color: var(--fg-1);
  font-weight: 600;
}

.ng-enrollment-form .ng-field-hint {
  display: none;
}

.ng-enrollment-empty {
  padding: 48px 28px;
  text-align: center;
}

.ng-enrollment-empty-icon {
  color: var(--fg-4);
  display: inline-flex;
  margin-bottom: 14px;
}

.ng-enrollment-empty-icon .lucide {
  width: 40px;
  height: 40px;
}

.ng-enrollment-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-1);
  margin: 0 0 6px;
}

.ng-enrollment-empty-text {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.5;
  margin: 0;
  max-width: 360px;
  margin-inline: auto;
}

.ng-enrollment-panel {
  margin: 16px 20px 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ng-enrollment-panel--orange {
  background: var(--ng-orange-50);
  border: 1px solid var(--ng-orange-200);
}

.ng-enrollment-panel--green {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
}

.ng-enrollment-panel-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
}

.ng-enrollment-panel-head .lucide {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ng-enrollment-panel--orange .ng-enrollment-panel-head .lucide {
  color: var(--ng-orange-600);
}

.ng-enrollment-panel--green .ng-enrollment-panel-head .lucide {
  color: var(--ng-green-600);
}

.ng-enrollment-panel-head strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--fg-1);
}

.ng-enrollment-panel-head p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.45;
}

.ng-enrollment-issues {
  border-top: 1px solid var(--ng-orange-200);
  max-height: 220px;
  overflow-y: auto;
}

.ng-enrollment-issue {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ng-orange-100);
}

.ng-enrollment-issue:last-child {
  border-bottom: 0;
}

.ng-enrollment-issue-line {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ng-orange-700);
  background: #fff;
  border: 1px solid var(--ng-orange-200);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  margin-bottom: 8px;
}

.ng-enrollment-issue-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ng-enrollment-issue-list li {
  font-size: 12.5px;
  color: var(--ng-orange-800);
  line-height: 1.45;
  padding: 3px 0;
}

.ng-enrollment-issue-field {
  font-weight: 700;
}

.ng-enrollment-preview-table-wrap {
  overflow-x: auto;
  margin-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.ng-enrollment-tbl tbody tr.is-invalid {
  background: var(--ng-orange-50);
}

.ng-enrollment-tbl tbody tr.is-invalid td {
  border-bottom-color: var(--ng-orange-100);
}

.ng-enrollment-confirm {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--n-25);
}

.ng-enrollment-confirm--disabled {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border-subtle);
}

.ng-enrollment-confirm--disabled .ng-btn {
  opacity: 0.45;
  cursor: not-allowed;
}

.ng-btn-block {
  width: 100%;
  justify-content: center;
}

.ng-enrollment-confirm-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--fg-3);
  text-align: center;
  line-height: 1.45;
}

/* Import detail · stepper (façon "Preuve de virement") */
.ng-stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}

.ng-step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 88px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ng-step-bar {
  position: absolute;
  top: 17px;
  right: 50%;
  left: -50%;
  z-index: 0;
  height: 2px;
  background: var(--border-default);
}

.ng-step:first-child .ng-step-bar {
  display: none;
}

.ng-step.is-done .ng-step-bar,
.ng-step.is-current .ng-step-bar {
  background: var(--ng-green-500);
}

.ng-step-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--border-default);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  color: var(--fg-4);
}

.ng-step-node .lucide {
  width: 17px;
  height: 17px;
}

.ng-step.is-done .ng-step-node {
  border-color: var(--ng-green-600);
  background: var(--ng-green-500);
  color: #fff;
}

.ng-step.is-current .ng-step-node {
  border-color: var(--ng-orange-500);
  background: #fff;
  color: var(--ng-orange-600);
  box-shadow: 0 0 0 4px var(--ng-orange-50);
}

.ng-step.is-danger .ng-step-node {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.ng-step-label {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-1);
}

.ng-step.is-todo .ng-step-label {
  color: var(--fg-4);
}

.ng-step-meta {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--fg-3);
}

/* Import detail · journal (timeline verticale) */
.ng-tl-item {
  position: relative;
  display: flex;
  gap: 14px;
  padding-bottom: 20px;
}

.ng-tl-item:last-child {
  padding-bottom: 0;
}

.ng-tl-line {
  position: absolute;
  left: 17px;
  top: 34px;
  bottom: 0;
  width: 2px;
  background: var(--border-default);
}

.ng-tl-item:last-child .ng-tl-line {
  display: none;
}

.ng-tl-ic {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid;
}

.ng-tl-ic .lucide {
  width: 16px;
  height: 16px;
}

.ng-tl-ic.ok {
  border-color: var(--ng-green-200);
  background: var(--ng-green-50);
  color: var(--ng-green-600);
}

.ng-tl-ic.pending {
  border-color: var(--ng-orange-200);
  background: var(--ng-orange-50);
  color: var(--ng-orange-600);
}

.ng-tl-ic.danger {
  border-color: #e8bcad;
  background: #f8e7e1;
  color: var(--danger);
}

.ng-tl-ic.neutral {
  border-color: var(--border-default);
  background: var(--bg-sunken);
  color: var(--fg-4);
}

.ng-tl-body {
  flex: 1;
  min-width: 0;
}

.ng-tl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ng-tl-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--fg-1);
}

.ng-tl-actor {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--fg-3);
}

.ng-tl-actor strong {
  color: var(--ng-green-700);
  font-weight: 600;
}

.ng-tl-time {
  font-size: 11.5px;
  color: var(--fg-4);
  white-space: nowrap;
}

.ng-tl-note {
  margin-top: 8px;
  border-left: 3px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--fg-2);
}

.ng-tl-note.danger {
  border-left-color: var(--danger);
  background: #f8e7e1;
  color: var(--danger);
}

.ng-tl-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--fg-3);
  font-size: 13px;
}

.ng-tl-empty .lucide {
  width: 36px;
  height: 36px;
  color: var(--n-300);
  margin-bottom: 8px;
}

/* Import detail · summary panel */
.ng-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 720px) {
  .ng-summary-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  }
}

.ng-summary-list {
  display: flex;
  flex-direction: column;
}

.ng-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.ng-summary-row:last-child {
  border-bottom: none;
}

.ng-summary-row-label {
  font-size: 13px;
  color: var(--fg-3);
}

.ng-summary-row-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-1);
  text-align: right;
}

@media (max-width: 1023px) {
  .ng-enrollment-layout,
  .ng-enrollment-layout.has-preview {
    grid-template-columns: 1fr;
  }

  .ng-enrollment-upload-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "picker"
      "aside";
  }

  .ng-enrollment-layout.has-preview .ng-enrollment-upload-aside {
    display: none;
  }

  .ng-enrollment-upload {
    position: static;
  }
}

/* Biométrie agent — QR + attente */
.ng-biometric-card {
  overflow: hidden;
}

.ng-biometric {
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: 36px;
  padding: 28px 32px 32px;
  min-height: 380px;
}

.ng-biometric-qr-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ng-biometric-qr-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ng-orange-700);
  margin-bottom: 14px;
}

.ng-biometric-qr-frame {
  position: relative;
  display: inline-flex;
  padding: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: opacity var(--dur-base) var(--ease-out);
}

.ng-biometric-qr-frame svg {
  width: 200px;
  height: 200px;
  display: block;
}

.ng-biometric-qr-frame.is-inactive {
  opacity: 0.25;
}

.ng-biometric-qr-hint {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--fg-3);
  line-height: 1.5;
}

.ng-biometric-steps {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
  text-align: left;
}

.ng-biometric-step-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.45;
}

.ng-biometric-step-num {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--n-50);
  color: var(--fg-3);
  border: 1px solid var(--border-subtle);
  font-size: 10.5px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ng-biometric-info-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ng-biometric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.ng-biometric-countdown {
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.ng-biometric-countdown strong {
  color: var(--fg-2);
  font-weight: 700;
}

.ng-biometric-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

/* Sans ceci, "display: flex" ci-dessus l'emporte sur le [hidden] natif du
   navigateur (même spécificité, feuille de style auteur prioritaire) et les
   4 états s'affichent tous en même temps. */
.ng-biometric-state[hidden] {
  display: none;
}

.ng-biometric-spinner-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 auto;
}

.ng-biometric-spinner-wrap .lucide {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  color: var(--ng-orange-600);
}

.ng-biometric-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--fg-1);
  margin-top: 14px;
}

.ng-biometric-sub {
  font-size: 13px;
  color: var(--fg-3);
  margin-top: 8px;
  line-height: 1.45;
}

.ng-biometric-check,
.ng-biometric-error-icon,
.ng-biometric-expired-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.ng-biometric-check {
  background: var(--ok-bg);
  color: var(--ng-green-600);
  border: 1px solid var(--ok-border);
}

.ng-biometric-error-icon {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

.ng-biometric-expired-icon {
  background: var(--n-50);
  color: var(--fg-4);
  border: 1px solid var(--border-subtle);
}

.ng-biometric-success .ng-biometric-title {
  color: var(--ng-green-700);
}

.ng-biometric-actions {
  margin-top: 18px;
}

.ng-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--ng-orange-100);
  border-top-color: var(--ng-orange-500);
  border-radius: 50%;
  animation: ng-spin 0.8s linear infinite;
  margin: 0 auto;
}

.ng-spinner-lg {
  width: 44px;
  height: 44px;
  border-width: 4px;
}

@keyframes ng-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1023px) {
  .ng-biometric {
    grid-template-columns: 1fr;
  }
}
.ng-app {
  background: var(--bg-page);
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  display: grid;
}

.ng-side {
  background: var(--n-0);
  border-right: 1px solid var(--border-subtle);
  flex-direction: column;
  height: 100vh;
  padding: 0;
  display: flex;
  position: sticky;
  top: 0;
}

.ng-brand {
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  gap: 11px;
  height: 60px;
  padding: 0 18px;
  display: flex;
}

.ng-brand-txt {
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}

.ng-brand-app {
  color: var(--fg-1);
  letter-spacing: -.01em;
  font-size: 16px;
  font-weight: 800;
}

.ng-brand-gov {
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
}

.ng-nav {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  padding: 12px;
  display: flex;
  overflow-y: auto;
}

.ng-nav-group {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-4);
  padding: 14px 10px 6px;
  font-size: 10.5px;
  font-weight: 700;
}

.ng-nav-item {
  color: var(--fg-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

.ng-nav-item:hover {
  background: var(--n-50);
  color: var(--fg-1);
}

.ng-nav-item.active {
  background: var(--ng-green-500);
  color: #fff;
  box-shadow: var(--shadow-sm);
  border-radius: 10px;
  font-weight: 700;
}

.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 {
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
}

.ng-nav-item.active .count {
  color: #ffffffd9;
}

.ng-nav-item .chev-x {
  width: 15px;
  height: 15px;
  color: var(--fg-4);
  transition: transform var(--dur-fast) var(--ease-out);
  margin-left: auto;
}

.ng-nav-item.open .chev-x {
  transform: rotate(180deg);
}

.ng-nav-sub {
  flex-direction: column;
  gap: 2px;
  margin: 2px 0;
  display: flex;
}

.ng-nav-item.child {
  padding-left: 36px;
  font-size: 13px;
}

.ng-nav-item.child .lucide {
  width: 15px;
  height: 15px;
}

.ng-side-foot {
  border-top: 1px solid var(--border-subtle);
  padding: 12px 14px;
  position: relative;
}

.ng-user-btn {
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 9px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  font-family: inherit;
  display: flex;
}

.ng-user-btn:hover {
  background: var(--n-50);
}

.ng-user-btn .chev {
  color: var(--fg-4);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: auto;
}

.ng-user-menu {
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  position: absolute;
  bottom: calc(100% - 4px);
  left: 14px;
  right: 14px;
}

.ng-user-item {
  width: 100%;
  color: var(--fg-1);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
}

.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, .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 {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.ng-top {
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  z-index: 20;
  background: #ffffffa8;
  border-bottom: 1px solid #d8dcd999;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 26px;
  display: flex;
  position: sticky;
  top: 0;
}

.ng-proj {
  border: 1px solid var(--border-default);
  color: var(--fg-1);
  cursor: pointer;
  background: #fff;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
}

.ng-proj .lucide {
  width: 15px;
  height: 15px;
  color: var(--fg-4);
}

.ng-search {
  flex: 1;
  max-width: 380px;
  position: relative;
}

.ng-search input {
  box-sizing: border-box;
  border: 1px solid var(--border-default);
  background: var(--n-25);
  width: 100%;
  box-shadow: var(--shadow-inset);
  border-radius: 8px;
  padding: 8px 12px 8px 34px;
  font-family: inherit;
  font-size: 13px;
}

.ng-search input:focus {
  border-color: var(--ng-green-500);
  box-shadow: var(--shadow-focus), var(--shadow-inset);
  outline: none;
}

.ng-search .lucide {
  width: 16px;
  height: 16px;
  color: var(--fg-4);
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
}

.ng-top-actions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.ng-iconbtn {
  width: 36px;
  height: 36px;
  color: var(--fg-2);
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
}

.ng-iconbtn:hover {
  background: var(--n-50);
}

.ng-iconbtn .lucide {
  width: 18px;
  height: 18px;
}

.ng-iconbtn .ping {
  background: var(--ng-orange-500);
  border: 1.5px solid #fff;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  position: absolute;
  top: 8px;
  right: 9px;
}

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

.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 {
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 32px 48px;
}

.ng-page-head {
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
  display: flex;
}

.ng-page-head > div:first-child {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.ng-page-head .ng-page-head-intro {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  display: flex;
}

.ng-page-head > div:last-child {
  flex-shrink: 0;
}

.ng-page-title {
  color: var(--fg-1);
  letter-spacing: -.02em;
  font-size: 27px;
  font-weight: 800;
}

.ng-page-sub {
  color: var(--fg-3);
  margin-top: 0;
  font-size: 14px;
}

.ng-empty {
  text-align: center;
  min-height: 440px;
  color: var(--fg-3);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  display: flex;
}

.ng-empty .ic {
  background: var(--n-50);
  border: 1px solid var(--border-subtle);
  width: 56px;
  height: 56px;
  color: var(--fg-4);
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.ng-empty .ic .lucide {
  width: 26px;
  height: 26px;
}

.ng-empty h3 {
  color: var(--fg-1);
  font-size: 18px;
  font-weight: 700;
}

.ng-empty p {
  max-width: 360px;
  margin: 0;
  font-size: 13.5px;
}

.ng-btn {
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 15px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
}

.ng-btn .lucide {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.ng-btn:focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* Vert = action primaire / validation */
.ng-btn-primary,
.ng-btn-green {
  background: var(--ng-green-500);
  color: #fff;
  border-color: var(--ng-green-600);
  box-shadow: inset 0 1px 0 #ffffff29, var(--shadow-xs);
}

.ng-btn-primary:hover,
.ng-btn-green:hover {
  background: var(--ng-green-600);
}

.ng-btn-primary:active,
.ng-btn-green:active {
  background: var(--ng-green-700);
  transform: translateY(1px);
}

/* Vert = accent */
.ng-btn-accent {
  background: var(--ng-green-500);
  color: #fff;
  border-color: var(--ng-green-600);
  box-shadow: inset 0 1px 0 #ffffff33, var(--shadow-xs);
}

.ng-btn-accent:hover {
  background: var(--ng-green-600);
}

.ng-btn-accent:active {
  background: var(--ng-green-700);
  transform: translateY(1px);
}

/* Neutre */
.ng-btn-secondary {
  color: var(--fg-1);
  border-color: var(--border-default);
  box-shadow: var(--shadow-xs);
  background: #fff;
}

.ng-btn-secondary:hover {
  background: var(--n-25);
  border-color: var(--border-strong);
}

/* Ghost */
.ng-btn-ghost {
  color: var(--fg-2);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ng-btn-ghost:hover {
  background: var(--n-50);
  color: var(--fg-1);
}

/* Brique = rejet */
.ng-btn-danger {
  color: var(--danger);
  border-color: var(--danger-border);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.ng-btn-danger:hover {
  background: var(--danger-bg);
}

.ng-btn-danger:active {
  background: #f0d5cc;
  transform: translateY(1px);
}

.ng-btn-sm {
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12.5px;
}

.ng-btn-sm .lucide {
  width: 14px;
  height: 14px;
}

.ng-badge {
  white-space: nowrap;
  border: 1px solid;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  display: inline-flex;
}

.ng-badge .dot {
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.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 {
  color: var(--fg-2);
  border-color: var(--border-default);
  background: #fff;
}

.ng-card {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  background: #fff;
  border-radius: 13px;
}

.ng-card-head {
  border-bottom: 1px solid var(--border-subtle);
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  display: flex;
}

.ng-card-title {
  color: var(--fg-1);
  font-size: 15.5px;
  font-weight: 700;
}

.ng-card-sub {
  color: var(--fg-3);
  margin-top: 2px;
  font-size: 12px;
}

.ng-link {
  color: var(--ng-green-600);
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
}

.ng-link:hover {
  color: var(--ng-green-700);
}

.ng-link .lucide {
  width: 14px;
  height: 14px;
}

.ng-hero-card {
  background: var(--ng-green-600);
  border-radius: var(--radius-xl);
  color: #fff;
  margin-bottom: 16px;
  padding: 28px 34px 30px;
}

.ng-hero-card .eyebrow {
  color: #ffffffb8;
}

.ng-hero-val {
  color: #fff;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-top: 14px;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
}

.ng-hero-val .cur {
  color: #fff;
  font-weight: 800;
}

.ng-hero-badge {
  color: #fff;
  border-radius: var(--radius-pill);
  background: #ffffff29;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
}

.ng-hero-badge .lucide {
  width: 16px;
  height: 16px;
}

.ng-kpi-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  display: grid;
}

.ng-stat-tile {
  border-radius: var(--radius-lg);
  color: #fff;
  box-shadow: var(--shadow-xs);
  padding: 18px;
}

.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 {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.ng-stat-tile-label {
  color: #ffffffeb;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.ng-stat-tile-ic {
  color: #fff;
  background: #ffffff2e;
  border-radius: 9px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: inline-flex;
}

.ng-stat-tile-ic .lucide {
  width: 16px;
  height: 16px;
}

.ng-stat-tile-val {
  color: #fff;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 14px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.ng-stat-tile-sub {
  color: #ffffffd1;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.ng-kpi {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  background: #fff;
  border-radius: 13px;
  padding: 16px;
  position: relative;
}

.ng-kpi-top {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.ng-kpi-label {
  color: var(--fg-3);
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.ng-kpi-label:before {
  content: "";
  background: var(--n-300);
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.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 {
  background: var(--n-50);
  width: 30px;
  height: 30px;
  color: var(--fg-4);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.ng-kpi-ic .lucide {
  width: 16px;
  height: 16px;
}

.ng-kpi-val {
  color: var(--fg-1);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 12px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.ng-kpi-meta {
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  margin-top: 7px;
  font-size: 12px;
}

.ng-kpi-meta strong {
  color: var(--fg-2);
  font-weight: 700;
}

.ng-counters {
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  display: grid;
}

.ng-counter {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  background: #fff;
  border-radius: 13px;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  display: flex;
}

.ng-counter .c-label {
  color: var(--fg-3);
  font-size: 12.5px;
  font-weight: 600;
}

.ng-counter .c-val {
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.ng-counter .c-ic {
  background: var(--n-50);
  width: 40px;
  height: 40px;
  color: var(--fg-4);
  border-radius: 11px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

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

.ng-tbl {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13.5px;
}

.ng-tbl thead th {
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .07em;
  text-align: left;
  background: var(--n-25);
  border-bottom: 1px solid var(--border-subtle);
  padding: 11px 18px;
  font-size: 11px;
  font-weight: 700;
}

.ng-tbl thead th.num {
  text-align: right;
}

.ng-tbl tbody td {
  border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-1);
  padding: 12px 18px;
}

.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-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12.5px;
}

.ng-tbl .ref {
  font-family: var(--font-mono);
  color: var(--fg-3);
  font-size: 12.5px;
}

.ng-row-name {
  align-items: center;
  gap: 11px;
  display: flex;
}

.ng-alert-card {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  background: #fff;
  border-radius: 13px;
  overflow: hidden;
}

.ng-alert-card .ng-card-head {
  background: var(--ng-orange-50);
}

.ng-alert-row {
  border-bottom: 1px solid var(--border-subtle);
  justify-content: space-between;
  align-items: center;
  padding: 13px 20px;
  display: flex;
}

.ng-alert-row:last-child {
  border-bottom: 0;
}

.ng-alert-row:hover {
  background: var(--ng-orange-50);
}

.ng-alert-name {
  color: var(--fg-1);
  font-size: 13.5px;
  font-weight: 700;
}

.ng-alert-loc {
  color: var(--fg-3);
  margin-top: 1px;
  font-size: 12.5px;
}

.ng-alert-qty {
  text-align: right;
}

.ng-alert-qty .q {
  color: var(--danger);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 800;
}

.ng-alert-qty .s {
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.ng-stepper {
  align-items: flex-start;
  gap: 0;
  display: flex;
}

.ng-step {
  text-align: center;
  flex-direction: column;
  flex: 1;
  align-items: center;
  display: flex;
  position: relative;
}

.ng-step .bar {
  background: var(--n-200);
  z-index: 0;
  height: 2px;
  position: absolute;
  top: 17px;
  left: -50%;
  right: 50%;
}

.ng-step:first-child .bar {
  display: none;
}

.ng-step.done .bar, .ng-step.current .bar {
  background: var(--ng-green-500);
}

.ng-step .node {
  border: 2px solid var(--n-200);
  z-index: 1;
  width: 36px;
  height: 36px;
  color: var(--fg-4);
  background: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  position: relative;
}

.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 {
  border-color: var(--ng-orange-500);
  color: var(--ng-orange-600);
  box-shadow: 0 0 0 4px var(--ng-orange-50);
  background: #fff;
}

.ng-step .s-label {
  color: var(--fg-1);
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
}

.ng-step.todo .s-label {
  color: var(--fg-4);
}

.ng-step .s-meta {
  color: var(--fg-3);
  margin-top: 2px;
  font-size: 11.5px;
}

.ng-tl {
  flex-direction: column;
  display: flex;
}

.ng-tl-item {
  gap: 14px;
  padding-bottom: 20px;
  display: flex;
  position: relative;
}

.ng-tl-item:last-child {
  padding-bottom: 0;
}

.ng-tl-line {
  background: var(--border-default);
  width: 2px;
  position: absolute;
  top: 34px;
  bottom: -2px;
  left: 16px;
}

.ng-tl-item:last-child .ng-tl-line {
  display: none;
}

.ng-tl-ic {
  z-index: 1;
  border: 2px solid;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  display: inline-flex;
}

.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;
  min-width: 0;
  padding-top: 2px;
}

.ng-tl-top {
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  display: flex;
}

.ng-tl-title {
  color: var(--fg-1);
  font-size: 13.5px;
  font-weight: 700;
}

.ng-tl-actor {
  margin-top: 1px;
  font-size: 12.5px;
}

.ng-tl-actor .by {
  color: var(--ng-orange-700);
  font-weight: 600;
}

.ng-tl-time {
  color: var(--fg-4);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 11.5px;
}

.ng-tl-note {
  color: var(--fg-2);
  margin-top: 4px;
  font-size: 13px;
}

.ng-tl-quote {
  color: var(--fg-2);
  background: var(--n-25);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  margin-top: 8px;
  padding: 9px 13px;
  font-size: 13px;
  font-style: italic;
}

.ng-kv {
  border-bottom: 1px dashed var(--border-subtle);
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 13px;
  display: flex;
}

.ng-kv:last-child {
  border-bottom: 0;
}

.ng-kv .k {
  color: var(--fg-3);
}

.ng-kv .v {
  color: var(--fg-1);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ng-kv .v.mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
}

.ng-validator {
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  display: flex;
}

.ng-validator:last-child {
  border-bottom: 0;
}

.ng-validator .vn {
  color: var(--fg-1);
  font-size: 13.5px;
  font-weight: 700;
}

.ng-validator .vr {
  color: var(--fg-3);
  font-size: 12px;
}

.ng-chips {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
}

.ng-chip {
  border: 1px solid var(--border-default);
  color: var(--fg-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
}

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

.ng-kpi.danger .ng-kpi-val {
  color: var(--danger);
}

.ng-filters {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  display: grid;
}

.ng-field {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.ng-field > label {
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 700;
}

.ng-select {
  position: relative;
}

.ng-select select {
  appearance: none;
  border: 1px solid var(--border-default);
  width: 100%;
  color: var(--fg-1);
  cursor: pointer;
  box-shadow: var(--shadow-inset);
  background: #fff;
  border-radius: 9px;
  padding: 9px 34px 9px 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
}

.ng-select select:focus {
  border-color: var(--ng-green-500);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.ng-select .chev {
  pointer-events: none;
  color: var(--fg-4);
  width: 15px;
  height: 15px;
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
}

.ng-hbars {
  flex-direction: column;
  gap: 13px;
  display: flex;
}

.ng-hbar {
  grid-template-columns: 92px 1fr 86px;
  align-items: center;
  gap: 12px;
  display: grid;
}

.ng-hbar .lbl {
  color: var(--fg-2);
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}

.ng-hbar .track {
  background: var(--n-50);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  height: 18px;
  overflow: hidden;
}

.ng-hbar .fill {
  height: 100%;
  transition: width var(--dur-base) var(--ease-out);
  border-radius: 6px 0 0 6px;
  display: block;
}

.ng-hbar .val {
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
}

.ng-legend {
  align-items: center;
  gap: 16px;
  display: flex;
}

.ng-legend .item {
  color: var(--fg-2);
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
}

.ng-legend .sw {
  border-radius: 3px;
  width: 12px;
  height: 12px;
}

.ng-input {
  box-sizing: border-box;
  border: 1px solid var(--border-default);
  width: 100%;
  color: var(--fg-1);
  box-shadow: var(--shadow-inset);
  background: #fff;
  border-radius: 9px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13.5px;
}

.ng-input::placeholder {
  color: var(--fg-4);
}

.ng-input:focus {
  border-color: var(--ng-green-500);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.ng-input.with-ic {
  padding-left: 36px;
}

.ng-input-wrap {
  position: relative;
}

.ng-input-wrap > .lucide {
  width: 16px;
  height: 16px;
  color: var(--fg-4);
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

.ng-proj-wrap {
  position: relative;
}

.ng-proj-menu {
  border: 1px solid var(--border-default);
  min-width: 248px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  background: #fff;
  border-radius: 12px;
  padding: 6px;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
}

.ng-proj-group {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-4);
  padding: 9px 10px 4px;
  font-size: 10.5px;
  font-weight: 700;
}

.ng-proj-item {
  width: 100%;
  color: var(--fg-1);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
}

.ng-proj-item:hover {
  background: var(--n-50);
}

.ng-proj-item .pdot {
  background: var(--n-300);
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.ng-proj-item.sel .pdot {
  background: var(--ng-green-500);
}

.ng-proj-item .chk {
  color: var(--ng-green-600);
  width: 15px;
  height: 15px;
  margin-left: auto;
}

.ng-crumb {
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12.5px;
  display: flex;
}

.ng-crumb .crumb-link {
  font-family: inherit;
  font-size: inherit;
  color: var(--fg-3);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
}

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

.ng-filterpanel {
  overflow: hidden;
}

.ng-filter-head {
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  font-family: inherit;
  display: flex;
}

.ng-filter-head:hover {
  background: var(--n-25);
}

.ng-filter-title {
  color: var(--fg-1);
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
}

.ng-filter-title .lucide {
  width: 16px;
  height: 16px;
  color: var(--fg-3);
}

.ng-filter-toggle {
  color: var(--ng-green-600);
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
}

.ng-filter-toggle .lucide {
  width: 15px;
  height: 15px;
}

.ng-filter-body {
  border-top: 1px solid var(--border-subtle);
  padding: 16px 18px 18px;
}

.ng-rowmenu {
  border: 1px solid var(--border-default);
  min-width: 178px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  font-family: var(--font-sans);
  background: #fff;
  border-radius: 11px;
  padding: 5px;
  position: fixed;
}

.ng-rowmenu-item {
  width: 100%;
  color: var(--fg-1);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 7px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
}

.ng-rowmenu-item:hover {
  background: var(--n-50);
}

.ng-rowmenu-item .lucide {
  width: 15px;
  height: 15px;
  color: var(--fg-3);
}

.ng-rowmenu-item.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-pagination {
  border-top: 1px solid var(--border-subtle);
  background: var(--n-25);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  display: flex;
}

.ng-pagination .pp {
  color: var(--fg-3);
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
}

.ng-pagination .ng-select.sm select {
  box-shadow: var(--shadow-xs);
  padding: 6px 30px 6px 10px;
  font-size: 12.5px;
}

.ng-pagination .ng-select.sm .chev {
  width: 14px;
  height: 14px;
  right: 9px;
}

.ng-pagination .nav {
  align-items: center;
  gap: 12px;
  display: flex;
}

.ng-pagination .rng {
  color: var(--fg-3);
  font-size: 12.5px;
  font-weight: 600;
}

.pg-btn {
  border: 1px solid var(--border-default);
  cursor: pointer;
  width: 32px;
  height: 32px;
  color: var(--fg-2);
  background: #fff;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.pg-btn:hover:not(:disabled) {
  background: var(--n-50);
}

.pg-btn:disabled {
  opacity: .4;
  cursor: default;
}

.pg-btn .lucide {
  width: 16px;
  height: 16px;
}

.ng-form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  display: grid;
}

.ng-form-grid .col-2 {
  grid-column: span 2;
}

.ng-hint {
  color: var(--fg-4);
  margin-top: 5px;
  font-size: 12px;
}

textarea.ng-input {
  resize: vertical;
  min-height: 88px;
  line-height: 1.5;
}

.ng-form-actions {
  gap: 10px;
  margin-top: 24px;
  display: flex;
}

.ng-detail-grid {
  grid-template-columns: 1fr 1fr;
  gap: 20px 36px;
  display: grid;
}

.ng-detail-field .k {
  color: var(--fg-3);
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
}

.ng-detail-field .v {
  color: var(--fg-1);
  font-size: 15px;
  font-weight: 600;
}

.ng-detail-field .vsub {
  color: var(--fg-4);
  margin-top: 2px;
  font-size: 12px;
}

.ng-section-title {
  color: var(--fg-1);
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.ng-limit-row {
  background: var(--n-25);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  font-size: 13.5px;
  display: flex;
}

.ng-limit-row .ln {
  color: var(--fg-1);
  font-weight: 700;
}

.ng-limit-row .lv {
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ng-sw {
  border: 1px solid #1216131a;
  border-radius: 10px;
  align-items: flex-end;
  height: 64px;
  padding: 7px 9px;
  display: flex;
}

.ng-sw .hex {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
}

.ng-notice-stack {
  z-index: 1000;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  display: flex;
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.ng-notice {
  border: 1px solid var(--border-default);
  width: 380px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: ng-notice-in var(--dur-base) var(--ease-out);
  background: #fff;
  border-radius: 12px;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 12px 12px 14px;
  display: flex;
}

.ng-notice.is-leaving {
  animation: ng-notice-out .22s var(--ease-out) forwards;
}

.ng-notice-ic {
  background: var(--n-50);
  width: 30px;
  height: 30px;
  color: var(--fg-4);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.ng-notice-ic .lucide {
  width: 17px;
  height: 17px;
}

.ng-notice-body {
  flex: 1;
  min-width: 0;
}

.ng-notice-title {
  color: var(--fg-1);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.ng-notice-msg {
  color: var(--fg-3);
  margin-top: 1px;
  font-size: 12.5px;
  line-height: 1.4;
}

.ng-notice-close {
  width: 24px;
  height: 24px;
  color: var(--fg-4);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.ng-notice-close:hover {
  background: var(--n-50);
  color: var(--fg-2);
}

.ng-notice-close .lucide {
  width: 15px;
  height: 15px;
}

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

/* Delta Nation · tokens officiels (charte i-futur) */
:root {
  --ng-green-50: #e8f3e8;
  --ng-green-100: #cde6ce;
  --ng-green-200: #9dcd9f;
  --ng-green-300: #5faf62;
  --ng-green-400: #2e9233;
  --ng-green-500: #127914;
  --ng-green-600: #0e6510;
  --ng-green-700: #0a4f0c;
  --ng-green-800: #073908;
  --ng-green: var(--ng-green-500);
  --ng-orange-50: #fff4e5;
  --ng-orange-100: #ffe4c2;
  --ng-orange-200: #ffcd8f;
  --ng-orange-300: #ffb152;
  --ng-orange-400: #ff9d27;
  --ng-orange-500: #ff8c00;
  --ng-orange-600: #e07700;
  --ng-orange-700: #b35e00;
  --ng-orange-800: #8a4700;
  --ng-orange: var(--ng-orange-500);
  --n-0: #fff;
  --n-25: #f7f8f8;
  --n-50: #f1f3f2;
  --n-100: #e7eae8;
  --n-200: #d8dcd9;
  --n-300: #c0c6c2;
  --n-400: #949b97;
  --n-500: #6b726e;
  --n-600: #4d534f;
  --n-700: #343935;
  --n-800: #20231f;
  --n-900: #121613;
  --ink: #121613;
  --ink-2: #20231f;
  --ng-teal-500: #2d8c86;
  --ng-teal-50: #e4f1ef;
  --ng-blue-500: #2c6db5;
  --ng-blue-50: #e5eff9;
  --ng-gold-500: #be8a1f;
  --ng-gold-50: #faf1d8;
  --ok: var(--ng-green-600);
  --ok-bg: var(--ng-green-50);
  --ok-border: var(--ng-green-200);
  --pending: var(--ng-orange-600);
  --pending-bg: var(--ng-orange-50);
  --pending-border: var(--ng-orange-200);
  --danger: #b23a24;
  --danger-bg: #f8e7e1;
  --danger-border: #e8bcad;
  --fg-1: var(--n-900);
  --fg-2: var(--n-700);
  --fg-3: var(--n-500);
  --fg-4: var(--n-400);
  --fg-on-orange: var(--ink);
  --fg-on-green: #fff;
  --fg-on-dark: #eef1ef;
  --bg-page: #fafbfa;
  --bg-surface: var(--n-0);
  --bg-sunken: var(--n-50);
  --bg-inverse: var(--ink);
  --border-subtle: var(--n-100);
  --border-default: var(--n-200);
  --border-strong: var(--n-300);
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 13px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --shadow-xs: 0 1px 1px #1216130a;
  --shadow-sm: 0 1px 2px #1216130f, 0 1px 1px #1216130a;
  --shadow-md: 0 4px 12px #1216130f, 0 1px 2px #1216130a;
  --shadow-lg: 0 12px 28px #1216131a, 0 2px 4px #1216130a;
  --shadow-inset: inset 0 1px 2px #1216130f;
  --shadow-focus: 0 0 0 3px #12791442;
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: var(--font-sans);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .12s;
  --dur-base: .2s;
  --num-tabular: "tnum" 1, "lnum" 1;
}

.ng, .ng * {
  box-sizing: border-box;
}

.ng {
  font-family: var(--font-sans);
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "pnum" 1, "lnum" 1;
  font-size: 15px;
  line-height: 1.55;
}

.ng h1, .ng h2, .ng h3, .ng h4 {
  color: var(--fg-1);
  margin: 0;
}

.ng .tnum {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-tabular);
}

.ng .eyebrow {
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 700;
}

.ng .mono {
  font-family: var(--font-mono);
}

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==========================================================================
   Delta Nation design tokens — charte officielle (i-futur)
   Vert #127914 = primaire · Orange #FF8C00 = accent
   ========================================================================== */
:root {
  --ng-green-50: #e8f3e8;
  --ng-green-100: #cde6ce;
  --ng-green-200: #9dcd9f;
  --ng-green-300: #5faf62;
  --ng-green-400: #2e9233;
  --ng-green-500: #127914;
  --ng-green-600: #0e6510;
  --ng-green-700: #0a4f0c;
  --ng-green-800: #073908;
  --ng-orange-50: #fff4e5;
  --ng-orange-100: #ffe4c2;
  --ng-orange-200: #ffcd8f;
  --ng-orange-300: #ffb152;
  --ng-orange-400: #ff9d27;
  --ng-orange-500: #ff8c00;
  --ng-orange-600: #e07700;
  --ng-orange-700: #b35e00;
  --ng-orange-800: #8a4700;
  --n-0: #ffffff;
  --n-25: #f7f8f8;
  --n-50: #f1f3f2;
  --n-100: #e7eae8;
  --n-200: #d8dcd9;
  --n-300: #c0c6c2;
  --n-400: #949b97;
  --n-500: #6b726e;
  --n-600: #4d534f;
  --n-700: #343935;
  --n-800: #20231f;
  --n-900: #121613;
  --ink: #121613;
  --brand: var(--ng-green-500);
  --brand-strong: var(--ng-green-600);
  --brand-soft: var(--ng-green-50);
  --accent: var(--ng-orange-500);
  --accent-strong: var(--ng-orange-600);
  --accent-soft: var(--ng-orange-50);
  --bg-page: #fafbfa;
  --surface: var(--n-0);
  --surface-2: var(--n-25);
  --ng-teal-500: #2d8c86;
  --ng-teal-50: #e4f1ef;
  --ng-blue-500: #2c6db5;
  --ng-blue-50: #e5eff9;
  --ng-gold-500: #be8a1f;
  --ng-gold-50: #faf1d8;
  --ok: var(--ng-green-600);
  --ok-bg: var(--ng-green-50);
  --ok-border: var(--ng-green-200);
  --pending: var(--ng-orange-600);
  --pending-bg: var(--ng-orange-50);
  --pending-border: var(--ng-orange-200);
  --danger: #b23a24;
  --danger-bg: #f8e7e1;
  --danger-border: #e8bcad;
  --fg-1: var(--n-900);
  --fg-2: var(--n-700);
  --fg-3: var(--n-500);
  --fg-4: var(--n-400);
  --border-subtle: var(--n-100);
  --border-default: var(--n-200);
  --border-strong: var(--n-300);
  --shadow-xs: 0 1px 1px rgba(18, 22, 19, 0.04);
  --shadow-sm: 0 1px 2px rgba(18, 22, 19, 0.06), 0 1px 1px rgba(18, 22, 19, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 22, 19, 0.06), 0 1px 2px rgba(18, 22, 19, 0.04);
  --shadow-lg: 0 12px 28px rgba(18, 22, 19, 0.10), 0 2px 4px rgba(18, 22, 19, 0.04);
  --shadow-inset: inset 0 1px 2px rgba(18, 22, 19, 0.06);
  --shadow-focus: 0 0 0 3px rgba(18, 121, 20, 0.26);
  --radius-control: 9px;
  --radius-card: 13px;
  --radius-modal: 18px;
  --radius-nav: 10px;
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --dur-fast: 120ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-page);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "pnum" 1, "lnum" 1, "tnum" 1;
}

/* Tabular numerals for money, dates, counts, references */
.tabular-nums,
table td,
table th {
  font-variant-numeric: tabular-nums;
}

@layer components {
  .cards {
    @apply rounded-card border border-n-100 bg-white p-6 shadow-xs transition-shadow duration-fast ease-dn hover:shadow-md sm:p-8 w-[25rem];
  }

  .card-head {
    @apply rounded-control bg-brand-500 p-2 text-white flex space-x-5 items-center;
  }

  .rejet-card {
    @apply border border-[#e8bcad] bg-[#f8e7e1];
  }

  .valid-card {
    @apply border border-[#9dcd9f] bg-[#e8f3e8];
  }

  .tag {
    @apply px-2.5 py-1 border border-transparent text-dn-xs font-semibold rounded-full text-white;
  }

  .is-primary {
    @apply inline-flex items-center justify-center gap-2 bg-brand-500 hover:bg-brand-600 active:bg-brand-700 focus:outline-none text-white border border-brand-600 focus-visible:shadow-focus shadow-xs transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 1px rgba(18, 22, 19, 0.04);
  }

  .is-warning,
  .is-accent {
    @apply inline-flex items-center justify-center gap-2 bg-accent-500 hover:bg-accent-600 active:bg-accent-700 focus:outline-none text-white border border-accent-600 focus-visible:shadow-focus shadow-xs transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(18, 22, 19, 0.04);
  }

  .is-danger {
    @apply inline-flex items-center justify-center gap-2 text-brick bg-white border border-[#e8bcad] hover:bg-[#f8e7e1] active:bg-[#f0d5cc] focus:outline-none focus-visible:shadow-focus shadow-xs transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-danger-solid {
    @apply inline-flex items-center justify-center gap-2 bg-brick hover:bg-[#9a3020] active:bg-[#7a2619] focus:outline-none text-white border border-[#9a3020] focus-visible:shadow-focus shadow-xs transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-light-primary {
    @apply bg-brand-50 text-brand-700 hover:bg-brand-100 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .bank-card {
    @apply relative overflow-hidden grid grid-cols-3 gap-8 rounded-lg shadow-md p-8 bg-green-900 bg-[url(/../images/bg-card.png)] bg-no-repeat bg-contain bg-right-bottom min-w-[300px] max-w-[400px] w-full h-[200px];
  }

  .bank-card:before,
  .bank-card:after {
    @apply content-[''] w-[400px] h-[400px] rounded-full bg-black/[0.1] backdrop-blur-[1px] block absolute z-0;
  }

  .bank-card:before {
    @apply bottom-[-300px] left-[-200px];
  }

  .bank-card:after {
    @apply top-[-300px] right-[-150px];
  }

  .is-light-info {
    @apply bg-blue-50 text-blue-500 hover:bg-blue-50/80 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-light-warning {
    @apply bg-accent-50 text-accent-700 hover:bg-accent-100 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-light-danger {
    @apply bg-[#f8e7e1] text-brick hover:bg-[#f0d5cc] focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-light-success {
    @apply bg-[#e8f3e8] text-brand-700 hover:bg-brand-100 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-light {
    @apply bg-n-50 text-n-600 hover:bg-n-100 hover:text-n-700 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-light-outlined,
  .is-secondary {
    @apply inline-flex items-center justify-center gap-2 text-n-900 bg-white border border-n-200 hover:bg-n-25 hover:border-n-300 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control shadow-xs;
  }

  .is-ghost {
    @apply inline-flex items-center justify-center gap-2 text-n-600 bg-transparent border border-transparent shadow-none hover:bg-n-50 hover:text-n-800 focus:outline-none focus-visible:shadow-focus transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .is-success {
    @apply bg-brand-500 hover:bg-brand-600 active:bg-brand-700 focus:outline-none text-white focus-visible:shadow-focus shadow-xs transition-all duration-fast ease-dn font-bold text-dn-sm rounded-control;
  }

  .label {
    @apply font-semibold inline-block mb-2 text-n-700 text-dn-sm;
  }

  .button-step {
    @apply py-2 w-full flex justify-center items-center pl-[1.3rem] h-[63px] relative bg-brand-300 hover:bg-brand-400;
  }

  .button-step-active {
    @apply border-transparent font-medium text-white cursor-pointer bg-brand-600 hover:bg-brand-700;
  }

  .button-step-disabled {
    @apply pointer-events-none text-gray-400 hover:bg-brand-200;
  }

  .card {
    @apply relative flex min-w-0 flex-col rounded-card shadow-xs break-words bg-white bg-clip-border border border-n-100 p-6 transition-shadow duration-fast ease-dn hover:shadow-sm;
  }

  .card-title {
    @apply my-6 text-2xl font-extrabold tracking-tight transition-colors duration-fast text-n-900 text-center;
  }

  .textarea {
    @apply disabled:bg-n-50 focus:border-brand-500 focus:shadow-focus block w-full py-[9px] px-3 mb-2 border-n-200 rounded-control shadow-inset transition-all duration-fast ease-dn text-dn-sm text-n-900;
  }

  .select {
    @apply mt-1 block w-full py-[9px] px-3 border border-n-200 bg-white rounded-control shadow-inset focus:outline-none focus:border-brand-500 focus:shadow-focus transition-all duration-fast ease-dn text-dn-sm text-n-900;
  }

  .input {
    @apply disabled:bg-n-50 focus:border-brand-500 focus:shadow-focus block w-full py-[9px] px-3 mb-2 border-n-200 rounded-control shadow-inset transition-all duration-fast ease-dn text-dn-sm text-n-900 placeholder:text-n-400;
  }

  .country-select select {
    @apply disabled:bg-n-50 focus:border-brand-500 focus:shadow-focus block w-full mb-2 border-n-200 rounded-control shadow-inset transition-all duration-fast ease-dn text-dn-sm;
  }

  .button {
    @apply inline-flex items-center justify-center gap-2 py-2.5 px-[15px] border border-transparent font-bold rounded-control cursor-pointer transition-all duration-fast ease-dn shadow-xs text-dn-sm leading-none;
  }

  .button-sm,
  .button.is-small {
    @apply py-[7px] px-[11px] text-[12.5px] rounded-[8px];
  }

  .button .material-symbols-outlined,
  .button .lucide {
    @apply text-[15px] leading-none;
    width: 15px;
    height: 15px;
  }

  .button-sm .material-symbols-outlined,
  .button-sm .lucide,
  .button.is-small .material-symbols-outlined,
  .button.is-small .lucide {
    width: 14px;
    height: 14px;
    font-size: 14px;
  }

  .upload-btn {
    @apply py-2 px-4 border border-indigo-500 bg-indigo-50 hover:bg-indigo-600 focus:ring-indigo-500 focus:ring-offset-indigo-500 text-indigo-700 hover:text-indigo-100 transition-all duration-300 transform hover:-translate-y-0.5 text-center text-base font-semibold shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg;
  }

  .btn-login {
    @apply cursor-pointer inline-flex items-center justify-center gap-2 px-[15px] py-2.5 text-dn-sm bg-brand-500 hover:bg-brand-600 active:bg-brand-700 text-white border border-brand-600 shadow-xs transition-all duration-fast ease-dn rounded-control font-bold;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 1px rgba(18, 22, 19, 0.04);
  }

  .btn-logout {
    @apply cursor-pointer inline-flex items-center justify-center gap-2 px-[15px] py-2.5 border border-[#e8bcad] text-brick hover:bg-[#f8e7e1] shadow-xs transition-all duration-fast ease-dn rounded-control font-bold text-dn-sm;
  }

  .links {
    @apply px-3 py-1.5 rounded-control inline-flex items-center w-full text-dn-sm font-bold transition-all duration-fast ease-dn text-brand-600 hover:text-brand-700;
  }

  .nav-group-label {
    @apply px-3 pt-3.5 pb-1.5 text-dn-label font-bold uppercase text-n-400;
  }

  .nav-item {
    @apply flex items-center gap-[11px] px-2.5 py-2 rounded-control text-dn-sm font-medium text-n-700 transition-all duration-fast ease-dn hover:bg-n-50 hover:text-n-900 min-h-[40px];
  }

  .nav-item-active {
    @apply bg-brand-500 text-white hover:bg-brand-500 hover:text-white active:bg-brand-600 shadow-sm rounded-nav font-bold;
  }

  .dn-badge {
    @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-dn-xs font-bold border;
  }

  .dn-badge-ok {
    @apply dn-badge bg-[#e8f3e8] text-brand-700 border-[#9dcd9f];
  }

  .dn-badge-pending {
    @apply dn-badge bg-accent-50 text-accent-700 border-accent-200;
  }

  .dn-badge-danger {
    @apply dn-badge bg-[#f8e7e1] text-brick border-[#e8bcad];
  }

  .dn-hero-card {
    @apply rounded-modal text-white mb-4 px-[34px] py-7 shadow-sm;
  }

  .dn-stat-tile {
    @apply rounded-card text-white shadow-xs p-[18px];
  }

  .dn-stat-tile-green { @apply dn-stat-tile bg-brand-500; }
  .dn-stat-tile-orange { @apply dn-stat-tile bg-accent-500; }
  .dn-stat-tile-teal { @apply dn-stat-tile bg-teal-500; }
  .dn-stat-tile-gold { @apply dn-stat-tile bg-gold-500; }

  .dn-table {
    @apply w-full border-separate border-spacing-0 text-dn-sm;
  }

  .dn-table thead th {
    @apply text-n-500 uppercase tracking-[0.07em] text-left bg-n-25 border-b border-n-100 py-[11px] px-[18px] text-dn-xs font-bold;
  }

  .dn-table tbody td {
    @apply border-b border-n-100 py-3 px-[18px] text-n-700;
  }

  .dn-table tbody tr:hover td {
    @apply bg-n-25;
  }

  .dn-page-title {
    @apply text-dn-page font-extrabold text-n-900 tracking-tight;
  }

  .dn-page-sub {
    @apply text-dn-sm text-n-500;
  }

  /* ── Delta Nation · pages détail (approvisionnement, virements…) ── */
  .dn-detail-breadcrumb {
    @apply flex flex-wrap items-center gap-1.5 text-dn-xs text-n-500 mb-4;
  }
  .dn-detail-breadcrumb a {
    @apply text-n-500 hover:text-brand-600 transition-colors;
  }
  .dn-detail-breadcrumb .sep {
    @apply text-n-300;
  }
  .dn-detail-breadcrumb .current {
    @apply text-n-700 font-semibold;
  }
  .dn-detail-header {
    @apply flex flex-col gap-4 mb-6 sm:flex-row sm:items-start sm:justify-between;
  }
  .dn-detail-title-row {
    @apply flex flex-wrap items-center gap-3;
  }
  .dn-detail-title {
    @apply text-[22px] font-extrabold text-n-900 tracking-tight leading-tight sm:text-[26px];
  }
  .dn-detail-badge {
    @apply inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-dn-xs font-bold;
  }
  .dn-detail-badge-ok {
    @apply bg-[#e8f3e8] text-brand-700 border-[#9dcd9f];
  }
  .dn-detail-badge-pending {
    @apply bg-accent-50 text-accent-700 border-accent-200;
  }
  .dn-detail-subtitle {
    @apply mt-1 text-dn-sm text-n-500;
  }
  .dn-detail-card {
    @apply rounded-card border border-n-100 bg-white shadow-xs overflow-hidden;
  }
  .dn-detail-card-head {
    @apply border-b border-n-100 px-5 py-4;
  }
  .dn-detail-card-title {
    @apply text-[15px] font-extrabold text-n-900;
  }
  .dn-detail-card-sub {
    @apply text-dn-xs text-n-500 mt-0.5;
  }
  .dn-stepper {
    @apply flex items-start gap-0 mb-6 overflow-x-auto pb-1;
  }
  .dn-step {
    @apply relative flex flex-1 min-w-[88px] flex-col items-center text-center;
  }
  .dn-step-bar {
    @apply absolute top-[17px] right-1/2 left-[-50%] z-0 h-0.5 bg-n-200;
  }
  .dn-step:first-child .dn-step-bar {
    @apply hidden;
  }
  .dn-step.is-done .dn-step-bar,
  .dn-step.is-current .dn-step-bar {
    @apply bg-brand-500;
  }
  .dn-step-node {
    @apply relative z-[1] inline-flex h-9 w-9 items-center justify-center rounded-full border-2 border-n-200 bg-white text-[13px] font-extrabold text-n-400;
  }
  .dn-step.is-done .dn-step-node {
    @apply border-brand-600 bg-brand-500 text-white;
  }
  .dn-step.is-current .dn-step-node {
    @apply border-accent-500 bg-white text-accent-600;
    box-shadow: 0 0 0 4px #fff4e5;
  }
  .dn-step-label {
    @apply mt-2.5 text-[12.5px] font-bold text-n-900;
  }
  .dn-step.is-todo .dn-step-label {
    @apply text-n-400;
  }
  .dn-step-meta {
    @apply mt-0.5 text-[11.5px] text-n-500;
  }
  .dn-summary-row {
    @apply flex items-baseline justify-between gap-4 border-b border-n-100 py-3.5 last:border-0;
  }
  .dn-summary-label {
    @apply text-dn-sm text-n-500 shrink-0;
  }
  .dn-summary-value {
    @apply text-dn-sm font-bold text-n-900 text-right;
  }
  .dn-tl-item {
    @apply relative flex gap-3.5 pb-5 last:pb-0;
  }
  .dn-tl-line {
    @apply absolute left-4 top-[34px] bottom-0 w-0.5 bg-n-200;
  }
  .dn-tl-item:last-child .dn-tl-line {
    @apply hidden;
  }
  .dn-tl-ic {
    @apply relative z-[1] inline-flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-full border-2;
  }
  .dn-tl-ic.ok {
    @apply border-[#9dcd9f] bg-[#e8f3e8] text-brand-600;
  }
  .dn-tl-ic.pending {
    @apply border-accent-200 bg-accent-50 text-accent-600;
  }
  .dn-tl-ic.neutral {
    @apply border-n-200 bg-n-50 text-n-400;
  }
  .dn-tl-title {
    @apply text-dn-sm font-bold text-n-900;
  }
  .dn-tl-actor {
    @apply text-[12.5px] text-n-500 mt-0.5;
  }
  .dn-tl-actor strong {
    @apply text-accent-700 font-semibold;
  }
  .dn-tl-note {
    @apply mt-2 rounded-control border-l-[3px] border-n-200 bg-n-25 px-3 py-2 text-dn-xs text-n-600 italic;
  }
  .dn-tl-time {
    @apply text-dn-xs text-n-400 whitespace-nowrap;
  }
  .dn-detail-success {
    @apply rounded-card border border-brand-200 bg-brand-50 p-6 text-center;
  }

  /* ── Delta Nation · graphiques dashboard ── */
  .dn-chart-card {
    @apply rounded-card border border-n-100 bg-white shadow-xs overflow-hidden;
  }
  .dn-chart-card-head {
    @apply flex flex-col gap-3 border-b border-n-100 px-5 py-4 sm:flex-row sm:items-start sm:justify-between;
  }
  .dn-chart-card-title {
    @apply text-[15px] font-extrabold text-n-900;
  }
  .dn-chart-card-sub {
    @apply text-dn-xs text-n-500 mt-0.5;
  }
  .dn-chart-card-body {
    @apply p-5 pt-4;
  }
  .dn-chart-legend {
    @apply flex flex-wrap items-center gap-4 shrink-0;
  }
  .dn-chart-legend-item {
    @apply inline-flex items-center gap-1.5 text-dn-xs font-semibold text-n-600;
  }
  .dn-chart-legend-swatch {
    @apply inline-block h-2.5 w-2.5 rounded-[2px];
  }
  .dn-chart-legend-swatch.is-orange {
    @apply bg-accent-500;
  }
  .dn-chart-legend-swatch.is-green {
    @apply bg-[#c8e6c9];
  }
  .dn-region-bars {
    @apply space-y-4;
  }
  .dn-region-row {
    @apply grid grid-cols-[minmax(4.5rem,5.5rem)_1fr_minmax(4.5rem,5rem)] items-center gap-3;
  }
  .dn-region-label {
    @apply text-dn-sm font-semibold text-n-800 truncate;
  }
  .dn-region-track {
    @apply h-2.5 w-full overflow-hidden rounded-full bg-n-100;
  }
  .dn-region-fill {
    @apply h-full rounded-full bg-brand-600 transition-all duration-500;
  }
  .dn-region-value {
    @apply text-dn-xs font-bold text-n-700 text-right whitespace-nowrap;
  }

  .deposed-btn {
    @apply cursor-pointer rounded-full bg-[#127914] hover:bg-[#0f6511] px-8 py-3 h-12 text-sm font-semibold text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#127914] shadow-xs transition-colors duration-150;
  }

  .undeposed-btn {
    @apply cursor-pointer rounded-full bg-orange-500 hover:bg-orange-600 px-8 py-3 h-12 text-sm font-semibold text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 shadow-xs transition-colors duration-150;
  }

  .file-btn {
    @apply cursor-pointer bg-slate-700 hover:bg-slate-800 px-6 py-3 text-white rounded-control text-lg shadow-xs transition-colors duration-150 font-semibold;
  }

  .link-download {
    @apply cursor-pointer rounded-control bg-brand-600 hover:bg-brand-700 px-8 py-3 h-12 font-semibold text-white text-xs sm:text-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 shadow-xs transition-colors duration-150;
  }

  .img-lg .client-photo {
    @apply max-w-[1500px] max-h-[150px] rounded-lg mb-2;
  }
}

.button-step::before {
  border-left: 20px solid #fff;
  left: 0;
  top: 0;
  bottom: 0;
}

.button-step::after {
  border-left: 18px solid #7cc07f;
  right: -18px;
  top: 0px;
  bottom: 0;
  z-index: 1;
  transition: all 0.3s ease-in-out;
}

.button-step-active.button-step::after {
  border-left-color: #0f6511;
}

.button-step::before,
.button-step::after {
  content: "";
  position: absolute;
  border-bottom: 40px solid transparent;
}

@media (min-width: 1024px) {

  .button-step::before,
  .button-step::after {
    border-bottom: 64px solid transparent;
  }
}

.button-step-active.button-step:hover::after {
  border-left-color: #0c520e;
}

.button-step:hover::after {
  border-left-color: #3f9e43;
}

.active-border .border {
  @apply border-brand-500;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
}

.zoom-animation {
  transition: transform 0.7s ease-in-out;
  /* Définissez la durée et la fonction de transition selon vos préférences */
  transform-origin: center center;
}

@keyframes floating {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.float-animation {
  animation: floating 9s ease-in-out infinite;
  /* Définissez la durée et la fonction de transition selon vos préférences */
}

.payment-notification {
  text-align: center;
}

.payment-notification .is-svg-container {
  margin: 0 auto;
}

.payment-notification.is-danger .is-svg-container svg {
  width: 50px;
  height: 50px;
  color: #dc2626;
  /* replace $danger with the actual color value */
}

.payment-notification.is-success .is-svg-container svg {
  width: 50px;
  height: 50px;
  color: #16a34a;
  /* replace $success with the actual color value */
}

.payment-notification.is-pending .is-svg-container {
  width: 50px;
  height: 50px;
}

.payment-notification.is-pending .is-svg-container svg {
  fill: #1d4ed8;
  /* replace $primary with the actual color value */
}

.notification .close {
  right: 0.5rem;
  position: absolute;
  top: 0.5rem;
}

/* Disabled button styles */
button:disabled {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

button:disabled:hover {
  transform: none !important;
}
/* Payment Page Styles */
.payment-header {
  background: var(--brand);
  animation: fadeInDown 0.5s ease-out;
}

.payment-card {
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-modal);
  animation: slideUp 0.4s ease-out;
}

.button-text {
  transition: all 0.2s ease;
}

.is-loading .button-text {
  opacity: 0;
}

.is-loading .loading-spinner {
  display: block !important;
}

/* Animation pour les champs de saisie */
.payment-form input:focus {
  transform: translateY(-1px);
  border-color: var(--brand) !important;
  outline: none !important;
  box-shadow: var(--shadow-focus);
}

/* Animation pour le bouton */
.payment-form button:not(:disabled):hover {
  box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -5px rgba(0, 0, 0, 0.04);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

/* Responsive design pour pages de paiement */
@media (max-width: 768px) {

  .payment-page-section,
  .payment-page-section.w-5\/12 {
    width: 95% !important;
    margin: 0 auto;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {

  .payment-page-section,
  .payment-page-section.w-5\/12 {
    width: 65% !important;
  }
}

@media (min-width: 1025px) {

  .payment-page-section,
  .payment-page-section.w-5\/12 {
    width: 41.666667% !important;
    /* w-5/12 = 41.666667% */
    max-width: 48rem;
    /* max-w-3xl */
  }
}
.choices {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  font-size: 16px
}

.choices:focus {
  outline: 0
}

.choices:last-child {
  margin-bottom: 0
}

.choices.is-open {
  overflow: initial
}

.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background-color: #eaeaea;
  cursor: not-allowed;
  -webkit-user-select: none;
  user-select: none
}

.choices.is-disabled .choices__item {
  cursor: not-allowed
}

.choices [hidden] {
  display: none !important
}

.choices[data-type*=select-one] {
  cursor: pointer
}

.choices[data-type*=select-one] .choices__inner {
  padding-bottom: 7.5px
}

.choices[data-type*=select-one] .choices__input {
  display: block;
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  background-color: #fff;
  margin: 0
}

.choices[data-type*=select-one] .choices__button {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
  padding: 0;
  background-size: 8px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -10px;
  margin-right: 25px;
  height: 20px;
  width: 20px;
  border-radius: 10em;
  opacity: .25
}

.choices[data-type*=select-one] .choices__button:focus,
.choices[data-type*=select-one] .choices__button:hover {
  opacity: 1
}

.choices[data-type*=select-one] .choices__button:focus {
  box-shadow: 0 0 0 2px #0346f2
}

.choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
  display: none
}

.choices[data-type*=select-one]::after {
  content: "";
  height: 0;
  width: 0;
  border-style: solid;
  border-color: #333 transparent transparent;
  border-width: 5px;
  position: absolute;
  right: 11.5px;
  top: 50%;
  margin-top: -2.5px;
  pointer-events: none
}

.choices[data-type*=select-one].is-open::after {
  border-color: transparent transparent #333;
  margin-top: -7.5px
}

.choices[data-type*=select-one][dir=rtl]::after {
  left: 11.5px;
  right: auto
}

.choices[data-type*=select-one][dir=rtl] .choices__button {
  right: auto;
  left: 0;
  margin-left: 25px;
  margin-right: 0
}

.choices[data-type*=select-multiple] .choices__inner,
.choices[data-type*=text] .choices__inner {
  cursor: text
}

.choices[data-type*=select-multiple] .choices__button,
.choices[data-type*=text] .choices__button {
  position: relative;
  display: inline-block;
  margin: 0 -4px 0 8px;
  padding-left: 16px;
  border-left: 1px solid #0544e6;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
  background-size: 8px;
  width: 8px;
  line-height: 1;
  opacity: .75;
  border-radius: 0
}

.choices[data-type*=select-multiple] .choices__button:focus,
.choices[data-type*=select-multiple] .choices__button:hover,
.choices[data-type*=text] .choices__button:focus,
.choices[data-type*=text] .choices__button:hover {
  opacity: 1
}

.choices__inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  background-color: #ffffff;
  padding: 7.5px 7.5px 3.75px;
  border: 1px solid #d1d5db;
  font-size: 14px;
  min-height: 44px;
  overflow: hidden;
  border-radius: 6px;
}

.is-focused .choices__inner,
.is-open .choices__inner {
  border-color: #b7b7b7
}

.is-open .choices__inner {
  border-radius: 2.5px 2.5px 0 0
}

.is-flipped.is-open .choices__inner {
  border-radius: 0 0 2.5px 2.5px
}

.choices__list {
  margin: 0;
  padding-left: 0;
  list-style: none
}

.choices__list--single {
  display: inline-block;
  padding: 4px 16px 4px 4px;
  width: 100%
}

[dir=rtl] .choices__list--single {
  padding-right: 4px;
  padding-left: 16px
}

.choices__list--single .choices__item {
  width: 100%
}

.choices__list--multiple {
  display: inline
}

.choices__list--multiple .choices__item {
  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  margin-right: 3.75px;
  margin-bottom: 3.75px;
  background-color: #0346f2;
  border: 1px solid #0238c2;
  color: #fff;
  word-break: break-all;
  box-sizing: border-box
}

.choices__list--multiple .choices__item[data-deletable] {
  padding-right: 5px
}

[dir=rtl] .choices__list--multiple .choices__item {
  margin-right: 0;
  margin-left: 3.75px
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: #0238c2;
  border: 1px solid #0544e6
}

.is-disabled .choices__list--multiple .choices__item {
  background-color: #aaa;
  border: 1px solid #919191
}


@media screen and (min-width: 550px),
print {
  .country-select .choices__list--dropdown {
    min-width: 252px;
  }
}

.country-select .choices__inner {
  padding: 2px !important;
  min-height: 32px;
  font-size: 13px;
}

.country-select .choices__list.choices__list--single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
  /* padding: 2px; */
}

.choices__list--dropdown {
  visibility: hidden;
  z-index: 1;
  position: absolute;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ddd;
  top: 100%;
  margin-top: -1px;
  border-bottom-left-radius: 2.5px;
  border-bottom-right-radius: 2.5px;
  overflow: hidden;
  word-break: break-all;
  will-change: visibility
}

.choices__list--dropdown.is-active {
  visibility: visible
}

.is-open .choices__list--dropdown {
  border-color: #b7b7b7
}

.is-flipped .choices__list--dropdown {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: .25rem .25rem 0 0
}

.choices__list--dropdown .choices__list {
  position: relative;
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position
}

.choices__list--dropdown .choices__item {
  position: relative;
  padding: 10px;
  font-size: 14px
}

[dir=rtl] .choices__list--dropdown .choices__item {
  text-align: right
}

@media (min-width:640px) {
  .choices__list--dropdown .choices__item--selectable {
    padding-right: 100px
  }

  .choices__list--dropdown .choices__item--selectable::after {
    content: attr(data-select-text);
    font-size: 12px;
    opacity: 0;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%)
  }

  [dir=rtl] .choices__list--dropdown .choices__item--selectable {
    text-align: right;
    padding-left: 100px;
    padding-right: 10px
  }

  [dir=rtl] .choices__list--dropdown .choices__item--selectable::after {
    right: auto;
    left: 10px
  }
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #f2f2f2
}

.choices__list--dropdown .choices__item--selectable.is-highlighted::after {
  opacity: .5
}

.choices__item {
  cursor: default
}

.choices__item--selectable {
  cursor: pointer
}

.choices__item--disabled {
  cursor: not-allowed;
  -webkit-user-select: none;
  user-select: none;
  opacity: .5
}

.choices__heading {
  font-weight: 600;
  font-size: 12px;
  padding: 10px;
  border-bottom: 1px solid #f7f7f7;
  color: gray
}

.choices__button {
  text-indent: -9999px;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer
}

.choices__button:focus,
.choices__input:focus {
  outline: 0
}

.choices__input {
  display: inline-block;
  vertical-align: baseline;
  background-color: #f9f9f9;
  font-size: 14px;
  margin-bottom: 5px;
  border: 0;
  border-radius: 0;
  max-width: 100%;
  padding: 4px 0 4px 2px
}

[dir=rtl] .choices__input {
  padding-right: 2px;
  padding-left: 0
}

.choices__placeholder {
  opacity: .5
}

/* select country-select */
.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  -webkit-animation: none;
          animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  background: #fff;
  -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
          box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
          animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #e6e6e6;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #e6e6e6;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #e6e6e6;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0,0,0,0.9);
  fill: rgba(0,0,0,0.9);
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #959ea9;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  -webkit-transition: fill 0.1s;
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57,57,57,0.15);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0,0,0,0.1);
}
.numInputWrapper span:active {
  background: rgba(0,0,0,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57,57,57,0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57,57,57,0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(0,0,0,0.5);
}
.numInputWrapper:hover {
  background: rgba(0,0,0,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(0,0,0,0.9);
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(0,0,0,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0,0,0,0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
          justify-content: space-around;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.dayContainer + .dayContainer {
  -webkit-box-shadow: -1px 0 0 #e6e6e6;
          box-shadow: -1px 0 0 #e6e6e6;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  -webkit-flex-basis: 14.2857143%;
      -ms-flex-preferred-size: 14.2857143%;
          flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}
.flatpickr-day.today {
  border-color: #959ea9;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #0346f2;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  border-color: #0346f2;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  -webkit-box-shadow: -10px 0 0 #0346f2;
          box-shadow: -10px 0 0 #0346f2;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
          box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(57,57,57,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(57,57,57,0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  -webkit-box-shadow: -5px 0 0 #0346f2, 5px 0 0 #0346f2;
          box-shadow: -5px 0 0 #0346f2, 5px 0 0 #0346f2;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  -webkit-box-shadow: 1px 0 0 #e6e6e6;
          box-shadow: 1px 0 0 #e6e6e6;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57,57,57,0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393939;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393939;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #eee;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(/images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(/images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(/images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
.flash-notification-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}

.flash-notification {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  width: 100%;
  padding: 1rem 1.125rem;
  color: #1f2937;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #6b7280;
  border-radius: .5rem;
  box-shadow: 0 18px 40px rgba(17, 24, 39, .18);
  animation: notificationSlideInOut 5s cubic-bezier(.22, 1, .36, 1) forwards;
  pointer-events: auto;
}

.flash-notification-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .125rem;
}

.flash-notification-icon svg {
  margin-right: 0;
}

.flash-notification-content {
  min-width: 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
}

.flash-notification--success {
  border-left-color: #16a34a;
}

.flash-notification--error {
  border-left-color: #dc2626;
}

.flash-notification--warning {
  border-left-color: #d97706;
}

.flash-notification--info {
  border-left-color: #2563eb;
}

@keyframes notificationSlideInOut {
  0% {
    opacity: 0;
    transform: translateX(120%);
  }

  10% {
    opacity: 1;
    transform: translateX(0);
  }

  86% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

@media (max-width: 640px) {
  .flash-notification-stack {
    top: .75rem;
    right: .75rem;
    width: calc(100vw - 1.5rem);
  }
}
.pagy {
  display: flex;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #6b7280;
  align-items: center;
  gap: 0.5rem;
}

.pagy> :not([hidden])~ :not([hidden]) {
  --space-reverse: 0;
  margin-right: calc(0.25rem * var(--space-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--space-reverse)));
}

.pagy a:not(.gap) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 9px;
  background-color: #ffffff;
  padding: 0.5rem 0.75rem;
  color: #374151;
  font-weight: 600;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
  min-width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #e2e5e3;
}

.pagy a:not(.gap):hover {
  background-color: #f7f8f8;
  color: #121613;
}

.pagy a:not(.gap):not([href]) {
  /* disabled links */
  cursor: default;
  background-color: #f9fafb;
  color: #9ca3af;
  opacity: 0.6;
}

.pagy a:not(.gap).current {
  background: #127914;
  color: white;
  font-weight: 700;
  border-color: #127914;
  box-shadow: 0 1px 2px rgba(18, 22, 19, 0.04);
}

.pagy a:not(.gap).current:hover {
  background: #0f6511;
  border-color: #0f6511;
}

.pagy label {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  background-color: #f3f4f6;
  padding: 0.5rem 0.75rem;
  color: #374151;
  font-weight: 500;
  font-family: 'Open Sans', sans-serif;
}

.pagy label input {
  line-height: 1.5rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  padding: 0.25rem 0.5rem;
  margin-left: 0.5rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  transition: all 0.2s ease-in-out;
}

.pagy label input:focus {
  outline: none;
  border-color: #127914;
  box-shadow: 0 0 0 3px rgba(18, 121, 20, 0.1);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .pagy {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }
  
  .pagy a:not(.gap) {
    min-width: 2rem;
    height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
}
html {
  position: relative;
  font-size: 16px;
}

body {
  letter-spacing: 0.5px;
  font-family: "Open Sans", sans-serif;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2;
  color: #282828;
  font-weight: 700;
  margin: 10px 0
}

p {
  font-weight: 500;
  line-height: 1.7;
}

* {
  outline: 0 !important
}

a {
  transition: all 0.3s ease-in-out;
}

.loader-v1 {
  border: 6px solid #f8f6f1;
  border-top: 6px solid #f05152;
  border-bottom: 6px solid #f05152;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.form-img-preview {
  max-width: 500px;
}

.form-img-preview img {
  max-width: 100px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */