body{
    background-color: #d1cfcf !important;
    font-family: 'Segoe UI' !important;
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: #ffffff;
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
  letter-spacing: 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* garde le texte aligné à gauche */
  line-height: 1.2;
}

#navbar_product_suggestions {
    top: 100%;          /* juste sous l'input */
    left: 0;
    max-height: 250px;  /* scroll si trop long */
    overflow-y: auto;
    border-top: none;
    background: #fff;
    z-index: 2000;
}

.navbar-brand .brand-version {
  font-size: 0.75rem;
  font-weight: 400;
  color: #ffffff; /* couleur secondaire de ta palette */
  text-transform: none;
  text-align: right;
  margin-top: 2px;
}

.navbar-brand::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  background-color: #000000; /* bleu de ta palette */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.navbar-brand:hover {
  color: #0080ff; /* gris clair au hover */
}

.navbar-brand:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* Primary */
.bg-primary { background-color: #007BFF !important; }
.text-primary { color: #007BFF !important; }
.btn-primary { background-color: #007BFF !important; border-color: #007BFF !important; color: #FFF !important; }
.btn-primary:hover { background-color: #0056b3 !important; border-color: #0056b3 !important; }

/* Secondary */
.bg-secondary { background-color: #6C757D !important; }
.text-secondary { color: #6C757D !important; }
.btn-secondary { background-color: #6C757D !important; border-color: #6C757D !important; color: #FFF !important; }
.btn-secondary:hover { background-color: #565e64 !important; border-color: #565e64 !important; }

/* Success */
.bg-success { background-color: #28A745 !important; }
.text-success { color: #28A745 !important; }
.btn-success { background-color: #28A745 !important; border-color: #28A745 !important; color: #FFF !important; }
.btn-success:hover { background-color: #1e7e34 !important; border-color: #1e7e34 !important; }

/* Danger */
.bg-danger { background-color: #DC3545 !important; }
.text-danger { color: #DC3545 !important; }
.btn-danger { background-color: #DC3545 !important; border-color: #DC3545 !important; color: #FFF !important; }
.btn-danger:hover { background-color: #a71d2a !important; border-color: #a71d2a !important; }

/* Warning */
.bg-warning { background-color: #FFC107 !important; }
.text-warning { color: #FFC107 !important; }
.btn-warning { background-color: #FFC107 !important; border-color: #FFC107 !important; color: #212529 !important; }
.btn-warning:hover { background-color: #e0a800 !important; border-color: #e0a800 !important; }

/* Info */
.bg-info { background-color: #17A2B8 !important; }
.text-info { color: #17A2B8 !important; }
.btn-info { background-color: #17A2B8 !important; border-color: #17A2B8 !important; color: #FFF !important; }
.btn-info:hover { background-color: #117a8b !important; border-color: #117a8b !important; }

/* Light / Dark */
.bg-light { background-color: #F8F9FA !important; }
.text-light { color: #F8F9FA !important; }
.bg-dark { background-color: #343A40 !important; }
.text-dark { color: #343A40 !important; }

/* Navbars */
.navbar-dark .navbar-nav .nav-link { color: #FFF !important; }
.navbar-dark .navbar-nav .nav-link:hover { color: #FFC107 !important; }

/* Alerts */
.alert-primary { background-color: #007BFF !important; color: #FFF !important; }
.alert-secondary { background-color: #6C757D !important; color: #FFF !important; }
.alert-success { background-color: #28A745 !important; color: #FFF !important; }
.alert-danger { background-color: #DC3545 !important; color: #FFF !important; }
.alert-warning { background-color: #FFC107 !important; color: #212529 !important; }
.alert-info { background-color: #17A2B8 !important; color: #FFF !important; }

/* Badges */
.badge-primary { background-color: #007BFF !important; color: #FFF !important; }
.badge-secondary { background-color: #6C757D !important; color: #FFF !important; }
.badge-success { background-color: #28A745 !important; color: #FFF !important; }
.badge-danger { background-color: #DC3545 !important; color: #FFF !important; }
.badge-warning { background-color: #FFC107 !important; color: #212529 !important; }
.badge-info { background-color: #17A2B8 !important; color: #FFF !important; }

.toast-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
}

.toast {
    opacity: 1;
    transition: opacity 0.3s;
}

.card {
      transition: transform 0.2s ease-in-out !important;
}
.card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
}
.card a {
  text-decoration: none !important;
  color: inherit !important;
}
.card-icon {
  font-size: 2rem !important;
  margin-bottom: 0.5rem !important;
  color: #0d6efd !important;
}

.product-card {
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background-color: white;
    margin-bottom: 15px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.product-card:hover {
    transform: scale(1.01);
    border: 2px solid #a71d2a;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.product-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 5px;
}
#detailsContainer {
    margin-top: 20px;
}

.nav-link{
    font-size: 15px !important;
}

/* ============================
   THEME BLACK (style Binance)
   ============================ */
body.theme-black {
  background: #0b0e11 !important;
  color: #eaecef !important;
}

html.theme-black body {
  background: #0b0e11 !important;
  color: #eaecef !important;
}

body.theme-black .container,
body.theme-black .container-fluid {
  color: #eaecef;
}

html.theme-black .container,
html.theme-black .container-fluid {
  color: #eaecef;
}

body.theme-black .navbar,
body.theme-black .navbar-dark.bg-dark {
  background: #131722 !important;
  border-bottom: 1px solid #1f2630;
}

html.theme-black .navbar,
html.theme-black .navbar-dark.bg-dark {
  background: #131722 !important;
  border-bottom: 1px solid #1f2630;
}

body.theme-black .navbar-brand,
body.theme-black .navbar-dark .navbar-nav .nav-link {
  color: #f5f5f5 !important;
}

body.theme-black .navbar-dark .navbar-nav .nav-link:hover,
body.theme-black a,
body.theme-black .text-primary {
  color: #f0b90b !important;
}

body.theme-black .card,
body.theme-black .dropdown-menu,
body.theme-black .modal-content {
  background: #161b22 !important;
  border: 1px solid #2b3139 !important;
  color: #eaecef !important;
}

body.theme-black .text-muted,
body.theme-black small.text-muted {
  color: #9aa4b2 !important;
}

body.theme-black .table {
  color: #dfe6ee !important;
}

body.theme-black .table thead th,
body.theme-black .table-light,
body.theme-black .table-secondary {
  background: #1b222b !important;
  color: #f0b90b !important;
}

body.theme-black .table td,
body.theme-black .table th,
body.theme-black .table-bordered td,
body.theme-black .table-bordered th {
  border-color: #2b3139 !important;
}

body.theme-black .form-control,
body.theme-black .form-select,
body.theme-black .input-group-text,
body.theme-black .list-group-item {
  background: #10151c !important;
  border-color: #2b3139 !important;
  color: #eaecef !important;
}

body.theme-black .form-control:focus,
body.theme-black .form-select:focus {
  border-color: #f0b90b !important;
  box-shadow: 0 0 0 0.2rem rgba(240, 185, 11, 0.25) !important;
}

body.theme-black .btn-primary {
  background: #f0b90b !important;
  border-color: #f0b90b !important;
  color: #1b1f24 !important;
}

body.theme-black .btn-primary:hover {
  background: #dca317 !important;
  border-color: #dca317 !important;
}

body.theme-black .btn-light,
body.theme-black .btn-outline-light {
  background: #1b222b !important;
  border-color: #2b3139 !important;
  color: #eaecef !important;
}

body.theme-black .alert {
  border-color: #2b3139 !important;
}

body.theme-black .progress {
  background-color: #1b222b !important;
}

html.theme-black,
body.theme-black {
  --bz-bg: #0b0e11;
  --bz-surface-1: #131722;
  --bz-surface-2: #1a2029;
  --bz-border: #2b3139;
  --bz-text: #eaecef;
  --bz-text-muted: #9aa4b2;
  --bz-accent: #f0b90b;
  --bz-accent-hover: #dca317;
}

html.theme-black body {
  background: radial-gradient(1200px 450px at 50% -180px, #202732 0%, var(--bz-bg) 60%) !important;
  color: var(--bz-text) !important;
}

html.theme-black .card {
  background: linear-gradient(180deg, var(--bz-surface-2) 0%, var(--bz-surface-1) 100%) !important;
  border: 1px solid var(--bz-border) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

html.theme-black .card:hover {
  transform: translateY(-3px) !important;
  border-color: #3a4452 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
}

html.theme-black .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bz-text);
  --bs-table-border-color: var(--bz-border);
}

html.theme-black .table-striped > tbody > tr:nth-of-type(odd) > * {
  color: var(--bz-text);
  background-color: #121820 !important;
}

html.theme-black .table-hover > tbody > tr:hover > * {
  background-color: #1d2530 !important;
  color: #ffffff !important;
}

html.theme-black .dropdown-menu,
html.theme-black .list-group,
html.theme-black .list-group-item {
  background: var(--bz-surface-1) !important;
  border-color: var(--bz-border) !important;
}

html.theme-black .dropdown-item,
html.theme-black .list-group-item {
  color: var(--bz-text) !important;
}

html.theme-black .dropdown-item:hover,
html.theme-black .dropdown-item:focus,
html.theme-black .list-group-item-action:hover,
html.theme-black .list-group-item-action:focus {
  background-color: #202a36 !important;
  color: #ffffff !important;
}

html.theme-black .btn-primary,
html.theme-black .btn-warning {
  background: var(--bz-accent) !important;
  border-color: var(--bz-accent) !important;
  color: #1a1f27 !important;
  font-weight: 600;
}

html.theme-black .btn-primary:hover,
html.theme-black .btn-warning:hover {
  background: var(--bz-accent-hover) !important;
  border-color: var(--bz-accent-hover) !important;
}

html.theme-black .btn-outline-secondary,
html.theme-black .btn-outline-primary,
html.theme-black .btn-outline-light {
  color: var(--bz-text) !important;
  border-color: #3a4452 !important;
}

html.theme-black .btn-outline-secondary:hover,
html.theme-black .btn-outline-primary:hover,
html.theme-black .btn-outline-light:hover {
  background: #202a36 !important;
  border-color: #475467 !important;
}

html.theme-black .form-control::placeholder {
  color: var(--bz-text-muted) !important;
}

html.theme-black .page-link {
  background: var(--bz-surface-1) !important;
  border-color: var(--bz-border) !important;
  color: var(--bz-text) !important;
}

html.theme-black .page-item.active .page-link {
  background: var(--bz-accent) !important;
  border-color: var(--bz-accent) !important;
  color: #1a1f27 !important;
}