/* ==========================================================================
   Thème client SLBCloud pour WHMCS — reproduit l'identité de app.slbcloud.fr
   (fond bleu nuit, degrade de marque, cartes en verre, Inter)
   ========================================================================== */

:root {
  --slb-bg: #05070f;
  --slb-surface: #121828;
  --slb-surface-2: #1b2440;
  --slb-field: #0a0e1a;
  --slb-border: #232c44;
  --slb-fg: #eef3ff;
  --slb-muted: #a8b6d4;
  --slb-faint: #6b7899;
  --slb-primary: #3b82f6;
  --slb-primary-hover: #2563eb;
  --slb-primary-light: #60a5fa;
  --slb-accent: #38bdf8;
  --slb-success: #34d399;
  --slb-warning: #fbbf24;
  --slb-danger: #f87171;
  --slb-gradient: linear-gradient(120deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
  --slb-radius: 1rem;
}

html, body { background-color: var(--slb-bg) !important; }
body {
  color: var(--slb-fg);
  font-family: "Inter", "Open Sans", "Segoe UI", system-ui, sans-serif !important;
  background-image:
    radial-gradient(ellipse 80% 52% at 16% -12%, rgba(37, 99, 235, 0.28), transparent 62%),
    radial-gradient(ellipse 62% 44% at 96% 2%, rgba(14, 165, 233, 0.14), transparent 64%),
    radial-gradient(ellipse 60% 46% at 50% 112%, rgba(14, 165, 233, 0.08), transparent 66%);
  background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6, .card-title, .navbar-brand {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}
a { color: var(--slb-primary-light); }
a:hover { color: var(--slb-accent); }

/* --------------------------------------------------------------------
   Logo (reconstruit d'apres le rendu reel de app.slbcloud.fr :
   chevron bleu + "SLBCL" + O en cercle/losange + "UD")
   -------------------------------------------------------------------- */
.slb-logo-link { display: inline-flex; align-items: center; gap: 7px; text-decoration: none !important; }
.slb-logo-chevron { color: var(--slb-primary-light); flex-shrink: 0; }
.slb-wordmark {
  display: inline-flex; align-items: center;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-weight: 800; font-size: 19px; letter-spacing: 0.01em;
  color: var(--slb-fg);
}
.slb-wordmark-lg { font-size: 21px; }
.slb-o-icon {
  display: inline-flex; width: 0.8em; height: 0.8em; margin: 0 1px;
  color: var(--slb-primary); flex-shrink: 0;
}
.slb-logo-tail {
  background-image: var(--slb-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Barre du haut / navigation */
.header-container, .navbar, .navbar-default, nav.navbar {
  background: rgba(18, 24, 40, 0.85) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--slb-border);
}
.navbar .navbar-nav > li > a, .navbar-nav .nav-link { color: var(--slb-muted) !important; }
.navbar .navbar-nav > li > a:hover, .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--slb-fg) !important; }

/* Cartes / panneaux */
.panel, .card, .mc-promo-manage, .mc-promo-login, .summary-box, .list-group-item, .card-sidebar {
  background-color: #121828e6 !important;
  border: 1px solid #232c44b3 !important;
  color: var(--slb-fg);
  border-radius: var(--slb-radius) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px #04081859;
}
.panel-heading, .card-header {
  background-color: var(--slb-surface-2) !important;
  border-color: var(--slb-border) !important;
  color: var(--slb-fg);
  border-radius: var(--slb-radius) var(--slb-radius) 0 0 !important;
}

/* Boutons */
.btn-primary {
  background-image: var(--slb-gradient) !important;
  background-color: var(--slb-primary) !important;
  border-color: var(--slb-primary-hover) !important;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover, .btn-primary:focus {
  background-image: none !important;
  background-color: var(--slb-primary-hover) !important;
  border-color: var(--slb-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.4);
}
.btn-outline-primary {
  color: var(--slb-primary-light) !important;
  border-color: var(--slb-primary) !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover {
  background-image: var(--slb-gradient) !important;
  background-color: var(--slb-primary) !important;
  border-color: var(--slb-primary-hover) !important;
  color: #fff !important;
}

/* Badges / etats */
.bg-primary, .badge-primary { background-color: var(--slb-primary) !important; }
.text-primary { color: var(--slb-primary-light) !important; }
.bg-success, .badge-success, .label-success { background-color: var(--slb-success) !important; }
.bg-warning, .badge-warning, .label-warning { background-color: var(--slb-warning) !important; color: #1a1300 !important; }
.bg-danger, .badge-danger, .label-danger { background-color: var(--slb-danger) !important; }

/* Vignettes homepage : un seul accent de marque au lieu de l'arc-en-ciel */
[class*="card-accent-"] { border-top: 3px solid var(--slb-primary) !important; }
.action-icon-btns a .ico-container i { color: var(--slb-primary-light) !important; }
.action-icon-btns a:hover .ico-container i { color: var(--slb-accent) !important; }
.action-icon-btns a:hover { color: var(--slb-fg) !important; }

/* Champs de formulaire */
.form-control, input, select, textarea {
  background-color: var(--slb-field) !important;
  border-color: var(--slb-border) !important;
  color: var(--slb-fg) !important;
}
.form-control::placeholder { color: var(--slb-faint) !important; }
.form-control:focus {
  border-color: var(--slb-primary) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Tableaux */
.table thead th { background-color: var(--slb-surface-2) !important; color: var(--slb-fg) !important; border-color: var(--slb-border) !important; }
.table td, .table th { border-color: var(--slb-border) !important; color: var(--slb-fg); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); }

/* Pagination */
.page-item.active .page-link { background-color: var(--slb-primary) !important; border-color: var(--slb-primary-hover) !important; }
.page-link { background-color: var(--slb-surface); color: var(--slb-primary-light); border-color: var(--slb-border); }

footer, .footer { background-color: transparent !important; color: var(--slb-muted) !important; border-top: 1px solid var(--slb-border); }

/* ==========================================================================
   Page de connexion / inscription : reproduction du volet auth de l'app
   ========================================================================== */
body:has(.slb-auth-shell) header,
body:has(.slb-auth-shell) .master-breadcrumb,
body:has(.slb-auth-shell) #footer {
  display: none !important;
}
body:has(.slb-auth-shell) { background-image: none !important; }
body:has(.slb-auth-shell) #main-body { padding: 0 !important; }
body:has(.slb-auth-shell) #main-body > .container { max-width: none !important; padding: 0 !important; margin: 0 !important; width: 100%; }
body:has(.slb-auth-shell) #main-body .row { margin: 0 !important; }
body:has(.slb-auth-shell) #main-body .primary-content { padding: 0 !important; flex: 0 0 100%; max-width: 100%; }

.slb-auth-shell {
  display: grid;
  grid-template-columns: minmax(380px, 42%) 1fr;
  min-height: 100vh;
}
@media (max-width: 991px) {
  .slb-auth-shell { grid-template-columns: 1fr; }
  .slb-auth-pane { display: none; }
}

.slb-auth-pane::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(95% 62% at 12% -12%, #2563eb6b, #0000 62%),
              radial-gradient(75% 52% at 98% 106%, #0ea5e933, #0000 62%);
}
.slb-auth-pane::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(90deg, #94b2ff0e 0 1px, #0000 1px 72px),
              repeating-linear-gradient(0deg, #94b2ff0e 0 1px, #0000 1px 72px);
  -webkit-mask-image: radial-gradient(90% 80% at 30% 20%, #000 30%, #0000 75%);
  mask-image: radial-gradient(90% 80% at 30% 20%, #000 30%, #0000 75%);
}
.slb-auth-pane {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 44px;
  background: #04060e;
  border-right: 1px solid var(--slb-border);
}
.slb-auth-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.slb-auth-orb-1 { width: 340px; height: 340px; left: -90px; top: 16%; background: #2563eb; opacity: 0.42; animation: slbDrift1 16s ease-in-out infinite alternate; }
.slb-auth-orb-2 { width: 260px; height: 260px; right: -60px; bottom: 8%; background: #38bdf8; opacity: 0.22; animation: slbDrift2 20s ease-in-out infinite alternate; }
@keyframes slbDrift1 { from { transform: translate(0,0); } to { transform: translate(60px,-50px); } }
@keyframes slbDrift2 { from { transform: translate(0,0); } to { transform: translate(-50px,40px); } }

.slb-auth-pane-top, .slb-auth-pane-mid, .slb-auth-pane-bottom { position: relative; z-index: 1; }
.slb-auth-sub { margin-top: 6px; margin-left: 44px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--slb-faint); }

.slb-auth-headline { font-size: 31px; line-height: 1.22; font-weight: 700; letter-spacing: -0.01em; color: var(--slb-fg); max-width: 22ch; }
.slb-auth-tagline { margin-top: 14px; max-width: 40ch; font-size: 14.5px; color: var(--slb-muted); }
.slb-auth-badges { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.slb-badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(35, 44, 68, 0.7);
  background: rgba(18, 24, 40, 0.6);
  backdrop-filter: blur(4px);
  border-radius: 999px; padding: 6px 14px;
  font-size: 12px; color: var(--slb-muted);
}
.slb-badge b { color: var(--slb-fg); font-weight: 600; }
.slb-pulse-dot { position: relative; width: 7px; height: 7px; border-radius: 999px; background: var(--slb-success); flex: none; }
.slb-pulse-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  border: 2px solid var(--slb-success); opacity: 0.5;
  animation: slbPulse 2s ease-out infinite;
}
@keyframes slbPulse { from { transform: scale(0.5); opacity: 0.6; } to { transform: scale(1.4); opacity: 0; } }

.slb-auth-pane-bottom, .slb-auth-footer {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--slb-faint);
}
.slb-dot-sep { width: 3px; height: 3px; border-radius: 999px; background: rgba(107, 120, 153, 0.5); }
.slb-auth-pane-bottom a, .slb-auth-footer a { color: var(--slb-faint); }
.slb-auth-pane-bottom a:hover, .slb-auth-footer a:hover { color: var(--slb-muted); }

.slb-auth-form-pane { display: flex; flex-direction: column; min-width: 0; padding: 24px 16px; }
.slb-auth-form-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.slb-auth-footer { justify-content: center; text-align: center; flex-wrap: wrap; }

.slb-auth-card {
  width: 100%; max-width: 420px;
  background-color: #121828e6;
  border: 1px solid #232c44b3;
  border-radius: var(--slb-radius);
  box-shadow: 0 20px 60px rgba(4, 8, 24, 0.5), 0 0 0 1px rgba(59, 130, 246, 0.06) inset;
  padding: 34px;
  animation: slbRise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes slbRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .slb-auth-orb-1, .slb-auth-orb-2, .slb-pulse-dot::after, .slb-auth-card { animation: none !important; }
}

.slb-auth-card-title { font-size: 24px; font-weight: 700; color: var(--slb-fg); margin-bottom: 6px; }
.slb-auth-card-sub { font-size: 13.5px; color: var(--slb-muted); margin-bottom: 24px; }
.slb-auth-card .form-control-label { font-size: 13px; font-weight: 500; color: var(--slb-muted); }
.slb-auth-card .form-control { background-color: var(--slb-field) !important; padding: 10px 14px; height: auto; }
.slb-remember { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--slb-muted); font-weight: 400; cursor: pointer; }

/* --------------------------------------------------------------------
   Page d'inscription : meme ecran deux colonnes que le login
   -------------------------------------------------------------------- */
.slb-auth-shell-wide { grid-template-columns: minmax(340px, 38%) 1fr; }
@media (max-width: 991px) { .slb-auth-shell-wide { grid-template-columns: 1fr; } }
.slb-auth-card-wide { max-width: 560px; padding: 34px 36px; }

/* champs sans icone accolee, comme sur app.slbcloud.fr */
.slb-auth-shell .input-group-prepend,
.slb-auth-shell .input-group-append { display: none !important; }
.slb-auth-shell .input-group > .form-control {
  border-radius: 10px !important;
  width: 100% !important;
}
.slb-auth-shell .form-control {
  padding: 11px 14px !important; height: auto !important;
  border-radius: 10px !important;
}
.slb-auth-shell label,
.slb-auth-shell .form-control-label {
  font-size: 13px !important; font-weight: 500 !important;
  color: var(--slb-muted) !important; margin-bottom: 6px;
}
/* titres de section du formulaire (Informations personnelles, Adresse de facturation...) */
.slb-auth-shell h1, .slb-auth-shell h2, .slb-auth-shell h3,
.slb-auth-shell .h1, .slb-auth-shell .h2, .slb-auth-shell .h3 {
  font-size: 15px !important; font-weight: 600 !important;
  color: var(--slb-fg) !important;
  margin-top: 26px; margin-bottom: 4px;
  padding-top: 20px; border-top: 1px solid var(--slb-border);
}
.slb-auth-shell .slb-auth-card-title {
  font-size: 24px !important; font-weight: 700 !important;
  border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important;
}
/* les cartes internes du formulaire deviennent transparentes (le card exterieur suffit) */
.slb-auth-shell .card, .slb-auth-shell .panel {
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important;
  border-radius: 0 !important; padding: 0 !important;
}
.slb-auth-shell .card-body { padding: 0 !important; }
.slb-auth-shell .btn-primary { width: 100%; padding: 11px 16px; font-weight: 600; }
/* la colonne sidebar WHMCS n'a pas sa place dans l'ecran auth */
body:has(.slb-auth-shell) #main-body .sidebar,
body:has(.slb-auth-shell) #main-body > .container > .row > .col-lg-4,
body:has(.slb-auth-shell) #main-body > .container > .row > .col-xl-3 { display: none !important; }
/* ==========================================================================
   SLBCloud — Surfaces & panneaux (cards, panels, sidebar, tuiles)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Carte de base (.card) — surface 90% + border 70% + blur 8px
   -------------------------------------------------------------------------- */
.card,
.panel,
.card-sidebar,
.panel-sidebar,
.summary-box,
.well,
.jumbotron {
  background-color: #121828e6 !important;
  background-color: color-mix(in oklab, var(--slb-surface) 90%, transparent) !important;
  border: 1px solid #232c44b3 !important;
  border: 1px solid color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px #04081859 !important;
  background-clip: border-box;
  background-image: none !important;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
}

.card > hr,
.panel > hr {
  border: 0 !important;
  border-top: 1px solid #232c4499 !important;
  margin: 0 !important;
}

/* Cartes imbriquees : pas de double blur, surface plus haute */
.card .card,
.panel .panel,
.card .panel,
.panel .card {
  background-color: #1b244099 !important;
  background-color: color-mix(in oklab, var(--slb-surface-2) 60%, transparent) !important;
  border: 1px solid #232c4499 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 12px !important;
}

/* Neutralisation des variantes Bootstrap claires sur les surfaces */
.card.bg-white,
.card.bg-light,
.card.bg-transparent,
.panel.bg-white,
.panel.bg-light,
.card-header.bg-white,
.card-header.bg-light,
.card-footer.bg-white,
.card-footer.bg-light,
.card-body.bg-white,
.card-body.bg-light,
.jumbotron.bg-light,
.well.well-light {
  background-color: #121828e6 !important;
  background-color: color-mix(in oklab, var(--slb-surface) 90%, transparent) !important;
  color: var(--slb-fg) !important;
}

.card.border,
.card.border-light,
.card.border-secondary,
.card.border-default,
.panel.border,
.panel.border-light {
  border-color: #232c44b3 !important;
}

.card.border-0,
.panel.border-0 {
  border-color: transparent !important;
}

.card.shadow,
.card.shadow-sm,
.card.shadow-lg {
  box-shadow: 0 10px 30px #04081859 !important;
}

/* --------------------------------------------------------------------------
   2. En-tetes, corps, pieds
   -------------------------------------------------------------------------- */
.card-header,
.panel-heading,
.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-info > .panel-heading,
.panel-success > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading {
  background-color: #1b244080 !important;
  background-color: color-mix(in oklab, var(--slb-surface-2) 50%, transparent) !important;
  background-image: none !important;
  border-bottom: 1px solid #232c4499 !important;
  border-color: #232c4499 !important;
  color: var(--slb-fg) !important;
  padding: 0.875rem 1.25rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

.card-header:first-child,
.panel-heading:first-child {
  border-radius: calc(var(--slb-radius) - 1px) calc(var(--slb-radius) - 1px) 0 0 !important;
}

.card-header + .card-body,
.panel-heading + .panel-body {
  padding-top: 1.25rem !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header .card-title,
.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.panel-heading h4,
.panel-title,
.panel-title > a {
  color: var(--slb-fg) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  line-height: 1.375 !important;
}

.card-header > i,
.card-header .fa,
.card-header .fas,
.card-header .far,
.card-header .fab,
.panel-heading > i,
.panel-title > i,
.panel-title .fa,
.panel-title .fas {
  color: var(--slb-primary-light) !important;
  opacity: 1 !important;
}

.card-body,
.panel-body,
.well,
.jumbotron {
  color: var(--slb-fg) !important;
  background-color: transparent !important;
  padding: 1.25rem 1.5rem !important;
}

.well,
.jumbotron {
  padding: 1.5rem !important;
}

.jumbotron {
  padding: 2rem 1.75rem !important;
}

.card-footer,
.panel-footer {
  background-color: #1b24404d !important;
  background-color: color-mix(in oklab, var(--slb-surface-2) 30%, transparent) !important;
  background-image: none !important;
  border-top: 1px solid #232c4499 !important;
  color: var(--slb-muted) !important;
  padding: 0.875rem 1.25rem !important;
}

.card-footer:last-child,
.panel-footer:last-child {
  border-radius: 0 0 calc(var(--slb-radius) - 1px) calc(var(--slb-radius) - 1px) !important;
}

/* --------------------------------------------------------------------------
   3. Typographie interne aux surfaces
   -------------------------------------------------------------------------- */
.card-title,
.panel .panel-title,
.summary-box h1,
.summary-box h2,
.summary-box h3,
.summary-box h4,
.jumbotron h1,
.jumbotron h2,
.well h1,
.well h2,
.well h3,
.well h4 {
  color: var(--slb-fg) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

.card-body > .card-title:first-child,
.panel-body > .card-title:first-child {
  font-size: 17px !important;
  margin-bottom: 0.5rem !important;
}

.jumbotron h1,
.jumbotron .display-1,
.jumbotron .display-2,
.jumbotron .display-3,
.jumbotron .display-4 {
  color: var(--slb-fg) !important;
  font-size: 31px !important;
  line-height: 1.22 !important;
}

.card-subtitle,
.card-body > small,
.card-text > small,
.panel-body > small,
.summary-box small,
.card .form-text,
.panel .form-text,
.card .help-block,
.panel .help-block {
  color: var(--slb-faint) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.card-text,
.card p,
.panel-body p,
.well p,
.jumbotron p,
.jumbotron .lead,
.card dd,
.panel-body dd {
  color: var(--slb-muted) !important;
}

.card dt,
.panel-body dt,
.card label,
.panel-body label,
.card strong,
.card b,
.panel-body strong {
  color: var(--slb-fg) !important;
}

/* Pieges Bootstrap : texte sombre pose dans une surface sombre */
.card .text-dark,
.card .text-body,
.card .text-black-50,
.card .text-black,
.panel .text-dark,
.panel .text-body,
.panel .text-black-50,
.summary-box .text-dark,
.well .text-dark,
.jumbotron .text-dark,
.list-group .text-dark,
.list-group .text-body {
  color: var(--slb-fg) !important;
}

.card .text-muted,
.card .text-secondary,
.panel .text-muted,
.panel .text-secondary,
.summary-box .text-muted,
.well .text-muted,
.jumbotron .text-muted,
.list-group .text-muted,
.list-group .text-secondary {
  color: var(--slb-muted) !important;
}

.card .bg-light,
.card .bg-white,
.panel .bg-light,
.panel .bg-white,
.list-group .bg-light,
.list-group .bg-white {
  background-color: #1b244080 !important;
  color: var(--slb-fg) !important;
}

.card .close,
.panel .close,
.card-header .close,
.panel-heading .close,
.summary-box .close {
  color: var(--slb-muted) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  background-color: transparent !important;
  border: 0 !important;
}

.card .close:hover,
.card .close:focus,
.panel .close:hover,
.panel .close:focus,
.card-header .close:hover,
.panel-heading .close:hover {
  color: var(--slb-fg) !important;
  opacity: 1 !important;
  outline: none !important;
}

.card .close:focus-visible,
.panel .close:focus-visible {
  box-shadow: 0 0 0 2px #3b82f699 !important;
  border-radius: 6px !important;
}

/* --------------------------------------------------------------------------
   4. Liens dans les surfaces
   -------------------------------------------------------------------------- */
.card-link,
.card-body a:not(.btn):not(.list-group-item):not(.card):not(.nav-link):not(.badge),
.panel-body a:not(.btn):not(.list-group-item):not(.nav-link):not(.badge),
.summary-box a:not(.btn),
.well a:not(.btn) {
  color: var(--slb-primary) !important;
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-link:hover,
.card-link:focus,
.card-body a:not(.btn):not(.list-group-item):not(.card):not(.nav-link):not(.badge):hover,
.card-body a:not(.btn):not(.list-group-item):not(.card):not(.nav-link):not(.badge):focus,
.panel-body a:not(.btn):not(.list-group-item):not(.nav-link):not(.badge):hover,
.panel-body a:not(.btn):not(.list-group-item):not(.nav-link):not(.badge):focus,
.summary-box a:not(.btn):hover,
.well a:not(.btn):hover {
  color: var(--slb-primary-light) !important;
  text-decoration: underline !important;
}

.card-link + .card-link {
  margin-left: 1rem !important;
}

.card a:focus-visible,
.panel a:focus-visible,
.summary-box a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699 !important;
  border-radius: 6px !important;
}

/* --------------------------------------------------------------------------
   5. Onglets loges dans un en-tete de carte (anti blanc-sur-blanc)
   -------------------------------------------------------------------------- */
.card-header .nav-tabs,
.card-header-tabs,
.panel-heading .nav-tabs {
  border-bottom-color: #232c4499 !important;
  margin-bottom: -0.875rem !important;
}

.card-header .nav-tabs .nav-link,
.card-header-tabs .nav-link,
.panel-heading .nav-tabs > li > a {
  color: var(--slb-muted) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 11px 11px 0 0 !important;
}

.card-header .nav-tabs .nav-link:hover,
.card-header-tabs .nav-link:hover,
.panel-heading .nav-tabs > li > a:hover {
  color: var(--slb-fg) !important;
  background-color: #1b244066 !important;
  border-color: transparent !important;
}

.card-header .nav-tabs .nav-link.active,
.card-header-tabs .nav-link.active,
.panel-heading .nav-tabs > li.active > a {
  color: var(--slb-fg) !important;
  background-color: #121828e6 !important;
  border-color: #232c4499 #232c4499 transparent !important;
}

.card-img-overlay {
  background-color: #05070fcc !important;
  border-radius: calc(var(--slb-radius) - 1px) !important;
  color: var(--slb-fg) !important;
}

.card-img,
.card-img-top {
  border-radius: calc(var(--slb-radius) - 1px) calc(var(--slb-radius) - 1px) 0 0 !important;
}

.card-img-bottom {
  border-radius: 0 0 calc(var(--slb-radius) - 1px) calc(var(--slb-radius) - 1px) !important;
}

/* --------------------------------------------------------------------------
   6. Panels contextuels Bootstrap 3 (liseres teintes)
   -------------------------------------------------------------------------- */
.panel-primary,
.panel-info {
  border-color: #3b82f666 !important;
}

.panel-primary > .panel-heading,
.panel-info > .panel-heading {
  background-color: #3b82f61f !important;
  border-color: #3b82f666 !important;
  color: var(--slb-primary-light) !important;
}

.panel-success {
  border-color: #34d39966 !important;
}

.panel-success > .panel-heading {
  background-color: #34d3991f !important;
  border-color: #34d39966 !important;
  color: var(--slb-success) !important;
}

.panel-warning {
  border-color: #fbbf2466 !important;
}

.panel-warning > .panel-heading {
  background-color: #fbbf241f !important;
  border-color: #fbbf2466 !important;
  color: var(--slb-warning) !important;
}

.panel-danger {
  border-color: #f8717166 !important;
}

.panel-danger > .panel-heading {
  background-color: #f871711f !important;
  border-color: #f8717166 !important;
  color: var(--slb-danger) !important;
}

.panel-primary > .panel-heading .panel-title,
.panel-info > .panel-heading .panel-title {
  color: var(--slb-primary-light) !important;
}

.panel-success > .panel-heading .panel-title {
  color: var(--slb-success) !important;
}

.panel-warning > .panel-heading .panel-title {
  color: var(--slb-warning) !important;
}

.panel-danger > .panel-heading .panel-title {
  color: var(--slb-danger) !important;
}

.panel-group .panel {
  border-radius: 12px !important;
  margin-bottom: 0.75rem !important;
}

.panel-group .panel + .panel {
  margin-top: 0 !important;
}

.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
  border-top-color: #232c4499 !important;
}

/* --------------------------------------------------------------------------
   7. Sidebar client (.card-sidebar / .panel-sidebar / .sidebar)
   -------------------------------------------------------------------------- */
.card-sidebar,
.panel-sidebar,
.sidebar,
#Primary_Sidebar,
#Secondary_Sidebar {
  margin-bottom: 1.25rem !important;
  overflow: hidden;
}

.card-sidebar > .card-header,
.panel-sidebar > .panel-heading,
.sidebar > .card-header,
.sidebar > .panel-heading {
  background-color: #1b244099 !important;
  background-color: color-mix(in oklab, var(--slb-surface-2) 60%, transparent) !important;
  border-bottom: 1px solid #232c4499 !important;
  color: var(--slb-fg) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  padding: 0.75rem 1.125rem !important;
}

.card-sidebar > .card-header .card-title,
.card-sidebar > .card-header h3,
.panel-sidebar > .panel-heading .panel-title,
.sidebar > .card-header .card-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--slb-fg) !important;
}

.card-sidebar .card-body,
.panel-sidebar .panel-body,
.sidebar .card-body {
  padding: 1rem 1.125rem !important;
  color: var(--slb-muted) !important;
}

/* Chevron de repli */
.card-sidebar .card-header [class*="chevron"],
.card-sidebar .card-header .collapse-icon,
.panel-sidebar .panel-heading [class*="chevron"],
.panel-sidebar .panel-heading .collapse-icon,
.sidebar .card-header [class*="chevron"] {
  color: var(--slb-faint) !important;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-sidebar .card-header:hover [class*="chevron"],
.panel-sidebar .panel-heading:hover [class*="chevron"],
.sidebar .card-header:hover [class*="chevron"] {
  color: var(--slb-fg) !important;
}

/* --------------------------------------------------------------------------
   8. Listes (.list-group / .list-group-item)
   -------------------------------------------------------------------------- */
.list-group {
  background-color: transparent !important;
  border-radius: 0 !important;
}

.card > .list-group,
.panel > .list-group,
.card > .list-group-flush,
.card-sidebar .list-group,
.panel-sidebar .list-group {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.list-group-item {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid #232c4480 !important;
  border-color: #232c4480 !important;
  color: var(--slb-muted) !important;
  border-radius: 0 !important;
  padding: 0.75rem 1.125rem !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  position: relative;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.list-group-item:last-child,
.list-group-item.last {
  border-bottom: 0 !important;
}

.list-group-item:first-child {
  border-top: 0 !important;
}

.card > .list-group:last-child .list-group-item:last-child,
.panel > .list-group:last-child .list-group-item:last-child {
  border-radius: 0 0 calc(var(--slb-radius) - 1px) calc(var(--slb-radius) - 1px) !important;
}

.card > .list-group:first-child .list-group-item:first-child,
.panel > .list-group:first-child .list-group-item:first-child {
  border-radius: calc(var(--slb-radius) - 1px) calc(var(--slb-radius) - 1px) 0 0 !important;
}

.list-group-item > i,
.list-group-item .fa,
.list-group-item .fas,
.list-group-item .far,
.list-group-item .fab,
.list-group-item .fa-fw {
  color: var(--slb-faint) !important;
  margin-right: 0.5rem !important;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Etat interactif */
.list-group-item-action {
  color: var(--slb-muted) !important;
  text-align: inherit !important;
  width: 100% !important;
  cursor: pointer;
}

a.list-group-item,
button.list-group-item,
.list-group-item-action {
  text-decoration: none !important;
}

.list-group-item-action:hover,
.list-group-item-action:focus,
a.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:hover,
button.list-group-item:focus {
  background-color: #1b244080 !important;
  background-color: color-mix(in oklab, var(--slb-surface-2) 50%, transparent) !important;
  color: var(--slb-fg) !important;
  border-color: #232c4499 !important;
  text-decoration: none !important;
  outline: none !important;
}

.list-group-item-action:hover > i,
.list-group-item-action:hover .fa,
.list-group-item-action:hover .fas,
a.list-group-item:hover > i,
a.list-group-item:hover .fas {
  color: var(--slb-primary-light) !important;
}

.list-group-item-action:active,
a.list-group-item:active,
button.list-group-item:active {
  background-color: #1b244099 !important;
  color: var(--slb-fg) !important;
}

.list-group-item-action:focus-visible,
a.list-group-item:focus-visible,
button.list-group-item:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699 inset !important;
}

/* Etat actif — texte en primary-light (le primary plein tombe sous 4.5:1 sur la teinte) */
.list-group-item.active,
.list-group-item-action.active,
a.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: #3b82f61f !important;
  background-color: color-mix(in oklab, var(--slb-primary) 12%, transparent) !important;
  border-color: #3b82f64d !important;
  color: var(--slb-primary-light) !important;
  font-weight: 600 !important;
  z-index: auto !important;
}

.list-group-item.active::before,
.list-group-item-action.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background-image: var(--slb-gradient);
}

.list-group-item.active > i,
.list-group-item.active .fa,
.list-group-item.active .fas,
.list-group-item.active .far,
.list-group-item-action.active > i {
  color: var(--slb-primary-light) !important;
}

/* Etat desactive */
.list-group-item.disabled,
.list-group-item:disabled,
.list-group-item-action.disabled {
  background-color: transparent !important;
  color: var(--slb-faint) !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

.list-group-item-heading {
  color: var(--slb-fg) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-bottom: 0.25rem !important;
}

.list-group-item-text {
  color: var(--slb-muted) !important;
  font-size: 13px !important;
  margin-bottom: 0 !important;
}

.list-group-flush .list-group-item {
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}

.list-group-flush:last-child .list-group-item:last-child {
  border-bottom: 0 !important;
}

/* Variantes contextuelles Bootstrap (fonds pales -> teintes sombres) */
.list-group-item-primary,
.list-group-item-info {
  background-color: #3b82f61a !important;
  border-color: #3b82f64d !important;
  color: var(--slb-primary-light) !important;
}

.list-group-item-secondary,
.list-group-item-light,
.list-group-item-dark {
  background-color: #1b244080 !important;
  border-color: #232c4499 !important;
  color: var(--slb-fg) !important;
}

.list-group-item-success {
  background-color: #34d3991a !important;
  border-color: #34d3994d !important;
  color: var(--slb-success) !important;
}

.list-group-item-warning {
  background-color: #fbbf241a !important;
  border-color: #fbbf244d !important;
  color: var(--slb-warning) !important;
}

.list-group-item-danger {
  background-color: #f871711a !important;
  border-color: #f871714d !important;
  color: var(--slb-danger) !important;
}

a.list-group-item-primary:hover,
a.list-group-item-info:hover,
a.list-group-item-success:hover,
a.list-group-item-warning:hover,
a.list-group-item-danger:hover,
a.list-group-item-secondary:hover,
a.list-group-item-light:hover,
a.list-group-item-dark:hover {
  background-color: #1b244099 !important;
  color: var(--slb-fg) !important;
}

/* Badges/compteurs de liste */
.list-group-item .badge,
.list-group-item .badge-pill,
.list-group-item > .badge {
  background-color: #1b2440 !important;
  border: 1px solid #232c44b3 !important;
  color: var(--slb-muted) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  min-height: 20px;
}

.list-group-item.active .badge,
.list-group-item-action.active .badge {
  background-color: #3b82f633 !important;
  border-color: #3b82f699 !important;
  color: var(--slb-primary-light) !important;
}

/* --------------------------------------------------------------------------
   9. Elements de menu sidebar WHMCS (.sidebar-menu-item-*)
   -------------------------------------------------------------------------- */
[class*="sidebar-menu-item-"] {
  color: inherit !important;
}

.sidebar-menu-item-label,
.sidebar-menu-item-title,
.sidebar-menu-item-name {
  color: inherit !important;
  font-weight: inherit !important;
}

.sidebar-menu-item-icon,
.sidebar-menu-item-image {
  color: inherit !important;
  opacity: 0.9;
}

.sidebar-menu-item-description,
.sidebar-menu-item-subtitle,
.sidebar-menu-item-help {
  color: var(--slb-faint) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  display: block;
  margin-top: 2px;
}

.sidebar-menu-item-badge,
.sidebar-menu-item-count,
.sidebar-menu-item-label .badge {
  background-color: #1b2440 !important;
  border: 1px solid #232c44b3 !important;
  color: var(--slb-muted) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
}

.list-group-item.active .sidebar-menu-item-badge,
.list-group-item.active .sidebar-menu-item-count {
  background-color: #3b82f633 !important;
  border-color: #3b82f699 !important;
  color: var(--slb-primary-light) !important;
}

.sidebar-menu-item-danger,
.sidebar-menu-item-badge.badge-danger {
  background-color: #f871711f !important;
  border-color: #f8717166 !important;
  color: var(--slb-danger) !important;
}

.sidebar-menu-item-success,
.sidebar-menu-item-badge.badge-success {
  background-color: #34d3991f !important;
  border-color: #34d39966 !important;
  color: var(--slb-success) !important;
}

.sidebar-menu-item-warning,
.sidebar-menu-item-badge.badge-warning {
  background-color: #fbbf241f !important;
  border-color: #fbbf2466 !important;
  color: var(--slb-warning) !important;
}

/* --------------------------------------------------------------------------
   10. Summary box
   -------------------------------------------------------------------------- */
.summary-box {
  padding: 1.125rem 1.25rem !important;
  margin-bottom: 1.25rem !important;
  color: var(--slb-muted) !important;
  position: relative;
  overflow: hidden;
}

.summary-box p,
.summary-box li,
.summary-box span:not(.badge) {
  color: var(--slb-muted) !important;
}

.summary-box h1,
.summary-box h2,
.summary-box h3,
.summary-box h4,
.summary-box h5,
.summary-box .summary-box-title {
  color: var(--slb-fg) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-top: 0 !important;
  margin-bottom: 0.375rem !important;
}

.summary-box > i:first-child,
.summary-box .summary-box-icon {
  color: var(--slb-primary-light) !important;
}

.summary-box-primary,
.summary-box-info,
.summary-box.summary-box-primary,
.summary-box.summary-box-info {
  background-color: #3b82f61a !important;
  border-color: #3b82f666 !important;
  border-left: 3px solid var(--slb-primary) !important;
}

.summary-box-primary h1,
.summary-box-primary h2,
.summary-box-primary h3,
.summary-box-primary h4,
.summary-box-info h1,
.summary-box-info h2,
.summary-box-info h3,
.summary-box-info h4,
.summary-box-primary > i:first-child,
.summary-box-info > i:first-child {
  color: var(--slb-primary-light) !important;
}

.summary-box-success,
.summary-box.summary-box-success {
  background-color: #34d3991a !important;
  border-color: #34d39966 !important;
  border-left: 3px solid var(--slb-success) !important;
}

.summary-box-success h1,
.summary-box-success h2,
.summary-box-success h3,
.summary-box-success h4,
.summary-box-success > i:first-child {
  color: var(--slb-success) !important;
}

.summary-box-warning,
.summary-box.summary-box-warning {
  background-color: #fbbf241a !important;
  border-color: #fbbf2466 !important;
  border-left: 3px solid var(--slb-warning) !important;
}

.summary-box-warning h1,
.summary-box-warning h2,
.summary-box-warning h3,
.summary-box-warning h4,
.summary-box-warning > i:first-child {
  color: var(--slb-warning) !important;
}

.summary-box-danger,
.summary-box-error,
.summary-box.summary-box-danger {
  background-color: #f871711a !important;
  border-color: #f8717166 !important;
  border-left: 3px solid var(--slb-danger) !important;
}

.summary-box-danger h1,
.summary-box-danger h2,
.summary-box-danger h3,
.summary-box-danger h4,
.summary-box-danger > i:first-child {
  color: var(--slb-danger) !important;
}

/* --------------------------------------------------------------------------
   11. Well & jumbotron
   -------------------------------------------------------------------------- */
.well,
.well-sm,
.well-lg {
  background-color: #1b244080 !important;
  background-color: color-mix(in oklab, var(--slb-surface-2) 50%, transparent) !important;
  border: 1px solid #232c4499 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--slb-muted) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.well-sm {
  padding: 0.75rem 1rem !important;
  border-radius: 10px !important;
}

.well-lg {
  padding: 1.75rem !important;
}

.jumbotron {
  background-color: #121828e6 !important;
  background-image: radial-gradient(70% 120% at 12% -20%, #2563eb33, #0000 60%) !important;
  border: 1px solid #232c44b3 !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
}

.jumbotron-fluid {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

.jumbotron hr,
.well hr {
  border-top-color: #232c4499 !important;
}

/* --------------------------------------------------------------------------
   12. Tuiles d'accueil client (.client-home-cards / .card-accent-*)
   -------------------------------------------------------------------------- */
.client-home-cards {
  margin-bottom: 1.5rem;
}

.client-home-cards .card,
.client-home-cards > div > .card,
.client-home-panels .card {
  height: 100%;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.client-home-cards a.card,
.client-home-cards .card a.card-body,
a.card,
.card-accent-primary,
[class*="card-accent-"] {
  color: var(--slb-fg) !important;
  text-decoration: none !important;
}

.client-home-cards a.card:hover,
.client-home-cards .card:hover,
a.card:hover,
a.card:focus,
[class*="card-accent-"]:hover,
[class*="card-accent-"]:focus {
  border-color: #3b82f699 !important;
  background-color: #121828e6 !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px #04081873, 0 0 0 1px #3b82f64d !important;
  text-decoration: none !important;
  color: var(--slb-fg) !important;
}

a.card:focus-visible,
[class*="card-accent-"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699, 0 14px 34px #04081873 !important;
}

.client-home-cards .card-body,
[class*="card-accent-"] .card-body {
  text-align: center;
  padding: 1.375rem 1rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.client-home-cards .card-title,
[class*="card-accent-"] .card-title,
.client-home-cards h3,
.client-home-cards h4 {
  color: var(--slb-fg) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.client-home-cards .card-text,
[class*="card-accent-"] .card-text,
.client-home-cards p {
  color: var(--slb-muted) !important;
  font-size: 13px !important;
  margin: 0 !important;
}

/* Liseres d'accent en haut de tuile */
[class*="card-accent-"] {
  position: relative;
  overflow: hidden;
}

[class*="card-accent-"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-image: var(--slb-gradient);
  opacity: 0.9;
}

[class*="card-accent-"]:hover::before {
  opacity: 1;
}

.card-accent-success::before,
.card-accent-green::before,
.card-accent-teal::before {
  background-image: linear-gradient(120deg, #34d399 0%, #10b981 100%);
}

.card-accent-warning::before,
.card-accent-orange::before,
.card-accent-yellow::before {
  background-image: linear-gradient(120deg, #fbbf24 0%, #f59e0b 100%);
}

.card-accent-danger::before,
.card-accent-red::before {
  background-image: linear-gradient(120deg, #f87171 0%, #ef4444 100%);
}

.card-accent-info::before,
.card-accent-cyan::before,
.card-accent-blue::before {
  background-image: linear-gradient(120deg, #38bdf8 0%, #0ea5e9 100%);
}

.card-accent-secondary::before,
.card-accent-purple::before,
.card-accent-violet::before {
  background-image: linear-gradient(120deg, #818cf8 0%, #6366f1 100%);
}

.card-accent-success:hover,
.card-accent-green:hover {
  border-color: #34d39966 !important;
  box-shadow: 0 14px 34px #04081873, 0 0 0 1px #34d3994d !important;
}

.card-accent-warning:hover,
.card-accent-orange:hover {
  border-color: #fbbf2466 !important;
  box-shadow: 0 14px 34px #04081873, 0 0 0 1px #fbbf244d !important;
}

.card-accent-danger:hover,
.card-accent-red:hover {
  border-color: #f8717166 !important;
  box-shadow: 0 14px 34px #04081873, 0 0 0 1px #f871714d !important;
}

/* --------------------------------------------------------------------------
   13. Icones de tuiles (.ico-container) & boutons-icones (.action-icon-btns)
   -------------------------------------------------------------------------- */
.ico-container,
.icon-container,
.card-icon-container {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px !important;
  background-color: #3b82f61f !important;
  border: 1px solid #3b82f640 !important;
  color: var(--slb-primary-light) !important;
  font-size: 18px;
  line-height: 1;
  flex: none;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ico-container > i,
.ico-container .fa,
.ico-container .fas,
.ico-container .far,
.ico-container .fab,
.icon-container > i,
.icon-container .fas {
  color: inherit !important;
  margin: 0 !important;
}

a:hover > .ico-container,
a:hover .ico-container,
.card:hover .ico-container,
[class*="card-accent-"]:hover .ico-container,
.btn-action:hover .ico-container,
.action-icon-btns a:hover .ico-container,
.action-icon-btns a:focus .ico-container {
  background-color: #3b82f6 !important;
  background-image: var(--slb-gradient) !important;
  border-color: #3b82f699 !important;
  color: #ffffff !important;
}

.action-icon-btns {
  color: var(--slb-muted) !important;
  margin-bottom: 0.5rem;
}

.action-icon-btns a,
.action-icon-btns .btn-action,
.btn-action,
.action-icon-btns > div > a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  text-align: center;
  padding: 0.875rem 0.625rem !important;
  margin-bottom: 0.75rem;
  border-radius: 12px !important;
  background-color: #1b244066 !important;
  background-color: color-mix(in oklab, var(--slb-surface-2) 40%, transparent) !important;
  border: 1px solid #232c44b3 !important;
  color: var(--slb-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-icon-btns a:hover,
.action-icon-btns a:focus,
.btn-action:hover,
.btn-action:focus {
  background-color: #1b2440 !important;
  border-color: #3b82f699 !important;
  color: var(--slb-fg) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px #04081859 !important;
  outline: none !important;
}

.action-icon-btns a:active,
.btn-action:active {
  transform: translateY(0);
  background-color: #1b244099 !important;
  color: var(--slb-fg) !important;
}

.action-icon-btns a:focus-visible,
.btn-action:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}

.action-icon-btns a.disabled,
.btn-action.disabled,
.action-icon-btns a[disabled],
.btn-action[disabled] {
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  color: var(--slb-faint) !important;
}

.action-icon-btns a > i:not([class*="ico"]),
.btn-action > i:not([class*="ico"]) {
  font-size: 20px;
  color: var(--slb-primary-light) !important;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-icon-btns a:hover > i:not([class*="ico"]),
.btn-action:hover > i:not([class*="ico"]) {
  color: var(--slb-fg) !important;
}

.action-icon-btns a > span,
.btn-action > span {
  color: inherit !important;
  display: block;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   14. Grilles de cartes
   -------------------------------------------------------------------------- */
.card-deck .card,
.card-group .card,
.card-columns .card {
  background-color: #121828e6 !important;
  background-color: color-mix(in oklab, var(--slb-surface) 90%, transparent) !important;
  border-color: #232c44b3 !important;
}

.card-group > .card {
  border-radius: var(--slb-radius) !important;
}

.card-columns .card {
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   15. Mouvement reduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card,
  .panel,
  .list-group-item,
  .list-group-item-action,
  .client-home-cards .card,
  [class*="card-accent-"],
  .action-icon-btns a,
  .btn-action,
  .ico-container,
  .icon-container {
    transition: none !important;
    animation: none !important;
  }

  .client-home-cards a.card:hover,
  .client-home-cards .card:hover,
  a.card:hover,
  [class*="card-accent-"]:hover,
  .action-icon-btns a:hover,
  .btn-action:hover {
    transform: none !important;
  }
}

html {
  color-scheme: dark;
}

body {
  background-color: var(--slb-background, #05070f) !important;
  background-image:
    radial-gradient(80% 52% at 16% -12%, #2563eb4d, #0000 62%),
    radial-gradient(62% 44% at 96% 2%, #0ea5e929, #0000 64%),
    radial-gradient(60% 46% at 50% 112%, #0ea5e91a, #0000 66%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  color: var(--slb-fg) !important;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: #3b82f659 !important;
  color: var(--slb-fg) !important;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--slb-border) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent !important;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--slb-border) !important;
  border: 3px solid transparent !important;
  border-radius: 9999px !important;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #3b82f699 !important;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
}

#main-body,
.main-body,
#main-content,
.main-content,
#content,
.page-content,
.content-wrapper,
main,
section {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--slb-fg) !important;
}

#main-body {
  padding-top: 28px;
  padding-bottom: 56px;
  position: relative;
}

hr,
.dropdown-menu hr {
  border: 0 !important;
  border-top: 1px solid #232c44b3 !important;
  opacity: 1 !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
legend,
.page-header h1,
#main-body h1,
#main-body h2 {
  color: var(--slb-fg) !important;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-top: 0;
}

h1, .h1 {
  font-size: 31px;
  line-height: 1.22;
  margin-bottom: 12px;
}

h2, .h2 {
  font-size: 26px;
  line-height: 1.25;
  margin-bottom: 12px;
}

h3, .h3 {
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: 10px;
}

h4, .h4 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  margin-bottom: 8px;
}

h5, .h5 {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: normal;
  margin-bottom: 8px;
}

h6, .h6 {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: normal;
  margin-bottom: 6px;
}

.header-lined,
.page-header {
  border-bottom: 1px solid var(--slb-border) !important;
  padding-bottom: 12px;
  margin-bottom: 24px;
}

.lead {
  color: var(--slb-muted) !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.625;
}

small,
.small {
  color: var(--slb-muted) !important;
  font-size: 12.5px;
}

blockquote,
.blockquote {
  color: var(--slb-muted) !important;
  border-left: 2px solid #3b82f666 !important;
  padding-left: 14px;
}

.text-muted,
.text-secondary,
.text-body,
.text-dark,
.text-black-50,
.text-black {
  color: var(--slb-muted) !important;
}

.text-white,
.text-light {
  color: var(--slb-fg) !important;
}

.text-primary {
  color: var(--slb-primary-light) !important;
}

.text-success {
  color: var(--slb-success) !important;
}

.text-warning {
  color: var(--slb-warning) !important;
}

.text-danger {
  color: var(--slb-danger) !important;
}

.text-info {
  color: var(--slb-accent) !important;
}

a {
  color: var(--slb-primary) !important;
  text-decoration: none;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover,
a:focus {
  color: var(--slb-primary-light) !important;
  text-decoration: underline;
}

a:active {
  color: var(--slb-primary-hover) !important;
}

a:focus {
  outline: none !important;
}

a:focus-visible {
  outline: none !important;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}

a.text-muted:hover,
a.text-secondary:hover {
  color: var(--slb-fg) !important;
}

#header,
.header,
.main-header,
header#header,
header.header {
  background-color: #080b14e6 !important;
  background-image: none !important;
  border-bottom: 1px solid var(--slb-border) !important;
  color: var(--slb-fg) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: none !important;
  text-shadow: none !important;
}

#header h1,
#header h2,
#header h3,
.header h1,
.header h2,
.header h3 {
  color: var(--slb-fg) !important;
}

#header p,
.header p {
  color: var(--slb-muted) !important;
}

.topbar,
.top-bar,
#top-bar,
#top-nav,
.top-nav,
.header-bar {
  background-color: #05070fcc !important;
  background-image: none !important;
  border-bottom: 1px solid #232c4480 !important;
  color: var(--slb-muted) !important;
  font-size: 12.5px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.topbar a,
.top-bar a,
#top-bar a,
#top-nav a,
.top-nav a {
  color: var(--slb-muted) !important;
}

.topbar a:hover,
.top-bar a:hover,
#top-bar a:hover,
#top-nav a:hover,
.top-nav a:hover {
  color: var(--slb-fg) !important;
  text-decoration: none;
}

.main-navbar-wrapper,
.navbar-wrapper,
#main-navbar-wrapper {
  background-color: #05070fcc !important;
  background-image: none !important;
  border-bottom: 1px solid var(--slb-border) !important;
  color: var(--slb-fg) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar,
.navbar-default,
.navbar-light,
.navbar-dark,
#nav,
#main-menu,
.main-navbar-wrapper .navbar {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--slb-fg) !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  min-height: 0 !important;
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus,
.navbar-light .navbar-brand,
.navbar-dark .navbar-brand {
  color: var(--slb-fg) !important;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.navbar-text,
.navbar-light .navbar-text,
.navbar-dark .navbar-text {
  color: var(--slb-muted) !important;
  font-size: 13px;
}

.navbar-nav,
.nav {
  background-color: transparent !important;
}

.navbar .nav-link,
.navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link,
.navbar-nav > li > a,
#main-menu .nav-link,
#main-menu > li > a {
  color: var(--slb-muted) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
#main-menu .nav-link:hover,
#main-menu > li > a:hover {
  color: var(--slb-fg) !important;
  background-color: #1b244066 !important;
  border-color: transparent !important;
  text-decoration: none;
}

.navbar .nav-link.active,
.navbar-nav .nav-link.active,
.navbar-nav .active > .nav-link,
.navbar-nav > li.active > a,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .active > .nav-link,
#main-menu > li.active > a {
  color: var(--slb-primary) !important;
  background-color: #3b82f61a !important;
  border-color: #3b82f64d !important;
  font-weight: 600;
}

.navbar .nav-link.show,
.navbar-nav .show > .nav-link,
.navbar-nav .nav-item.show > .nav-link,
.navbar-nav > li.open > a {
  color: var(--slb-fg) !important;
  background-color: #1b2440 !important;
  border-color: #232c44 !important;
}

.navbar .nav-link.disabled,
.navbar-nav .nav-link.disabled,
.navbar-light .navbar-nav .nav-link.disabled,
.navbar-dark .navbar-nav .nav-link.disabled,
.navbar-nav > li.disabled > a {
  color: var(--slb-faint) !important;
  background-color: transparent !important;
  opacity: 0.5;
  pointer-events: none;
}

.navbar .nav-link:focus-visible,
.navbar-nav .nav-link:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}

.navbar .dropdown-toggle::after,
.navbar-nav .dropdown-toggle::after {
  border-top-color: currentColor !important;
  margin-left: 0.4em;
  vertical-align: 0.15em;
  opacity: 0.75;
}

.navbar-toggler,
.navbar-light .navbar-toggler,
.navbar-dark .navbar-toggler {
  color: var(--slb-muted) !important;
  background-color: #1b244066 !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 11px !important;
  padding: 0.375rem 0.625rem !important;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-toggler:hover {
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
  border-color: #3b82f699 !important;
}

.navbar-toggler:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}

.navbar-toggler-icon,
.navbar-light .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23a8b6d4' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  width: 1.25em;
  height: 1.25em;
}

.navbar-collapse {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 991.98px) {
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    background-color: #121828e6 !important;
    border: 1px solid #232c44b3 !important;
    border-radius: var(--slb-radius, 1rem) !important;
    box-shadow: 0 10px 30px #04081859 !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 8px !important;
    margin-top: 10px;
  }

  .navbar-nav .dropdown-menu {
    background-color: #0a0e1acc !important;
    border: 1px solid #232c4480 !important;
    box-shadow: none !important;
    margin: 4px 0 6px !important;
  }
}

.master-breadcrumb,
.breadcrumb-wrapper {
  background-color: #05070fcc !important;
  background-image: none !important;
  border-bottom: 1px solid var(--slb-border) !important;
  color: var(--slb-muted) !important;
  padding: 12px 0 !important;
  margin-bottom: 0 !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.breadcrumb {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slb-muted) !important;
}

.breadcrumb-item,
.breadcrumb > li,
.breadcrumb li {
  color: var(--slb-muted) !important;
}

.breadcrumb-item a,
.breadcrumb a,
.breadcrumb > li > a {
  color: var(--slb-muted) !important;
  text-decoration: none;
}

.breadcrumb-item a:hover,
.breadcrumb a:hover,
.breadcrumb-item a:focus,
.breadcrumb > li > a:hover {
  color: var(--slb-fg) !important;
  text-decoration: underline;
}

.breadcrumb-item.active,
.breadcrumb > .active,
.breadcrumb li.active,
.breadcrumb .active > a {
  color: var(--slb-fg) !important;
  font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb > li + li::before {
  color: var(--slb-faint) !important;
  content: "/" !important;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  float: none;
}

footer#footer,
#footer,
.footer,
footer.footer {
  background-color: var(--slb-side, #080b14) !important;
  background-image: none !important;
  border-top: 1px solid var(--slb-border) !important;
  color: var(--slb-muted) !important;
  margin-top: 56px;
  padding: 36px 0 28px !important;
  font-size: 13px;
}

#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
.footer h5,
.footer h6,
#footer .footer-title {
  color: var(--slb-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

#footer p,
.footer p,
#footer li,
.footer li,
#footer .small,
.footer .small {
  color: var(--slb-muted) !important;
}

#footer a,
.footer a,
footer#footer a {
  color: var(--slb-muted) !important;
  text-decoration: none;
}

#footer a:hover,
.footer a:hover,
#footer a:focus,
footer#footer a:hover {
  color: var(--slb-fg) !important;
  text-decoration: underline;
}

#footer a:focus-visible,
.footer a:focus-visible {
  outline: none !important;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}

#footer hr,
.footer hr {
  border-top: 1px solid #232c4480 !important;
}

#footer .list-unstyled,
.footer .list-unstyled {
  background-color: transparent !important;
}

.nav,
.nav-tabs,
.nav-pills {
  background-color: transparent !important;
}

.nav-link {
  color: var(--slb-muted) !important;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:focus {
  outline: none !important;
}

.nav-link:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}

.nav-link.disabled,
.nav > li.disabled > a {
  color: var(--slb-faint) !important;
  background-color: transparent !important;
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.nav-tabs {
  border-bottom: 1px solid var(--slb-border) !important;
  margin-bottom: 20px;
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
}

.nav-tabs .nav-link,
.nav-tabs > li > a {
  color: var(--slb-muted) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 11px 11px 0 0 !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 14px;
  font-weight: 500;
  margin-right: 2px;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs > li > a:hover {
  color: var(--slb-fg) !important;
  background-color: #1b244066 !important;
  border-color: transparent transparent #3b82f680 !important;
  text-decoration: none;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--slb-fg) !important;
  background-color: #3b82f60d !important;
  border-color: transparent transparent var(--slb-primary) !important;
  border-bottom-width: 2px !important;
  font-weight: 600;
}

.nav-tabs .nav-link.disabled {
  color: var(--slb-faint) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  opacity: 0.5;
}

.nav-tabs .dropdown-menu {
  margin-top: 4px !important;
  border-radius: 14px !important;
}

.nav-pills .nav-link,
.nav-pills > li > a {
  color: var(--slb-muted) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  padding: 0.5rem 0.875rem !important;
  font-size: 14px;
  font-weight: 500;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus,
.nav-pills > li > a:hover {
  color: var(--slb-fg) !important;
  background-color: #1b244066 !important;
  border-color: transparent !important;
  text-decoration: none;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: var(--slb-primary-light) !important;
  background-color: #3b82f61f !important;
  border-color: #3b82f64d !important;
  font-weight: 600;
}

.nav-pills .nav-link.disabled {
  color: var(--slb-faint) !important;
  background-color: transparent !important;
  opacity: 0.5;
}

.tab-content {
  color: var(--slb-fg) !important;
  background-color: transparent !important;
  padding-top: 4px;
}

.tab-content > .tab-pane {
  color: var(--slb-fg) !important;
}

.dropdown-menu,
.navbar .dropdown-menu,
.nav-tabs .dropdown-menu {
  color: var(--slb-fg) !important;
  background-color: #121828f2 !important;
  background-image: none !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 25px -5px #00000040, 0 8px 10px -6px #00000040 !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 6px !important;
  margin-top: 8px !important;
  min-width: 12rem;
  font-size: 14px;
}

.dropdown-menu .dropdown-item,
.dropdown-item,
.dropdown-menu > li > a {
  color: var(--slb-muted) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
  text-decoration: none;
}

.dropdown-item:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: var(--slb-primary-light) !important;
  background-color: #3b82f61f !important;
  font-weight: 600;
}

.dropdown-item.disabled,
.dropdown-item:disabled,
.dropdown-menu > .disabled > a {
  color: var(--slb-faint) !important;
  background-color: transparent !important;
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.dropdown-item i,
.dropdown-item .fa,
.dropdown-item .fas,
.dropdown-item .far {
  color: var(--slb-faint) !important;
  margin-right: 8px;
}

.dropdown-item:hover i,
.dropdown-item:hover .fa,
.dropdown-item.active i {
  color: inherit !important;
}

.dropdown-header,
.dropdown-menu .dropdown-header {
  color: var(--slb-muted) !important;
  background-color: transparent !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 10px 12px 6px !important;
}

.dropdown-divider,
.dropdown-menu .divider {
  border: 0 !important;
  border-top: 1px solid #232c44b3 !important;
  background-color: transparent !important;
  height: 1px !important;
  margin: 6px 4px !important;
  opacity: 1 !important;
}

.dropdown-item-text,
.dropdown-menu p,
.dropdown-menu li.dropdown-header + li,
.dropdown-menu .text-muted {
  color: var(--slb-muted) !important;
}

.dropdown-menu.show {
  animation: slb-rise 0.18s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.popover {
  color: var(--slb-fg) !important;
  background-color: #121828f2 !important;
  background-image: none !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 25px -5px #00000040, 0 8px 10px -6px #00000040 !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  max-width: 300px;
}

.popover-header,
.popover-title {
  color: var(--slb-fg) !important;
  background-color: #1b244099 !important;
  background-image: none !important;
  border-bottom: 1px solid #232c44b3 !important;
  border-top-left-radius: 13px !important;
  border-top-right-radius: 13px !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.625rem 0.875rem !important;
}

.popover-body,
.popover-content {
  color: var(--slb-muted) !important;
  background-color: transparent !important;
  padding: 0.75rem 0.875rem !important;
}

.popover-body a,
.popover-content a {
  color: var(--slb-primary-light) !important;
}

.bs-popover-top > .arrow::before,
.bs-popover-auto[x-placement^="top"] > .arrow::before {
  border-top-color: #232c44b3 !important;
}

.bs-popover-top > .arrow::after,
.bs-popover-auto[x-placement^="top"] > .arrow::after {
  border-top-color: #121828f2 !important;
}

.bs-popover-right > .arrow::before,
.bs-popover-auto[x-placement^="right"] > .arrow::before {
  border-right-color: #232c44b3 !important;
}

.bs-popover-right > .arrow::after,
.bs-popover-auto[x-placement^="right"] > .arrow::after {
  border-right-color: #121828f2 !important;
}

.bs-popover-bottom > .arrow::before,
.bs-popover-auto[x-placement^="bottom"] > .arrow::before {
  border-bottom-color: #232c44b3 !important;
}

.bs-popover-bottom > .arrow::after,
.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
  border-bottom-color: #1b244099 !important;
}

.bs-popover-bottom .popover-header::before,
.bs-popover-auto[x-placement^="bottom"] .popover-header::before {
  border-bottom-color: #1b244099 !important;
}

.bs-popover-left > .arrow::before,
.bs-popover-auto[x-placement^="left"] > .arrow::before {
  border-left-color: #232c44b3 !important;
}

.bs-popover-left > .arrow::after,
.bs-popover-auto[x-placement^="left"] > .arrow::after {
  border-left-color: #121828f2 !important;
}

.tooltip {
  font-family: inherit;
  font-size: 12px;
  line-height: 16px;
}

.tooltip.show,
.tooltip.in {
  opacity: 1 !important;
}

.tooltip-inner {
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a !important;
  padding: 6px 10px !important;
  font-weight: 500;
  text-align: center;
  max-width: 240px;
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before,
.tooltip.top .tooltip-arrow {
  border-top-color: var(--slb-surface-2) !important;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before,
.tooltip.right .tooltip-arrow {
  border-right-color: var(--slb-surface-2) !important;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--slb-surface-2) !important;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before,
.tooltip.left .tooltip-arrow {
  border-left-color: var(--slb-surface-2) !important;
}

@keyframes slb-rise {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

#main-body > .container,
#main-body > .container-fluid {
  animation: slb-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  #main-body > .container,
  #main-body > .container-fluid,
  .dropdown-menu.show {
    animation: none !important;
  }
}

/* --- 1. Base des controles ------------------------------------------------ */

input,
select,
textarea,
button,
.form-control,
.custom-select,
.custom-file-input,
.custom-file-label {
  color-scheme: dark;
  font-family: inherit;
}

fieldset {
  border: 0 !important;
  min-width: 0;
}

legend {
  color: var(--slb-fg) !important;
  border: 0 !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

/* --- 2. Labels, aides, textes ---------------------------------------------- */

label,
.control-label,
.form-check-label,
.custom-control-label,
.custom-file-label {
  color: var(--slb-muted) !important;
}

label,
.control-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.col-form-label,
.col-form-label-sm,
.col-form-label-lg {
  color: var(--slb-muted) !important;
  font-size: 13px;
  font-weight: 600;
  padding-top: 12px;
  padding-bottom: 6px;
  margin-bottom: 0;
}

.col-form-label-sm { padding-top: 9px; font-size: 12.5px; }
.col-form-label-lg { padding-top: 14px; font-size: 14px; }

.form-check-label,
.custom-control-label,
.form-check-inline .form-check-label {
  display: inline-block;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--slb-fg) !important;
}

.form-text,
.help-block,
small.form-text,
.form-group > small,
.form-row > small {
  color: var(--slb-muted) !important;
  font-size: 12.5px !important;
  line-height: 1.5;
  margin-top: 6px;
}

label .required,
label .text-danger,
abbr[title="required"] {
  color: var(--slb-danger) !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* --- 3. .form-control ------------------------------------------------------ */

.form-control,
input.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="search"].form-control,
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control {
  height: 44px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400;
  color: var(--slb-fg) !important;
  background-color: var(--slb-field) !important;
  background-clip: padding-box !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
  transition: color .15s cubic-bezier(.4, 0, .2, 1),
              background-color .15s cubic-bezier(.4, 0, .2, 1),
              border-color .15s cubic-bezier(.4, 0, .2, 1),
              box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

.form-control:hover:not(:disabled):not([readonly]) {
  border-color: #232c44 !important;
  border-color: color-mix(in oklab, var(--slb-primary) 35%, var(--slb-border)) !important;
}

.form-control:focus,
.form-control:focus-visible {
  color: var(--slb-fg) !important;
  background-color: var(--slb-field) !important;
  border-color: var(--slb-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px #3b82f633 !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--slb-primary) 20%, transparent) !important;
}

.form-control::placeholder,
.custom-select::placeholder,
textarea.form-control::placeholder {
  color: var(--slb-faint) !important;
  opacity: 1 !important;
}

.form-control::-webkit-input-placeholder { color: var(--slb-faint) !important; opacity: 1 !important; }
.form-control::-moz-placeholder { color: var(--slb-faint) !important; opacity: 1 !important; }
.form-control:-ms-input-placeholder { color: var(--slb-faint) !important; opacity: 1 !important; }

.form-control:disabled,
.form-control.disabled,
fieldset:disabled .form-control {
  color: var(--slb-muted) !important;
  background-color: #0a0e1acc !important;
  background-color: color-mix(in oklab, var(--slb-field) 80%, transparent) !important;
  border-color: #232c4480 !important;
  border-color: color-mix(in oklab, var(--slb-border) 50%, transparent) !important;
  opacity: .6 !important;
  cursor: not-allowed !important;
}

.form-control[readonly],
.form-control[readonly]:focus {
  color: var(--slb-fg) !important;
  background-color: #1b24404d !important;
  background-color: color-mix(in oklab, var(--slb-surface-2) 30%, transparent) !important;
  border-color: #232c4499 !important;
  border-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  cursor: default !important;
}

.form-control[readonly]:focus {
  box-shadow: none !important;
}

.form-control-plaintext,
.form-control-plaintext:focus {
  color: var(--slb-fg) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 10px 0 !important;
  font-size: 14px !important;
}

.form-control-sm,
select.form-control-sm,
.input-group-sm > .form-control,
.input-group-sm > .custom-select {
  height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  line-height: 18px !important;
  border-radius: 9px !important;
}

.form-control-lg,
select.form-control-lg,
.input-group-lg > .form-control,
.input-group-lg > .custom-select {
  height: 48px !important;
  padding: 0 16px !important;
  font-size: 16px !important;
  line-height: 24px !important;
  border-radius: 12px !important;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:active,
.custom-select:-webkit-autofill,
input:-webkit-autofill {
  -webkit-text-fill-color: var(--slb-fg) !important;
  caret-color: var(--slb-fg) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--slb-field) inset !important;
  box-shadow: 0 0 0 1000px var(--slb-field) inset !important;
  border-color: var(--slb-border) !important;
  transition: background-color 8000s ease-in-out 0s !important;
}

.form-control:-webkit-autofill:focus,
.custom-select:-webkit-autofill:focus,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--slb-field) inset, 0 0 0 3px #3b82f633 !important;
  box-shadow: 0 0 0 1000px var(--slb-field) inset, 0 0 0 3px #3b82f633 !important;
  border-color: var(--slb-primary) !important;
}

.form-control::-webkit-calendar-picker-indicator,
.form-control::-webkit-search-cancel-button,
.form-control::-webkit-clear-button,
.form-control::-webkit-inner-spin-button {
  filter: invert(78%) sepia(12%) saturate(560%) hue-rotate(185deg) brightness(95%);
  opacity: .8;
  cursor: pointer;
}

.form-control::-webkit-calendar-picker-indicator:hover,
.form-control::-webkit-search-cancel-button:hover {
  opacity: 1;
}

/* --- 4. textarea ----------------------------------------------------------- */

textarea,
textarea.form-control {
  height: auto !important;
  min-height: 104px !important;
  padding: 10px 14px !important;
  line-height: 1.6 !important;
  border-radius: 12px !important;
  resize: vertical;
  scrollbar-width: thin;
  scrollbar-color: var(--slb-border) transparent;
}

textarea.form-control-sm { min-height: 80px !important; border-radius: 10px !important; }
textarea.form-control-lg { min-height: 140px !important; border-radius: 12px !important; }

/* --- 5. select / .custom-select -------------------------------------------- */

select,
select.form-control,
.custom-select {
  color: var(--slb-fg) !important;
  background-color: var(--slb-field) !important;
  border: 1px solid var(--slb-border) !important;
  outline: none !important;
  transition: color .15s cubic-bezier(.4, 0, .2, 1),
              background-color .15s cubic-bezier(.4, 0, .2, 1),
              border-color .15s cubic-bezier(.4, 0, .2, 1),
              box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

.custom-select {
  height: 44px !important;
  padding: 0 40px 0 14px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  vertical-align: middle;
}

select.form-control:not([multiple]):not([size]),
select.form-control:not([multiple])[size="1"] {
  height: 44px !important;
  padding: 0 40px 0 14px !important;
  border-radius: 12px !important;
}

select.form-control:not([multiple]),
.custom-select:not([multiple]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 16px 16px !important;
}

select.form-control:hover:not(:disabled),
.custom-select:hover:not(:disabled) {
  border-color: #3b82f680 !important;
  border-color: color-mix(in oklab, var(--slb-primary) 50%, transparent) !important;
}

select.form-control:focus,
.custom-select:focus {
  color: var(--slb-fg) !important;
  background-color: var(--slb-field) !important;
  border-color: var(--slb-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f64d !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--slb-primary) 30%, transparent) !important;
}

.custom-select:focus::-ms-value {
  color: var(--slb-fg) !important;
  background-color: var(--slb-field) !important;
}

select[multiple],
select[size]:not([size="1"]),
select.form-control[multiple],
select.form-control[size]:not([size="1"]),
.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
  height: auto !important;
  padding: 8px !important;
  background-image: none !important;
  border-radius: 12px !important;
}

select option,
select optgroup,
.custom-select option,
.custom-select optgroup,
.form-control option {
  color: var(--slb-fg) !important;
  background-color: var(--slb-field) !important;
}

select optgroup,
.custom-select optgroup {
  color: var(--slb-faint) !important;
  font-weight: 600;
}

select option:checked,
select option:hover,
.custom-select option:checked {
  background-color: var(--slb-surface-2) !important;
  color: var(--slb-fg) !important;
}

select:disabled,
select.form-control:disabled,
.custom-select:disabled,
.custom-select[readonly] {
  color: var(--slb-muted) !important;
  background-color: #0a0e1acc !important;
  background-color: color-mix(in oklab, var(--slb-field) 80%, transparent) !important;
  border-color: #232c4480 !important;
  opacity: .6 !important;
  cursor: not-allowed !important;
}

.custom-select-sm { height: 36px !important; padding: 0 36px 0 12px !important; font-size: 13px !important; border-radius: 10px !important; }
.custom-select-lg { height: 48px !important; padding: 0 42px 0 16px !important; font-size: 16px !important; border-radius: 12px !important; }

/* --- 6. Champs fichier ------------------------------------------------------ */

.form-control-file,
.form-control-range,
input[type="file"] {
  display: block;
  width: 100%;
  color: var(--slb-muted) !important;
  font-size: 13.5px;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  height: 36px;
  margin-right: 12px;
  padding: 0 14px;
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 9px !important;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  border-color: #3b82f699 !important;
  background-color: #1b2440 !important;
}

.custom-file,
.custom-file-input,
.custom-file-label {
  height: 44px !important;
}

.custom-file-input {
  cursor: pointer;
  opacity: 0;
}

.custom-file-label {
  color: var(--slb-muted) !important;
  background-color: var(--slb-field) !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 11px !important;
  padding: 0 14px !important;
  line-height: 42px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.custom-file-label::after {
  height: 42px !important;
  padding: 0 16px !important;
  line-height: 42px !important;
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
  border-left: 1px solid var(--slb-border) !important;
  border-radius: 0 10px 10px 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--slb-primary) !important;
  box-shadow: 0 0 0 3px #3b82f633 !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--slb-primary) 20%, transparent) !important;
}

.custom-file-input:disabled ~ .custom-file-label,
.custom-file-input[disabled] ~ .custom-file-label {
  background-color: #0a0e1acc !important;
  color: var(--slb-faint) !important;
  opacity: .6 !important;
  cursor: not-allowed !important;
}

/* --- 7. .input-group -------------------------------------------------------- */

.input-group {
  border-radius: 11px;
}

.input-group-text {
  height: 44px !important;
  padding: 0 14px !important;
  color: var(--slb-muted) !important;
  background-color: var(--slb-surface-2) !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 11px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}

.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  border-radius: 9px !important;
}

.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-append > .btn {
  height: 44px !important;
  min-height: 44px !important;
  z-index: 2;
}

.input-group > .form-control,
.input-group > .form-control-plaintext,
.input-group > .custom-select,
.input-group > .custom-file,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn {
  border-radius: 0 !important;
}

.input-group > .form-control:first-child,
.input-group > .custom-select:first-child,
.input-group > .custom-file:first-child .custom-file-label,
.input-group > .input-group-prepend:first-child > .input-group-text:first-child,
.input-group > .input-group-prepend:first-child > .btn:first-child,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text:first-child {
  border-top-left-radius: 11px !important;
  border-bottom-left-radius: 11px !important;
}

.input-group > .form-control:last-child,
.input-group > .custom-select:last-child,
.input-group > .custom-file:last-child .custom-file-label,
.input-group > .input-group-append:last-child > .input-group-text:last-child,
.input-group > .input-group-append:last-child > .btn:last-child,
.input-group > .input-group-append:not(:last-child) > .input-group-text:last-child {
  border-top-right-radius: 11px !important;
  border-bottom-right-radius: 11px !important;
}

.input-group > .custom-file:last-child .custom-file-label::after {
  border-radius: 0 10px 10px 0 !important;
}

.input-group:focus-within > .input-group-prepend > .input-group-text,
.input-group:focus-within > .input-group-append > .input-group-text {
  border-color: var(--slb-primary) !important;
  color: var(--slb-fg) !important;
}

.input-group > .form-control:focus,
.input-group > .custom-select:focus {
  z-index: 4 !important;
}

/* --- 8. Cases a cocher, radios, interrupteurs ------------------------------- */

.form-check {
  padding-left: 26px;
  min-height: 22px;
  margin-bottom: 6px;
}

.form-check-input,
input[type="checkbox"]:not(.custom-control-input),
input[type="radio"]:not(.custom-control-input) {
  accent-color: var(--slb-primary);
  width: 16px;
  height: 16px;
  margin-top: 3px;
  background-color: var(--slb-field);
  border: 1px solid var(--slb-border);
  cursor: pointer;
}

.form-check-input {
  margin-left: -26px;
}

.form-check-input:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px #3b82f633 !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--slb-primary) 20%, transparent) !important;
}

.form-check-input:disabled,
.form-check-input[disabled],
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: .5 !important;
  cursor: not-allowed !important;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
  color: var(--slb-faint) !important;
  cursor: not-allowed !important;
}

.custom-control {
  min-height: 22px;
}

.custom-control-label {
  cursor: pointer;
  padding-top: 1px;
}

.custom-control-label::before {
  top: 2px;
  width: 18px !important;
  height: 18px !important;
  background-color: var(--slb-field) !important;
  border: 1px solid var(--slb-border) !important;
  box-shadow: none !important;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1),
              border-color .15s cubic-bezier(.4, 0, .2, 1),
              box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

.custom-control-label::after {
  top: 2px;
  width: 18px !important;
  height: 18px !important;
  background-size: 62% 62% !important;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 6px !important;
}

.custom-radio .custom-control-label::before {
  border-radius: 50% !important;
}

.custom-control-label:hover::before,
.custom-control-input:not(:disabled):hover ~ .custom-control-label::before {
  border-color: #3b82f699 !important;
  border-color: color-mix(in oklab, var(--slb-primary) 60%, transparent) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff !important;
  background-color: var(--slb-primary) !important;
  background-image: var(--slb-gradient) !important;
  border-color: var(--slb-primary) !important;
}

.custom-control-input:indeterminate ~ .custom-control-label::before {
  background-color: var(--slb-primary) !important;
  background-image: var(--slb-gradient) !important;
  border-color: var(--slb-primary) !important;
}

.custom-control-input:focus ~ .custom-control-label::before,
.custom-control-input:focus-visible ~ .custom-control-label::before {
  border-color: var(--slb-primary) !important;
  box-shadow: 0 0 0 3px #3b82f633 !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--slb-primary) 20%, transparent) !important;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--slb-primary) !important;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff !important;
  background-color: var(--slb-primary-hover) !important;
  background-image: none !important;
  border-color: var(--slb-primary-hover) !important;
}

.custom-control-input:disabled ~ .custom-control-label,
.custom-control-input[disabled] ~ .custom-control-label {
  color: var(--slb-faint) !important;
  cursor: not-allowed !important;
}

.custom-control-input:disabled ~ .custom-control-label::before,
.custom-control-input[disabled] ~ .custom-control-label::before {
  background-color: #0a0e1acc !important;
  border-color: #232c4480 !important;
  opacity: .6 !important;
}

.custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: #3b82f680 !important;
  background-image: none !important;
  border-color: #3b82f680 !important;
}

.custom-switch .custom-control-label::before {
  width: 36px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background-color: var(--slb-surface-2) !important;
  border-color: var(--slb-border) !important;
}

.custom-switch .custom-control-label::after {
  top: 4px !important;
  left: -34px !important;
  width: 14px !important;
  height: 14px !important;
  background-color: var(--slb-muted) !important;
  border-radius: 999px !important;
  transition: transform .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--slb-primary) !important;
  background-image: var(--slb-gradient) !important;
  border-color: var(--slb-primary) !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff !important;
  transform: translateX(16px) !important;
}

.custom-range,
input[type="range"] {
  width: 100%;
  height: 20px;
  padding: 0;
  background-color: transparent !important;
  accent-color: var(--slb-primary);
  -webkit-appearance: none;
  appearance: none;
}

.custom-range:focus,
input[type="range"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

.custom-range::-webkit-slider-runnable-track,
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background-color: var(--slb-surface-2) !important;
  border: 0 !important;
  border-radius: 999px !important;
}

.custom-range::-moz-range-track,
input[type="range"]::-moz-range-track {
  height: 6px;
  background-color: var(--slb-surface-2) !important;
  border: 0 !important;
  border-radius: 999px !important;
}

.custom-range::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -5px;
  background-color: var(--slb-primary) !important;
  background-image: var(--slb-gradient) !important;
  border: 2px solid var(--slb-field) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(4, 8, 24, .5) !important;
  -webkit-appearance: none;
  appearance: none;
}

.custom-range::-moz-range-thumb,
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background-color: var(--slb-primary) !important;
  border: 2px solid var(--slb-field) !important;
  border-radius: 50% !important;
}

.custom-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #3b82f633 !important;
}

.custom-range:disabled::-webkit-slider-thumb,
.custom-range:disabled::-moz-range-thumb {
  background-color: var(--slb-faint) !important;
  background-image: none !important;
}

/* --- 9. Validation ---------------------------------------------------------- */

.invalid-feedback,
.invalid-tooltip,
.field-error,
.form-group .error {
  color: var(--slb-danger) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.45;
  margin-top: 6px;
}

.invalid-tooltip {
  background-color: #f871711f !important;
  background-color: color-mix(in oklab, var(--slb-danger) 12%, transparent) !important;
  border: 1px solid #f8717166 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}

.valid-feedback,
.valid-tooltip {
  color: var(--slb-success) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  margin-top: 6px;
}

.valid-tooltip {
  background-color: #34d3991f !important;
  border: 1px solid #34d39966 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
}

.form-control.is-invalid,
.custom-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .custom-select:invalid,
.form-control.error,
.has-error .form-control {
  border-color: var(--slb-danger) !important;
  background-color: #0a0e1a !important;
  background-image: none !important;
  padding-right: 14px !important;
}

.custom-select.is-invalid:not([multiple]),
.was-validated .custom-select:invalid:not([multiple]),
select.form-control.is-invalid:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  padding-right: 40px !important;
}

.form-control.is-invalid:focus,
.custom-select.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .custom-select:invalid:focus,
.has-error .form-control:focus {
  border-color: var(--slb-danger) !important;
  box-shadow: 0 0 0 3px #f8717133 !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--slb-danger) 20%, transparent) !important;
}

.form-control.is-valid,
.custom-select.is-valid,
.was-validated .form-control:valid,
.was-validated .custom-select:valid {
  border-color: var(--slb-success) !important;
  background-image: none !important;
  padding-right: 14px !important;
}

.form-control.is-valid:focus,
.custom-select.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: var(--slb-success) !important;
  box-shadow: 0 0 0 3px #34d39933 !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--slb-success) 20%, transparent) !important;
}

.custom-control-input.is-invalid ~ .custom-control-label,
.was-validated .custom-control-input:invalid ~ .custom-control-label {
  color: var(--slb-danger) !important;
}

.custom-control-input.is-invalid ~ .custom-control-label::before,
.was-validated .custom-control-input:invalid ~ .custom-control-label::before {
  border-color: var(--slb-danger) !important;
  background-color: #f871711a !important;
}

.custom-control-input.is-valid ~ .custom-control-label,
.was-validated .custom-control-input:valid ~ .custom-control-label {
  color: var(--slb-success) !important;
}

.has-error .control-label,
.has-error label,
.text-danger {
  color: var(--slb-danger) !important;
}

.has-success .control-label { color: var(--slb-success) !important; }

/* --- 10. Boutons : base ------------------------------------------------------ */

.btn,
a.btn,
button.btn,
input[type="submit"].btn,
input[type="button"].btn,
input[type="reset"].btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 16px !important;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  cursor: pointer;
  user-select: none;
  transition: color .15s cubic-bezier(.4, 0, .2, 1),
              background-color .15s cubic-bezier(.4, 0, .2, 1),
              border-color .15s cubic-bezier(.4, 0, .2, 1),
              box-shadow .15s cubic-bezier(.4, 0, .2, 1),
              opacity .15s cubic-bezier(.4, 0, .2, 1),
              transform .15s cubic-bezier(.4, 0, .2, 1);
}

.btn i,
.btn .fa,
.btn svg {
  flex: 0 0 auto;
  line-height: 1;
}

.btn-sm,
.btn-group-sm > .btn {
  min-height: 32px;
  padding: 4px 12px !important;
  font-size: 13px !important;
  border-radius: 9px !important;
  gap: 6px;
}

.btn-lg,
.btn-group-lg > .btn {
  min-height: 48px;
  padding: 8px 24px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
  gap: 10px;
}

.btn-xs {
  min-height: 28px;
  padding: 2px 10px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
  gap: 6px;
}

.btn-block {
  display: flex !important;
  width: 100%;
}

.btn-block + .btn-block { margin-top: 10px; }

/* --- 11. Boutons : variantes ------------------------------------------------- */

.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
input[type="submit"].btn-primary {
  color: #fff !important;
  background-color: var(--slb-primary) !important;
  background-image: var(--slb-gradient) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 15px -3px #3b82f64d, 0 4px 6px -4px #3b82f64d !important;
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):hover {
  color: #fff !important;
  background-color: var(--slb-primary-hover) !important;
  background-image: var(--slb-gradient) !important;
  border-color: transparent !important;
  opacity: .95;
  transform: translateY(-1px);
  box-shadow: 0 10px 15px -3px #3b82f666, 0 4px 6px -4px #3b82f666 !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: var(--slb-primary-hover) !important;
  background-image: var(--slb-gradient) !important;
  border-color: transparent !important;
  opacity: .92;
  transform: translateY(0);
  box-shadow: 0 4px 10px -4px #3b82f64d !important;
}

.btn-secondary,
.btn-default,
.btn-light,
.btn-white,
.btn-outline-light,
.btn-outline-secondary,
.btn-outline-dark {
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
  background-image: none !important;
  border-color: var(--slb-border) !important;
}

.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark {
  background-color: transparent !important;
  color: var(--slb-muted) !important;
}

.btn-secondary:hover,
.btn-default:hover,
.btn-light:hover,
.btn-white:hover,
.btn-outline-secondary:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover {
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
  background-image: none !important;
  border-color: #3b82f699 !important;
  border-color: color-mix(in oklab, var(--slb-primary) 60%, transparent) !important;
  transform: translateY(-1px);
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-default:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: var(--slb-fg) !important;
  background-color: #1b2440 !important;
  border-color: var(--slb-primary) !important;
  transform: translateY(0);
}

.btn-dark {
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface) !important;
  background-image: none !important;
  border-color: var(--slb-border) !important;
}

.btn-dark:hover {
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
  border-color: #3b82f699 !important;
  transform: translateY(-1px);
}

.btn-link,
.btn-ghost {
  color: var(--slb-primary) !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--slb-primary-light) !important;
  background-color: #3b82f61a !important;
  background-color: color-mix(in oklab, var(--slb-primary) 10%, transparent) !important;
  border-color: transparent !important;
  text-decoration: underline !important;
}

.btn-ghost {
  color: var(--slb-muted) !important;
  font-weight: 500 !important;
}

.btn-ghost:hover {
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
}

.btn-link:disabled,
.btn-link.disabled {
  color: var(--slb-faint) !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

.btn-success {
  color: var(--slb-field) !important;
  background-color: var(--slb-success) !important;
  background-image: none !important;
  border-color: var(--slb-success) !important;
  font-weight: 600 !important;
}

.btn-success:hover,
.btn-success:not(:disabled):not(.disabled):active,
.show > .btn-success.dropdown-toggle {
  color: var(--slb-field) !important;
  background-color: #34d399e6 !important;
  background-color: color-mix(in oklab, var(--slb-success) 90%, #05070f) !important;
  border-color: #34d399e6 !important;
}

.btn-info {
  color: var(--slb-field) !important;
  background-color: var(--slb-accent) !important;
  background-image: none !important;
  border-color: var(--slb-accent) !important;
  font-weight: 600 !important;
}

.btn-info:hover,
.btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle {
  color: var(--slb-field) !important;
  background-color: #38bdf8e6 !important;
  background-color: color-mix(in oklab, var(--slb-accent) 90%, #05070f) !important;
  border-color: #38bdf8e6 !important;
}

.btn-warning {
  color: var(--slb-field) !important;
  background-color: var(--slb-warning) !important;
  background-image: none !important;
  border-color: var(--slb-warning) !important;
  font-weight: 600 !important;
}

.btn-warning:hover,
.btn-warning:not(:disabled):not(.disabled):active,
.show > .btn-warning.dropdown-toggle {
  color: var(--slb-field) !important;
  background-color: #fbbf24e6 !important;
  background-color: color-mix(in oklab, var(--slb-warning) 90%, #05070f) !important;
  border-color: #fbbf24e6 !important;
}

.btn-danger {
  color: var(--slb-field) !important;
  background-color: var(--slb-danger) !important;
  background-image: none !important;
  border-color: var(--slb-danger) !important;
  font-weight: 600 !important;
}

.btn-danger:hover,
.btn-danger:not(:disabled):not(.disabled):active,
.show > .btn-danger.dropdown-toggle {
  color: var(--slb-field) !important;
  background-color: #f87171d9 !important;
  background-color: color-mix(in oklab, var(--slb-danger) 85%, transparent) !important;
  border-color: #f87171d9 !important;
}

.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover {
  transform: translateY(-1px);
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled):active {
  transform: translateY(0);
}

.btn-outline-primary {
  color: var(--slb-primary-light) !important;
  background-color: #3b82f614 !important;
  background-color: color-mix(in oklab, var(--slb-primary) 8%, transparent) !important;
  background-image: none !important;
  border-color: #3b82f673 !important;
  border-color: color-mix(in oklab, var(--slb-primary) 45%, transparent) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
  color: var(--slb-fg) !important;
  background-color: #3b82f633 !important;
  background-color: color-mix(in oklab, var(--slb-primary) 20%, transparent) !important;
  border-color: var(--slb-primary) !important;
}

.btn-outline-danger {
  color: var(--slb-danger) !important;
  background-color: #f871711a !important;
  background-color: color-mix(in oklab, var(--slb-danger) 10%, transparent) !important;
  background-image: none !important;
  border-color: #f8717166 !important;
  border-color: color-mix(in oklab, var(--slb-danger) 40%, transparent) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.show > .btn-outline-danger.dropdown-toggle {
  color: var(--slb-danger) !important;
  background-color: #f8717133 !important;
  background-color: color-mix(in oklab, var(--slb-danger) 20%, transparent) !important;
  border-color: var(--slb-danger) !important;
}

.btn-outline-success {
  color: var(--slb-success) !important;
  background-color: #34d39914 !important;
  background-image: none !important;
  border-color: #34d39966 !important;
}

.btn-outline-success:hover,
.btn-outline-success:not(:disabled):not(.disabled):active {
  color: var(--slb-success) !important;
  background-color: #34d39933 !important;
  border-color: var(--slb-success) !important;
}

.btn-outline-warning {
  color: var(--slb-warning) !important;
  background-color: #fbbf2414 !important;
  background-image: none !important;
  border-color: #fbbf2466 !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:not(:disabled):not(.disabled):active {
  color: var(--slb-warning) !important;
  background-color: #fbbf2433 !important;
  border-color: var(--slb-warning) !important;
}

.btn-outline-info {
  color: var(--slb-accent) !important;
  background-color: #38bdf814 !important;
  background-image: none !important;
  border-color: #38bdf866 !important;
}

.btn-outline-info:hover,
.btn-outline-info:not(:disabled):not(.disabled):active {
  color: var(--slb-accent) !important;
  background-color: #38bdf833 !important;
  border-color: var(--slb-accent) !important;
}

.btn-outline-primary:hover,
.btn-outline-danger:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
  transform: translateY(-1px);
}

/* --- 12. Boutons : focus, actif, desactive ----------------------------------- */

.btn:focus,
.btn.focus,
.btn:active:focus,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus {
  outline: 0 !important;
  box-shadow: none !important;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 10px 15px -3px #3b82f64d, 0 4px 6px -4px #3b82f64d !important;
}

.btn:focus-visible,
.btn:not(:disabled):not(.disabled):active:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 2px #3b82f699 !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--slb-primary) 60%, transparent) !important;
}

.btn-primary:focus-visible,
.btn-primary:not(:disabled):not(.disabled):active:focus-visible {
  box-shadow: 0 0 0 2px #3b82f699, 0 10px 15px -3px #3b82f64d, 0 4px 6px -4px #3b82f64d !important;
}

.btn-danger:focus-visible,
.btn-outline-danger:focus-visible {
  box-shadow: 0 0 0 2px #f8717199 !important;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--slb-danger) 60%, transparent) !important;
}

.btn-success:focus-visible,
.btn-outline-success:focus-visible {
  box-shadow: 0 0 0 2px #34d39999 !important;
}

.btn-warning:focus-visible,
.btn-outline-warning:focus-visible {
  box-shadow: 0 0 0 2px #fbbf2499 !important;
}

.btn:disabled,
.btn.disabled,
.btn[disabled],
fieldset:disabled .btn,
a.btn.disabled {
  opacity: .5 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none !important;
}

.btn:disabled:hover,
.btn.disabled:hover,
.btn[disabled]:hover {
  transform: none !important;
  box-shadow: none !important;
  opacity: .5 !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
  color: #fff !important;
  background-image: var(--slb-gradient) !important;
  border-color: transparent !important;
}

/* --- 13. .btn-group / .btn-toolbar -------------------------------------------- */

.btn-group > .btn,
.btn-group-vertical > .btn {
  border-radius: 0 !important;
  border-color: var(--slb-border) !important;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
  z-index: 2;
  transform: none !important;
}

.btn-group > .btn:first-child,
.btn-group > .btn-group:first-child > .btn:first-child {
  border-top-left-radius: 11px !important;
  border-bottom-left-radius: 11px !important;
}

.btn-group > .btn:last-child,
.btn-group > .btn:last-child:not(.dropdown-toggle),
.btn-group > .dropdown-toggle:last-child,
.btn-group > .btn-group:last-child > .btn:last-child {
  border-top-right-radius: 11px !important;
  border-bottom-right-radius: 11px !important;
}

.btn-group > .btn:not(:first-child) {
  margin-left: -1px;
}

.btn-group-sm > .btn:first-child { border-top-left-radius: 9px !important; border-bottom-left-radius: 9px !important; }
.btn-group-sm > .btn:last-child { border-top-right-radius: 9px !important; border-bottom-right-radius: 9px !important; }
.btn-group-lg > .btn:first-child { border-top-left-radius: 12px !important; border-bottom-left-radius: 12px !important; }
.btn-group-lg > .btn:last-child { border-top-right-radius: 12px !important; border-bottom-right-radius: 12px !important; }

.btn-group-vertical > .btn:first-child {
  border-top-left-radius: 11px !important;
  border-top-right-radius: 11px !important;
}

.btn-group-vertical > .btn:last-child {
  border-bottom-left-radius: 11px !important;
  border-bottom-right-radius: 11px !important;
}

.btn-group-vertical > .btn:not(:first-child) {
  margin-top: -1px;
  margin-left: 0;
}

.btn-group .btn.active,
.btn-group-toggle .btn.active,
.btn-group-toggle .btn input:checked + .btn {
  color: var(--slb-fg) !important;
  background-color: #3b82f626 !important;
  background-color: color-mix(in oklab, var(--slb-primary) 15%, transparent) !important;
  border-color: #3b82f666 !important;
  z-index: 2;
}

.btn-toolbar {
  gap: 8px;
}

.btn-group + .btn-group,
.btn + .btn:not(.btn-group > .btn) {
  margin-left: 0;
}

.dropdown-toggle-split {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* --- 14. Divers formulaires --------------------------------------------------- */

.form-inline .form-control,
.form-inline .custom-select {
  display: inline-flex;
  width: auto;
}

.form-row > .col > label,
.form-row > [class*="col-"] > label {
  margin-bottom: 6px;
}

.form-group {
  margin-bottom: 18px;
}

.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback {
  display: block;
}

::selection {
  background-color: #3b82f659;
  color: var(--slb-fg);
}

/* --- 15. Mouvement reduit ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .form-control,
  .custom-select,
  .input-group-text,
  .custom-control-label::before,
  .custom-control-label::after,
  .custom-switch .custom-control-label::after {
    transition: none !important;
  }

  .btn:hover,
  .btn:active,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-outline-primary:hover {
    transform: none !important;
  }
}

.table,
table.table,
.table-responsive > .table {
  width: 100% !important;
  margin-bottom: 1.25rem;
  color: var(--slb-fg) !important;
  background-color: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 14px;
  line-height: 20px;
}
.table caption {
  caption-side: bottom;
  padding: 10px 2px;
  color: var(--slb-muted) !important;
  font-size: 12.5px;
}
.table th,
.table td,
table.table > thead > tr > th,
table.table > thead > tr > td,
table.table > tbody > tr > th,
table.table > tbody > tr > td,
table.table > tfoot > tr > th,
table.table > tfoot > tr > td {
  padding: 12px 14px;
  vertical-align: middle;
  border: 0 !important;
  border-top: 0 !important;
  background-color: transparent !important;
  color: inherit !important;
}
.table > thead > tr > th,
.table thead th,
.table thead td,
table.table > thead > tr > th {
  vertical-align: bottom;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--slb-muted) !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--slb-border) !important;
}
.table tbody tr {
  background-color: transparent !important;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.table tbody tr > th,
.table tbody tr > td {
  border-bottom: 1px solid #232c4499 !important;
}
.table tbody tr:last-child > th,
.table tbody tr:last-child > td {
  border-bottom: 0 !important;
}
.table tbody td,
.table tbody th {
  color: var(--slb-fg) !important;
}
.table tbody th {
  font-weight: 600;
}
.table td small,
.table td .small,
.table td .text-muted,
.table th .text-muted {
  color: var(--slb-muted) !important;
}
.table td.text-nowrap,
.table td .amount,
.table td .price,
.table .tabular,
.table td.money,
.table td.numeric {
  font-variant-numeric: tabular-nums;
}
.table tfoot th,
.table tfoot td,
table.table > tfoot > tr > th,
table.table > tfoot > tr > td {
  color: var(--slb-fg) !important;
  font-weight: 600;
  background-color: #1b24404d !important;
  border-top: 1px solid var(--slb-border) !important;
  border-bottom: 0 !important;
}
.table a:not(.btn):not(.badge):not(.label):not(.page-link) {
  color: var(--slb-primary-light) !important;
  text-decoration: none;
  font-weight: 500;
  transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
.table a:not(.btn):not(.badge):not(.label):not(.page-link):hover,
.table a:not(.btn):not(.badge):not(.label):not(.page-link):focus {
  color: var(--slb-fg) !important;
  text-decoration: underline;
}
.table a:not(.btn):focus-visible {
  outline: none !important;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}
.table-striped tbody tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(2n + 1) > td,
.table-striped tbody tr:nth-of-type(2n + 1) > th {
  background-color: #1b24404d !important;
  color: var(--slb-fg) !important;
}
.table-striped tbody tr:nth-of-type(even),
.table-striped > tbody > tr:nth-of-type(even) {
  background-color: transparent !important;
}
.table-hover tbody tr:hover,
.table-hover > tbody > tr:hover,
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
  background-color: #1b244080 !important;
  color: var(--slb-fg) !important;
}
.table-bordered,
.table-bordered th,
.table-bordered td,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: 1px solid #232c4480 !important;
}
.table-bordered thead th,
.table-bordered thead td {
  border-bottom-width: 1px !important;
  border-bottom-color: var(--slb-border) !important;
}
.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
  border: 0 !important;
}
.table-sm th,
.table-sm td,
.table-sm > thead > tr > th,
.table-sm > tbody > tr > td {
  padding: 8px 12px;
}
.table-dark,
.table-dark th,
.table-dark td,
.table-dark thead th,
.table > tbody + tbody {
  color: var(--slb-fg) !important;
  background-color: transparent !important;
  border-color: var(--slb-border) !important;
}
.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: #1b24404d !important;
}
.table-dark.table-hover tbody tr:hover {
  background-color: #1b244080 !important;
  color: var(--slb-fg) !important;
}
.thead-dark th,
.thead-light th,
.table .thead-dark th,
.table .thead-light th {
  color: var(--slb-muted) !important;
  background-color: #1b24404d !important;
  border-color: var(--slb-border) !important;
}
.table-active,
.table-active > th,
.table-active > td,
.table-hover .table-active:hover,
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
  background-color: #1b244099 !important;
  color: var(--slb-fg) !important;
}
.table-light,
.table-light > th,
.table-light > td,
.table-secondary,
.table-secondary > th,
.table-secondary > td {
  background-color: #1b24404d !important;
  color: var(--slb-fg) !important;
  box-shadow: inset 3px 0 0 0 #6b789966;
}
.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #3b82f61a !important;
  color: var(--slb-fg) !important;
}
.table-success,
.table-success > th,
.table-success > td {
  background-color: #34d3991a !important;
  color: var(--slb-fg) !important;
}
.table-info,
.table-info > th,
.table-info > td {
  background-color: #3b82f614 !important;
  color: var(--slb-fg) !important;
}
.table-warning,
.table-warning > th,
.table-warning > td {
  background-color: #fbbf241a !important;
  color: var(--slb-fg) !important;
}
.table-danger,
.table-danger > th,
.table-danger > td {
  background-color: #f871711a !important;
  color: var(--slb-fg) !important;
}
.table-primary > td:first-child,
.table-primary > th:first-child {
  box-shadow: inset 3px 0 0 0 var(--slb-primary);
}
.table-success > td:first-child,
.table-success > th:first-child {
  box-shadow: inset 3px 0 0 0 var(--slb-success);
}
.table-info > td:first-child,
.table-info > th:first-child {
  box-shadow: inset 3px 0 0 0 var(--slb-accent);
}
.table-warning > td:first-child,
.table-warning > th:first-child {
  box-shadow: inset 3px 0 0 0 var(--slb-warning);
}
.table-danger > td:first-child,
.table-danger > th:first-child {
  box-shadow: inset 3px 0 0 0 var(--slb-danger);
}
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #3b82f626 !important;
}
.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
  background-color: #34d39926 !important;
}
.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
  background-color: #3b82f61f !important;
}
.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
  background-color: #fbbf2426 !important;
}
.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
  background-color: #f8717126 !important;
}
.table-responsive,
.table-responsive-sm,
.table-responsive-md,
.table-responsive-lg,
.table-responsive-xl {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--slb-border) transparent;
}
.table-responsive::-webkit-scrollbar {
  height: 8px;
}
.table-responsive::-webkit-scrollbar-track {
  background: transparent !important;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--slb-border) !important;
  border-radius: 9999px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: #3b82f699 !important;
}
.card > .table:last-child,
.card-body > .table:last-child,
.panel-body > .table:last-child {
  margin-bottom: 0;
}
.badge,
.label,
span.label,
a.badge,
a.label {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: none !important;
  white-space: nowrap;
  vertical-align: middle;
  background-color: #a8b6d41a !important;
  border-color: #232c44b3 !important;
  color: var(--slb-muted) !important;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}
.badge-pill,
.label-pill {
  border-radius: 9999px !important;
  padding-right: 12px !important;
  padding-left: 12px !important;
}
.badge:empty,
.label:empty {
  display: none !important;
}
.badge-primary,
.label-primary,
.badge.bg-primary,
.badge-info,
.label-info,
.badge.bg-info {
  background-color: #3b82f61f !important;
  border-color: #3b82f666 !important;
  color: var(--slb-primary-light) !important;
}
.badge-success,
.label-success,
.badge.bg-success {
  background-color: #34d3991f !important;
  border-color: #34d39966 !important;
  color: var(--slb-success) !important;
}
.badge-warning,
.label-warning,
.badge.bg-warning {
  background-color: #fbbf241f !important;
  border-color: #fbbf2466 !important;
  color: var(--slb-warning) !important;
}
.badge-danger,
.label-danger,
.badge.bg-danger {
  background-color: #f871711f !important;
  border-color: #f8717166 !important;
  color: var(--slb-danger) !important;
}
.badge-secondary,
.label-default,
.badge-light,
.label-light,
.badge.bg-secondary,
.badge.bg-light {
  background-color: #a8b6d41a !important;
  border-color: #232c44b3 !important;
  color: var(--slb-muted) !important;
}
.badge-dark,
.label-dark,
.badge.bg-dark {
  background-color: var(--slb-surface-2) !important;
  border-color: var(--slb-border) !important;
  color: var(--slb-fg) !important;
}
a.badge:hover,
a.label:hover,
a.badge:focus,
a.label:focus {
  text-decoration: none !important;
  color: var(--slb-fg) !important;
  border-color: #3b82f699 !important;
  background-color: #1b244099 !important;
}
a.badge-success:hover,
a.label-success:hover {
  color: var(--slb-success) !important;
  background-color: #34d39926 !important;
  border-color: #34d39966 !important;
}
a.badge-danger:hover,
a.label-danger:hover {
  color: var(--slb-danger) !important;
  background-color: #f8717126 !important;
  border-color: #f8717166 !important;
}
a.badge-warning:hover,
a.label-warning:hover {
  color: var(--slb-warning) !important;
  background-color: #fbbf2426 !important;
  border-color: #fbbf2466 !important;
}
a.badge:focus-visible,
a.label:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}
.badge .fa,
.badge .fas,
.badge .far,
.badge i,
.label .fa,
.label i {
  font-size: 10px;
  line-height: 1;
  opacity: .9;
}
.status,
span.status,
.invoice-status,
.label-status,
.status-badge,
.service-status,
.domain-status,
.ticket-status,
.order-status,
.transaction-status,
[data-status] {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  border: 1px solid #232c44b3 !important;
  background-color: #a8b6d41a !important;
  color: var(--slb-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: none !important;
  white-space: nowrap;
  vertical-align: middle;
}
.status-active,
.status-paid,
.status-completed,
.status-approved,
.status-valid,
.status-online,
.status-open,
.status-answered,
.status-delivered,
.status.active,
.status.paid,
.invoice-status.paid,
.invoice-status-paid,
.label-status.active,
.badge.status-active,
[data-status="active"],
[data-status="paid"],
[data-status="completed"] {
  background-color: #34d3991f !important;
  border-color: #34d39966 !important;
  color: var(--slb-success) !important;
}
.status-pending,
.status-payment-pending,
.status-pending-transfer,
.status-in-progress,
.status-inprogress,
.status-on-hold,
.status-onhold,
.status-draft,
.status-customer-reply,
.status-awaiting,
.status-processing,
.status-grace,
.status-redemption,
.status.pending,
.invoice-status.draft,
.invoice-status.payment-pending,
.invoice-status-draft,
.badge.status-pending,
[data-status="pending"],
[data-status="draft"],
[data-status="on-hold"] {
  background-color: #fbbf241f !important;
  border-color: #fbbf2466 !important;
  color: var(--slb-warning) !important;
}
.status-unpaid,
.status-overdue,
.status-suspended,
.status-terminated,
.status-cancelled,
.status-canceled,
.status-fraud,
.status-failed,
.status-declined,
.status-expired,
.status-collections,
.status-offline,
.status-error,
.status.unpaid,
.status.suspended,
.invoice-status.unpaid,
.invoice-status.overdue,
.invoice-status.cancelled,
.invoice-status-unpaid,
.invoice-status-overdue,
.badge.status-unpaid,
.badge.status-suspended,
[data-status="unpaid"],
[data-status="overdue"],
[data-status="suspended"],
[data-status="cancelled"],
[data-status="terminated"] {
  background-color: #f871711f !important;
  border-color: #f8717166 !important;
  color: var(--slb-danger) !important;
}
.status-refunded,
.status-transferred,
.status-new,
.status-registered,
.status-scheduled,
.status-credit,
.invoice-status.refunded,
.invoice-status-refunded,
[data-status="refunded"],
[data-status="new"] {
  background-color: #3b82f61f !important;
  border-color: #3b82f666 !important;
  color: var(--slb-primary-light) !important;
}
.status-closed,
.status-inactive,
.status-archived,
.status-none,
.invoice-status.cancelled.void,
[data-status="closed"],
[data-status="inactive"] {
  background-color: #6b78991f !important;
  border-color: #232c44b3 !important;
  color: var(--slb-muted) !important;
}
.status-active::before,
.status-paid::before,
.invoice-status.paid::before,
[data-status="active"]::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--slb-success);
}
.status-unpaid::before,
.status-suspended::before,
.status-overdue::before,
.invoice-status.unpaid::before,
[data-status="unpaid"]::before,
[data-status="suspended"]::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--slb-danger);
}
.status-pending::before,
.invoice-status.draft::before,
[data-status="pending"]::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--slb-warning);
}
td .status,
td .invoice-status,
td .badge,
td .label {
  letter-spacing: .05em;
}
.alert {
  position: relative;
  margin-bottom: 1rem;
  padding: 12px 16px !important;
  border: 1px solid transparent !important;
  border-radius: .5rem !important;
  background-color: #6b78991f !important;
  color: var(--slb-muted) !important;
  font-size: 14px;
  line-height: 20px;
  text-shadow: none !important;
}
.alert p:last-child,
.alert ul:last-child,
.alert ol:last-child {
  margin-bottom: 0;
}
.alert .alert-heading,
.alert h1,
.alert h2,
.alert h3,
.alert h4,
.alert h5,
.alert h6 {
  margin-top: 0;
  margin-bottom: 4px;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: inherit !important;
}
.alert strong,
.alert b,
.alert small,
.alert .small,
.alert li,
.alert p,
.alert span:not(.badge):not(.label):not(.close) {
  color: inherit !important;
}
.alert a,
.alert .alert-link,
.alert a:not(.btn) {
  color: inherit !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
}
.alert a:hover,
.alert .alert-link:hover,
.alert a:focus {
  color: inherit !important;
  opacity: .8;
  text-decoration: underline !important;
}
.alert a:focus-visible {
  outline: none !important;
  border-radius: 4px;
  box-shadow: 0 0 0 2px currentColor !important;
}
.alert-success {
  background-color: #34d3991a !important;
  border-color: #34d39966 !important;
  color: var(--slb-success) !important;
}
.alert-info {
  background-color: #38bdf81a !important;
  border-color: #3b82f666 !important;
  color: var(--slb-accent) !important;
}
.alert-primary {
  background-color: #3b82f61a !important;
  border-color: #3b82f666 !important;
  color: var(--slb-primary-light) !important;
}
.alert-warning {
  background-color: #fbbf241a !important;
  border-color: #fbbf2466 !important;
  color: var(--slb-warning) !important;
}
.alert-danger,
.alert-error {
  background-color: #f871711a !important;
  border-color: #f8717166 !important;
  color: var(--slb-danger) !important;
}
.alert-secondary,
.alert-light,
.alert-dark {
  background-color: #a8b6d41a !important;
  border-color: #232c44b3 !important;
  color: var(--slb-muted) !important;
}
.alert-dismissible {
  padding-right: 48px !important;
}
.alert-dismissible .close,
.alert .close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 10px 14px !important;
  color: inherit !important;
  background: none !important;
  border: 0 !important;
  text-shadow: none !important;
  opacity: .65 !important;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.alert-dismissible .close:hover,
.alert .close:hover {
  color: inherit !important;
  opacity: 1 !important;
}
.progress {
  display: flex;
  overflow: hidden;
  height: 8px;
  min-height: 6px;
  margin-bottom: 0;
  border-radius: 9999px !important;
  background-color: var(--slb-surface-2) !important;
  box-shadow: inset 0 0 0 1px #232c4480 !important;
  font-size: 10px;
}
@supports selector(:has(*)) {
  .progress:has(.progress-bar:not(:empty)) {
    height: 18px;
  }
}
.progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
  border-radius: 9999px !important;
  background-color: var(--slb-primary) !important;
  background-image: var(--slb-gradient) !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-shadow: none !important;
  transition: width .7s cubic-bezier(.4, 0, .2, 1);
}
.progress-bar:not(:empty) {
  min-width: 34px;
  padding: 0 6px;
  background-color: var(--slb-primary-hover) !important;
  background-image: linear-gradient(120deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #fff !important;
}
.progress-bar.progress-bar-success,
.progress-bar.bg-success {
  background-color: var(--slb-success) !important;
  background-image: linear-gradient(120deg, #34d399 0%, #10b981 100%) !important;
  color: #05070f !important;
}
.progress-bar.progress-bar-warning,
.progress-bar.bg-warning {
  background-color: var(--slb-warning) !important;
  background-image: linear-gradient(120deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #05070f !important;
}
.progress-bar.progress-bar-danger,
.progress-bar.bg-danger {
  background-color: var(--slb-danger) !important;
  background-image: linear-gradient(120deg, #f87171 0%, #ef4444 100%) !important;
  color: #05070f !important;
}
.progress-bar.progress-bar-info,
.progress-bar.bg-info {
  background-color: var(--slb-accent) !important;
  background-image: linear-gradient(120deg, #38bdf8 0%, #0ea5e9 100%) !important;
  color: #05070f !important;
}
.progress-bar.bg-secondary,
.progress-bar.bg-light,
.progress-bar.bg-dark {
  background-color: var(--slb-muted) !important;
  background-image: none !important;
  color: #05070f !important;
}
.progress-bar-striped,
.progress-bar.progress-bar-striped {
  background-image: linear-gradient(45deg, #ffffff26 25%, transparent 25%, transparent 50%, #ffffff26 50%, #ffffff26 75%, transparent 75%, transparent) !important;
  background-size: 1rem 1rem;
}
.progress-striped .progress-bar {
  background-image: linear-gradient(45deg, #ffffff26 25%, transparent 25%, transparent 50%, #ffffff26 50%, #ffffff26 75%, transparent 75%, transparent) !important;
  background-size: 1rem 1rem;
}
.progress-bar-animated,
.progress.active .progress-bar {
  animation: progress-bar-stripes 1s linear infinite;
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-left: 0;
  margin: 1rem 0;
  list-style: none;
  border-radius: 0 !important;
}
.pagination > li,
.page-item {
  margin: 0 !important;
}
.page-link,
.pagination > li > a,
.pagination > li > span {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px !important;
  margin-left: 0 !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 11px !important;
  background-color: #12182899 !important;
  color: var(--slb-muted) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
}
.page-link:hover,
.pagination > li > a:hover,
.pagination > li > span:hover {
  z-index: 2;
  background-color: var(--slb-surface-2) !important;
  border-color: #3b82f699 !important;
  color: var(--slb-fg) !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}
.page-link:focus,
.pagination > li > a:focus {
  outline: none !important;
  box-shadow: none !important;
}
.page-link:focus-visible,
.pagination > li > a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}
.page-item:first-child .page-link,
.page-item:last-child .page-link,
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-radius: 11px !important;
}
.page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus {
  z-index: 3;
  background-color: var(--slb-primary) !important;
  background-image: var(--slb-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px #3b82f64d, 0 4px 6px -4px #3b82f64d !important;
}
.page-item.active .page-link:hover,
.pagination > .active > a:hover {
  transform: translateY(-1px);
  opacity: .95;
  box-shadow: 0 10px 15px -3px #3b82f666, 0 4px 6px -4px #3b82f666 !important;
}
.page-item.disabled .page-link,
.pagination > .disabled > a,
.pagination > .disabled > span,
.pagination > .disabled > a:hover,
.pagination > .disabled > span:hover {
  pointer-events: none;
  cursor: not-allowed;
  background-color: #12182880 !important;
  border-color: #232c4480 !important;
  color: var(--slb-muted) !important;
  opacity: .5;
  transform: none;
  box-shadow: none !important;
}
.pagination-sm .page-link,
.pagination-sm > li > a {
  min-width: 32px;
  height: 32px;
  padding: 0 10px !important;
  font-size: 13px;
  border-radius: 9px !important;
}
.pagination-lg .page-link,
.pagination-lg > li > a {
  min-width: 46px;
  height: 46px;
  padding: 0 18px !important;
  font-size: 16px;
  border-radius: 12px !important;
}
.pager {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding-left: 0;
  list-style: none;
}
.pager li > a,
.pager li > span {
  display: inline-flex !important;
  align-items: center;
  height: 38px;
  padding: 0 16px !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 11px !important;
  background-color: var(--slb-surface-2) !important;
  color: var(--slb-fg) !important;
  text-decoration: none !important;
}
.pager li > a:hover {
  border-color: #3b82f699 !important;
  background-color: var(--slb-surface-2) !important;
  color: var(--slb-fg) !important;
}
.pager .disabled > a,
.pager .disabled > span {
  opacity: .5;
  pointer-events: none;
  color: var(--slb-muted) !important;
}
.list-unstyled {
  padding-left: 0 !important;
  margin-bottom: 1rem;
  list-style: none !important;
  color: var(--slb-fg) !important;
}
.list-unstyled > li {
  color: inherit !important;
  padding: 2px 0;
  line-height: 20px;
}
.list-unstyled > li > a:not(.btn) {
  color: var(--slb-muted) !important;
  text-decoration: none;
  transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
.list-unstyled > li > a:not(.btn):hover,
.list-unstyled > li > a:not(.btn):focus {
  color: var(--slb-fg) !important;
  text-decoration: underline;
}
.list-unstyled > li > a:focus-visible {
  outline: none !important;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}
.list-unstyled .text-muted,
.list-unstyled small {
  color: var(--slb-muted) !important;
}
.list-inline {
  padding-left: 0 !important;
  list-style: none !important;
  color: var(--slb-fg) !important;
}
.list-inline > li,
.list-inline-item {
  color: inherit !important;
}
.modal-open {
  overflow: hidden;
}
.modal {
  color: var(--slb-fg) !important;
}
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.in {
  background-color: #05070f !important;
}
.modal-backdrop.show,
.modal-backdrop.in {
  opacity: .72 !important;
}
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #121828e6 !important;
  background-clip: padding-box;
  border: 1px solid #232c44b3 !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 25px 50px -12px #00000040, 0 10px 30px #04081859 !important;
  outline: 0;
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px !important;
  border-bottom: 1px solid #232c4499 !important;
  border-top-left-radius: calc(var(--slb-radius) - 1px) !important;
  border-top-right-radius: calc(var(--slb-radius) - 1px) !important;
  background-color: transparent !important;
  color: var(--slb-fg) !important;
}
.modal-title,
.modal-header h4,
.modal-header h5,
.modal-header .h4 {
  margin: 0;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -.025em;
  color: var(--slb-fg) !important;
}
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 22px !important;
  color: var(--slb-fg) !important;
  font-size: 14px;
  line-height: 21px;
  background-color: transparent !important;
}
.modal-body p,
.modal-body li,
.modal-body td,
.modal-body dd,
.modal-body dt,
.modal-body label {
  color: inherit !important;
}
.modal-body .text-muted,
.modal-body small,
.modal-body .help-block {
  color: var(--slb-muted) !important;
}
.modal-body a:not(.btn):not(.badge):not(.label) {
  color: var(--slb-primary-light) !important;
  font-weight: 500;
  text-decoration: none;
}
.modal-body a:not(.btn):not(.badge):not(.label):hover {
  color: var(--slb-fg) !important;
  text-decoration: underline;
}
.modal-body hr {
  border-top: 1px solid #232c4499 !important;
  border-color: #232c4499 !important;
}
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 22px !important;
  border-top: 1px solid #232c4499 !important;
  border-bottom-right-radius: calc(var(--slb-radius) - 1px) !important;
  border-bottom-left-radius: calc(var(--slb-radius) - 1px) !important;
  background-color: #1b24404d !important;
  color: var(--slb-fg) !important;
}
.modal-footer > :not(:first-child),
.modal-footer > :not(:last-child) {
  margin: 0 !important;
}
.modal-header .close,
.close,
button.close,
.close.close-modal {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  margin: -4px -6px -4px 0 !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background-color: transparent !important;
  color: var(--slb-muted) !important;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  text-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}
.close:hover,
button.close:hover,
.modal-header .close:hover {
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
  opacity: 1 !important;
  text-decoration: none !important;
}
.close:focus,
button.close:focus {
  outline: none !important;
}
.close:focus-visible,
button.close:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}
.close > span,
.close span[aria-hidden] {
  color: inherit !important;
  pointer-events: none;
}
.modal-header .close span:not(.sr-only) {
  display: block;
  margin-top: -2px;
}
.modal-content .table {
  margin-bottom: 0;
}
.modal-content .alert:last-child {
  margin-bottom: 0;
}
.dataTables_wrapper,
div.dataTables_wrapper,
.dt-container {
  position: relative;
  color: var(--slb-fg) !important;
}
.dataTables_wrapper label,
div.dataTables_wrapper label,
.dataTables_length label,
.dataTables_filter label,
.dt-length label,
.dt-search label {
  color: var(--slb-muted) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.dataTables_filter,
div.dataTables_filter,
.dt-search {
  text-align: right;
}
.dataTables_filter input,
div.dataTables_wrapper .dataTables_filter input,
.dataTables_length select,
div.dataTables_wrapper .dataTables_length select,
.dt-search input,
.dt-length select {
  height: 38px !important;
  margin-left: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 11px !important;
  background-color: var(--slb-field) !important;
  color: var(--slb-fg) !important;
  font-size: 14px !important;
  line-height: 20px;
  box-shadow: none !important;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}
.dataTables_length select,
div.dataTables_wrapper .dataTables_length select,
.dt-length select {
  padding-right: 30px !important;
  border-radius: 12px !important;
}
.dataTables_filter input::placeholder,
.dt-search input::placeholder {
  color: #a8b6d480 !important;
}
.dataTables_filter input:focus,
div.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_length select:focus,
div.dataTables_wrapper .dataTables_length select:focus,
.dt-search input:focus,
.dt-length select:focus {
  outline: none !important;
  border-color: var(--slb-primary) !important;
  box-shadow: 0 0 0 3px #3b82f633 !important;
}
.dataTables_length select option,
.dt-length select option {
  background-color: var(--slb-surface) !important;
  color: var(--slb-fg) !important;
}
.dataTables_info,
div.dataTables_wrapper .dataTables_info,
.dt-info {
  padding-top: 14px !important;
  color: var(--slb-muted) !important;
  font-size: 12.5px !important;
}
.dataTables_empty,
td.dataTables_empty,
.dt-empty {
  padding: 28px 14px !important;
  text-align: center;
  color: var(--slb-muted) !important;
  font-size: 14px;
  background-color: transparent !important;
}
.dataTables_processing,
div.dataTables_wrapper .dataTables_processing,
.dt-processing {
  border: 1px solid #232c44b3 !important;
  border-radius: 11px !important;
  background: #121828e6 !important;
  background-image: none !important;
  color: var(--slb-fg) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 12px 18px !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px #04081859 !important;
}
table.dataTable,
table.dataTable.no-footer {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-bottom: 0 !important;
  color: var(--slb-fg) !important;
  background-color: transparent !important;
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable thead > tr > th,
table.dataTable thead > tr > td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--slb-border) !important;
  border-top: 0 !important;
  background-color: transparent !important;
  color: var(--slb-muted) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
}
table.dataTable tbody tr,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even {
  background-color: transparent !important;
  color: var(--slb-fg) !important;
}
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.stripe tbody tr.odd > td,
table.dataTable.display tbody tr.odd > td {
  background-color: #1b24404d !important;
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.hover tbody tr:hover > td,
table.dataTable.display tbody tr:hover > td {
  background-color: #1b244080 !important;
  color: var(--slb-fg) !important;
}
table.dataTable tbody td,
table.dataTable tbody th {
  padding: 12px 14px !important;
  border-top: 0 !important;
  border-bottom: 1px solid #232c4499 !important;
  color: var(--slb-fg) !important;
}
table.dataTable tbody tr:last-child > td,
table.dataTable tbody tr:last-child > th {
  border-bottom: 0 !important;
}
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected > td,
table.dataTable tbody > tr.selected > * {
  background-color: #3b82f626 !important;
  color: var(--slb-fg) !important;
  box-shadow: none !important;
}
table.dataTable tbody tr.selected a {
  color: var(--slb-primary-light) !important;
}
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled,
table.dataTable thead td.sorting,
table.dataTable thead > tr > th.dt-orderable-asc,
table.dataTable thead > tr > th.dt-orderable-desc {
  position: relative;
  cursor: pointer;
  background-image: none !important;
  padding-right: 26px !important;
  transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
table.dataTable thead th.sorting:hover,
table.dataTable thead th.sorting_asc:hover,
table.dataTable thead th.sorting_desc:hover,
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover {
  color: var(--slb-fg) !important;
}
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting_desc::after,
table.dataTable thead > tr > th span.dt-column-order::before,
table.dataTable thead > tr > th span.dt-column-order::after {
  color: var(--slb-faint) !important;
  opacity: .55 !important;
  font-size: 9px;
  line-height: 9px;
}
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::after,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after {
  color: var(--slb-primary-light) !important;
  opacity: 1 !important;
}
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead > tr > th.dt-ordering-asc,
table.dataTable thead > tr > th.dt-ordering-desc {
  color: var(--slb-fg) !important;
  box-shadow: inset 0 -2px 0 0 #3b82f699 !important;
}
table.dataTable thead th:focus-visible,
table.dataTable thead > tr > th.dt-orderable-asc:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #3b82f699 !important;
}
table.dataTable th.dt-type-numeric,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-body-right {
  font-variant-numeric: tabular-nums;
}
div.dataTables_wrapper div.dataTables_paginate,
.dt-paging {
  margin-top: 12px !important;
  text-align: right;
}
div.dataTables_wrapper div.dataTables_paginate .paginate_button,
div.dataTables_wrapper .dataTables_paginate a.paginate_button,
.dt-paging .dt-paging-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 36px;
  height: 36px;
  margin: 0 3px !important;
  padding: 0 12px !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 11px !important;
  background: #12182899 !important;
  background-color: #12182899 !important;
  background-image: none !important;
  color: var(--slb-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 20px;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
}
div.dataTables_wrapper div.dataTables_paginate .paginate_button:hover,
div.dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
.dt-paging .dt-paging-button:hover {
  border-color: #3b82f699 !important;
  background: var(--slb-surface-2) !important;
  background-color: var(--slb-surface-2) !important;
  background-image: none !important;
  color: var(--slb-fg) !important;
  transform: translateY(-1px);
}
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current:hover,
div.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dt-paging .dt-paging-button.current {
  border-color: transparent !important;
  background: var(--slb-primary) !important;
  background-image: var(--slb-gradient) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 15px -3px #3b82f64d, 0 4px 6px -4px #3b82f64d !important;
}
div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled:hover,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.disabled:active,
div.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
.dt-paging .dt-paging-button.disabled {
  cursor: not-allowed;
  pointer-events: none;
  border-color: #232c4480 !important;
  background: #12182880 !important;
  background-image: none !important;
  color: var(--slb-muted) !important;
  opacity: .5;
  transform: none;
  box-shadow: none !important;
}
div.dataTables_wrapper div.dataTables_paginate .paginate_button:focus,
.dt-paging .dt-paging-button:focus {
  outline: none !important;
  box-shadow: none !important;
}
div.dataTables_wrapper div.dataTables_paginate .paginate_button:focus-visible,
.dt-paging .dt-paging-button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}
div.dataTables_wrapper div.dataTables_paginate .ellipsis,
.dt-paging .ellipsis {
  padding: 0 6px;
  color: var(--slb-muted) !important;
}
.dt-buttons,
div.dt-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.dt-button,
button.dt-button,
a.dt-button,
div.dt-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 11px !important;
  background: var(--slb-surface-2) !important;
  background-image: none !important;
  color: var(--slb-fg) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
}
.dt-button:hover:not(.disabled),
button.dt-button:hover:not(.disabled),
a.dt-button:hover:not(.disabled) {
  border-color: #3b82f699 !important;
  background: var(--slb-surface-2) !important;
  background-image: none !important;
  color: var(--slb-fg) !important;
  transform: translateY(-1px);
}
.dt-button:focus-visible,
button.dt-button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #3b82f699 !important;
}
.dt-button.disabled,
button.dt-button.disabled {
  opacity: .5;
  pointer-events: none;
  color: var(--slb-muted) !important;
}
div.dt-button-collection,
.dt-button-collection {
  border: 1px solid #232c44b3 !important;
  border-radius: 12px !important;
  background: #121828e6 !important;
  color: var(--slb-fg) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px #04081859 !important;
}
div.dt-button-collection .dt-button {
  width: 100%;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--slb-muted) !important;
}
div.dt-button-collection .dt-button:hover {
  background: var(--slb-surface-2) !important;
  color: var(--slb-fg) !important;
  transform: none;
}
div.dataTables_scrollHead,
div.dataTables_scrollBody,
div.dataTables_scrollFoot,
div.dt-scroll-head,
div.dt-scroll-body {
  background-color: transparent !important;
  border-color: var(--slb-border) !important;
  scrollbar-width: thin;
  scrollbar-color: var(--slb-border) transparent;
}
div.dataTables_scrollBody > table.dataTable > thead > tr > th {
  border-bottom-color: var(--slb-border) !important;
}
.dataTables_wrapper .row,
.dt-layout-row {
  align-items: center;
}
.dataTable + .dataTables_scrollBody,
.dataTables_wrapper .table-responsive {
  scrollbar-color: var(--slb-border) transparent;
}
.datatable,
table.datatable {
  color: var(--slb-fg) !important;
  background-color: transparent !important;
}
.dtr-details,
ul.dtr-details {
  color: var(--slb-fg) !important;
  list-style: none;
  padding-left: 0;
}
ul.dtr-details > li {
  border-bottom: 1px solid #232c4480 !important;
  padding: 6px 0;
  color: var(--slb-fg) !important;
}
ul.dtr-details > li > span.dtr-title {
  color: var(--slb-muted) !important;
  font-weight: 600;
  min-width: 40%;
  display: inline-block;
}
table.dataTable td.dtr-control::before,
table.dataTable td.dt-control::before {
  background-color: var(--slb-primary) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar,
  .progress-bar-animated,
  .progress.active .progress-bar,
  .page-link,
  .paginate_button,
  .dt-button,
  .table tbody tr {
    transition: none !important;
    animation: none !important;
  }
  .page-link:hover,
  .page-item.active .page-link:hover,
  div.dataTables_wrapper div.dataTables_paginate .paginate_button:hover,
  .dt-button:hover:not(.disabled) {
    transform: none !important;
  }
}
/* ==========================================================================
   REAFFIRMATION FINALE — valeurs exactes relevees dans le bundle compile
   de app.slbcloud.fr. Ce bloc est en dernier : il gagne sur tout le reste.
   ========================================================================== */
.card, .panel, .mc-promo-manage, .mc-promo-login, .summary-box, .card-sidebar {
  background-color: #121828e6 !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 1rem !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 10px 30px #04081859 !important;
}
.card-header, .panel-heading {
  background-color: var(--slb-surface-2) !important;
  border-color: #232c44b3 !important;
  border-radius: 1rem 1rem 0 0 !important;
}
.card-footer, .panel-footer {
  background-color: transparent !important;
  border-color: #232c44b3 !important;
  border-radius: 0 0 1rem 1rem !important;
}

/* L'ecran d'authentification garde la main sur tout (specificite superieure) */
.slb-auth-shell .card,
.slb-auth-shell .panel,
.slb-auth-shell .card-header,
.slb-auth-shell .panel-heading,
.slb-auth-shell .card-footer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.slb-auth-shell .slb-auth-card {
  background-color: #121828e6 !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 1rem !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 20px 60px rgba(4, 8, 24, .5) !important;
  padding: 34px !important;
}
.slb-auth-card-wide { max-width: 560px !important; padding: 34px 36px !important; }

/* Le logo ne doit jamais etre repris par une regle generique */
.slb-logo-link, .slb-logo-link:hover { text-decoration: none !important; background: none !important; }
.slb-o-icon { width: .8em !important; height: .8em !important; display: inline-flex !important; }
.slb-o-icon svg { width: 100% !important; height: 100% !important; }
.slb-wordmark { color: var(--slb-fg) !important; }

/* ==========================================================================
   COQUE APPLICATIVE — sidebar verticale + contenu, comme app.slbcloud.fr
   ========================================================================== */
.slb-app { display: block; }
.slb-main { margin-left: 288px; min-width: 0; }
@media (max-width: 991px) { .slb-main { margin-left: 0; } }

.slb-sidenav {
  position: fixed; top: 0; left: 0; bottom: 0; width: 288px; z-index: 1040;
  display: flex; flex-direction: column;
  background: #080b14;
  border-right: 1px solid #232c44b3;
  padding: 22px 16px 16px;
  overflow-y: auto;
}
@media (max-width: 991px) { .slb-sidenav { display: none; } }

.slb-sidenav-head { padding: 0 8px 6px; }
.slb-sidenav .slb-auth-sub { margin-left: 0; margin-top: 4px; }
.slb-sidenav-nav { flex: 1; margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }

.slb-nav-group { margin-top: 20px; }
.slb-nav-group-title {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--slb-faint);
  padding: 0 12px; margin-bottom: 8px;
}
.slb-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--slb-muted) !important; text-decoration: none !important;
  font-size: 14px; font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.slb-nav-item i { color: var(--slb-faint); font-size: 15px; width: 18px; text-align: center; }
.slb-nav-item:hover { background: #3b82f61a; color: var(--slb-fg) !important; }
.slb-nav-item:hover i { color: var(--slb-primary-light); }
.slb-nav-item.active {
  background: #3b82f626; color: var(--slb-fg) !important;
  box-shadow: inset 2px 0 0 var(--slb-primary);
}
.slb-nav-item.active i { color: var(--slb-primary-light); }
.slb-nav-badge {
  margin-left: auto; background: var(--slb-primary); color: #fff;
  border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600;
}

.slb-sidenav-foot { border-top: 1px solid #232c44b3; padding-top: 12px; margin-top: 12px; }
.slb-user-card {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 12px;
  background: #121828e6; border: 1px solid #232c44b3;
  text-decoration: none !important; margin-bottom: 6px;
}
.slb-user-card:hover { border-color: var(--slb-primary) !important; }
.slb-user-avatar {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background-image: var(--slb-gradient); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.slb-user-meta { display: flex; flex-direction: column; min-width: 0; }
.slb-user-name { font-size: 13px; font-weight: 600; color: var(--slb-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slb-user-role { font-size: 11px; color: var(--slb-faint); }
.slb-logout i { color: var(--slb-faint); }

/* La barre du haut WHMCS devient la topbar de l'app ; la 2e rangee de nav
   n'a plus lieu d'etre puisque la navigation est passee dans la sidebar. */
.slb-main #header .main-navbar-wrapper { display: none !important; }
.slb-main #header .navbar { border-bottom: 1px solid #232c44b3; }
.slb-main #header .navbar .container,
.slb-main #main-body > .container,
.slb-main .master-breadcrumb .container { max-width: 1320px; }
.slb-main #header .navbar-brand { display: none !important; }
.slb-main #header .input-group.search { min-width: 380px; }
.slb-main .master-breadcrumb { background: transparent !important; border-bottom: 1px solid #232c44b3; }

/* Pages d'authentification : la coque ne doit pas apparaitre */
body:has(.slb-auth-shell) .slb-sidenav { display: none !important; }
body:has(.slb-auth-shell) .slb-main { margin-left: 0 !important; }

/* ==========================================================================
   TABLEAU DE BORD — reproduction de app.slbcloud.fr/dashboard
   ========================================================================== */
.slb-page-head {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin: 4px 0 18px;
}
.slb-page-title { font-size: 22px; font-weight: 700; color: var(--slb-fg); margin: 0 0 4px; letter-spacing: -.01em; }
.slb-page-desc { font-size: 13.5px; color: var(--slb-muted); margin: 0; }
.slb-head-cta { margin-left: auto; white-space: nowrap; }

.slb-status-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-radius: .75rem; padding: 10px 16px; margin-bottom: 16px;
  font-size: 14px; color: var(--slb-fg);
  border: 1px solid;
}
.slb-status-banner.is-ok { border-color: #34d3994d; background: #34d39912; }
.slb-status-banner.is-warning { border-color: #fbbf244d; background: #fbbf2412; }
.slb-status-banner.is-warning i { color: var(--slb-warning); }
.slb-status-banner b { font-weight: 600; }
.slb-banner-link { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--slb-primary-light) !important; }

.slb-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 992px) { .slb-stat-grid { grid-template-columns: repeat(4, 1fr); } }
.slb-stat {
  display: flex; flex-direction: column; gap: 6px;
  background-color: #121828e6; border: 1px solid #232c44b3;
  border-radius: 1rem; padding: 18px 20px;
  text-decoration: none !important;
  transition: border-color .15s ease, transform .15s ease;
}
.slb-stat:hover { border-color: #3b82f680 !important; transform: translateY(-1px); }
.slb-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--slb-faint); }
.slb-stat-value { font-size: 30px; font-weight: 700; color: var(--slb-fg); line-height: 1.1; font-variant-numeric: tabular-nums; }
.slb-stat-note { font-size: 12px; color: var(--slb-faint); }

.slb-panel-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
@media (min-width: 992px) { .slb-panel-grid { grid-template-columns: repeat(2, 1fr); } }

.slb-card {
  background-color: #121828e6; border: 1px solid #232c44b3;
  border-radius: 1rem; padding: 20px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px #04081859;
}
.slb-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.slb-card-title { font-size: 14.5px; font-weight: 600; color: var(--slb-fg); margin: 0; display: flex; align-items: center; gap: 8px; }
.slb-card-title i { color: var(--slb-primary-light); font-size: 14px; }
.slb-card-link { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--slb-primary-light) !important; white-space: nowrap; }
.slb-card-body { font-size: 13.5px; color: var(--slb-muted); }
.slb-card-body p:last-child { margin-bottom: 0; }
.slb-card-foot { margin-top: 12px; }

.slb-card-list { list-style: none; margin: 0; padding: 0; }
.slb-card-list > li { border-top: 1px solid #232c4499; }
.slb-card-list > li:first-child { border-top: 0; }
.slb-card-list a, .slb-card-list > li > div {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 2px; font-size: 13.5px; color: var(--slb-fg) !important;
  text-decoration: none !important;
}
.slb-card-list a:hover { color: var(--slb-primary-light) !important; }
.slb-card-list i { color: var(--slb-faint); width: 16px; text-align: center; }
.slb-card-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.slb-quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.slb-quick {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #232c4499; background: #1b244066;
  border-radius: .75rem; padding: 12px 14px;
  font-size: 13.5px; font-weight: 500; color: var(--slb-fg) !important;
  text-decoration: none !important;
  transition: border-color .15s ease, background-color .15s ease;
}
.slb-quick:hover { border-color: #3b82f680; background: #3b82f60d; }
.slb-quick-ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 9px; background: #3b82f61a; color: var(--slb-primary-light);
  font-size: 15px;
}

/* Barre du haut : une seule rangee, comme l'app */
.slb-main #header .topbar {
  border-bottom: 1px solid #232c44b3; background: transparent !important;
  padding: 2px 0; font-size: 12.5px;
}
.slb-main #header .navbar { padding-top: 10px; padding-bottom: 10px; }
.slb-main #header .navbar .container { display: flex; align-items: center; gap: 14px; }
.slb-main #header .form-inline { flex: 1; margin: 0 !important; }
.slb-main #header .input-group.search { display: flex !important; width: 100%; max-width: 520px; }
.slb-main #header .navbar-nav.toolbar { margin-left: auto; }

/* ==========================================================================
   CORRECTIFS — sidebar sur une ligne, panneaux lateraux dans la charte
   ========================================================================== */

/* --- Sidebar : une entree = une ligne, hauteur constante --- */
.slb-nav-item {
  padding: 9px 12px !important;
  line-height: 1.25 !important;
  min-height: 38px;
}
.slb-nav-item > span {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13.5px;
}
.slb-nav-item > i { flex: none; align-self: center; }
.slb-sidenav-nav { gap: 1px !important; }
.slb-nav-group { margin-top: 18px !important; }
.slb-nav-group-title { font-size: 10px !important; margin-bottom: 6px !important; }
.slb-sidenav { padding: 20px 12px 14px !important; }
.slb-sidenav-head { padding: 0 6px 4px !important; }

/* --- Panneaux lateraux WHMCS : meme carte que le reste du theme --- */
.sidebar .card, .sidebar .panel, .card-sidebar {
  background-color: #121828e6 !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 30px #04081859 !important;
  overflow: hidden;
  margin-bottom: 16px !important;
}
.sidebar .card-header, .sidebar .panel-heading, .card-sidebar .card-header {
  background: transparent !important;
  border-bottom: 1px solid #232c4499 !important;
  padding: 14px 16px !important;
  border-radius: 0 !important;
}
.sidebar .card-header h3, .sidebar .card-header .card-title,
.card-sidebar .card-header h3, .card-sidebar .card-title {
  font-size: 11px !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
  color: var(--slb-faint) !important;
  margin: 0 !important;
}
.sidebar .card-header i, .card-sidebar .card-header i { color: var(--slb-faint) !important; }
.sidebar .card-body, .card-sidebar .card-body { padding: 14px 16px !important; font-size: 13.5px; color: var(--slb-muted) !important; }
.sidebar .card-body strong, .sidebar .card-body b { color: var(--slb-fg) !important; }

.sidebar .list-group, .card-sidebar .list-group { border-radius: 0 !important; }
.sidebar .list-group-item, .card-sidebar .list-group-item {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid #232c4466 !important;
  border-radius: 0 !important;
  padding: 11px 16px !important;
  font-size: 13.5px !important;
  color: var(--slb-muted) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  display: flex; align-items: center; gap: 10px;
}
.sidebar .list-group-item:first-child, .card-sidebar .list-group-item:first-child { border-top: 0 !important; }
.sidebar .list-group-item:hover, .card-sidebar .list-group-item:hover {
  background: #3b82f61a !important; color: var(--slb-fg) !important;
}
.sidebar .list-group-item.active, .card-sidebar .list-group-item.active {
  background: #3b82f626 !important; color: var(--slb-fg) !important;
  box-shadow: inset 2px 0 0 var(--slb-primary) !important;
}
.sidebar .list-group-item i, .card-sidebar .list-group-item i { color: var(--slb-faint) !important; width: 16px; text-align: center; }
.sidebar .card-footer, .card-sidebar .card-footer { background: transparent !important; border-top: 1px solid #232c4466 !important; padding: 12px 16px !important; }

/* Boutons colores WHMCS ramenes dans la charte (vert/rouge/or hors marque) */
.sidebar .btn, .card-sidebar .btn { width: 100%; }
.btn-success, .bg-color-green, .btn.bg-color-green {
  background-image: none !important;
  background-color: #34d39926 !important;
  border-color: #34d39966 !important;
  color: var(--slb-success) !important;
  box-shadow: none !important;
}
.btn-success:hover, .bg-color-green:hover { background-color: #34d39940 !important; color: #fff !important; }
.btn-danger, .bg-color-red { background-color: #f8717126 !important; border-color: #f8717166 !important; color: var(--slb-danger) !important; background-image: none !important; }
.btn-danger:hover, .bg-color-red:hover { background-color: #f8717140 !important; color: #fff !important; }
.btn-warning, .bg-color-gold { background-color: #fbbf2426 !important; border-color: #fbbf2466 !important; color: var(--slb-warning) !important; background-image: none !important; }
.btn-info, .bg-color-blue { background-color: #3b82f626 !important; border-color: #3b82f666 !important; color: var(--slb-primary-light) !important; background-image: none !important; }

/* Sur le tableau de bord, la colonne laterale fait doublon avec la sidenav */
body:has(.slb-page-head) #main-body .sidebar { display: none !important; }
body:has(.slb-page-head) #main-body .primary-content { flex: 0 0 100% !important; max-width: 100% !important; }

/* ==========================================================================
   NETTOYAGE DES RESTES DU THEME WHMCS PAR DEFAUT (pages internes)
   ========================================================================== */

/* La barre "Connecte en tant que / Notifications" fait doublon avec la
   carte utilisateur de la sidebar : on la retire. */
.slb-main #header .topbar { display: none !important; }

/* Barre du haut compacte : recherche a gauche, panier a droite */
.slb-main #header .navbar { padding: 12px 0 !important; }
.slb-main #header .input-group.search { max-width: 460px; }
.slb-main #header .input-group.search .form-control {
  background-color: #0a0e1a !important; border-color: #232c44b3 !important;
  border-radius: 0 10px 10px 0 !important;
}
.slb-main #header .input-group.search .btn {
  background-color: #0a0e1a !important; border: 1px solid #232c44b3 !important;
  border-right: 0 !important; border-radius: 10px 0 0 10px !important;
  color: var(--slb-faint) !important;
}
.slb-main #header .cart-btn {
  background: #121828e6 !important; border: 1px solid #232c44b3 !important;
  border-radius: 10px !important; padding: 8px 12px !important;
  color: var(--slb-muted) !important;
}
.slb-main #header .cart-btn:hover { border-color: var(--slb-primary) !important; color: var(--slb-fg) !important; }

/* Fil d'Ariane remplace par un vrai titre de page facon app */
.slb-main .master-breadcrumb {
  border-bottom: 0 !important; background: transparent !important;
  padding: 18px 0 0 !important;
}
.slb-main .master-breadcrumb .breadcrumb { display: none !important; }
.slb-page-title-auto {
  font-size: 22px !important; font-weight: 700 !important;
  color: var(--slb-fg) !important; margin: 0 !important;
  letter-spacing: -.01em;
}

/* --- Tableaux : traitement de l'app --- */
.slb-main .table {
  background: transparent !important;
  border-collapse: separate !important; border-spacing: 0 !important;
  margin-bottom: 0 !important;
}
.slb-main .table thead th {
  background: transparent !important;
  border: 0 !important; border-bottom: 1px solid #232c44b3 !important;
  font-size: 10.5px !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
  color: var(--slb-faint) !important;
  padding: 10px 14px !important;
}
.slb-main .table tbody td {
  background: transparent !important;
  border: 0 !important; border-top: 1px solid #232c4466 !important;
  padding: 14px !important; font-size: 13.5px !important;
  color: var(--slb-fg) !important; vertical-align: middle !important;
}
.slb-main .table tbody tr:hover td { background: #3b82f60d !important; }
.slb-main .table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }
.slb-main .table a { color: var(--slb-primary-light) !important; }
.slb-main .table .lock-icon, .slb-main .table i.fa-lock { color: var(--slb-faint) !important; }

/* Etiquettes de statut en pastilles */
.slb-main .table .label, .slb-main .table .badge, .slb-main .status {
  display: inline-flex !important; align-items: center; gap: 6px;
  border-radius: 999px !important; padding: 4px 11px !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .02em; text-transform: none !important;
}

/* Contenu principal dans une carte, comme les sections de l'app */
.slb-main .primary-content > .card,
.slb-main .primary-content > .panel { margin-bottom: 16px; }

/* --- Controles DataTables --- */
.slb-main .dataTables_wrapper .dataTables_length select,
.slb-main .dataTables_wrapper .dataTables_filter input,
.slb-main select.form-control, .slb-main .custom-select {
  background-color: #0a0e1a !important; border: 1px solid #232c44b3 !important;
  color: var(--slb-fg) !important; border-radius: 10px !important;
  padding: 7px 12px !important; height: auto !important;
}
.slb-main .dataTables_wrapper .dataTables_length,
.slb-main .dataTables_wrapper .dataTables_info,
.slb-main .dataTables_wrapper .dataTables_filter { color: var(--slb-muted) !important; font-size: 13px !important; }

/* --- Pagination --- */
.slb-main .pagination { gap: 6px; }
.slb-main .page-link, .slb-main .paginate_button {
  background: #121828e6 !important; border: 1px solid #232c44b3 !important;
  color: var(--slb-muted) !important; border-radius: 10px !important;
  padding: 7px 13px !important; font-size: 13px !important;
  box-shadow: none !important;
}
.slb-main .page-link:hover, .slb-main .paginate_button:hover {
  border-color: var(--slb-primary) !important; color: var(--slb-fg) !important;
}
.slb-main .page-item.active .page-link, .slb-main .paginate_button.current {
  background-image: var(--slb-gradient) !important;
  border-color: var(--slb-primary-hover) !important; color: #fff !important;
  box-shadow: 0 6px 18px rgba(59,130,246,.3) !important;
}
.slb-main .page-item.disabled .page-link, .slb-main .paginate_button.disabled {
  background: transparent !important; color: var(--slb-faint) !important;
  border-color: #232c4466 !important; opacity: .6;
}

/* Filtres a puces de la colonne laterale (Actif / Suspendu / ...) */
.slb-main .sidebar .list-group-item .badge,
.slb-main .card-sidebar .list-group-item .badge {
  margin-left: auto !important;
  background: #1b244099 !important; color: var(--slb-muted) !important;
  border-radius: 999px !important; padding: 2px 9px !important; font-size: 11px !important;
}
/* ============================================================
   SLBCLOUD x WHMCS - Commande, panier, facture, service
   ============================================================ */

/* ---- 1. Cadre general des pages du tunnel / facture / service ---- */
#order-standard_cart,
#order-premium_comparison,
#order-boxes,
#order-cloud_slider,
#order-modern_bootstrap,
#order-slider,
#order-supreme_comparison,
.order-form,
#cart,
#checkout,
.checkout-container,
.invoice-container,
#invoiceContainer,
#viewinvoice,
.product-details,
.product-details-container,
#clientareaproductdetails {
  color: var(--slb-fg) !important;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4,
.order-form h1,
.order-form h2,
.order-form h3,
.order-form h4,
.invoice-container h1,
.invoice-container h2,
.invoice-container h3,
.invoice-container h4,
.product-details h1,
.product-details h2,
.product-details h3,
.product-details h4,
#clientareaproductdetails h1,
#clientareaproductdetails h2,
#clientareaproductdetails h3,
#clientareaproductdetails h4 {
  color: var(--slb-fg) !important;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

#order-standard_cart h1,
.order-form h1,
.invoice-container h1 { font-size: 26px; }

#order-standard_cart h2,
.order-form h2,
.invoice-container h2 { font-size: 21px; }

#order-standard_cart h3,
.order-form h3,
.invoice-container h3,
.product-details h3 { font-size: 17px; }

#order-standard_cart p,
.order-form p,
.invoice-container p,
.product-details p,
#clientareaproductdetails p {
  color: var(--slb-muted) !important;
  font-size: 14px;
  line-height: 1.625;
}

#order-standard_cart .header-lined,
.order-form .header-lined,
.invoice-container .header-lined,
h1.header-lined,
h2.header-lined,
h3.header-lined {
  border-bottom: 1px solid var(--slb-border) !important;
  border-bottom-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  color: var(--slb-fg) !important;
  padding-bottom: 12px;
  margin-bottom: 20px;
}

#order-standard_cart hr,
.order-form hr,
.invoice-container hr,
.product-details hr,
#clientareaproductdetails hr {
  border: 0 !important;
  border-top: 1px solid var(--slb-border) !important;
  border-top-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  opacity: 1 !important;
}

#order-standard_cart a:not(.btn),
.order-form a:not(.btn),
.invoice-container a:not(.btn),
.product-details a:not(.btn),
#clientareaproductdetails a:not(.btn) {
  color: var(--slb-primary-light) !important;
  text-decoration: none;
  transition: color .15s cubic-bezier(.4, 0, .2, 1);
}

#order-standard_cart a:not(.btn):hover,
.order-form a:not(.btn):hover,
.invoice-container a:not(.btn):hover,
.product-details a:not(.btn):hover,
#clientareaproductdetails a:not(.btn):hover {
  color: var(--slb-accent) !important;
  text-decoration: underline;
}

#order-standard_cart a:not(.btn):focus-visible,
.order-form a:not(.btn):focus-visible,
.invoice-container a:not(.btn):focus-visible,
.product-details a:not(.btn):focus-visible,
#clientareaproductdetails a:not(.btn):focus-visible {
  outline: none;
  border-radius: 5px;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .6);
}

/* Sur-titres / eyebrow (10px majuscules) - jamais en dessous de --slb-muted */
#order-standard_cart .overline,
.order-form .overline,
.invoice-container .overline,
.slb-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--slb-muted) !important;
}

/* ---- 2. Etapes de commande / fil d'ariane ---- */
#order-standard_cart .breadcrumb,
.order-form .breadcrumb,
.checkout-steps,
.order-steps,
.cart-steps,
.cart-nav,
.checkout-progress,
#orderFormSteps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0 0 24px !important;
  padding: 6px !important;
  background-color: var(--slb-surface) !important;
  background-color: color-mix(in oklab, var(--slb-surface) 60%, transparent) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: 999px !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(4, 8, 24, .35) !important;
}

#order-standard_cart .breadcrumb-item,
.order-form .breadcrumb-item,
.checkout-steps > li,
.checkout-steps .step,
.order-steps > li,
.order-steps .step,
.cart-steps > li,
.cart-nav > li,
.checkout-progress > li,
.checkout-progress .step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--slb-muted) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1);
}

#order-standard_cart .breadcrumb-item + .breadcrumb-item::before,
.order-form .breadcrumb-item + .breadcrumb-item::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background-color: rgba(107, 120, 153, .5) !important;
  padding: 0 !important;
  margin-right: 8px;
}

.checkout-steps > li:hover,
.order-steps > li:hover,
.cart-nav > li:hover,
.checkout-progress > li:hover {
  color: var(--slb-fg) !important;
  background-color: rgba(27, 36, 64, .5) !important;
}

#order-standard_cart .breadcrumb-item.active,
.order-form .breadcrumb-item.active,
.checkout-steps > li.active,
.checkout-steps .step.active,
.order-steps > li.active,
.order-steps .step.active,
.cart-nav > li.active,
.checkout-progress > li.active,
.checkout-progress .step.active,
.checkout-progress .step.current {
  color: var(--slb-primary-light) !important;
  background-color: rgba(59, 130, 246, .12) !important;
  border-color: rgba(59, 130, 246, .4) !important;
}

.checkout-steps > li.done,
.checkout-steps > li.complete,
.checkout-steps > li.completed,
.order-steps > li.done,
.order-steps > li.completed,
.checkout-progress > li.done,
.checkout-progress > li.completed,
.checkout-progress .step.completed {
  color: var(--slb-success) !important;
  background-color: rgba(52, 211, 153, .12) !important;
  border-color: rgba(52, 211, 153, .35) !important;
}

.checkout-steps .step-number,
.order-steps .step-number,
.checkout-progress .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
  border: 1px solid var(--slb-border) !important;
}

.checkout-steps > li.active .step-number,
.order-steps > li.active .step-number,
.checkout-progress > li.active .step-number {
  background-image: var(--slb-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ---- 3. Cartes produit / grille d'offres ---- */
#order-standard_cart .product,
#order-standard_cart .product-box,
#order-standard_cart .product-card,
.order-form .product,
.order-form .product-box,
.products .product,
.product-group .product,
.pricing-table,
.pricing .plan,
.package,
.product-info {
  position: relative;
  background-color: var(--slb-surface) !important;
  background-color: color-mix(in oklab, var(--slb-surface) 90%, transparent) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  padding: 24px !important;
  margin-bottom: 20px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(4, 8, 24, .35) !important;
  transition: transform .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

#order-standard_cart .product:hover,
#order-standard_cart .product-box:hover,
#order-standard_cart .product-card:hover,
.order-form .product:hover,
.products .product:hover,
.pricing .plan:hover,
.package:hover,
.product-info:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, .45) !important;
  box-shadow: 0 20px 25px -5px rgba(4, 8, 24, .45), 0 8px 10px -6px rgba(4, 8, 24, .45) !important;
}

#order-standard_cart .product.featured,
#order-standard_cart .product.highlighted,
#order-standard_cart .product.popular,
.products .product.featured,
.pricing .plan.featured,
.package.featured,
.package.recommended {
  border-color: rgba(59, 130, 246, .6) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, .35), 0 20px 25px -5px rgba(4, 8, 24, .45) !important;
}

#order-standard_cart .product.featured::before,
.products .product.featured::before,
.pricing .plan.featured::before,
.package.featured::before,
.package.recommended::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background-image: var(--slb-gradient);
}

#order-standard_cart .product .header,
#order-standard_cart .product h3,
#order-standard_cart .product .product-name,
.products .product .product-name,
.product-info .product-name,
.package .package-name,
.pricing .plan-name {
  display: block;
  color: var(--slb-fg) !important;
  background-color: transparent !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  padding: 0;
  border: 0 !important;
}

#order-standard_cart .product .product-desc,
.products .product .product-desc,
.product-info .product-desc,
.package .package-desc,
.product-description {
  color: var(--slb-muted) !important;
  font-size: 13.5px;
  line-height: 1.625;
}

#order-standard_cart .product .product-desc ul,
.products .product .product-desc ul,
.product-info .product-desc ul,
.package .package-desc ul,
.product-description ul {
  list-style: none !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}

#order-standard_cart .product .product-desc li,
.products .product .product-desc li,
.product-info .product-desc li,
.package .package-desc li,
.product-description li {
  position: relative;
  color: var(--slb-muted) !important;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 5px 0 5px 18px;
}

#order-standard_cart .product .product-desc li::before,
.products .product .product-desc li::before,
.product-info .product-desc li::before,
.package .package-desc li::before,
.product-description li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: var(--slb-primary) !important;
}

/* ---- 4. Prix, cycles, frais ---- */
.price,
.product-price,
.pricing .price,
.package .price,
.amount,
.price-value {
  color: var(--slb-fg) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

#order-standard_cart .product .price,
#order-standard_cart .product-price,
.products .product .price,
.product-info .price,
.pricing .price,
.package .price,
.price.price-large,
.price-value {
  display: block;
  font-size: 31px;
  line-height: 1.22;
  letter-spacing: -0.025em;
  margin: 14px 0 2px;
  background-color: transparent !important;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #order-standard_cart .product .price,
  .products .product .price,
  .product-info .price,
  .pricing .price,
  .package .price {
    background-image: linear-gradient(120deg, var(--slb-primary-light) 0%, var(--slb-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
  }
}

.cycle,
.product-cycle,
.billing-cycle-label,
.price .cycle,
.price small,
.package .cycle {
  display: inline-block;
  color: var(--slb-muted) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  background-color: transparent !important;
}

.setup-fee,
.setupfee,
.product-setup-fee,
.price-suffix,
.prorata-note {
  display: block;
  color: var(--slb-muted) !important;
  font-size: 12px;
  margin-top: 4px;
}

.price-recurring,
.recurring-amount,
.recurring-info {
  color: var(--slb-muted) !important;
  font-size: 12.5px;
}

.pricing-badge,
.price-badge,
.save-badge,
.discount-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slb-success) !important;
  background-color: rgba(52, 211, 153, .12) !important;
  border: 1px solid rgba(52, 211, 153, .4) !important;
}

/* ---- 5. Configuration produit : domaines, options, addons ---- */
#order-standard_cart .domain-selection-options,
#order-standard_cart .domain-checker-results,
.domain-selection-options,
.domain-search-results,
.domain-suggestions,
#productConfigurableOptions,
#product-configurable-options,
.product-configurable-options,
#productAddons,
#product-addons,
.product-addons,
.custom-fields-container,
.configure-product,
.product-configure {
  background-color: var(--slb-surface) !important;
  background-color: color-mix(in oklab, var(--slb-surface) 90%, transparent) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  padding: 20px !important;
  margin-bottom: 20px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(4, 8, 24, .35) !important;
}

.domain-suggestions .domain,
.domain-search-results .domain-result,
.domain-checker-result,
#productAddons .addon,
.product-addons .addon,
.addon-item,
.configurable-option,
.config-option-row,
.domain-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: var(--slb-surface-2) !important;
  background-color: color-mix(in oklab, var(--slb-surface-2) 40%, transparent) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  padding: 14px 16px !important;
  margin-bottom: 10px;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}

.domain-suggestions .domain:hover,
.domain-search-results .domain-result:hover,
.domain-checker-result:hover,
#productAddons .addon:hover,
.product-addons .addon:hover,
.addon-item:hover,
.configurable-option:hover,
.domain-option:hover {
  background-color: rgba(27, 36, 64, .6) !important;
  border-color: rgba(59, 130, 246, .4) !important;
}

#productAddons .addon.selected,
.product-addons .addon.selected,
.addon-item.selected,
.addon-item.active,
.domain-option.selected,
.configurable-option.selected,
.addon-item:has(input:checked),
.domain-option:has(input:checked) {
  background-color: rgba(59, 130, 246, .1) !important;
  border-color: var(--slb-primary) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, .35) !important;
}

.domain-unavailable,
.domain-checker-result.unavailable,
.domain-taken {
  border-color: rgba(248, 113, 113, .4) !important;
  background-color: rgba(248, 113, 113, .08) !important;
  color: var(--slb-danger) !important;
}

.domain-available,
.domain-checker-result.available {
  border-color: rgba(52, 211, 153, .4) !important;
  background-color: rgba(52, 211, 153, .08) !important;
  color: var(--slb-success) !important;
}

/* Champs du tunnel */
#order-standard_cart .form-control,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="tel"],
#order-standard_cart input[type="number"],
#order-standard_cart input[type="password"],
.order-form .form-control,
.checkout-container .form-control,
.invoice-container .form-control,
.product-details .form-control,
#clientareaproductdetails .form-control,
#inputPromotionCode,
#promotioncode {
  height: 44px !important;
  border-radius: 11px !important;
  border: 1px solid var(--slb-border) !important;
  background-color: var(--slb-field) !important;
  background-clip: padding-box !important;
  color: var(--slb-fg) !important;
  padding: 0 14px !important;
  font-size: 14px;
  line-height: 20px;
  box-shadow: none !important;
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

#order-standard_cart textarea.form-control,
.order-form textarea.form-control,
.invoice-container textarea.form-control,
#clientareaproductdetails textarea.form-control {
  height: auto !important;
  min-height: 96px;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}

#order-standard_cart .form-control::placeholder,
.order-form .form-control::placeholder,
.checkout-container .form-control::placeholder,
.invoice-container .form-control::placeholder,
#clientareaproductdetails .form-control::placeholder {
  color: rgba(168, 182, 212, .5) !important;
  opacity: 1;
}

#order-standard_cart .form-control:hover,
.order-form .form-control:hover,
.checkout-container .form-control:hover,
#clientareaproductdetails .form-control:hover {
  border-color: rgba(59, 130, 246, .5) !important;
}

#order-standard_cart .form-control:focus,
#order-standard_cart input:focus,
.order-form .form-control:focus,
.checkout-container .form-control:focus,
.invoice-container .form-control:focus,
.product-details .form-control:focus,
#clientareaproductdetails .form-control:focus,
#inputPromotionCode:focus {
  outline: none !important;
  border-color: var(--slb-primary) !important;
  background-color: var(--slb-field) !important;
  color: var(--slb-fg) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .2) !important;
}

#order-standard_cart .form-control.is-invalid,
#order-standard_cart .has-error .form-control,
.order-form .form-control.is-invalid,
.checkout-container .form-control.is-invalid {
  border-color: var(--slb-danger) !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, .18) !important;
}

#order-standard_cart .form-control:disabled,
#order-standard_cart .form-control[readonly],
.order-form .form-control:disabled,
.checkout-container .form-control:disabled,
#clientareaproductdetails .form-control:disabled {
  background-color: var(--slb-surface-2) !important;
  color: var(--slb-muted) !important;
  border-color: var(--slb-border) !important;
  opacity: .6 !important;
  cursor: not-allowed;
}

#order-standard_cart select,
#order-standard_cart .custom-select,
.order-form select,
.order-form .custom-select,
.checkout-container select,
.invoice-container select,
.product-details select,
#clientareaproductdetails select,
#clientareaproductdetails .custom-select,
select.billingcycle,
#producttotal select {
  height: auto !important;
  border-radius: 12px !important;
  border: 1px solid var(--slb-border) !important;
  background-color: var(--slb-field) !important;
  color: var(--slb-fg) !important;
  padding: 10px 38px 10px 14px !important;
  font-size: 14px;
  line-height: 20px;
  box-shadow: none !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8b6d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

#order-standard_cart select:hover,
.order-form select:hover,
#clientareaproductdetails select:hover {
  border-color: rgba(59, 130, 246, .5) !important;
}

#order-standard_cart select:focus,
.order-form select:focus,
.checkout-container select:focus,
.invoice-container select:focus,
#clientareaproductdetails select:focus,
#producttotal select:focus {
  outline: none !important;
  border-color: var(--slb-primary) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .3) !important;
}

#order-standard_cart select option,
.order-form select option,
.invoice-container select option,
#clientareaproductdetails select option {
  background-color: var(--slb-surface-2) !important;
  color: var(--slb-fg) !important;
}

#order-standard_cart label,
.order-form label,
.checkout-container label,
.invoice-container label,
.product-details label,
#clientareaproductdetails label {
  color: var(--slb-muted) !important;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

#order-standard_cart .help-block,
#order-standard_cart .form-text,
#order-standard_cart small,
.order-form .help-block,
.order-form .form-text,
.checkout-container .form-text,
.invoice-container .form-text,
#clientareaproductdetails .form-text {
  color: var(--slb-muted) !important;
  font-size: 12px;
}

#order-standard_cart .input-group-text,
.order-form .input-group-text,
.checkout-container .input-group-text,
.invoice-container .input-group-text,
#clientareaproductdetails .input-group-text {
  background-color: var(--slb-surface-2) !important;
  border: 1px solid var(--slb-border) !important;
  color: var(--slb-muted) !important;
  border-radius: 11px !important;
  font-size: 13px;
}

#order-standard_cart input[type="radio"],
#order-standard_cart input[type="checkbox"],
.order-form input[type="radio"],
.order-form input[type="checkbox"],
.checkout-container input[type="radio"],
.checkout-container input[type="checkbox"],
.invoice-container input[type="radio"],
.invoice-container input[type="checkbox"],
#clientareaproductdetails input[type="radio"],
#clientareaproductdetails input[type="checkbox"] {
  accent-color: var(--slb-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

#order-standard_cart .custom-control-label::before,
.order-form .custom-control-label::before,
.checkout-container .custom-control-label::before,
.invoice-container .custom-control-label::before,
#clientareaproductdetails .custom-control-label::before {
  background-color: var(--slb-field) !important;
  border: 1px solid var(--slb-border) !important;
  box-shadow: none !important;
}

#order-standard_cart .custom-control-input:checked ~ .custom-control-label::before,
.order-form .custom-control-input:checked ~ .custom-control-label::before,
.checkout-container .custom-control-input:checked ~ .custom-control-label::before,
.invoice-container .custom-control-input:checked ~ .custom-control-label::before,
#clientareaproductdetails .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--slb-primary) !important;
  border-color: var(--slb-primary) !important;
}

#order-standard_cart .custom-control-input:focus ~ .custom-control-label::before,
.order-form .custom-control-input:focus ~ .custom-control-label::before,
.checkout-container .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .2) !important;
}

/* Selecteur de cycle de facturation */
.billing-cycle-selector,
.term-selector,
#producttotal,
.cycle-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background-color: var(--slb-surface-2) !important;
  background-color: color-mix(in oklab, var(--slb-surface-2) 40%, transparent) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  padding: 12px 14px !important;
}

.term-selector .term,
.cycle-selector .cycle-option {
  padding: 6px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--slb-border) !important;
  background-color: transparent !important;
  color: var(--slb-muted) !important;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}

.term-selector .term:hover,
.cycle-selector .cycle-option:hover {
  color: var(--slb-fg) !important;
  background-color: rgba(27, 36, 64, .5) !important;
  border-color: rgba(59, 130, 246, .5) !important;
}

.term-selector .term.active,
.term-selector .term.selected,
.cycle-selector .cycle-option.active {
  color: var(--slb-primary-light) !important;
  background-color: rgba(59, 130, 246, .12) !important;
  border-color: rgba(59, 130, 246, .6) !important;
}

/* ---- 6. Panier : tableaux de lignes ---- */
#order-standard_cart .table,
#order-standard_cart table,
.order-form .table,
.checkout-container .table,
.cart-items,
table.cart-items,
#cartItems,
.view-cart-items,
.invoice-container .table,
.invoice-container table,
#invoiceitems,
table.invoice-items,
#invoiceTransactions,
.product-details .table,
#clientareaproductdetails .table {
  width: 100%;
  background-color: transparent !important;
  color: var(--slb-fg) !important;
  border-collapse: collapse !important;
  margin-bottom: 0;
}

#order-standard_cart .table th,
#order-standard_cart table th,
.order-form .table th,
.checkout-container .table th,
.cart-items th,
.view-cart-items th,
.invoice-container .table th,
.invoice-container table th,
#invoiceitems th,
table.invoice-items th,
#invoiceTransactions th,
.product-details .table th,
#clientareaproductdetails .table th,
.summary-container th,
.order-summary th {
  background-color: transparent !important;
  color: var(--slb-muted) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--slb-border) !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: left;
  vertical-align: bottom;
  padding: 12px 14px !important;
  white-space: nowrap;
}

#order-standard_cart .table td,
#order-standard_cart table td,
.order-form .table td,
.checkout-container .table td,
.cart-items td,
.view-cart-items td,
.invoice-container .table td,
.invoice-container table td,
#invoiceitems td,
table.invoice-items td,
#invoiceTransactions td,
.product-details .table td,
#clientareaproductdetails .table td {
  background-color: transparent !important;
  color: var(--slb-fg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--slb-border) !important;
  border-bottom-color: color-mix(in oklab, var(--slb-border) 50%, transparent) !important;
  font-size: 14px;
  line-height: 20px;
  padding: 14px !important;
  vertical-align: middle;
}

#order-standard_cart .table tbody tr:last-child td,
.cart-items tbody tr:last-child td,
.invoice-container .table tbody tr:last-child td,
#invoiceitems tbody tr:last-child td,
#clientareaproductdetails .table tbody tr:last-child td {
  border-bottom: 0 !important;
}

#order-standard_cart .table tbody tr:hover td,
.cart-items tbody tr:hover td,
.view-cart-items tbody tr:hover td,
.invoice-container .table tbody tr:hover td,
#invoiceitems tbody tr:hover td,
#clientareaproductdetails .table tbody tr:hover td {
  background-color: rgba(27, 36, 64, .4) !important;
}

/* Neutralise le zebra / hover clair de Bootstrap sur ces pages */
#order-standard_cart .table-striped tbody tr:nth-of-type(odd),
#order-standard_cart .table-striped tbody tr:nth-of-type(odd) > td,
.order-form .table-striped tbody tr:nth-of-type(odd),
.invoice-container .table-striped tbody tr:nth-of-type(odd),
.invoice-container .table-striped tbody tr:nth-of-type(odd) > td,
#clientareaproductdetails .table-striped tbody tr:nth-of-type(odd),
#clientareaproductdetails .table-striped tbody tr:nth-of-type(odd) > td,
#order-standard_cart .table-hover tbody tr:hover,
.invoice-container .table-hover tbody tr:hover,
#clientareaproductdetails .table-hover tbody tr:hover {
  background-color: transparent !important;
  color: var(--slb-fg) !important;
}

#order-standard_cart .table-hover tbody tr:hover > td,
.invoice-container .table-hover tbody tr:hover > td,
#clientareaproductdetails .table-hover tbody tr:hover > td {
  background-color: rgba(27, 36, 64, .4) !important;
  color: var(--slb-fg) !important;
}

#order-standard_cart .table thead th,
#order-standard_cart .thead-light th,
.invoice-container .thead-light th,
#clientareaproductdetails .thead-light th,
#order-standard_cart .table-bordered,
#order-standard_cart .table-bordered td,
#order-standard_cart .table-bordered th,
.invoice-container .table-bordered,
.invoice-container .table-bordered td,
.invoice-container .table-bordered th,
#clientareaproductdetails .table-bordered td,
#clientareaproductdetails .table-bordered th {
  background-color: transparent !important;
  color: var(--slb-fg) !important;
  border-color: color-mix(in oklab, var(--slb-border) 50%, transparent) !important;
}

#order-standard_cart .table-active,
#order-standard_cart .table-active > td,
.invoice-container .table-active,
.invoice-container .table-active > td,
#clientareaproductdetails .table-active > td {
  background-color: rgba(27, 36, 64, .5) !important;
  color: var(--slb-fg) !important;
}

/* Colonnes de montants */
#order-standard_cart .table td.price,
#order-standard_cart .table td.amount,
#order-standard_cart .table td:last-child,
.cart-items td:last-child,
.invoice-container .table td:last-child,
#invoiceitems td:last-child,
.invoice-container .table th:last-child,
#invoiceitems th:last-child,
#order-standard_cart .table th:last-child,
.text-right .amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#order-standard_cart .table-responsive,
.invoice-container .table-responsive,
#clientareaproductdetails .table-responsive,
.cart-items-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--slb-border) transparent;
}

.cart-item-name,
.item-description,
#invoiceitems td:first-child,
.cart-items td:first-child {
  color: var(--slb-fg) !important;
  font-weight: 500;
}

.cart-item-meta,
.item-meta,
.cart-item-domain {
  display: block;
  color: var(--slb-muted) !important;
  font-size: 12.5px;
  margin-top: 3px;
}

.cart-item-remove,
.remove-item,
a.remove-item,
.btn-remove-item {
  color: var(--slb-danger) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
  font-size: 12.5px;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}

.cart-item-remove:hover,
.remove-item:hover,
a.remove-item:hover,
.btn-remove-item:hover {
  color: var(--slb-danger) !important;
  background-color: rgba(248, 113, 113, .12) !important;
  border-color: rgba(248, 113, 113, .4) !important;
  text-decoration: none !important;
}

.cart-item-remove:focus-visible,
.remove-item:focus-visible,
.btn-remove-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, .6);
}

/* Panier vide */
.cart-empty,
.empty-cart,
#order-standard_cart .empty {
  border: 1px dashed var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: var(--slb-radius) !important;
  background-color: rgba(18, 24, 40, .5) !important;
  color: var(--slb-muted) !important;
  padding: 36px 24px !important;
  text-align: center;
}

/* ---- 7. Recapitulatif de commande (sidebar) ---- */
.summary-container,
#ordersummary,
.order-summary,
.cart-summary,
#cartSummary,
.checkout-summary,
.sidebar-summary {
  background-color: var(--slb-surface) !important;
  background-color: color-mix(in oklab, var(--slb-surface) 90%, transparent) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  padding: 20px !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(4, 8, 24, .35) !important;
}

.summary-container h3,
#ordersummary h3,
.order-summary h3,
.cart-summary h3,
.checkout-summary h3,
.summary-container .title,
#ordersummary .title {
  color: var(--slb-fg) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--slb-border) !important;
  border-bottom-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
}

.summary-container table,
#ordersummary table,
.order-summary table,
.cart-summary table {
  width: 100%;
  background-color: transparent !important;
  color: var(--slb-fg) !important;
  margin-bottom: 0;
}

.summary-container td,
#ordersummary td,
.order-summary td,
.cart-summary td,
.summary-row,
.summary-container .summary-line {
  background-color: transparent !important;
  color: var(--slb-muted) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--slb-border) !important;
  border-bottom-color: color-mix(in oklab, var(--slb-border) 40%, transparent) !important;
  font-size: 13.5px;
  padding: 9px 0 !important;
}

.summary-container td:last-child,
#ordersummary td:last-child,
.order-summary td:last-child,
.cart-summary td:last-child,
.summary-row .value {
  color: var(--slb-fg) !important;
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.summary-container tr:last-child td,
#ordersummary tr:last-child td,
.order-summary tr:last-child td {
  border-bottom: 0 !important;
}

.summary-container .subtotal,
.order-summary .subtotal,
.cart-summary .subtotal,
.subtotal-row,
.tax-row,
.summary-container .tax {
  color: var(--slb-muted) !important;
  font-size: 13.5px;
}

.summary-container .total,
.summary-container .total-due,
#ordersummary .total,
.order-summary .total,
.cart-summary .total,
.cart-total,
.grand-total,
.total-due,
.order-total,
.summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--slb-fg) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--slb-border) !important;
  border-top-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  padding-top: 14px !important;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.summary-container .total .amount,
.cart-total .amount,
.grand-total .amount,
.total-due .amount,
.order-total .amount,
.summary-total .amount,
.total-due-amount {
  color: var(--slb-primary-light) !important;
  font-size: 21px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.summary-container .recurring,
.order-summary .recurring,
.recurring-totals,
.summary-note {
  display: block;
  color: var(--slb-muted) !important;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 10px;
}

@media (min-width: 992px) {
  .summary-container,
  #ordersummary,
  .cart-summary,
  .checkout-summary {
    position: sticky;
    top: 88px;
  }
}

/* ---- 8. Code promo ---- */
.promo-container,
.promotion-code,
.promo-code,
#promoCodeContainer,
.apply-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background-color: rgba(27, 36, 64, .4) !important;
  border: 1px dashed var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  padding: 14px !important;
  margin: 16px 0;
}

.promo-container label,
.promotion-code label,
.promo-code label {
  color: var(--slb-muted) !important;
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 !important;
}

.promo-applied,
.promotion-applied,
.promo-success {
  color: var(--slb-success) !important;
  background-color: rgba(52, 211, 153, .1) !important;
  border: 1px solid rgba(52, 211, 153, .4) !important;
  border-radius: 8px !important;
  font-size: 14px;
  padding: 8px 12px !important;
}

/* ---- 9. Paiement / choix de passerelle ---- */
#containerPaymentMethods,
.payment-methods,
#paymentGatewayContainer,
.gateway-selection,
#frmPayment,
.payment-method-container {
  background-color: var(--slb-surface) !important;
  background-color: color-mix(in oklab, var(--slb-surface) 90%, transparent) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  padding: 20px !important;
  margin-bottom: 20px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(4, 8, 24, .35) !important;
}

.payment-methods label,
#containerPaymentMethods label,
.gateway-option,
.payment-method,
.paymentmethod,
.gateway-selection label {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--slb-field) !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  cursor: pointer;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

.payment-methods label:hover,
#containerPaymentMethods label:hover,
.gateway-option:hover,
.payment-method:hover,
.paymentmethod:hover {
  background-color: rgba(27, 36, 64, .5) !important;
  border-color: rgba(59, 130, 246, .5) !important;
}

.payment-methods label:has(input:checked),
#containerPaymentMethods label:has(input:checked),
.gateway-option:has(input:checked),
.payment-method:has(input:checked),
.gateway-option.selected,
.payment-method.selected,
.payment-method.active,
.paymentmethod.active {
  background-color: rgba(59, 130, 246, .1) !important;
  border-color: var(--slb-primary) !important;
  color: var(--slb-fg) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, .35) !important;
}

.payment-methods label:focus-within,
#containerPaymentMethods label:focus-within,
.gateway-option:focus-within,
.payment-method:focus-within {
  border-color: var(--slb-primary) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .2) !important;
}

#containerNewUserSignup,
#containerExistingUserSignup,
.checkout-section,
.order-section,
.checkout-panel {
  background-color: var(--slb-surface) !important;
  background-color: color-mix(in oklab, var(--slb-surface) 90%, transparent) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  padding: 20px !important;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(4, 8, 24, .35) !important;
}

.terms-of-service,
#termsCheckbox,
.tos-container {
  color: var(--slb-muted) !important;
  font-size: 13px;
}

/* ---- 10. Boutons d'action du tunnel / facture / service ---- */
#order-standard_cart .btn,
.order-form .btn,
.checkout-container .btn,
.invoice-container .btn,
.product-details .btn,
#clientareaproductdetails .btn,
.summary-container .btn,
#ordersummary .btn,
.btn-add-to-cart,
.btn-checkout,
.btn-order,
.btn-continue,
.checkout-button,
#btnCompleteOrder,
#btnPayNow,
#btnDownloadInvoice,
.paymentbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px !important;
  border-radius: 11px !important;
  border: 0 !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.4, 0, .2, 1), opacity .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1);
}

#order-standard_cart .btn:focus,
.order-form .btn:focus,
.invoice-container .btn:focus,
#clientareaproductdetails .btn:focus,
.btn-add-to-cart:focus,
.btn-checkout:focus,
#btnCompleteOrder:focus,
#btnPayNow:focus {
  outline: none !important;
}

#order-standard_cart .btn-lg,
.order-form .btn-lg,
.invoice-container .btn-lg,
#clientareaproductdetails .btn-lg,
.btn-checkout,
#btnCompleteOrder {
  min-height: 48px;
  padding: 0 24px !important;
  font-size: 16px;
}

#order-standard_cart .btn-sm,
.order-form .btn-sm,
.invoice-container .btn-sm,
.product-details .btn-sm,
#clientareaproductdetails .btn-sm {
  min-height: 32px;
  padding: 0 12px !important;
  font-size: 13px;
  border-radius: 10px !important;
}

/* Primaire = degrade de marque */
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success,
.order-form .btn-primary,
.checkout-container .btn-primary,
.invoice-container .btn-primary,
.product-details .btn-primary,
#clientareaproductdetails .btn-primary,
.summary-container .btn-primary,
.btn-add-to-cart,
.btn-checkout,
.btn-order,
.checkout-button,
#btnCompleteOrder,
#btnPayNow,
.paymentbtn,
input[type="submit"].paymentbtn {
  background-color: var(--slb-primary) !important;
  background-image: var(--slb-gradient) !important;
  color: #ffffff !important;
  border: 0 !important;
  font-weight: 600;
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, .3), 0 4px 6px -4px rgba(59, 130, 246, .3) !important;
}

#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover,
.order-form .btn-primary:hover,
.checkout-container .btn-primary:hover,
.invoice-container .btn-primary:hover,
.product-details .btn-primary:hover,
#clientareaproductdetails .btn-primary:hover,
.btn-add-to-cart:hover,
.btn-checkout:hover,
.btn-order:hover,
.checkout-button:hover,
#btnCompleteOrder:hover,
#btnPayNow:hover,
.paymentbtn:hover {
  background-image: var(--slb-gradient) !important;
  color: #ffffff !important;
  opacity: .95;
  transform: translateY(-1px);
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, .4), 0 4px 6px -4px rgba(59, 130, 246, .4) !important;
}

#order-standard_cart .btn-primary:active,
.order-form .btn-primary:active,
.invoice-container .btn-primary:active,
#clientareaproductdetails .btn-primary:active,
.btn-add-to-cart:active,
.btn-checkout:active,
#btnCompleteOrder:active,
#btnPayNow:active,
.paymentbtn:active {
  transform: translateY(0);
  opacity: .9;
  box-shadow: 0 4px 6px -4px rgba(59, 130, 246, .4) !important;
}

#order-standard_cart .btn-primary:focus-visible,
.order-form .btn-primary:focus-visible,
.invoice-container .btn-primary:focus-visible,
#clientareaproductdetails .btn-primary:focus-visible,
.btn-add-to-cart:focus-visible,
.btn-checkout:focus-visible,
#btnCompleteOrder:focus-visible,
#btnPayNow:focus-visible,
.paymentbtn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .6), 0 10px 15px -3px rgba(59, 130, 246, .3), 0 4px 6px -4px rgba(59, 130, 246, .3) !important;
}

/* Secondaire / defaut Bootstrap 3 et 4 (piege blanc sur blanc) */
#order-standard_cart .btn-secondary,
#order-standard_cart .btn-default,
#order-standard_cart .btn-light,
#order-standard_cart .btn-outline-secondary,
.order-form .btn-secondary,
.order-form .btn-default,
.order-form .btn-light,
.checkout-container .btn-default,
.checkout-container .btn-secondary,
.invoice-container .btn-secondary,
.invoice-container .btn-default,
.invoice-container .btn-light,
.invoice-container .btn-outline-secondary,
.product-details .btn-default,
.product-details .btn-secondary,
#clientareaproductdetails .btn-secondary,
#clientareaproductdetails .btn-default,
#clientareaproductdetails .btn-light,
#clientareaproductdetails .btn-outline-secondary,
.btn-continue,
#btnDownloadInvoice {
  background-color: var(--slb-surface-2) !important;
  background-image: none !important;
  color: var(--slb-fg) !important;
  border: 0 !important;
  font-weight: 500;
  box-shadow: 0 0 0 1px var(--slb-border) !important;
}

#order-standard_cart .btn-secondary:hover,
#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-light:hover,
#order-standard_cart .btn-outline-secondary:hover,
.order-form .btn-secondary:hover,
.order-form .btn-default:hover,
.invoice-container .btn-secondary:hover,
.invoice-container .btn-default:hover,
.invoice-container .btn-light:hover,
.product-details .btn-default:hover,
#clientareaproductdetails .btn-secondary:hover,
#clientareaproductdetails .btn-default:hover,
#clientareaproductdetails .btn-light:hover,
#clientareaproductdetails .btn-outline-secondary:hover,
.btn-continue:hover,
#btnDownloadInvoice:hover {
  background-color: var(--slb-surface-2) !important;
  color: var(--slb-fg) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, .6) !important;
}

#order-standard_cart .btn-secondary:active,
#order-standard_cart .btn-default:active,
.invoice-container .btn-default:active,
#clientareaproductdetails .btn-secondary:active,
.btn-continue:active,
#btnDownloadInvoice:active {
  transform: translateY(0);
  background-color: rgba(27, 36, 64, .8) !important;
}

#order-standard_cart .btn-secondary:focus-visible,
#order-standard_cart .btn-default:focus-visible,
.invoice-container .btn-default:focus-visible,
.invoice-container .btn-secondary:focus-visible,
#clientareaproductdetails .btn-secondary:focus-visible,
#clientareaproductdetails .btn-default:focus-visible,
.btn-continue:focus-visible,
#btnDownloadInvoice:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .6), 0 0 0 1px var(--slb-border) !important;
}

/* Fantome / lien */
#order-standard_cart .btn-link,
.order-form .btn-link,
.invoice-container .btn-link,
.product-details .btn-link,
#clientareaproductdetails .btn-link {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  color: var(--slb-muted) !important;
  box-shadow: none !important;
}

#order-standard_cart .btn-link:hover,
.order-form .btn-link:hover,
.invoice-container .btn-link:hover,
#clientareaproductdetails .btn-link:hover {
  background-color: var(--slb-surface-2) !important;
  color: var(--slb-fg) !important;
  text-decoration: none !important;
}

/* Danger : jamais de blanc sur #f87171 (2.8:1) */
#order-standard_cart .btn-danger,
.order-form .btn-danger,
.invoice-container .btn-danger,
.product-details .btn-danger,
#clientareaproductdetails .btn-danger,
.btn-cancel-order,
.btn-request-cancellation {
  background-color: var(--slb-danger) !important;
  background-image: none !important;
  color: #0b1020 !important;
  border: 0 !important;
  font-weight: 600;
  box-shadow: none !important;
}

#order-standard_cart .btn-danger:hover,
.order-form .btn-danger:hover,
.invoice-container .btn-danger:hover,
.product-details .btn-danger:hover,
#clientareaproductdetails .btn-danger:hover,
.btn-cancel-order:hover,
.btn-request-cancellation:hover {
  background-color: #fca5a5 !important;
  color: #0b1020 !important;
  transform: translateY(-1px);
}

#order-standard_cart .btn-danger:focus-visible,
.invoice-container .btn-danger:focus-visible,
#clientareaproductdetails .btn-danger:focus-visible,
.btn-cancel-order:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, .6) !important;
}

#order-standard_cart .btn-outline-danger,
.invoice-container .btn-outline-danger,
#clientareaproductdetails .btn-outline-danger {
  background-color: rgba(248, 113, 113, .1) !important;
  color: var(--slb-danger) !important;
  border: 1px solid rgba(248, 113, 113, .4) !important;
  box-shadow: none !important;
}

#order-standard_cart .btn-outline-danger:hover,
.invoice-container .btn-outline-danger:hover,
#clientareaproductdetails .btn-outline-danger:hover {
  background-color: rgba(248, 113, 113, .2) !important;
  color: var(--slb-danger) !important;
  border-color: rgba(248, 113, 113, .6) !important;
}

#order-standard_cart .btn-warning,
.invoice-container .btn-warning,
#clientareaproductdetails .btn-warning {
  background-color: var(--slb-warning) !important;
  background-image: none !important;
  color: #1a1405 !important;
  border: 0 !important;
  font-weight: 600;
}

#order-standard_cart .btn-warning:hover,
.invoice-container .btn-warning:hover,
#clientareaproductdetails .btn-warning:hover {
  background-color: #fcd34d !important;
  color: #1a1405 !important;
  transform: translateY(-1px);
}

#order-standard_cart .btn-info,
.invoice-container .btn-info,
#clientareaproductdetails .btn-info {
  background-color: rgba(59, 130, 246, .12) !important;
  background-image: none !important;
  color: var(--slb-primary-light) !important;
  border: 1px solid rgba(59, 130, 246, .4) !important;
}

#order-standard_cart .btn-info:hover,
.invoice-container .btn-info:hover,
#clientareaproductdetails .btn-info:hover {
  background-color: rgba(59, 130, 246, .2) !important;
  color: var(--slb-primary-light) !important;
  border-color: rgba(59, 130, 246, .6) !important;
}

#order-standard_cart .btn:disabled,
#order-standard_cart .btn.disabled,
.order-form .btn:disabled,
.order-form .btn.disabled,
.invoice-container .btn:disabled,
.invoice-container .btn.disabled,
#clientareaproductdetails .btn:disabled,
#clientareaproductdetails .btn.disabled,
.btn-add-to-cart:disabled,
.btn-checkout:disabled,
#btnCompleteOrder:disabled,
#btnPayNow:disabled {
  opacity: .5 !important;
  transform: none !important;
  pointer-events: none;
  box-shadow: none !important;
}

#order-standard_cart .btn-block,
.order-form .btn-block,
.summary-container .btn-block,
.invoice-container .btn-block,
#clientareaproductdetails .btn-block {
  display: flex;
  width: 100%;
}

.cart-buttons,
.order-buttons,
.checkout-actions,
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* ---- 11. Alertes du tunnel / facture ---- */
#order-standard_cart .alert,
.order-form .alert,
.checkout-container .alert,
.invoice-container .alert,
.product-details .alert,
#clientareaproductdetails .alert,
.cart-error,
.order-error {
  border-radius: 8px !important;
  border: 1px solid rgba(59, 130, 246, .4) !important;
  background-color: rgba(59, 130, 246, .1) !important;
  color: var(--slb-primary-light) !important;
  font-size: 14px;
  padding: 10px 14px !important;
  box-shadow: none !important;
}

#order-standard_cart .alert-danger,
#order-standard_cart .alert-error,
.order-form .alert-danger,
.checkout-container .alert-danger,
.invoice-container .alert-danger,
#clientareaproductdetails .alert-danger,
.cart-error,
.order-error {
  border-color: rgba(248, 113, 113, .4) !important;
  background-color: rgba(248, 113, 113, .1) !important;
  color: var(--slb-danger) !important;
}

#order-standard_cart .alert-success,
.order-form .alert-success,
.checkout-container .alert-success,
.invoice-container .alert-success,
#clientareaproductdetails .alert-success {
  border-color: rgba(52, 211, 153, .4) !important;
  background-color: rgba(52, 211, 153, .1) !important;
  color: var(--slb-success) !important;
}

#order-standard_cart .alert-warning,
.order-form .alert-warning,
.checkout-container .alert-warning,
.invoice-container .alert-warning,
#clientareaproductdetails .alert-warning {
  border-color: rgba(251, 191, 36, .4) !important;
  background-color: rgba(251, 191, 36, .1) !important;
  color: var(--slb-warning) !important;
}

#order-standard_cart .alert a,
.invoice-container .alert a,
#clientareaproductdetails .alert a,
#order-standard_cart .alert .alert-link,
.invoice-container .alert .alert-link {
  color: inherit !important;
  font-weight: 600;
  text-decoration: underline;
}

#order-standard_cart .alert .close,
.invoice-container .alert .close,
#clientareaproductdetails .alert .close {
  color: inherit !important;
  opacity: .7;
  text-shadow: none !important;
}

#order-standard_cart .alert .close:hover,
.invoice-container .alert .close:hover,
#clientareaproductdetails .alert .close:hover {
  color: inherit !important;
  opacity: 1;
}

/* ---- 12. Commande terminee ---- */
.order-complete,
#order-complete,
.complete-message,
.order-confirmation {
  background-color: var(--slb-surface) !important;
  background-color: color-mix(in oklab, var(--slb-surface) 90%, transparent) !important;
  border: 1px solid rgba(52, 211, 153, .3) !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  padding: 28px !important;
  text-align: center;
  box-shadow: 0 10px 30px rgba(4, 8, 24, .35) !important;
}

.order-complete h1,
.order-complete h2,
.order-confirmation h2 {
  color: var(--slb-fg) !important;
}

.order-number,
.order-reference,
.invoice-number {
  display: inline-block;
  background-color: rgba(27, 36, 64, .6) !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 6px !important;
  color: var(--slb-fg) !important;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 3px 8px !important;
}

/* ---- 13. Page de facture ---- */
.invoice-container,
#invoiceContainer,
.invoice-wrapper,
#viewinvoice .invoice,
.invoice-body {
  background-color: var(--slb-surface) !important;
  background-color: color-mix(in oklab, var(--slb-surface) 90%, transparent) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  padding: 28px !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(4, 8, 24, .35) !important;
}

@media (min-width: 640px) {
  .invoice-container,
  #invoiceContainer,
  .invoice-body {
    padding: 36px !important;
  }
}

.invoice-header,
#invoiceHeader,
.invoice-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--slb-border) !important;
  border-bottom-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  color: var(--slb-fg) !important;
  background-color: transparent !important;
  padding-bottom: 20px !important;
  margin-bottom: 24px;
}

.invoice-title,
.invoice-header h1,
.invoice-header h2,
#invoiceHeader h1 {
  color: var(--slb-fg) !important;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}

.invoice-date,
.invoice-due-date,
.invoice-meta,
.invoice-dates {
  color: var(--slb-muted) !important;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.invoice-address,
.invoice-from,
.invoice-to,
.invoice-billing-address,
.invoice-company {
  color: var(--slb-muted) !important;
  background-color: transparent !important;
  font-size: 13.5px;
  line-height: 1.625;
}

.invoice-address strong,
.invoice-from strong,
.invoice-to strong,
.invoice-address b,
.invoice-company strong {
  color: var(--slb-fg) !important;
  font-weight: 600;
}

.invoice-address-label,
.invoice-section-label {
  display: block;
  color: var(--slb-muted) !important;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 6px;
}

/* Lignes de facture */
#invoiceitems,
table.invoice-items,
.invoice-items-table {
  margin-top: 8px;
}

#invoiceitems tfoot td,
table.invoice-items tfoot td,
.invoice-items-table tfoot td,
.invoice-totals td,
#invoiceitems tfoot th,
.invoice-totals th {
  background-color: transparent !important;
  color: var(--slb-muted) !important;
  border: 0 !important;
  border-top: 1px solid var(--slb-border) !important;
  border-top-color: color-mix(in oklab, var(--slb-border) 50%, transparent) !important;
  font-size: 13.5px;
  font-weight: 500;
  text-align: right;
  padding: 10px 14px !important;
  font-variant-numeric: tabular-nums;
}

#invoiceitems tfoot tr:last-child td,
table.invoice-items tfoot tr:last-child td,
.invoice-totals tr:last-child td,
.invoice-total-row td,
tr.invoice-total td,
tr.total-due td {
  color: var(--slb-fg) !important;
  border-top: 1px solid var(--slb-border) !important;
  border-top-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  font-size: 17px;
  font-weight: 700;
  padding-top: 14px !important;
}

#invoiceitems tfoot tr:last-child td:last-child,
.invoice-totals tr:last-child td:last-child,
tr.invoice-total td:last-child,
tr.total-due td:last-child,
.invoice-balance-due .amount {
  color: var(--slb-primary-light) !important;
  font-size: 21px;
  font-weight: 800;
}

.invoice-balance-due,
.balance-due,
.amount-due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background-color: rgba(59, 130, 246, .08) !important;
  border: 1px solid rgba(59, 130, 246, .3) !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 16px !important;
  margin-top: 18px;
  font-variant-numeric: tabular-nums;
}

.invoice-notes,
.invoice-note,
.invoice-terms,
#invoiceNotes {
  background-color: rgba(27, 36, 64, .4) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  border-radius: 12px !important;
  color: var(--slb-muted) !important;
  font-size: 13px;
  line-height: 1.625;
  padding: 14px 16px !important;
  margin-top: 20px;
}

.invoice-notes strong,
.invoice-terms strong {
  color: var(--slb-fg) !important;
}

#invoiceTransactions,
.invoice-transactions,
.transactions-table {
  margin-top: 20px;
}

.invoice-transactions-title,
.transactions-title {
  color: var(--slb-fg) !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 24px 0 10px;
}

.no-transactions,
.invoice-transactions .empty {
  color: var(--slb-muted) !important;
  font-size: 13px;
  font-style: normal;
}

.invoice-payment-bar,
.invoice-actions,
.invoice-buttons,
.invoice-pay-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: rgba(27, 36, 64, .5) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  padding: 14px 16px !important;
  margin-top: 22px;
}

.invoice-paid-stamp,
.paid-stamp,
.invoice-stamp {
  display: inline-block;
  color: var(--slb-success) !important;
  background-color: rgba(52, 211, 153, .08) !important;
  border: 2px solid rgba(52, 211, 153, .4) !important;
  border-radius: 8px !important;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 6px 14px !important;
  transform: rotate(-6deg);
}

.invoice-refunded-stamp,
.invoice-cancelled-stamp {
  color: var(--slb-danger) !important;
  background-color: rgba(248, 113, 113, .08) !important;
  border-color: rgba(248, 113, 113, .4) !important;
}

/* ---- 14. Detail de service (clientareaproductdetails) ---- */
#clientareaproductdetails,
.product-details,
.product-details-container,
.service-details,
#productDetailsOverview,
.service-overview {
  color: var(--slb-fg) !important;
}

.service-header,
.product-details-header,
#productDetailsHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background-color: var(--slb-surface) !important;
  background-color: color-mix(in oklab, var(--slb-surface) 90%, transparent) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  padding: 20px 24px !important;
  margin-bottom: 20px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(4, 8, 24, .35) !important;
}

.service-name,
.product-details-name,
.service-header h1,
.service-header h2 {
  color: var(--slb-fg) !important;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}

.service-domain,
.service-meta,
.product-details-meta {
  color: var(--slb-muted) !important;
  font-size: 13px;
}

.service-info-grid,
.product-details-grid,
.service-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.service-info-item,
.service-stat,
.detail-tile {
  background-color: rgba(27, 36, 64, .4) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  padding: 14px 16px !important;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1);
}

.service-info-item:hover,
.service-stat:hover,
.detail-tile:hover {
  background-color: rgba(27, 36, 64, .6) !important;
  border-color: rgba(59, 130, 246, .4) !important;
}

.service-info-label,
.service-stat-label,
.detail-tile-label {
  display: block;
  color: var(--slb-muted) !important;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 6px;
}

.service-info-value,
.service-stat-value,
.detail-tile-value {
  display: block;
  color: var(--slb-fg) !important;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Onglets de gestion de service */
#clientareaproductdetails .nav-tabs,
.product-details .nav-tabs,
.service-tabs,
#serviceTabs,
.nav-tabs.service-management,
.product-details-tabs {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--slb-border) !important;
  border-bottom-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

#clientareaproductdetails .nav-tabs .nav-link,
#clientareaproductdetails .nav-tabs > li > a,
.product-details .nav-tabs .nav-link,
.service-tabs .nav-link,
.service-tabs > li > a,
#serviceTabs .nav-link,
.product-details-tabs .nav-link {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: var(--slb-muted) !important;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: -1px;
  padding: 10px 14px !important;
  white-space: nowrap;
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1);
}

#clientareaproductdetails .nav-tabs .nav-link:hover,
#clientareaproductdetails .nav-tabs > li > a:hover,
.product-details .nav-tabs .nav-link:hover,
.service-tabs .nav-link:hover,
#serviceTabs .nav-link:hover,
.product-details-tabs .nav-link:hover {
  background-color: rgba(27, 36, 64, .4) !important;
  border-bottom-color: rgba(59, 130, 246, .4) !important;
  color: var(--slb-fg) !important;
  text-decoration: none !important;
}

#clientareaproductdetails .nav-tabs .nav-link.active,
#clientareaproductdetails .nav-tabs > li.active > a,
.product-details .nav-tabs .nav-link.active,
.service-tabs .nav-link.active,
.service-tabs > li.active > a,
#serviceTabs .nav-link.active,
.product-details-tabs .nav-link.active {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--slb-primary) !important;
  color: var(--slb-fg) !important;
  font-weight: 600;
}

#clientareaproductdetails .nav-tabs .nav-link:focus-visible,
.service-tabs .nav-link:focus-visible,
#serviceTabs .nav-link:focus-visible {
  outline: none !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .6) !important;
}

#clientareaproductdetails .nav-tabs .nav-link.disabled,
.service-tabs .nav-link.disabled {
  color: var(--slb-muted) !important;
  opacity: .4 !important;
  pointer-events: none;
}

#clientareaproductdetails .tab-content,
.product-details .tab-content,
.service-tabs-content,
.product-details-tabs + .tab-content {
  background-color: transparent !important;
  color: var(--slb-fg) !important;
  border: 0 !important;
  padding-top: 20px;
}

#clientareaproductdetails .tab-pane,
.product-details .tab-pane {
  color: var(--slb-fg) !important;
}

/* Onglets en pilules (variantes de themes WHMCS) */
#clientareaproductdetails .nav-pills .nav-link,
.product-details .nav-pills .nav-link,
.service-nav .nav-link {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: var(--slb-muted) !important;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px !important;
}

#clientareaproductdetails .nav-pills .nav-link:hover,
.product-details .nav-pills .nav-link:hover,
.service-nav .nav-link:hover {
  background-color: rgba(27, 36, 64, .5) !important;
  color: var(--slb-fg) !important;
}

#clientareaproductdetails .nav-pills .nav-link.active,
.product-details .nav-pills .nav-link.active,
.service-nav .nav-link.active {
  background-color: rgba(59, 130, 246, .12) !important;
  border-color: rgba(59, 130, 246, .4) !important;
  color: var(--slb-primary-light) !important;
}

/* Actions de gestion (list-group / boutons module) */
#clientareaproductdetails .list-group,
.product-details .list-group,
.service-actions,
#moduleActions,
.module-actions {
  background-color: transparent !important;
  border-radius: 12px !important;
  overflow: hidden;
}

#clientareaproductdetails .list-group-item,
.product-details .list-group-item,
.service-actions .list-group-item,
.service-actions a,
#moduleActions a,
.module-actions a,
.module-btn {
  background-color: rgba(27, 36, 64, .4) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  border-radius: 11px !important;
  color: var(--slb-fg) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  padding: 12px 14px !important;
  text-decoration: none !important;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}

#clientareaproductdetails .list-group-item:hover,
.product-details .list-group-item:hover,
.service-actions .list-group-item:hover,
.service-actions a:hover,
#moduleActions a:hover,
.module-actions a:hover,
.module-btn:hover {
  background-color: rgba(27, 36, 64, .7) !important;
  border-color: rgba(59, 130, 246, .5) !important;
  color: var(--slb-fg) !important;
  transform: translateY(-1px);
}

#clientareaproductdetails .list-group-item:focus-visible,
.service-actions a:focus-visible,
#moduleActions a:focus-visible,
.module-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .6) !important;
}

#clientareaproductdetails .list-group-item.active,
.product-details .list-group-item.active,
.service-actions .list-group-item.active {
  background-color: rgba(59, 130, 246, .12) !important;
  border-color: rgba(59, 130, 246, .4) !important;
  color: var(--slb-primary-light) !important;
}

#clientareaproductdetails .list-group-item.disabled,
.service-actions .list-group-item.disabled,
.module-btn.disabled {
  background-color: rgba(27, 36, 64, .3) !important;
  border-color: var(--slb-border) !important;
  color: var(--slb-muted) !important;
  opacity: .5 !important;
  pointer-events: none;
}

/* Cartes/panneaux Bootstrap et heritages Bootstrap 3 dans ces pages */
#order-standard_cart .card,
.order-form .card,
.checkout-container .card,
.invoice-container .card,
.product-details .card,
#clientareaproductdetails .card,
#order-standard_cart .panel,
.order-form .panel,
.invoice-container .panel,
.product-details .panel,
#clientareaproductdetails .panel,
#order-standard_cart .well,
.invoice-container .well,
#clientareaproductdetails .well {
  background-color: var(--slb-surface) !important;
  background-color: color-mix(in oklab, var(--slb-surface) 90%, transparent) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(4, 8, 24, .35) !important;
}

#order-standard_cart .card-header,
.order-form .card-header,
.invoice-container .card-header,
.product-details .card-header,
#clientareaproductdetails .card-header,
#order-standard_cart .panel-heading,
.invoice-container .panel-heading,
#clientareaproductdetails .panel-heading {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--slb-border) !important;
  border-bottom-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  color: var(--slb-fg) !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 16px 20px !important;
}

#order-standard_cart .card-body,
.order-form .card-body,
.invoice-container .card-body,
.product-details .card-body,
#clientareaproductdetails .card-body,
#order-standard_cart .panel-body,
.invoice-container .panel-body,
#clientareaproductdetails .panel-body {
  background-color: transparent !important;
  color: var(--slb-fg) !important;
  padding: 20px !important;
}

#order-standard_cart .card-footer,
.invoice-container .card-footer,
#clientareaproductdetails .card-footer,
#order-standard_cart .panel-footer,
.invoice-container .panel-footer,
#clientareaproductdetails .panel-footer {
  background-color: rgba(27, 36, 64, .4) !important;
  border: 0 !important;
  border-top: 1px solid var(--slb-border) !important;
  border-top-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  color: var(--slb-muted) !important;
  padding: 14px 20px !important;
}

#order-standard_cart .card-title,
.invoice-container .card-title,
#clientareaproductdetails .card-title,
#order-standard_cart .panel-title,
#clientareaproductdetails .panel-title {
  color: var(--slb-fg) !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Zones claires de Bootstrap a neutraliser dans ces pages */
#order-standard_cart .bg-light,
#order-standard_cart .bg-white,
.order-form .bg-light,
.checkout-container .bg-light,
.invoice-container .bg-light,
.invoice-container .bg-white,
.product-details .bg-light,
#clientareaproductdetails .bg-light,
#clientareaproductdetails .bg-white,
#order-standard_cart .jumbotron,
.invoice-container .jumbotron {
  background-color: rgba(27, 36, 64, .5) !important;
  color: var(--slb-fg) !important;
}

#order-standard_cart .text-dark,
#order-standard_cart .text-body,
#order-standard_cart .text-black,
.invoice-container .text-dark,
.invoice-container .text-body,
.product-details .text-dark,
#clientareaproductdetails .text-dark,
#clientareaproductdetails .text-body {
  color: var(--slb-fg) !important;
}

#order-standard_cart .text-muted,
.order-form .text-muted,
.checkout-container .text-muted,
.invoice-container .text-muted,
.product-details .text-muted,
#clientareaproductdetails .text-muted,
.summary-container .text-muted {
  color: var(--slb-muted) !important;
}

#order-standard_cart .text-success,
.invoice-container .text-success,
#clientareaproductdetails .text-success { color: var(--slb-success) !important; }

#order-standard_cart .text-danger,
.invoice-container .text-danger,
#clientareaproductdetails .text-danger { color: var(--slb-danger) !important; }

#order-standard_cart .text-warning,
.invoice-container .text-warning,
#clientareaproductdetails .text-warning { color: var(--slb-warning) !important; }

#order-standard_cart .text-primary,
.invoice-container .text-primary,
#clientareaproductdetails .text-primary { color: var(--slb-primary-light) !important; }

/* ---- 15. Barres de progression (usage disque, bande passante) ---- */
#clientareaproductdetails .progress,
.product-details .progress,
.usage-stats .progress,
.service-usage .progress,
#order-standard_cart .progress {
  height: 8px !important;
  background-color: var(--slb-surface-2) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  overflow: hidden;
}

#clientareaproductdetails .progress-bar,
.product-details .progress-bar,
.usage-stats .progress-bar,
.service-usage .progress-bar,
#order-standard_cart .progress-bar {
  background-color: var(--slb-primary) !important;
  background-image: var(--slb-gradient) !important;
  border-radius: 999px !important;
  color: transparent !important;
  box-shadow: none !important;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

#clientareaproductdetails .progress-bar.bg-warning,
.usage-stats .progress-bar.bg-warning,
.progress-bar.usage-warning {
  background-color: var(--slb-warning) !important;
  background-image: none !important;
}

#clientareaproductdetails .progress-bar.bg-danger,
.usage-stats .progress-bar.bg-danger,
.progress-bar.usage-critical {
  background-color: var(--slb-danger) !important;
  background-image: none !important;
}

.usage-label,
.usage-stats-label,
.service-usage-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--slb-muted) !important;
  font-size: 12.5px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.usage-label strong,
.usage-value {
  color: var(--slb-fg) !important;
  font-weight: 600;
}

/* ---- 16. Etats / badges de statut (facture, service, commande) ---- */
.status-active,
.status-paid,
.status-completed,
.status-online,
.invoice-status-paid,
.service-status-active {
  color: var(--slb-success) !important;
  background-color: rgba(52, 211, 153, .12) !important;
  border: 1px solid rgba(52, 211, 153, .4) !important;
}

.status-pending,
.status-unpaid,
.status-draft,
.status-payment-pending,
.invoice-status-unpaid,
.invoice-status-draft,
.service-status-pending {
  color: var(--slb-warning) !important;
  background-color: rgba(251, 191, 36, .12) !important;
  border: 1px solid rgba(251, 191, 36, .4) !important;
}

.status-suspended,
.status-terminated,
.status-cancelled,
.status-canceled,
.status-overdue,
.status-fraud,
.status-collections,
.invoice-status-cancelled,
.invoice-status-overdue,
.service-status-suspended,
.service-status-terminated {
  color: var(--slb-danger) !important;
  background-color: rgba(248, 113, 113, .12) !important;
  border: 1px solid rgba(248, 113, 113, .4) !important;
}

.status-refunded,
.status-processing,
.status-in-progress,
.invoice-status-refunded {
  color: var(--slb-primary-light) !important;
  background-color: rgba(59, 130, 246, .12) !important;
  border: 1px solid rgba(59, 130, 246, .4) !important;
}

.status-active,
.status-paid,
.status-completed,
.status-online,
.status-pending,
.status-unpaid,
.status-draft,
.status-payment-pending,
.status-suspended,
.status-terminated,
.status-cancelled,
.status-canceled,
.status-overdue,
.status-fraud,
.status-collections,
.status-refunded,
.status-processing,
.status-in-progress,
.invoice-status,
.service-status,
.order-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.invoice-status,
.service-status,
.order-status {
  color: var(--slb-muted) !important;
  background-color: rgba(107, 120, 153, .12) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
}

/* Labels / badges Bootstrap dans les tableaux de commande, facture, service */
#order-standard_cart .badge,
#order-standard_cart .label,
.order-form .badge,
.invoice-container .badge,
.invoice-container .label,
.product-details .badge,
.product-details .label,
#clientareaproductdetails .badge,
#clientareaproductdetails .label,
.summary-container .badge,
td .badge,
td .label,
th .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--slb-muted) !important;
  background-color: rgba(107, 120, 153, .12) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  text-shadow: none !important;
}

#order-standard_cart .badge-success,
#order-standard_cart .label-success,
.invoice-container .badge-success,
.invoice-container .label-success,
.product-details .badge-success,
#clientareaproductdetails .badge-success,
#clientareaproductdetails .label-success,
td .badge-success,
td .label-success {
  color: var(--slb-success) !important;
  background-color: rgba(52, 211, 153, .12) !important;
  border-color: rgba(52, 211, 153, .4) !important;
}

#order-standard_cart .badge-warning,
#order-standard_cart .label-warning,
.invoice-container .badge-warning,
.invoice-container .label-warning,
.product-details .badge-warning,
#clientareaproductdetails .badge-warning,
#clientareaproductdetails .label-warning,
td .badge-warning,
td .label-warning {
  color: var(--slb-warning) !important;
  background-color: rgba(251, 191, 36, .12) !important;
  border-color: rgba(251, 191, 36, .4) !important;
}

#order-standard_cart .badge-danger,
#order-standard_cart .label-danger,
.invoice-container .badge-danger,
.invoice-container .label-danger,
.product-details .badge-danger,
#clientareaproductdetails .badge-danger,
#clientareaproductdetails .label-danger,
td .badge-danger,
td .label-danger {
  color: var(--slb-danger) !important;
  background-color: rgba(248, 113, 113, .12) !important;
  border-color: rgba(248, 113, 113, .4) !important;
}

#order-standard_cart .badge-info,
#order-standard_cart .label-info,
#order-standard_cart .badge-primary,
.invoice-container .badge-info,
.invoice-container .label-info,
.invoice-container .badge-primary,
#clientareaproductdetails .badge-info,
#clientareaproductdetails .label-info,
#clientareaproductdetails .badge-primary,
td .badge-info,
td .label-info,
td .badge-primary {
  color: var(--slb-primary-light) !important;
  background-color: rgba(59, 130, 246, .12) !important;
  border-color: rgba(59, 130, 246, .4) !important;
}

#order-standard_cart .badge-light,
#order-standard_cart .badge-secondary,
#order-standard_cart .label-default,
.invoice-container .badge-light,
.invoice-container .badge-secondary,
.invoice-container .label-default,
#clientareaproductdetails .badge-light,
#clientareaproductdetails .badge-secondary,
#clientareaproductdetails .label-default,
td .badge-light,
td .badge-secondary,
td .label-default {
  color: var(--slb-muted) !important;
  background-color: rgba(107, 120, 153, .12) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
}

/* Point d'etat anime (service actif) */
.service-status-dot,
.status-dot {
  position: relative;
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background-color: var(--slb-success) !important;
}

.service-status-dot::after,
.status-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--slb-success);
  border-radius: 999px;
  opacity: .5;
  animation: slb-order-pulse 2s ease-out infinite;
}

.status-dot.is-warning { background-color: var(--slb-warning) !important; }
.status-dot.is-warning::after { border-color: var(--slb-warning); }
.status-dot.is-danger { background-color: var(--slb-danger) !important; }
.status-dot.is-danger::after { border-color: var(--slb-danger); }

/* ---- 17. Modales et menus deroulants de ces pages ---- */
#order-standard_cart .modal-content,
.order-form .modal-content,
.invoice-container .modal-content,
#clientareaproductdetails .modal-content,
.modal-content.order-modal,
.modal-content.service-modal {
  background-color: var(--slb-surface) !important;
  border: 1px solid var(--slb-border) !important;
  border-color: color-mix(in oklab, var(--slb-border) 70%, transparent) !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25) !important;
}

#order-standard_cart .modal-header,
.invoice-container .modal-header,
#clientareaproductdetails .modal-header,
#order-standard_cart .modal-footer,
.invoice-container .modal-footer,
#clientareaproductdetails .modal-footer {
  background-color: transparent !important;
  border-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
  color: var(--slb-fg) !important;
}

#order-standard_cart .modal-title,
.invoice-container .modal-title,
#clientareaproductdetails .modal-title {
  color: var(--slb-fg) !important;
  font-weight: 700;
}

#order-standard_cart .modal .close,
.invoice-container .modal .close,
#clientareaproductdetails .modal .close {
  color: var(--slb-muted) !important;
  opacity: 1;
  text-shadow: none !important;
}

#order-standard_cart .modal .close:hover,
.invoice-container .modal .close:hover,
#clientareaproductdetails .modal .close:hover {
  color: var(--slb-fg) !important;
}

#order-standard_cart .dropdown-menu,
.invoice-container .dropdown-menu,
.product-details .dropdown-menu,
#clientareaproductdetails .dropdown-menu {
  background-color: var(--slb-surface) !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  padding: 6px !important;
  box-shadow: 0 20px 25px -5px rgba(4, 8, 24, .5), 0 8px 10px -6px rgba(4, 8, 24, .5) !important;
}

#order-standard_cart .dropdown-item,
.invoice-container .dropdown-item,
.product-details .dropdown-item,
#clientareaproductdetails .dropdown-item {
  background-color: transparent !important;
  border-radius: 8px !important;
  color: var(--slb-muted) !important;
  font-size: 13.5px;
  padding: 8px 12px !important;
}

#order-standard_cart .dropdown-item:hover,
#order-standard_cart .dropdown-item:focus,
.invoice-container .dropdown-item:hover,
.invoice-container .dropdown-item:focus,
#clientareaproductdetails .dropdown-item:hover,
#clientareaproductdetails .dropdown-item:focus {
  background-color: var(--slb-surface-2) !important;
  color: var(--slb-fg) !important;
}

#order-standard_cart .dropdown-divider,
.invoice-container .dropdown-divider,
#clientareaproductdetails .dropdown-divider {
  border-top-color: color-mix(in oklab, var(--slb-border) 60%, transparent) !important;
}

/* ---- 18. Animation d'entree ---- */
@keyframes slb-order-rise {
  0% { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes slb-order-pulse {
  0% { opacity: .6; transform: scale(.5); }
  to { opacity: 0; transform: scale(1.4); }
}

#order-standard_cart .product,
.summary-container,
#ordersummary,
.invoice-container,
.service-header,
.order-complete {
  animation: slb-order-rise .55s cubic-bezier(.2, .7, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  #order-standard_cart .product,
  .summary-container,
  #ordersummary,
  .invoice-container,
  .service-header,
  .order-complete,
  .service-status-dot::after,
  .status-dot::after {
    animation: none !important;
  }

  #order-standard_cart .btn,
  .invoice-container .btn,
  #clientareaproductdetails .btn,
  .btn-add-to-cart,
  .btn-checkout,
  #btnCompleteOrder,
  #btnPayNow,
  .module-btn,
  #clientareaproductdetails .list-group-item,
  .products .product,
  .service-info-item {
    transition: none !important;
    transform: none !important;
  }
}

/* ---- 19. Impression de facture ---- */
@media print {
  body,
  .invoice-container,
  #invoiceContainer,
  .invoice-body,
  .invoice-header,
  #invoiceitems,
  table.invoice-items {
    background: #ffffff !important;
    background-image: none !important;
    color: #111827 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .invoice-container,
  #invoiceContainer,
  .invoice-body {
    border: 1px solid #d1d5db !important;
    border-radius: 0 !important;
  }

  .invoice-container th,
  .invoice-container td,
  #invoiceitems th,
  #invoiceitems td,
  .invoice-address,
  .invoice-date,
  .invoice-notes,
  .invoice-title {
    color: #111827 !important;
    background: transparent !important;
    border-color: #d1d5db !important;
  }

  .invoice-container a { color: #1d4ed8 !important; }

  .invoice-actions,
  .invoice-buttons,
  .invoice-payment-bar,
  .btn,
  .no-print {
    display: none !important;
  }
}

/* =========================================================================
   SLBCLOUD x WHMCS — BLOC CORRECTIF (a placer en TOUTE FIN de fichier)
   Repare : utilitaires clairs, contraste AA, utilitaires d'affichage casses,
   conflits inter-blocs, selecteurs trop larges, composants non couverts.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. URGENCE — restaurer les utilitaires d'affichage de Bootstrap
   Les `display:inline-flex !important` poses sur .btn/.badge/.close/.status
   arrivent APRES Bootstrap a specificite egale : ils battaient .d-none.
   On redonne la main aux utilitaires en gardant l'ordre des breakpoints.
   ------------------------------------------------------------------------- */
[hidden],
.hidden,
.d-none.d-none.d-none {
  display: none !important;
}

.collapse:not(.show) {
  display: none !important;
}

.d-inline.d-inline.d-inline { display: inline !important; }
.d-inline-block.d-inline-block.d-inline-block { display: inline-block !important; }
.d-block.d-block.d-block { display: block !important; }
.d-flex.d-flex.d-flex { display: flex !important; }
.d-inline-flex.d-inline-flex.d-inline-flex { display: inline-flex !important; }

@media (min-width: 576px) {
  .d-sm-none.d-sm-none.d-sm-none { display: none !important; }
  .d-sm-inline.d-sm-inline.d-sm-inline { display: inline !important; }
  .d-sm-inline-block.d-sm-inline-block.d-sm-inline-block { display: inline-block !important; }
  .d-sm-block.d-sm-block.d-sm-block { display: block !important; }
  .d-sm-flex.d-sm-flex.d-sm-flex { display: flex !important; }
  .d-sm-inline-flex.d-sm-inline-flex.d-sm-inline-flex { display: inline-flex !important; }
}

@media (min-width: 768px) {
  .d-md-none.d-md-none.d-md-none { display: none !important; }
  .d-md-inline.d-md-inline.d-md-inline { display: inline !important; }
  .d-md-inline-block.d-md-inline-block.d-md-inline-block { display: inline-block !important; }
  .d-md-block.d-md-block.d-md-block { display: block !important; }
  .d-md-flex.d-md-flex.d-md-flex { display: flex !important; }
  .d-md-inline-flex.d-md-inline-flex.d-md-inline-flex { display: inline-flex !important; }
}

@media (min-width: 992px) {
  .d-lg-none.d-lg-none.d-lg-none { display: none !important; }
  .d-lg-inline.d-lg-inline.d-lg-inline { display: inline !important; }
  .d-lg-inline-block.d-lg-inline-block.d-lg-inline-block { display: inline-block !important; }
  .d-lg-block.d-lg-block.d-lg-block { display: block !important; }
  .d-lg-flex.d-lg-flex.d-lg-flex { display: flex !important; }
  .d-lg-inline-flex.d-lg-inline-flex.d-lg-inline-flex { display: inline-flex !important; }
}

@media (min-width: 1200px) {
  .d-xl-none.d-xl-none.d-xl-none { display: none !important; }
  .d-xl-inline.d-xl-inline.d-xl-inline { display: inline !important; }
  .d-xl-inline-block.d-xl-inline-block.d-xl-inline-block { display: inline-block !important; }
  .d-xl-block.d-xl-block.d-xl-block { display: block !important; }
  .d-xl-flex.d-xl-flex.d-xl-flex { display: flex !important; }
  .d-xl-inline-flex.d-xl-inline-flex.d-xl-inline-flex { display: inline-flex !important; }
}

/* -------------------------------------------------------------------------
   1. Utilitaires de fond / bordure clairs — blanc sur blanc hors des cartes
   ------------------------------------------------------------------------- */
.bg-white,
.bg-light,
.bg-body,
.bg-secondary,
.bg-dark,
.bg-gray,
.bg-gray-light,
.jumbotron.bg-white {
  background-color: #1b244080 !important;
  background-image: none !important;
  color: var(--slb-fg) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.bg-primary {
  background-color: #3b82f61f !important;
  color: var(--slb-primary-light) !important;
}

.bg-info {
  background-color: #38bdf81f !important;
  color: var(--slb-accent) !important;
}

.bg-success {
  background-color: #34d3991f !important;
  color: var(--slb-success) !important;
}

.bg-warning {
  background-color: #fbbf241f !important;
  color: var(--slb-warning) !important;
}

.bg-danger {
  background-color: #f871711f !important;
  color: var(--slb-danger) !important;
}

.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-light,
.border-secondary,
.border-white,
.border-dark,
.border-muted {
  border-color: #232c44b3 !important;
}

.border-primary { border-color: #3b82f699 !important; }
.border-info { border-color: #38bdf899 !important; }
.border-success { border-color: #34d39999 !important; }
.border-warning { border-color: #fbbf2499 !important; }
.border-danger { border-color: #f8717199 !important; }

.text-white-50 {
  color: var(--slb-muted) !important;
}

/* .text-dark / .text-body = emphase : doit valoir --slb-fg PARTOUT
   (bat le mappage vers --slb-muted du bloc structure) */
.text-dark.text-dark,
.text-body.text-body,
.text-black.text-black,
.text-black-50.text-black-50 {
  color: var(--slb-fg) !important;
}

/* -------------------------------------------------------------------------
   2. Typographie brute non couverte (piege blanc/noir sur sombre)
   ------------------------------------------------------------------------- */
pre,
pre code,
samp {
  color: var(--slb-fg) !important;
  background-color: var(--slb-field) !important;
  border: 1px solid #232c4499 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  overflow: auto;
}

pre code {
  border: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
}

code,
tt {
  color: var(--slb-accent) !important;
  background-color: #38bdf814 !important;
  border-radius: 6px !important;
  padding: 1px 5px !important;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
}

kbd {
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 2px 6px !important;
  font-size: .9em;
}

mark,
.mark {
  color: #05070f !important;
  background-color: #fbbf24cc !important;
  border-radius: 4px !important;
  padding: 0 4px !important;
}

.blockquote-footer,
.figure-caption,
figcaption {
  color: var(--slb-muted) !important;
}

/* -------------------------------------------------------------------------
   3. Specificite : regles qui perdaient contre theme.css (pas de !important)
   ------------------------------------------------------------------------- */
body {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

h1, .h1, #main-body h1, .page-header h1 { font-size: 31px !important; line-height: 1.22 !important; }
h2, .h2, #main-body h2, .page-header h2 { font-size: 26px !important; line-height: 1.25 !important; }
h3, .h3, #main-body h3 { font-size: 21px !important; line-height: 1.3 !important; }
h4, .h4, #main-body h4 { font-size: 17px !important; line-height: 1.35 !important; }
h5, .h5, #main-body h5 { font-size: 15px !important; line-height: 1.4 !important; }
h6, .h6, #main-body h6 { font-size: 13px !important; line-height: 1.4 !important; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
#main-body h1, #main-body h2, #main-body h3,
.page-header h1 {
  color: var(--slb-fg) !important;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.025em !important;
  margin-top: 0 !important;
}

.table th,
.table td,
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
}

.table-sm th,
.table-sm td,
.table-sm > tbody > tr > td,
.table-sm > thead > tr > th {
  padding: 8px 12px !important;
}

.nav-tabs { margin-bottom: 20px !important; }
#main-body { padding-top: 28px !important; padding-bottom: 56px !important; }

/* -------------------------------------------------------------------------
   4. Contraste AA — degrade textuel, liens de surface, placeholders
   Le depart #3b82f6 du degrade donne 3,68:1 avec du blanc : on demarre
   a #2563eb (5,1:1) sur toute surface qui porte du texte.
   ------------------------------------------------------------------------- */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:disabled,
.btn-primary.disabled,
.show > .btn-primary.dropdown-toggle,
.page-item.active .page-link,
.page-item.active .page-link:hover,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current:hover,
.dt-paging .dt-paging-button.current,
#order-standard_cart .btn-primary,
#order-standard_cart .btn-primary:hover,
.order-form .btn-primary,
.order-form .btn-primary:hover,
.invoice-container .btn-primary,
.invoice-container .btn-primary:hover,
#clientareaproductdetails .btn-primary,
#clientareaproductdetails .btn-primary:hover,
.btn-add-to-cart,
.btn-add-to-cart:hover,
.btn-checkout,
.btn-checkout:hover,
.btn-order,
.checkout-button,
#btnCompleteOrder,
#btnCompleteOrder:hover,
#btnPayNow,
#btnPayNow:hover,
.paymentbtn,
.paymentbtn:hover {
  background-image: linear-gradient(120deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
}

.progress-bar:not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-info):not(.bg-secondary):not(.bg-light):not(.bg-dark):not(.progress-bar-success):not(.progress-bar-warning):not(.progress-bar-danger):not(.progress-bar-info),
#clientareaproductdetails .progress-bar:not(.bg-warning):not(.bg-danger),
.product-details .progress-bar:not(.bg-warning):not(.bg-danger),
.usage-stats .progress-bar:not(.bg-warning):not(.bg-danger),
.service-usage .progress-bar:not(.bg-warning):not(.bg-danger),
#order-standard_cart .progress-bar {
  background-image: linear-gradient(120deg, #2563eb 0%, #1d4ed8 100%) !important;
}

/* Le libelle « 12 Go / 50 Go » ecrit par WHMCS dans la barre etait masque */
#clientareaproductdetails .progress-bar:not(:empty),
.product-details .progress-bar:not(:empty),
.usage-stats .progress-bar:not(:empty),
.service-usage .progress-bar:not(:empty) {
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  min-width: 42px !important;
  padding: 0 6px !important;
}

@supports selector(:has(*)) {
  .progress:has(.progress-bar:not(:empty)),
  #clientareaproductdetails .progress:has(.progress-bar:not(:empty)),
  .usage-stats .progress:has(.progress-bar:not(:empty)) {
    height: 18px !important;
  }
}

/* Liens dans les surfaces : #3b82f6 = 4,70:1 sur #121828 -> primary-light */
.card-link,
.card-body a:not(.btn):not(.list-group-item):not(.card):not(.nav-link):not(.badge),
.panel-body a:not(.btn):not(.list-group-item):not(.nav-link):not(.badge),
.summary-box a:not(.btn),
.well a:not(.btn),
.modal-body a:not(.btn):not(.badge):not(.label) {
  color: var(--slb-primary-light) !important;
}

.card-link:hover,
.card-body a:not(.btn):not(.list-group-item):not(.card):not(.nav-link):not(.badge):hover,
.panel-body a:not(.btn):not(.list-group-item):not(.nav-link):not(.badge):hover {
  color: var(--slb-accent) !important;
}

/* Placeholders : --slb-faint = 4,36:1 sur --slb-field (echec AA) */
.form-control::placeholder,
textarea.form-control::placeholder,
.custom-select::placeholder,
input::placeholder,
textarea::placeholder,
.dataTables_filter input::placeholder,
div.dataTables_wrapper .dataTables_filter input::placeholder,
.dt-search input::placeholder,
#order-standard_cart .form-control::placeholder,
#order-standard_cart input::placeholder,
.order-form .form-control::placeholder,
.checkout-container .form-control::placeholder,
.invoice-container .form-control::placeholder,
#clientareaproductdetails .form-control::placeholder,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #8593b5 !important;
  opacity: 1 !important;
}

/* Le survol de champ etait un no-op : le repli valait la bordure normale */
.form-control:hover:not(:disabled):not([readonly]),
select.form-control:hover:not(:disabled),
.custom-select:hover:not(:disabled) {
  border-color: #3b5a9e !important;
}

@supports (color: color-mix(in oklab, red, red)) {
  .form-control:hover:not(:disabled):not([readonly]) {
    border-color: color-mix(in oklab, var(--slb-primary) 35%, var(--slb-border)) !important;
  }
}

/* -------------------------------------------------------------------------
   5. Conflits inter-blocs : on tranche
   ------------------------------------------------------------------------- */

/* 5a. Sidebar : [class*="sidebar-menu-item-"]{color:inherit} passait tout en blanc */
.list-group-item.list-group-item,
.list-group-item-action.list-group-item-action,
a.list-group-item.list-group-item {
  color: var(--slb-muted) !important;
}

.list-group-item.list-group-item:hover,
.list-group-item-action.list-group-item-action:hover,
.list-group-item-action.list-group-item-action:focus,
a.list-group-item.list-group-item:hover {
  color: var(--slb-fg) !important;
}

.list-group-item.list-group-item.active,
.list-group-item-action.list-group-item-action.active,
a.list-group-item.list-group-item.active {
  color: var(--slb-primary-light) !important;
}

.list-group-item.list-group-item.disabled {
  color: var(--slb-faint) !important;
}

.list-group-item.list-group-item-primary,
.list-group-item.list-group-item-info { color: var(--slb-primary-light) !important; }
.list-group-item.list-group-item-success { color: var(--slb-success) !important; }
.list-group-item.list-group-item-warning { color: var(--slb-warning) !important; }
.list-group-item.list-group-item-danger { color: var(--slb-danger) !important; }

.list-group-item .sidebar-menu-item-description,
.list-group-item .sidebar-menu-item-subtitle,
.list-group-item .sidebar-menu-item-help {
  color: var(--slb-faint) !important;
}

/* 5b. Statut « unpaid » : le bloc boutique le passait en ambre.
       Une facture impayee est un etat DANGER dans WHMCS. */
.status-unpaid,
.status.unpaid,
.invoice-status.unpaid,
.invoice-status-unpaid,
.badge.status-unpaid,
td .status-unpaid,
td .invoice-status-unpaid,
[data-status="unpaid"] {
  color: var(--slb-danger) !important;
  background-color: #f871711f !important;
  border-color: #f8717166 !important;
}

/* 5c. Couleurs semantiques des boutons : le bloc boutique (specificite ID)
       repeignait success/danger/warning en degrade bleu. */
#order-standard_cart .btn-success,
.order-form .btn-success,
.checkout-container .btn-success,
.invoice-container .btn-success,
#clientareaproductdetails .btn-success {
  background-color: var(--slb-success) !important;
  background-image: none !important;
  color: #05070f !important;
  border-color: var(--slb-success) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

#order-standard_cart .btn-success:hover,
.order-form .btn-success:hover,
.invoice-container .btn-success:hover,
#clientareaproductdetails .btn-success:hover {
  background-color: #6ee7b7 !important;
  background-image: none !important;
  color: #05070f !important;
}

/* 5d. Liens d'alerte : .card-body a (0,5,1) ecrasait .alert a (0,2,0) */
.alert a:not(.btn):not(.badge):not(.label):not(.nav-link):not(.close):not(.dropdown-item),
.alert .alert-link:not(.btn),
.card-body .alert a:not(.btn):not(.badge):not(.label):not(.nav-link):not(.close),
.panel-body .alert a:not(.btn):not(.badge):not(.label):not(.nav-link):not(.close),
.modal-body .alert a:not(.btn):not(.badge):not(.label):not(.nav-link):not(.close) {
  color: inherit !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

/* Couleurs semantiques a l'interieur des cartes / summary-box
   (.summary-box span:not(.badge) et .card-body a ecrasaient .text-*) */
.summary-box span.text-success,
.summary-box .text-success,
.card-body a.text-success,
.panel-body a.text-success { color: var(--slb-success) !important; }

.summary-box span.text-danger,
.summary-box .text-danger,
.card-body a.text-danger,
.panel-body a.text-danger { color: var(--slb-danger) !important; }

.summary-box span.text-warning,
.summary-box .text-warning,
.card-body a.text-warning,
.panel-body a.text-warning { color: var(--slb-warning) !important; }

.summary-box span.text-info,
.summary-box .text-info { color: var(--slb-accent) !important; }

.summary-box span.text-primary,
.summary-box .text-primary { color: var(--slb-primary-light) !important; }

/* 5e. `td .badge` (non scope) ecrasait les pastilles de statut colorees */
td .badge.status-active,
td .status-active,
td .badge.status-paid,
td .status-paid,
td .status-completed,
th .status-active,
.table .status-active,
.table .status-paid {
  color: var(--slb-success) !important;
  background-color: #34d3991f !important;
  border-color: #34d39966 !important;
}

td .badge.status-pending,
td .status-pending,
td .status-draft,
td .status-on-hold,
.table .status-pending,
.table .status-draft {
  color: var(--slb-warning) !important;
  background-color: #fbbf241f !important;
  border-color: #fbbf2466 !important;
}

td .badge.status-unpaid,
td .status-suspended,
td .status-terminated,
td .status-cancelled,
td .status-overdue,
.table .status-suspended,
.table .status-overdue {
  color: var(--slb-danger) !important;
  background-color: #f871711f !important;
  border-color: #f8717166 !important;
}

td .badge-dark,
td .label-dark,
.table .badge-dark {
  color: var(--slb-fg) !important;
  background-color: var(--slb-surface-2) !important;
  border-color: var(--slb-border) !important;
}

/* 5f. Bouton de fermeture des alertes : le bloc modale lui imposait
       margin/width et le decalait hors de sa position absolue */
.alert .close,
.alert-dismissible .close {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 0 var(--slb-radius) 0 !important;
  background-color: transparent !important;
}

.alert .close:hover,
.alert-dismissible .close:hover {
  background-color: transparent !important;
}

/* -------------------------------------------------------------------------
   6. Selecteurs trop larges : neutralisation sur les elements de structure
   ------------------------------------------------------------------------- */

/* [data-status] / .status / .amount / .price / .total transformaient
   n'importe quel conteneur en pilule. On ne pillule que l'inline. */
div[data-status],
tr[data-status],
td[data-status],
th[data-status],
table[data-status],
form[data-status],
section[data-status],
article[data-status],
ul[data-status],
ol[data-status],
li[data-status],
nav[data-status],
div.status,
tr.status,
td.status,
th.status,
table.status,
section.status,
ul.status,
li.status,
form.status {
  display: revert !important;
  min-height: 0 !important;
  padding: revert !important;
  border: 0 !important;
  border-radius: revert !important;
  background-color: transparent !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: normal !important;
  vertical-align: baseline !important;
}

div[data-status]::before,
tr[data-status]::before,
td[data-status]::before,
div.status::before,
td.status::before {
  content: none !important;
}

/* `display:flex` sur .total / .total-due / .cart-total detruisait les
   lignes et cellules de tableau du recapitulatif et de la facture */
tr.total,
tr.total-due,
tr.cart-total,
tr.grand-total,
tr.order-total,
tr.summary-total,
tr.amount-due,
tr.balance-due,
tr.invoice-balance-due,
tr.invoice-total,
tr.subtotal,
tr.tax-row {
  display: table-row !important;
  border-top: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

td.total, th.total,
td.total-due, th.total-due,
td.cart-total, th.cart-total,
td.grand-total, th.grand-total,
td.order-total, th.order-total,
td.summary-total, th.summary-total,
td.amount-due, th.amount-due,
td.balance-due, th.balance-due,
td.invoice-balance-due,
td.subtotal, th.subtotal,
td.price, th.price,
td.amount, th.amount,
td.price-value {
  display: table-cell !important;
  border-radius: 0 !important;
}

td.price, td.amount, td.price-value,
th.price, th.amount {
  font-size: inherit !important;
  background-image: none !important;
  color: var(--slb-fg) !important;
  -webkit-text-fill-color: currentColor;
}

/* Le degrade sur .price rendait le texte transparent hors contexte produit */
td .price,
.table .price,
.list-group-item .price,
.summary-container .price {
  background-image: none !important;
  color: var(--slb-fg) !important;
  -webkit-text-fill-color: currentColor;
  font-size: inherit !important;
  display: inline !important;
}

/* .btn-block avec un libelle francais long debordait (white-space:nowrap) */
.btn-block,
.btn-block.btn {
  white-space: normal !important;
}

/* textarea nu force a 104px : on relache les editeurs et champs caches */
textarea[rows="1"],
textarea[rows="2"],
textarea.md-input,
textarea.CodeMirror-line,
.note-editor textarea,
.editor-toolbar + textarea,
textarea[style*="display: none"],
textarea[style*="display:none"] {
  min-height: 0 !important;
}

/* -------------------------------------------------------------------------
   7. Rognage / blocs conteneurs induits par backdrop-filter et overflow
   ------------------------------------------------------------------------- */
.card-sidebar,
.panel-sidebar,
.sidebar,
#Primary_Sidebar,
#Secondary_Sidebar {
  overflow: visible !important;
}

@supports selector(:has(*)) {
  .card:has(.modal),
  .panel:has(.modal),
  .well:has(.modal),
  .summary-container:has(.modal),
  .card:has(.dropdown-menu),
  .modal-content:has(.dropdown-menu) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .table-responsive:has(.dropdown-menu.show),
  .table-responsive:has(.show > .dropdown-menu),
  .dataTables_wrapper .table-responsive:has(.dropdown-menu.show) {
    overflow: visible !important;
  }
}

/* -------------------------------------------------------------------------
   8. Select2 (WHMCS 8 : pays, etats, recherche de domaine) — etait blanc
   ------------------------------------------------------------------------- */
.select2-container .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap4 .select2-selection {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  background-color: var(--slb-field) !important;
  background-image: none !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 11px !important;
  color: var(--slb-fg) !important;
  outline: none !important;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
  border-color: var(--slb-primary) !important;
  box-shadow: 0 0 0 3px #3b82f633 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--slb-fg) !important;
  line-height: 42px !important;
  padding: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--slb-muted) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--slb-muted) transparent !important;
}

.select2-dropdown,
.select2-container--open .select2-dropdown,
.select2-container--default .select2-dropdown {
  background-color: #121828f2 !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  box-shadow: 0 20px 25px -5px #00000040, 0 8px 10px -6px #00000040 !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.select2-search--dropdown {
  background-color: transparent !important;
  padding: 8px !important;
}

.select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--inline .select2-search__field {
  background-color: var(--slb-field) !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 9px !important;
  color: var(--slb-fg) !important;
  padding: 6px 10px !important;
  outline: none !important;
}

.select2-results,
.select2-results__options {
  background-color: transparent !important;
  color: var(--slb-fg) !important;
}

.select2-results__option,
.select2-container--default .select2-results__option {
  background-color: transparent !important;
  color: var(--slb-muted) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
}

.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--slb-surface-2) !important;
  color: var(--slb-fg) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background-color: #3b82f61f !important;
  color: var(--slb-primary-light) !important;
}

.select2-container--default .select2-results__group {
  color: var(--slb-faint) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #3b82f61f !important;
  border: 1px solid #3b82f666 !important;
  border-radius: 999px !important;
  color: var(--slb-primary-light) !important;
  padding: 2px 10px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--slb-primary-light) !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  color: var(--slb-muted) !important;
}

/* -------------------------------------------------------------------------
   9. Dropzone / pieces jointes — encart blanc
   ------------------------------------------------------------------------- */
.dropzone,
.dz-default,
.dropzone.dz-clickable,
#fileupload,
.file-upload-container,
.attachment-dropzone,
.uploader {
  background-color: #0a0e1acc !important;
  background-image: none !important;
  border: 2px dashed #232c44b3 !important;
  border-radius: 12px !important;
  color: var(--slb-muted) !important;
  min-height: 0 !important;
}

.dropzone:hover,
.dropzone.dz-drag-hover {
  border-color: #3b82f699 !important;
  background-color: #3b82f60d !important;
}

.dropzone .dz-message,
.dz-default.dz-message,
.dropzone .dz-message span {
  color: var(--slb-muted) !important;
  background-color: transparent !important;
}

.dropzone .dz-preview .dz-details,
.dropzone .dz-preview .dz-filename span,
.dropzone .dz-preview .dz-size span {
  background-color: var(--slb-surface-2) !important;
  border: 1px solid #232c4499 !important;
  border-radius: 8px !important;
  color: var(--slb-fg) !important;
}

.dropzone .dz-preview .dz-error-message {
  background: var(--slb-danger) !important;
  color: #05070f !important;
}

/* -------------------------------------------------------------------------
   10. Fil de discussion des tickets support
   ------------------------------------------------------------------------- */
.ticket-reply,
.ticket-message,
.support-ticket-reply,
.ticket-thread-item,
.ticket-item,
#ticket-thread > div,
.ticket-replies .reply {
  background-color: #121828e6 !important;
  background-image: none !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
}

.ticket-reply.staff,
.ticket-reply-staff,
.ticket-message.staff,
.ticket-thread-item.staff,
.support-ticket-reply.admin,
.ticket-replies .reply.staff {
  background-color: #3b82f614 !important;
  border-color: #3b82f64d !important;
}

.ticket-reply-header,
.ticket-message-header,
.ticket-item-header,
.ticket-reply .reply-meta,
.ticket-thread-item .meta {
  color: var(--slb-muted) !important;
  background-color: transparent !important;
  border-bottom: 1px solid #232c4480 !important;
  font-size: 12.5px !important;
  padding-bottom: 8px !important;
  margin-bottom: 10px !important;
}

.ticket-reply-header strong,
.ticket-message-header strong,
.ticket-reply-author,
.ticket-item-title {
  color: var(--slb-fg) !important;
  font-weight: 600 !important;
}

.ticket-reply-content,
.ticket-message-content,
.ticket-reply p,
.ticket-message p,
.ticket-thread-item p {
  color: var(--slb-fg) !important;
}

.ticket-attachments,
.ticket-reply .attachments {
  border-top: 1px solid #232c4480 !important;
  color: var(--slb-muted) !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
}

/* -------------------------------------------------------------------------
   11. Editeurs markdown / WYSIWYG / CodeMirror
   ------------------------------------------------------------------------- */
.md-editor,
.markdown-editor,
.note-editor,
.note-editor.note-frame,
.wysiwyg-editor,
.CodeMirror {
  background-color: var(--slb-field) !important;
  border: 1px solid var(--slb-border) !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  overflow: hidden;
}

.md-editor > .md-header,
.md-editor .md-footer,
.editor-toolbar,
.note-toolbar,
.note-statusbar {
  background-color: var(--slb-surface-2) !important;
  background-image: none !important;
  border-color: #232c4499 !important;
  color: var(--slb-muted) !important;
}

.md-editor > textarea,
.md-editor .md-preview,
.note-editable,
.note-codable,
.CodeMirror-scroll,
.CodeMirror-lines {
  background-color: var(--slb-field) !important;
  color: var(--slb-fg) !important;
}

.editor-toolbar a,
.editor-toolbar button,
.md-editor .btn,
.note-btn,
.note-toolbar .btn {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--slb-muted) !important;
  box-shadow: none !important;
}

.editor-toolbar a:hover,
.editor-toolbar a.active,
.note-btn:hover,
.md-editor .btn:hover {
  background-color: #1b244099 !important;
  color: var(--slb-fg) !important;
}

.CodeMirror-cursor { border-left-color: var(--slb-fg) !important; }
.CodeMirror-selected { background: #3b82f659 !important; }
.CodeMirror-gutters {
  background-color: var(--slb-surface-2) !important;
  border-right-color: #232c4499 !important;
}
.CodeMirror-linenumber { color: var(--slb-faint) !important; }

/* -------------------------------------------------------------------------
   12. Toasts Bootstrap 4.5 (notifications WHMCS 8)
   ------------------------------------------------------------------------- */
.toast {
  background-color: #121828f2 !important;
  background-clip: padding-box !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  box-shadow: 0 20px 25px -5px #00000040, 0 8px 10px -6px #00000040 !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.toast-header {
  background-color: #1b244099 !important;
  background-clip: padding-box !important;
  border-bottom: 1px solid #232c4499 !important;
  color: var(--slb-fg) !important;
  border-top-left-radius: 11px !important;
  border-top-right-radius: 11px !important;
}

.toast-header .close,
.toast .close {
  color: var(--slb-muted) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.toast-body {
  color: var(--slb-muted) !important;
}

/* -------------------------------------------------------------------------
   13. Datepicker jQuery UI
   ------------------------------------------------------------------------- */
.ui-datepicker,
.ui-widget.ui-widget-content,
.ui-widget-content {
  background: #121828f2 !important;
  background-image: none !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
  font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
  box-shadow: 0 20px 25px -5px #00000040 !important;
}

.ui-datepicker .ui-datepicker-header,
.ui-widget-header {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  color: var(--slb-fg) !important;
  font-weight: 600 !important;
}

.ui-datepicker th {
  color: var(--slb-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-datepicker td a {
  background: #1b244066 !important;
  background-image: none !important;
  border: 1px solid #232c4480 !important;
  border-radius: 8px !important;
  color: var(--slb-muted) !important;
  text-align: center;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-state-focus {
  background: var(--slb-surface-2) !important;
  border-color: #3b82f699 !important;
  color: var(--slb-fg) !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
  background: #3b82f61f !important;
  background-image: none !important;
  border-color: #3b82f666 !important;
  color: var(--slb-primary-light) !important;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span,
.ui-icon {
  filter: invert(78%) sepia(12%) saturate(560%) hue-rotate(185deg) brightness(95%);
}

/* -------------------------------------------------------------------------
   14. Banniere d'accueil Twenty-One, recherche, chargement
   ------------------------------------------------------------------------- */
.home-banner,
.home-banner-container,
#home-banner,
.banner-container,
#searchBoxContainer,
.search-container,
.searchbox,
#domainSearch,
.domain-checker-container {
  background-color: #121828e6 !important;
  background-image: radial-gradient(70% 120% at 12% -20%, #2563eb33, #0000 60%) !important;
  border: 1px solid #232c44b3 !important;
  border-radius: var(--slb-radius) !important;
  color: var(--slb-fg) !important;
  box-shadow: 0 10px 30px #04081859 !important;
}

.home-banner h1,
.home-banner h2,
.home-banner h3,
#searchBoxContainer h1,
#searchBoxContainer h2,
.domain-checker-container h1,
.domain-checker-container h2 {
  color: var(--slb-fg) !important;
}

.home-banner p,
.home-banner .lead,
#searchBoxContainer p,
.domain-checker-container p {
  color: var(--slb-muted) !important;
}

#loading,
.loader,
.loading-overlay,
.whmcs-loader,
.loading-container,
#loadingModal .modal-content {
  background-color: #05070fd9 !important;
  background-image: none !important;
  border-color: #232c44b3 !important;
  color: var(--slb-fg) !important;
}

.spinner-border,
.spinner-grow,
.fa-spinner,
.loader i {
  color: var(--slb-primary-light) !important;
}

/* -------------------------------------------------------------------------
   15. Base de connaissances / annonces / telechargements / affiliation
   ------------------------------------------------------------------------- */
.kb-article,
.kb-category,
.knowledgebase-article,
#knowledgebase-article,
.announcement,
.announcement-item,
.download-item,
.affiliate-stats,
.affiliate-summary,
.emailstable,
.email-message {
  background-color: #121828e6 !important;
  background-image: none !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 12px !important;
  color: var(--slb-fg) !important;
}

.kb-article p,
.knowledgebase-article p,
.announcement p,
.announcement-item p,
.download-item p,
.email-message p {
  color: var(--slb-muted) !important;
}

.kb-article h1, .kb-article h2, .kb-article h3,
.announcement h1, .announcement h2, .announcement h3,
.download-item h3, .download-item h4 {
  color: var(--slb-fg) !important;
}

.announcement-date,
.kb-article-meta,
.download-meta {
  color: var(--slb-faint) !important;
  font-size: 12.5px !important;
}

/* -------------------------------------------------------------------------
   16. Barres de defilement : ne pas imposer 10px a tous les elements
   ------------------------------------------------------------------------- */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.badge::-webkit-scrollbar,
.btn::-webkit-scrollbar,
.status::-webkit-scrollbar,
select::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
.select2-results__options::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-thumb {
  border-width: 2px !important;
}

/* -------------------------------------------------------------------------
   17. Impression globale (le bloc existant ne couvrait que la facture)
   ------------------------------------------------------------------------- */
@media print {
  html,
  body {
    background: #ffffff !important;
    background-image: none !important;
    color: #111827 !important;
  }

  .card,
  .panel,
  .well,
  .jumbotron,
  .summary-container,
  #ordersummary,
  .list-group-item,
  .modal-content,
  .service-header,
  .product-details,
  #clientareaproductdetails,
  .ticket-reply,
  .ticket-message,
  .kb-article,
  .announcement {
    background: #ffffff !important;
    background-image: none !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  h1, h2, h3, h4, h5, h6,
  p, li, dd, dt, th, td,
  .card-title, .panel-title,
  .list-group-item, .table, .table td, .table th {
    color: #111827 !important;
    background: transparent !important;
  }

  .text-muted,
  small,
  .small,
  .card-subtitle,
  .form-text {
    color: #4b5563 !important;
  }

  a,
  .table a,
  .card-body a,
  .list-group-item a {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
  }

  .badge,
  .label,
  .status,
  [data-status] {
    color: #111827 !important;
    background: transparent !important;
    border: 1px solid #9ca3af !important;
  }

  #header,
  .header,
  .navbar,
  .main-navbar-wrapper,
  .topbar,
  .top-bar,
  #top-nav,
  .master-breadcrumb,
  #footer,
  .footer,
  .pagination,
  .action-icon-btns,
  .btn,
  .dt-buttons,
  .no-print {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
   18. Mouvement reduit — completer les nouveaux composants
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .select2-dropdown,
  .ticket-reply,
  .dropzone,
  .home-banner {
    transition: none !important;
    animation: none !important;
  }
}
/* ==========================================================================
   CORRECTIFS 2 — facture lisible, pastilles de statut, panier, boutique
   ========================================================================== */

/* --- 1. FACTURE : le conteneur est blanc par defaut (page imprimable),
       ce qui rendait le texte clair invisible. On l'assombrit a l'ecran
       et on retablit du noir sur blanc a l'impression. --- */
.invoice-container {
  background-color: transparent !important;
  color: var(--slb-fg) !important;
  max-width: 900px !important;
  padding: 28px !important;
}
.invoice-container, .invoice-container p, .invoice-container div,
.invoice-container span, .invoice-container td, .invoice-container th,
.invoice-container h1, .invoice-container h2, .invoice-container h3,
.invoice-container h4, .invoice-container strong, .invoice-container b,
.invoice-container label, .invoice-container li {
  color: var(--slb-fg) !important;
}
.invoice-container .small-text, .invoice-container .text-muted { color: var(--slb-muted) !important; }
.invoice-container .invoice-header { border-bottom: 1px solid #232c44b3 !important; padding-bottom: 18px; margin-bottom: 18px; }
.invoice-container .table td, .invoice-container .table th { border-color: #232c4466 !important; }
.invoice-container td.total-row, .invoice-container .total-row {
  background-color: #1b244066 !important; color: var(--slb-fg) !important; font-weight: 600;
}
.invoice-container .card { margin-bottom: 16px !important; }
.invoice-container .card-header { background: transparent !important; border-bottom: 1px solid #232c4499 !important; }
.invoice-container .card-title { font-size: 15px !important; }
.invoice-container hr { border-color: #232c4466 !important; }

@media print {
  .invoice-container { background: #fff !important; }
  .invoice-container, .invoice-container * { color: #000 !important; }
  .invoice-container td.total-row { background: #f8f8f8 !important; }
  .slb-sidenav, .slb-main #header, .slb-main .master-breadcrumb { display: none !important; }
  .slb-main { margin-left: 0 !important; }
  body { background: #fff !important; }
}

/* --- 2. PASTILLES DE STATUT : teinte a 15 % + texte colore, comme l'app,
       au lieu des aplats satures de WHMCS --- */
.label.status, .status, .invoice-status, .table .label, .badge.status {
  display: inline-flex !important; align-items: center; gap: 6px;
  border-radius: 999px !important; padding: 4px 11px !important;
  font-size: 11px !important; font-weight: 600 !important;
  text-transform: none !important; text-shadow: none !important;
  border: 1px solid transparent !important;
}
.label.status::before, .status::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; flex: none;
}
.status-paid, .status-active, .status-completed, .status-answered {
  background-color: #34d39926 !important; color: #34d399 !important; border-color: #34d39940 !important;
}
.status-unpaid, .status-pending, .status-suspended, .status-onhold,
.status-grace, .status-inprogress, .status-pending-transfer, .status-customer-reply {
  background-color: #fbbf2426 !important; color: #fbbf24 !important; border-color: #fbbf2440 !important;
}
.status-overdue, .status-fraud {
  background-color: #f8717126 !important; color: #f87171 !important; border-color: #f8717140 !important;
}
.status-cancelled, .status-terminated, .status-expired, .status-draft,
.status-refunded, .status-transferred-away, .status-closed {
  background-color: #6b789926 !important; color: #a8b6d4 !important; border-color: #6b789940 !important;
}

/* --- 3. PANIER : bouton propre, compteur en pastille d'angle --- */
.slb-main #header .cart-btn { position: relative; }
.slb-main #header .cart-btn i { font-size: 16px; }
.slb-main #header .cart-btn .badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background-image: var(--slb-gradient) !important; background-color: var(--slb-primary) !important;
  color: #fff !important; border-radius: 999px !important;
  font-size: 10.5px !important; font-weight: 700 !important;
  border: 2px solid #05070f;
}

/* --- 4. BOUTIQUE : carte produit facon app.slbcloud.fr --- */
.product.clearfix, .product {
  background-color: #121828e6 !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 1rem !important;
  padding: 0 !important; overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
  margin-bottom: 16px;
}
.product:hover { border-color: #3b82f680 !important; transform: translateY(-1px); }
.product .panel-title, .product h3, .product .product-name {
  font-size: 15px !important; font-weight: 600 !important; color: var(--slb-fg) !important;
  padding: 16px 18px !important; margin: 0 !important;
  border-bottom: 1px solid #232c4499 !important; background: transparent !important;
}
.product-desc { padding: 16px 18px !important; font-size: 12.5px !important; color: var(--slb-muted) !important; }
.product-desc ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.product-desc ul li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 12.5px; color: var(--slb-muted) !important;
}
.product-desc ul li::before {
  content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
  font-size: 10px; color: var(--slb-primary); flex: none;
}
.feature-value { color: var(--slb-fg) !important; font-weight: 600 !important; }

.product-pricing {
  margin: 0 18px 18px !important; padding: 16px !important;
  border: 1px solid #3b82f640 !important; border-radius: 13px !important;
  background-image: linear-gradient(to bottom right, #3b82f61f, #3b82f608) !important;
  text-align: center;
}
.product-pricing .price, .product .price {
  font-size: 26px !important; font-weight: 800 !important;
  color: var(--slb-fg) !important; line-height: 1.05 !important;
  letter-spacing: -.02em; display: block;
}
.product-pricing .cycle, .product-pricing small { font-size: 12.5px !important; color: var(--slb-muted) !important; }

.btn-order-now, .product .btn-success, a.btn-order-now {
  background-image: var(--slb-gradient) !important;
  background-color: var(--slb-primary) !important;
  border-color: var(--slb-primary-hover) !important;
  color: #fff !important;
  border-radius: 10px !important; padding: 10px 18px !important;
  font-weight: 600 !important; width: 100%; margin-top: 12px;
  box-shadow: 0 6px 18px rgba(59,130,246,.3) !important;
}
.btn-order-now:hover, .product .btn-success:hover {
  background-image: none !important; background-color: var(--slb-primary-hover) !important;
  color: #fff !important; transform: translateY(-1px);
}

/* ==========================================================================
   CORRECTIF 3 — pied de page dans la coque (il debordait sous la sidebar)
   ========================================================================== */
.slb-main #footer, .slb-main .footer {
  margin-top: 32px;
  padding: 24px 0 28px !important;
  border-top: 1px solid #232c44b3 !important;
  background: transparent !important;
}
.slb-main #footer .container {
  max-width: 1320px !important;
  padding-left: 24px !important; padding-right: 24px !important;
  margin-left: auto !important; margin-right: auto !important;
}
.slb-main #footer .nav,
.slb-main #footer ul.list-inline {
  margin-bottom: 10px !important;
  float: none !important;
  justify-content: flex-start !important;
}
.slb-main #footer .nav-link { padding: 4px 12px 4px 0 !important; font-size: 13px !important; color: var(--slb-muted) !important; }
.slb-main #footer .nav-link:hover { color: var(--slb-fg) !important; }
.slb-main #footer .copyright {
  font-size: 12px !important; color: var(--slb-faint) !important;
  text-align: left !important; margin: 0 !important;
}
.slb-main #footer .btn {
  background: #121828e6 !important; border: 1px solid #232c44b3 !important;
  color: var(--slb-muted) !important; border-radius: 10px !important;
  font-size: 12.5px !important; padding: 6px 12px !important;
}
.slb-main #footer .list-inline-item { margin-right: 8px; }

/* Le contenu principal respire et ne colle plus au bord de la sidebar */
.slb-main #main-body > .container,
.slb-main .master-breadcrumb .container {
  padding-left: 24px !important; padding-right: 24px !important;
}
.slb-main { padding-bottom: 8px; }

/* ==========================================================================
   BOUTIQUE (standard_cart) — structure reelle :
   .product > header + .product-desc > ul > li + footer > (.product-pricing + a.btn)
   ========================================================================== */
/* La grille va sur la RANGEE (qui contient les colonnes), surtout pas sur
   .products : il n a qu un seul enfant, la rangee serait enfermee dans une
   colonne de 290px et tout le contenu ecrase dedans. */
.products { display: block !important; }
#products .row, .products .row, .row-eq-height {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
  gap: 16px !important; margin: 0 !important; align-items: stretch;
}
#products .row > [class*="col-"], .products .row > [class*="col-"] {
  width: auto !important; max-width: none !important; flex: none !important;
  padding: 0 !important; margin: 0 !important; float: none !important;
}

.product.clearfix, .product {
  display: flex !important; flex-direction: column !important;
  float: none !important; width: auto !important; height: 100%; margin: 0 !important;
  background-color: #121828e6 !important;
  border: 1px solid #232c44b3 !important;
  border-radius: 1rem !important; overflow: hidden; padding: 0 !important;
  transition: border-color .15s ease, transform .15s ease;
}
.product:hover { border-color: #3b82f680 !important; transform: translateY(-1px); }

.product > header {
  padding: 15px 18px !important; margin: 0 !important;
  border-bottom: 1px solid #232c4499 !important; background: transparent !important;
}
.product > header span {
  font-size: 15px !important; font-weight: 600 !important; color: var(--slb-fg) !important;
}

/* Liste de specs : surtout PAS de flex sur le li, sinon le <span> et le texte
   qui le suit deviennent deux elements separes et le texte part a la ligne. */
.product .product-desc { flex: 1; padding: 14px 18px !important; }
.product-desc ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.product-desc ul li {
  display: block !important; position: relative;
  padding: 5px 0 5px 21px !important; margin: 0 !important;
  font-size: 12.5px !important; line-height: 1.5 !important;
  color: var(--slb-muted) !important; border: 0 !important;
}
.product-desc ul li::before {
  content: "" !important; position: absolute; left: 3px; top: 10px;
  width: 5px; height: 9px;
  border: solid var(--slb-primary); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.product-desc .feature-value { color: var(--slb-fg) !important; font-weight: 600 !important; }

/* Le pied contient le prix ET le bouton : bloc pleine largeur, pas de flottant */
.product > footer {
  display: block !important; width: auto !important; float: none !important;
  padding: 0 18px 18px !important; margin: 0 !important;
  background: transparent !important; border: 0 !important;
}
.product > footer .product-pricing,
.product .product-pricing {
  display: block !important; float: none !important;
  width: auto !important; min-width: 0 !important; max-width: none !important;
  margin: 0 0 12px !important; padding: 15px 12px !important;
  border: 1px solid #3b82f640 !important; border-radius: 13px !important;
  background: linear-gradient(to bottom right, #3b82f61f, #3b82f608) !important;
  text-align: center !important;
  font-size: 12.5px !important; color: var(--slb-muted) !important;
}
.product .product-pricing .price {
  display: block !important; float: none !important;
  font-size: 24px !important; font-weight: 800 !important;
  color: var(--slb-fg) !important; line-height: 1.15 !important;
  letter-spacing: -.02em; margin-bottom: 2px;
}
.product .product-pricing br { display: none !important; }

#order-standard_cart .products .product footer .btn-success,
.product > footer .btn, .product .btn-order-now, a.btn-order-now {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  width: 100% !important; float: none !important;
  background: linear-gradient(120deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%) !important;
  border: 1px solid #2563eb !important; color: #fff !important;
  border-radius: 10px !important; padding: 11px 16px !important;
  font-weight: 600 !important; font-size: 13.5px !important;
  box-shadow: 0 6px 18px rgba(59,130,246,.3) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
#order-standard_cart .products .product footer .btn-success:hover,
.product > footer .btn:hover, .product .btn-order-now:hover {
  background: #2563eb !important; transform: translateY(-1px);
}

/* ==========================================================================
   CORRECTIFS 4 — champs du register (.field), telephone, facture
   ========================================================================== */

/* --- Les formulaires WHMCS utilisent class="field", pas form-control --- */
.slb-auth-shell input.field,
.slb-auth-shell select.field,
.slb-auth-shell textarea.field,
input.field, select.field, textarea.field {
  background-color: #0a0e1a !important;
  border: 1px solid #232c44b3 !important;
  color: var(--slb-fg) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  height: auto !important;
  width: 100%;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
input.field::placeholder, textarea.field::placeholder { color: var(--slb-faint) !important; }
input.field:focus, select.field:focus, textarea.field:focus {
  border-color: var(--slb-primary) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25) !important;
  outline: 0 !important;
}
select.field { appearance: none; -webkit-appearance: none; padding-right: 34px !important; }

/* --- Telephone (intl-tel-input) : le drapeau est en position absolue,
       il faut LUI LAISSER la place a gauche au lieu d ecraser le padding --- */
.iti, .intl-tel-input { width: 100% !important; display: block !important; position: relative; }
.iti input, .intl-tel-input input,
input[type="tel"].field, #inputPhone {
  padding-left: 52px !important;
}
.iti__flag-container, .intl-tel-input .flag-container {
  z-index: 3;
}
.iti__selected-flag, .intl-tel-input .selected-flag {
  background: transparent !important;
  border-right: 1px solid #232c4466 !important;
  padding: 0 8px 0 12px !important;
  border-radius: 10px 0 0 10px;
}
.iti__country-list, .intl-tel-input .country-list {
  background: #121828f2 !important; border: 1px solid #232c44b3 !important;
  border-radius: 12px !important; color: var(--slb-fg) !important;
  box-shadow: 0 10px 30px #04081859 !important;
}
.iti__country:hover, .intl-tel-input .country:hover { background: #3b82f61a !important; }
.iti__country.iti__highlight, .intl-tel-input .country.highlight { background: #3b82f626 !important; }
.iti__dial-code, .intl-tel-input .dial-code { color: var(--slb-faint) !important; }

/* --- Facture : les boutons flottants sortaient du cadre (aucun clearfix) --- */
.invoice-container { overflow: hidden !important; }
.invoice-container .invoice-header,
.invoice-container .row { display: flow-root; }
.invoice-container .btn-group.float-right,
.invoice-container .float-right {
  float: none !important;
  display: inline-flex !important; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.invoice-container .btn-group .btn, .invoice-container .btn {
  background: #121828e6 !important; border: 1px solid #232c44b3 !important;
  color: var(--slb-muted) !important; border-radius: 10px !important;
  padding: 8px 14px !important; font-size: 13px !important;
  box-shadow: none !important;
}
.invoice-container .btn:hover { border-color: var(--slb-primary) !important; color: var(--slb-fg) !important; }
.invoice-container .btn-success, .invoice-container .payment-btn-container .btn {
  background: linear-gradient(120deg,#3b82f6 0%,#2563eb 60%,#1d4ed8 100%) !important;
  border-color: #2563eb !important; color: #fff !important;
}
.invoice-container .custom-select { max-width: 260px; }

/* ==========================================================================
   CORRECTIFS 5 — panier / commande, chevrons de repli, classes legacy
   ========================================================================== */

/* Bouton de validation de commande */
.btn-checkout, .btn.btn-checkout, a.btn-checkout {
  background: linear-gradient(120deg,#3b82f6 0%,#2563eb 60%,#1d4ed8 100%) !important;
  border: 1px solid #2563eb !important; color: #fff !important;
  border-radius: 10px !important; padding: 12px 22px !important;
  font-weight: 600 !important; font-size: 14.5px !important;
  box-shadow: 0 6px 18px rgba(59,130,246,.3) !important;
}
.btn-checkout:hover:not(.disabled):not(:disabled) {
  background: #2563eb !important; transform: translateY(-1px);
}
.btn-checkout.disabled, .btn-checkout:disabled,
.btn.disabled, .btn:disabled {
  background: #1b244099 !important; background-image: none !important;
  border-color: #232c44b3 !important; color: var(--slb-faint) !important;
  box-shadow: none !important; opacity: 1 !important; cursor: not-allowed;
}

/* Chevrons de repli des panneaux */
.card-minimise, .panel-minimise {
  color: var(--slb-faint) !important; cursor: pointer;
  transition: color .15s ease, transform .2s ease;
}
.card-minimise:hover, .panel-minimise:hover { color: var(--slb-primary-light) !important; }

/* Classes legacy Bootstrap 3 : neutralisees dans mes conteneurs flex/grille
   pour eviter les elements qui sortent du cadre */
.slb-card .pull-right, .slb-card .pull-left,
.slb-auth-card .pull-right, .slb-auth-card .pull-left,
.slb-stat .pull-right, .slb-stat .pull-left { float: none !important; }

/* Recapitulatif de commande : lignes libelle / valeur alignees */
#order-standard_cart .col-4, .cart-summary .col-4 { padding: 4px 8px !important; }
.panel.card.panel-default, .panel-default {
  background-color: #121828e6 !important; border: 1px solid #232c44b3 !important;
  border-radius: 1rem !important;
}
.panel-heading.card-header {
  background: transparent !important; border-bottom: 1px solid #232c4499 !important;
  border-radius: 1rem 1rem 0 0 !important;
}

/* Tout bloc flottant dans une carte doit rester dans le cadre */
.slb-card, .slb-auth-card, .card, .panel { overflow-wrap: break-word; }
.card::after, .panel::after, .invoice-container::after {
  content: ""; display: block; clear: both;
}

/* ==========================================================================
   CORRECTIF 6 — register : le motif WHMCS "prepend-icon" place un
   <label class="field-icon"> PAR-DESSUS le champ, la place lui etant
   reservee par le padding natif que j ecrasais. L app n a pas d icones
   dans les champs : on les retire et on rend le padding normal.
   ========================================================================== */
.slb-auth-shell .prepend-icon > .field-icon,
.slb-auth-shell label.field-icon { display: none !important; }

.slb-auth-shell .prepend-icon > .field,
.slb-auth-shell .prepend-icon > .form-control,
.slb-auth-shell .prepend-icon input,
.slb-auth-shell .prepend-icon select,
.slb-auth-shell .prepend-icon textarea {
  padding-left: 14px !important;
}

/* Le telephone garde le drapeau + l indicatif injectes par intl-tel-input :
   il faut leur laisser la place, sinon "+33" chevauche le texte. */
.slb-auth-shell .iti--separate-dial-code input,
.slb-auth-shell .iti input[type="tel"],
.slb-auth-shell input[type="tel"],
.slb-auth-shell #inputPhone {
  padding-left: 88px !important;
}
.slb-auth-shell .iti { display: block !important; width: 100% !important; }
.slb-auth-shell .iti__selected-flag { padding-left: 12px !important; }

/* Les selects gardent la place de leur chevron a droite */
.slb-auth-shell select.field, .slb-auth-shell select.form-control {
  padding-right: 36px !important;
  background-image: none !important;
}

/* ==========================================================================
   CORRECTIF 7 — telephone sur TOUTES les pages (pas seulement l ecran auth)
   + colonne laterale vide qui mangeait un tiers de la largeur
   ========================================================================== */

/* --- Telephone : intl-tel-input injecte drapeau + indicatif en absolu.
       Regle globale cette fois, la precedente etait scopee a .slb-auth-shell. --- */
.iti, .intl-tel-input { display: block !important; width: 100% !important; position: relative; }
input[type="tel"],
#inputPhone,
.iti input,
.intl-tel-input input,
input[name="phonenumber"] {
  padding-left: 88px !important;
}
.iti__selected-flag, .intl-tel-input .selected-flag {
  padding-left: 12px !important;
  border-right: 1px solid #232c4466 !important;
  background: transparent !important;
}
.iti-flag { flex: none; }

/* --- Colonne laterale vide : on la masque et le contenu prend toute
       la largeur. Cible uniquement les colonnes SANS carte ni panneau. --- */
.slb-main #main-body .row > [class*="col-lg-4"]:not(:has(.card)):not(:has(.panel)):not(:has(.list-group)) {
  display: none !important;
}
.slb-main #main-body .row:has(> [class*="col-lg-4"]:not(:has(.card)):not(:has(.panel)):not(:has(.list-group))) > .primary-content {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* NE PAS neutraliser .float-md-left / .float-md-right : le formulaire de
   details de WHMCS s en sert pour ses deux colonnes. Les supprimer empile
   les colonnes a 50 % dans la moitie droite et laisse la gauche vide. */