/**
 * FiveHeberg WHMCS — styles espace client (complète fiveheberg.css vitrine)
 */
.fh-whmcs {
  --primary: var(--fh-accent);
  --blue: var(--fh-accent);
}

/* WHMCS / Twenty-One — theme.min.css non chargé */
.fh-whmcs .w-hidden {
  display: none !important;
}

.fh-whmcs .primary-bg-color,
.fh-whmcs .header {
  background: transparent !important;
}

.fh-whmcs #main-body.fh-main-body {
  padding: 2rem 0 3rem;
  min-height: 50vh;
}

.fh-whmcs .fh-breadcrumb {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--fh-border);
  background: rgba(6, 13, 24, 0.6);
}

.fh-whmcs .breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0;
}

.fh-whmcs .breadcrumb-item,
.fh-whmcs .breadcrumb-item a {
  color: var(--fh-muted);
  font-size: 0.875rem;
}

.fh-whmcs .breadcrumb-item.active {
  color: var(--fh-text);
}

.fh-whmcs .breadcrumb-item + .breadcrumb-item::before {
  color: var(--fh-muted);
}

/* Barre espace client (dans .fh-whmcs-chrome — z-index global dans fiveheberg.css) */
.fh-whmcs-bar {
  position: sticky;
  top: 64px;
  z-index: 10051;
  background: var(--fh-bg-elevated);
  border-bottom: 1px solid var(--fh-border);
  font-size: 0.875rem;
  overflow: visible;
}

.fh-whmcs-bar .container {
  overflow: visible;
}

.fh-whmcs-bar a {
  text-decoration: none !important;
}

.fh-whmcs-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  min-height: 44px;
  padding: 0.35rem 0;
  overflow: visible;
}

.fh-whmcs-bar__user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fh-whmcs-bar__notify {
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
  color: var(--fh-text);
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  position: relative;
}

.fh-whmcs-bar__badge {
  background: var(--fh-accent);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  margin-left: 0.15rem;
}

.fh-whmcs-bar__label {
  color: var(--fh-muted);
}

.fh-whmcs-bar__name {
  color: var(--fh-text);
  font-weight: 600;
  text-decoration: none;
}

.fh-whmcs-bar__name:hover {
  color: var(--fh-accent);
}

.fh-whmcs-bar__link {
  color: var(--fh-muted);
  padding: 0.25rem;
}

.fh-whmcs-bar__nav {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem 1rem;
  min-width: 0;
  overflow: visible;
}

.fh-whmcs-bar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem 0.35rem;
  overflow: visible;
}

/* WHMCS navbar.tpl utilise li.d-block / li.dropdown — pas .nav-item */
.fh-whmcs-bar__list > li {
  list-style: none;
  position: relative;
}

.fh-whmcs-bar__list > li.dropdown {
  position: relative;
}

.fh-whmcs-bar__list > li.dropdown.show {
  z-index: 10052;
}

.fh-whmcs-bar__list > li > a,
.fh-whmcs-bar__list > li.dropdown > a.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none !important;
  color: var(--fh-muted) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 0.45rem 0.75rem !important;
  border-radius: 8px;
  border: none;
  background: transparent;
  white-space: nowrap;
  box-shadow: none;
}

.fh-whmcs-bar__list > li > a:hover,
.fh-whmcs-bar__list > li > a:focus,
.fh-whmcs-bar__list > li.dropdown > a.dropdown-toggle:hover,
.fh-whmcs-bar__list > li.dropdown > a.dropdown-toggle:focus {
  color: var(--fh-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  text-decoration: none !important;
}

.fh-whmcs-bar__list > li.dropdown.show > a.dropdown-toggle {
  color: var(--fh-text) !important;
  background: rgba(59, 158, 255, 0.1) !important;
}

.fh-whmcs-bar__list .dropdown-toggle::after {
  margin-left: 0.25rem;
  vertical-align: 0.12em;
  opacity: 0.7;
}

.fh-whmcs-bar__list .dropdown-menu,
.fh-whmcs-bar__list .fh-whmcs-bar__menu {
  position: absolute !important;
  top: 100% !important;
  left: 0;
  right: auto;
  z-index: 10053 !important;
  transform: none !important;
  display: none;
  float: none;
  --bs-dropdown-bg: #122a45;
  --bs-dropdown-border-color: rgba(77, 163, 255, 0.35);
  --bs-dropdown-link-color: #e8f0fc;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: rgba(59, 158, 255, 0.2);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: rgba(59, 158, 255, 0.28);
  background-color: #122a45 !important;
  border: 1px solid rgba(77, 163, 255, 0.35) !important;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  padding: 0.4rem;
  margin-top: 0.35rem;
  min-width: 12rem;
}

.fh-whmcs-bar__list > li.dropdown.show > .dropdown-menu,
.fh-whmcs-bar__list .dropdown-menu.show {
  display: block;
}

.fh-whmcs-bar__list .dropdown-menu.dropdown-menu-right {
  left: auto !important;
  right: 0 !important;
}

/* WHMCS : <li class="dropdown-item"><a class="dropdown-item">…</a></li> */
.fh-whmcs-bar__list .dropdown-menu > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fh-whmcs-bar__list .dropdown-menu > li.dropdown-item {
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: 0;
  color: inherit;
}

.fh-whmcs-bar__list .dropdown-menu .dropdown-item,
.fh-whmcs-bar__list .dropdown-menu > li > a.dropdown-item,
.fh-whmcs-bar__list .dropdown-menu > li.dropdown-item > a {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px;
  color: #e8f0fc !important;
  -webkit-text-fill-color: #e8f0fc;
  text-decoration: none !important;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  background: transparent !important;
  border: 0;
  opacity: 1 !important;
}

.fh-whmcs-bar__list .dropdown-menu .dropdown-item:hover,
.fh-whmcs-bar__list .dropdown-menu .dropdown-item:focus,
.fh-whmcs-bar__list .dropdown-menu > li > a.dropdown-item:hover,
.fh-whmcs-bar__list .dropdown-menu > li.dropdown-item > a:hover {
  background: rgba(59, 158, 255, 0.2) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  text-decoration: none !important;
}

.fh-whmcs-bar__list .dropdown-menu .dropdown-item.active,
.fh-whmcs-bar__list .dropdown-menu .dropdown-item:active,
.fh-whmcs-bar__list .dropdown-menu > li > a.dropdown-item.active {
  background: rgba(59, 158, 255, 0.28) !important;
  color: #fff !important;
}

.fh-whmcs-bar__list .dropdown-divider {
  border-color: rgba(77, 163, 255, 0.22);
  margin: 0.25rem 0;
}

/* Menu portail (déplacé dans body au clic — au-dessus du contenu) */
.dropdown-menu.fh-whmcs-bar__menu--portal,
ul.dropdown-menu.fh-whmcs-bar__menu--portal {
  position: fixed !important;
  z-index: 10150 !important;
  transform: none !important;
  float: none;
  --bs-dropdown-bg: #122a45;
  --bs-dropdown-color: #e8f0fc;
  --bs-dropdown-link-color: #e8f0fc;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: rgba(59, 158, 255, 0.2);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: rgba(59, 158, 255, 0.28);
  background-color: #122a45 !important;
  border: 1px solid rgba(77, 163, 255, 0.35) !important;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  padding: 0.4rem;
  min-width: 12rem;
}

.dropdown-menu.fh-whmcs-bar__menu--portal > li.dropdown-item {
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: 0;
}

.dropdown-menu.fh-whmcs-bar__menu--portal .dropdown-item,
.dropdown-menu.fh-whmcs-bar__menu--portal > li > a.dropdown-item,
.dropdown-menu.fh-whmcs-bar__menu--portal > li.dropdown-item > a {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem !important;
  border-radius: 8px;
  color: #e8f0fc !important;
  text-decoration: none !important;
  font-size: 0.8125rem;
  font-weight: 500;
  background: transparent !important;
  border: 0;
}

.dropdown-menu.fh-whmcs-bar__menu--portal .dropdown-item:hover,
.dropdown-menu.fh-whmcs-bar__menu--portal > li > a.dropdown-item:hover {
  background: rgba(59, 158, 255, 0.2) !important;
  color: #fff !important;
}

.fh-nav__cart {
  position: relative;
}

.fh-nav__cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  background: var(--fh-accent);
  color: #fff;
  border-radius: 999px;
}

/* Cartes & panels WHMCS */
.fh-whmcs .card,
.fh-whmcs .panel,
.fh-whmcs .panel-default > .panel-heading {
  background: var(--fh-bg-elevated);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius);
  color: var(--fh-text);
}

.fh-whmcs .card-header,
.fh-whmcs .panel-heading {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--fh-border);
  color: var(--fh-text);
}

.fh-whmcs .card-footer,
.fh-whmcs .panel-footer {
  background: transparent;
  border-top: 1px solid var(--fh-border);
}

.fh-whmcs .fh-sidebar .card,
.fh-whmcs .fh-sidebar .card-sidebar {
  background: var(--fh-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--fh-radius);
  color: var(--fh-text);
  margin-bottom: 1rem;
  overflow: hidden;
}

/* Page ticket : espacement via flex gap (pas de double marge mb-3) */
.fh-whmcs .fh-sidebar.fh-sidebar--viewticket > .card.card-sidebar {
  margin-bottom: 0;
}

.fh-whmcs .fh-sidebar .card-sidebar .card-header {
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.fh-whmcs .fh-sidebar .card-sidebar .card-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fh-text);
}

.fh-whmcs .fh-sidebar .card-sidebar .card-title > i:first-child {
  color: var(--fh-accent);
  opacity: 0.9;
}

.fh-whmcs .fh-sidebar .card-minimise {
  color: var(--fh-muted) !important;
  font-size: 0.7rem;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.fh-whmcs .fh-sidebar .card-sidebar .card-body {
  padding: 0.85rem 1rem;
  color: var(--fh-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.fh-whmcs .fh-sidebar .card-sidebar .card-footer {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.fh-whmcs .fh-sidebar .list-group {
  border: 0;
  border-radius: 0;
}

.fh-whmcs .fh-sidebar .list-group-item,
.fh-whmcs .fh-sidebar .list-group-item-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  margin: 0;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
  color: var(--fh-text) !important;
  text-decoration: none !important;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.fh-whmcs .fh-sidebar .list-group-item:last-child,
.fh-whmcs .fh-sidebar .list-group-item-action:last-child {
  border-bottom: 0 !important;
}

.fh-whmcs .fh-sidebar .list-group-item-action:hover,
.fh-whmcs .fh-sidebar .list-group-item-action:focus,
.fh-whmcs .fh-sidebar .list-group-item.active {
  background: rgba(59, 158, 255, 0.08) !important;
  color: var(--fh-accent) !important;
  text-decoration: none !important;
}

.fh-whmcs .fh-sidebar .list-group-item-action i,
.fh-whmcs .fh-sidebar .list-group-item i {
  color: var(--fh-muted);
  width: 1.15rem;
  text-align: center;
  flex-shrink: 0;
}

.fh-whmcs .fh-sidebar .list-group-item-action:hover i,
.fh-whmcs .fh-sidebar .list-group-item-action.active i {
  color: var(--fh-accent);
}

.fh-whmcs .fh-sidebar .card-body .btn,
.fh-whmcs .fh-sidebar .card-footer .btn,
.fh-whmcs .fh-sidebar .card-body a.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  border-radius: 8px;
  text-decoration: none !important;
  background: rgba(59, 158, 255, 0.12) !important;
  border: 1px solid rgba(59, 158, 255, 0.3) !important;
  color: var(--fh-accent) !important;
  box-shadow: none;
}

.fh-whmcs .fh-sidebar .card-body .btn:hover,
.fh-whmcs .fh-sidebar .card-footer .btn:hover,
.fh-whmcs .fh-sidebar .card-body a.btn:hover {
  background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.fh-whmcs .form-control,
.fh-whmcs .form-select {
  background-color: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid var(--fh-border);
  color: var(--fh-text) !important;
  -webkit-text-fill-color: var(--fh-text);
  border-radius: 10px;
}

.fh-whmcs .form-select {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.65rem center !important;
  background-size: 12px !important;
}

.fh-whmcs .form-control:focus,
.fh-whmcs .form-select:focus {
  background-color: rgba(0, 0, 0, 0.38) !important;
  border-color: var(--fh-accent);
  color: var(--fh-text) !important;
  -webkit-text-fill-color: var(--fh-text);
  box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.2);
}

.fh-whmcs select option {
  background-color: var(--fh-bg-elevated);
  color: var(--fh-text);
}

.fh-whmcs .input-group-text {
  background: var(--fh-surface);
  border-color: var(--fh-border);
  color: var(--fh-muted);
}

.fh-whmcs label,
.fh-whmcs .form-control-label {
  color: var(--fh-muted);
}

.fh-whmcs .btn-primary {
  background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-2));
  border: none;
  border-radius: 10px;
  font-weight: 600;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

.fh-whmcs .btn-primary:hover,
.fh-whmcs .btn-primary:focus {
  filter: brightness(1.08);
  color: #fff !important;
}

.fh-whmcs .btn-default,
.fh-whmcs .btn-secondary {
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
  color: var(--fh-text);
  border-radius: 10px;
}

.fh-whmcs .btn-default:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fh-text);
}

.fh-whmcs .table {
  color: var(--fh-text);
}

.fh-whmcs .table thead th {
  border-color: var(--fh-border);
  color: var(--fh-muted);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fh-whmcs .table td,
.fh-whmcs .table th {
  border-color: var(--fh-border);
}

.fh-whmcs .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02);
}

.fh-whmcs .text-muted {
  color: var(--fh-muted) !important;
}

.fh-whmcs .alert {
  border-radius: var(--fh-radius);
  border-width: 1px;
}

.fh-whmcs .alert-info {
  background: rgba(59, 158, 255, 0.12);
  border-color: var(--fh-border);
  color: var(--fh-text);
}

.fh-whmcs .alert-success {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.35);
  color: var(--fh-success);
}

.fh-whmcs .alert-warning {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fbbf24;
}

.fh-whmcs .alert-danger {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.35);
  color: #f87171;
}

.fh-whmcs .modal-content {
  background: var(--fh-bg-elevated);
  border: 1px solid var(--fh-border);
  color: var(--fh-text);
}

/* Modales WHMCS — au-dessus du header vitrine (portail JS → body) */
.fh-whmcs .modal,
body.fh-whmcs > .modal,
body.fh-whmcs .modal.show {
  z-index: 10160 !important;
  pointer-events: auto !important;
}

.fh-whmcs .modal-dialog {
  pointer-events: auto !important;
}

.fh-whmcs .modal-backdrop,
body.fh-whmcs > .modal-backdrop,
body.fh-whmcs .modal-backdrop.show {
  z-index: 10155 !important;
  background-color: rgba(4, 10, 20, 0.78) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.fh-whmcs.modal-open .fh-whmcs-chrome {
  z-index: 10050 !important;
}

/* Ne pas piéger les modales dans #main-body (sinon backdrop bloque les clics) */
body.fh-whmcs.modal-open #main-body {
  z-index: auto !important;
}

body.fh-whmcs > #fullpage-overlay {
  z-index: 1090 !important;
}

.fh-whmcs .modal-header,
.fh-whmcs .modal-footer {
  border-color: var(--fh-border);
}

/* Modale génération mot de passe */
.fh-whmcs #modalGeneratePassword .modal-dialog {
  max-width: 520px;
}

.fh-whmcs #modalGeneratePassword .fh-modal-pw {
  border-radius: var(--fh-radius);
  overflow: hidden;
  box-shadow: var(--fh-shadow);
  border: 1px solid var(--fh-border);
}

.fh-whmcs #modalGeneratePassword .fh-modal__header {
  background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-2));
  border: none;
  padding: 1rem 1.25rem;
  align-items: center;
}

.fh-whmcs #modalGeneratePassword .fh-modal__header .modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
}

.fh-whmcs #modalGeneratePassword .fh-modal__header .modal-title i {
  opacity: 0.9;
  font-size: 0.95rem;
}

.fh-whmcs #modalGeneratePassword .fh-modal__close {
  color: #fff;
  opacity: 0.88;
  text-shadow: none;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0.25rem;
  margin: 0 0 0 0.5rem;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 6px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.fh-whmcs #modalGeneratePassword .fh-modal__close:hover,
.fh-whmcs #modalGeneratePassword .fh-modal__close:focus {
  opacity: 1;
  color: #fff;
  background: transparent !important;
  transform: scale(1.06);
  outline: none;
}

.fh-whmcs #modalGeneratePassword .fh-modal__body {
  padding: 1.35rem 1.5rem 1.1rem;
}

.fh-whmcs #modalGeneratePassword .form-group.row {
  margin-bottom: 1rem;
}

.fh-whmcs #modalGeneratePassword .col-form-label {
  color: var(--fh-muted);
  font-size: 0.875rem;
  padding-top: 0;
  padding-bottom: 0;
}

.fh-whmcs #modalGeneratePassword .form-control {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--fh-border);
  color: var(--fh-text);
  border-radius: 10px;
  min-height: 42px;
  font-size: 0.9375rem;
}

.fh-whmcs #modalGeneratePassword .form-control:focus {
  border-color: var(--fh-accent);
  box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.18);
  background: rgba(0, 0, 0, 0.38);
}

.fh-whmcs #modalGeneratePassword .fh-modal-pw__output {
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  letter-spacing: 0.02em;
}

.fh-whmcs #modalGeneratePassword .fh-modal-pw__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.fh-whmcs #modalGeneratePassword .fh-modal-pw__actions .btn-default {
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
  color: var(--fh-text);
  border-radius: 10px;
  font-size: 0.8125rem;
  padding: 0.45rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.fh-whmcs #modalGeneratePassword .fh-modal-pw__actions .btn-default:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--fh-accent);
  color: var(--fh-text);
}

.fh-whmcs #modalGeneratePassword .fh-modal__footer {
  padding: 1rem 1.25rem;
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid var(--fh-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  align-items: center;
  gap: 0.6rem;
}

.fh-whmcs #modalGeneratePassword .fh-modal__footer .fh-modal__btn-secondary,
.fh-whmcs #modalGeneratePassword .fh-modal__footer .fh-modal__btn-primary {
  min-height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.fh-whmcs #modalGeneratePassword .fh-modal__footer .fh-modal__btn-secondary {
  flex: 0 1 auto;
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
  color: var(--fh-text);
  padding: 0.55rem 1.1rem;
}

.fh-whmcs #modalGeneratePassword .fh-modal__footer .fh-modal__btn-primary {
  flex: 1 1 auto;
  background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-2));
  border: none;
  color: #fff;
  padding: 0.55rem 1rem;
  max-width: none;
}

.fh-whmcs #modalGeneratePassword .fh-modal__footer .fh-modal__btn-primary i {
  font-size: 0.9rem;
  opacity: 0.95;
}

@media (max-width: 479.98px) {
  .fh-whmcs #modalGeneratePassword .fh-modal__footer .fh-modal__btn-secondary,
  .fh-whmcs #modalGeneratePassword .fh-modal__footer .fh-modal__btn-primary {
    flex: 1 1 100%;
    width: 100%;
  }
}

.fh-whmcs #modalGeneratePassword #generatePwLengthError.w-hidden {
  display: none !important;
}

.fh-whmcs .modal-localisation .modal-content {
  background: var(--fh-bg);
}

.fh-whmcs .item-selector .item {
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
  color: var(--fh-text);
  border-radius: 10px;
}

.fh-whmcs .item-selector .item.active,
.fh-whmcs .item-selector .item:hover {
  border-color: var(--fh-accent);
  color: var(--fh-accent);
}

.fh-whmcs .login-form .card {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.fh-whmcs .login-form .card-body {
  padding: 2rem 2.5rem;
}

.fh-whmcs .login-form .h3,
.fh-whmcs .login-form h6.h3 {
  color: var(--fh-text);
  font-weight: 700;
}

.fh-whmcs .domain-pricing .tld-row,
.fh-whmcs #order-standard_cart {
  color: var(--fh-text);
}

.fh-whmcs .btn-return-to-admin {
  background: #dc3545;
  border-radius: 8px;
  z-index: 1100;
}

.fh-footer__locale {
  color: var(--fh-muted) !important;
  font-size: 0.8125rem;
  padding: 0;
  margin-left: 1rem;
}

.fh-whmcs .dataTables_wrapper .dataTables_filter input,
.fh-whmcs .dataTables_wrapper .dataTables_length select {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--fh-border);
  color: var(--fh-text);
}

.fh-whmcs .pagination .page-link {
  background: var(--fh-surface);
  border-color: var(--fh-border);
  color: var(--fh-text);
}

.fh-whmcs .pagination .page-item.active .page-link {
  background: var(--fh-accent);
  border-color: var(--fh-accent);
}

.fh-whmcs h1,
.fh-whmcs h2,
.fh-whmcs h3,
.fh-whmcs h4,
.fh-whmcs .h1,
.fh-whmcs .h2,
.fh-whmcs .h3 {
  color: var(--fh-text);
}

.fh-whmcs a:not(.fh-btn):not(.fh-nav__link):not(.fh-dropdown__link):not(.fh-footer__links a):not(.dropdown-item):not(.fh-whmcs-bar__name):not(.fh-dashboard-card__action) {
  color: var(--fh-accent);
}

.fh-whmcs .ticket-reply {
  background: var(--fh-bg-elevated);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius);
}

/* Page magasin / homepage WHMCS */
.fh-whmcs--store #main-body.fh-main-body {
  padding-top: 0;
}

.fh-store-hero {
  padding: 2.5rem 0 1.5rem;
  text-align: center;
}

.fh-store-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: var(--fh-text);
}

.fh-store-hero__lead {
  color: var(--fh-muted);
  max-width: 540px;
  margin: 0 auto;
}

.fh-store-grid {
  padding-bottom: 2.5rem;
}

.fh-store-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.fh-store-card:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 158, 255, 0.45);
  box-shadow: var(--fh-shadow);
}

.fh-store-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.75rem;
  height: 100%;
}

.fh-store-card__tagline {
  color: var(--fh-muted);
  margin: 0;
  flex: 1;
}

.fh-store-card .fh-card__name {
  margin: 0;
  font-size: 1.35rem;
}

.fh-store-card .fh-card__cta {
  margin-top: auto;
}

.fh-store-help,
.fh-store-account {
  padding: 2rem 0 2.5rem;
}

.fh-store-help__title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--fh-text);
}

.fh-store-help__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0.75rem;
  text-align: center;
  text-decoration: none !important;
  color: var(--fh-text) !important;
  background: var(--fh-bg-elevated);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius);
  height: 100%;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.fh-store-help__link i {
  font-size: 1.35rem;
  color: var(--fh-accent);
}

.fh-store-help__link span {
  font-size: 0.8125rem;
  line-height: 1.3;
}

.fh-store-help__link:hover {
  background: var(--fh-surface);
  border-color: rgba(59, 158, 255, 0.4);
  color: var(--fh-text) !important;
}

.fh-store-account {
  border-top: 1px solid var(--fh-border);
}

/* Login / register */
.fh-whmcs--auth #main-body.fh-main-body {
  padding: 2rem 0 1rem;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 64px - 80px);
}

.fh-whmcs--auth .primary-content {
  width: 100%;
}

.fh-login {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.fh-login__card {
  background: var(--fh-bg-elevated);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius);
  padding: 2rem 2rem 1.75rem;
  box-shadow: var(--fh-shadow);
}

.fh-login__logo {
  margin-bottom: 1rem;
}

.fh-login__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--fh-text);
  margin: 0 0 0.35rem;
}

.fh-login__subtitle {
  color: var(--fh-muted);
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}

.fh-login__forgot {
  font-size: 0.8125rem;
  color: var(--fh-accent) !important;
  text-decoration: none;
}

.fh-login__forgot:hover {
  text-decoration: underline;
}

.fh-login__remember {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--fh-muted);
  font-size: 0.875rem;
}

.fh-login__submit {
  min-width: 130px;
}

.fh-login__register {
  padding-top: 1.25rem;
  border-top: 1px solid var(--fh-border);
  color: var(--fh-muted);
  font-size: 0.875rem;
}

.fh-login__register a {
  color: var(--fh-accent) !important;
  font-weight: 600;
  margin-left: 0.25rem;
}

.fh-whmcs--auth .form-label {
  color: var(--fh-muted);
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

.fh-whmcs--auth .input-group-text,
.fh-whmcs--auth .input-group .btn {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--fh-border);
  color: var(--fh-muted);
}

.fh-whmcs--auth .form-control {
  background: rgba(0, 0, 0, 0.28);
  border-color: var(--fh-border);
  color: var(--fh-text);
}

.fh-whmcs--auth .form-control::placeholder {
  color: rgba(143, 163, 190, 0.65);
}

.fh-whmcs--auth .form-control:focus {
  background: rgba(0, 0, 0, 0.38);
  border-color: var(--fh-accent);
  color: var(--fh-text);
  box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.18);
}

.fh-whmcs--auth .social-signin-btns {
  margin-top: 1.25rem;
}

.fh-whmcs--auth .primary-content > p[style*="text-align"],
.fh-whmcs--auth .primary-content > p:has(a[href*="whmcs.com"]),
.fh-whmcs--auth a[href*="www.whmcs.com"],
.fh-whmcs--register .primary-content > p[style*="text-align"],
.fh-whmcs--register a[href*="www.whmcs.com"] {
  display: none !important;
}

/* Inscription WHMCS */
.fh-whmcs--register #main-body.fh-main-body {
  padding: 2rem 0 3rem;
  min-height: auto;
  display: block;
}

.fh-whmcs--register #registration {
  max-width: 920px;
  margin: 0 auto;
  padding-bottom: 1rem;
}

.fh-whmcs--register #registration .card-title {
  color: var(--fh-text);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.fh-whmcs--register #registration .form-group {
  margin-bottom: 1rem;
}

.fh-whmcs--register #registration .prepend-icon {
  position: relative;
  display: block;
  width: 100%;
}

.fh-whmcs--register #registration .prepend-icon .field-icon {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  pointer-events: none;
  color: var(--fh-muted);
}

.fh-whmcs--register #registration .field,
.fh-whmcs--register #registration .form-control,
.fh-whmcs--register #registration select.field,
.fh-whmcs--register #registration input[type="text"],
.fh-whmcs--register #registration input[type="email"],
.fh-whmcs--register #registration input[type="tel"],
.fh-whmcs--register #registration input[type="password"] {
  width: 100%;
  min-height: 42px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fh-border);
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.28) !important;
  color: var(--fh-text) !important;
  -webkit-text-fill-color: var(--fh-text);
  font-size: 0.9375rem;
  appearance: none;
}

.fh-whmcs--register #registration .prepend-icon .field,
.fh-whmcs--register #registration .prepend-icon .form-control,
.fh-whmcs--register #registration .prepend-icon select.field {
  padding-left: 42px;
}

/* Autofill navigateur (email / mot de passe) */
.fh-whmcs--register #registration input:-webkit-autofill,
.fh-whmcs--register #registration input:-webkit-autofill:hover,
.fh-whmcs--register #registration input:-webkit-autofill:focus,
.fh-whmcs--register #registration input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(8, 18, 32, 0.98) inset !important;
  box-shadow: 0 0 0 1000px rgba(8, 18, 32, 0.98) inset !important;
  -webkit-text-fill-color: var(--fh-text) !important;
  caret-color: var(--fh-text);
  border-color: var(--fh-border) !important;
  transition: background-color 99999s ease-out 0s;
}

.fh-whmcs--register #registration .field:focus,
.fh-whmcs--register #registration .form-control:focus,
.fh-whmcs--register #registration select.field:focus {
  border-color: var(--fh-accent);
  box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.18);
  outline: 0;
  background: rgba(0, 0, 0, 0.38);
}

/* Téléphone (intl-tel-input — pas d’icône prepend) */
.fh-whmcs .fh-phone-field .intl-tel-input {
  display: block;
  width: 100%;
}

.fh-whmcs .fh-phone-field .intl-tel-input input,
.fh-whmcs .fh-phone-field #inputPhone {
  width: 100%;
  min-height: 42px;
  background-color: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid var(--fh-border);
  color: var(--fh-text) !important;
  border-radius: 10px;
}

/* Préfixe pays : largeur au contenu (évite le trou entre +33 et le numéro) */
.fh-whmcs .fh-phone-field .intl-tel-input.separate-dial-code .flag-container {
  width: auto !important;
}

.fh-whmcs .fh-phone-field .intl-tel-input.separate-dial-code.allow-dropdown .selected-flag {
  display: flex !important;
  align-items: center;
  width: auto !important;
  min-width: 0;
  max-width: none;
  padding: 0 0.2rem 0 0.45rem;
  box-sizing: border-box;
  gap: 0.15rem;
  background-color: transparent;
}

.fh-whmcs .fh-phone-field .intl-tel-input.separate-dial-code.allow-dropdown input,
.fh-whmcs .fh-phone-field .intl-tel-input.separate-dial-code.allow-dropdown input[type="tel"],
.fh-whmcs .fh-phone-field .intl-tel-input.separate-dial-code[class*="iti-sdc-"] input[type="tel"] {
  padding-left: var(--fh-phone-pl, 5rem) !important;
}

.fh-whmcs--register #registration .intl-tel-input .country-list {
  z-index: 20;
  background: var(--fh-bg-elevated);
  border: 1px solid var(--fh-border);
  border-radius: 10px;
  box-shadow: var(--fh-shadow);
  max-height: 220px;
  overflow-y: auto;
}

.fh-whmcs--register #registration .intl-tel-input .country-list .country {
  color: var(--fh-text);
  padding: 0.45rem 0.75rem;
}

.fh-whmcs--register #registration .intl-tel-input .country-list .country.highlight,
.fh-whmcs--register #registration .intl-tel-input .country-list .country:hover {
  background: var(--fh-surface);
}

.fh-whmcs--register #registration .intl-tel-input .country-list .dial-code {
  color: var(--fh-muted);
}

.fh-whmcs .fh-phone-field .intl-tel-input.separate-dial-code .selected-flag .iti-flag {
  position: static;
  transform: none;
  flex-shrink: 0;
  margin: 0;
}

.fh-whmcs .fh-phone-field .intl-tel-input.separate-dial-code .selected-dial-code {
  position: static;
  display: block;
  padding: 0 !important;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--fh-muted);
  font-size: 0.9375rem;
}

.fh-whmcs .fh-phone-field .intl-tel-input.separate-dial-code.allow-dropdown .selected-flag .iti-arrow {
  position: static;
  right: auto;
  left: auto;
  flex-shrink: 0;
  margin: 0 0 0 0.05rem;
  align-self: center;
  border-top-color: var(--fh-muted);
}

.fh-whmcs--register #registration .password-strength-meter .progress {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  height: 8px;
}

.fh-whmcs--register #registration .btn-primary,
.fh-whmcs--register #registration input.btn-primary {
  background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-2));
  border: none;
  border-radius: 10px;
  padding: 0.65rem 1.5rem;
  font-weight: 600;
}

.fh-whmcs--register #registration .btn-default,
.fh-whmcs--register #registration .generate-password {
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
  color: var(--fh-text);
  border-radius: 10px;
}

.fh-whmcs--register #registration label.form-check,
.fh-whmcs--register #registration .field-help-text {
  color: var(--fh-muted);
}

.fh-whmcs--register #registration select.field,
.fh-whmcs--register #registration select.form-control {
  background-color: rgba(0, 0, 0, 0.28) !important;
  color: var(--fh-text);
}

.fh-whmcs--register #registration select.field option {
  background: var(--fh-bg-elevated);
  color: var(--fh-text);
}

.fh-whmcs--register #registration label.form-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}

.fh-whmcs--register #registration .form-check-input,
.fh-whmcs--register #registration input.accepttos {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  flex-shrink: 0;
  background-color: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--fh-border);
  cursor: pointer;
  accent-color: var(--fh-accent);
}

.fh-whmcs--register #registration .form-check-input:checked,
.fh-whmcs--register #registration input.accepttos:checked {
  background-color: var(--fh-accent);
  border-color: var(--fh-accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.fh-whmcs--register #registration .form-check-input:focus,
.fh-whmcs--register #registration input.accepttos:focus {
  border-color: var(--fh-accent);
  box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.18);
}

/* Opt-in mailing list — interrupteur natif (sans bootstrap-switch) */
.fh-whmcs .fh-optin {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
  cursor: pointer;
  user-select: none;
}

.fh-whmcs .fh-optin__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fh-whmcs .fh-optin__switch {
  position: relative;
  flex-shrink: 0;
  width: 3.25rem;
  height: 1.75rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--fh-border);
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.fh-whmcs .fh-optin__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(1.75rem - 8px);
  height: calc(1.75rem - 8px);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}

.fh-whmcs .fh-optin__input:checked + .fh-optin__switch {
  background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-2));
  border-color: transparent;
}

.fh-whmcs .fh-optin__input:checked + .fh-optin__switch::after {
  transform: translateX(1.5rem);
}

.fh-whmcs .fh-optin__input:focus-visible + .fh-optin__switch {
  outline: 2px solid var(--fh-accent);
  outline-offset: 2px;
}

.fh-whmcs .fh-optin__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fh-muted);
  min-width: 2rem;
}

.fh-whmcs .fh-optin__state--on {
  display: none;
}

.fh-whmcs .fh-optin__input:checked ~ .fh-optin__label {
  color: var(--fh-text);
}

.fh-whmcs .fh-optin__input:checked ~ .fh-optin__label .fh-optin__state--off {
  display: none;
}

.fh-whmcs .fh-optin__input:checked ~ .fh-optin__label .fh-optin__state--on {
  display: inline;
}

.fh-whmcs--register #registration .password-strength-meter .text-muted,
.fh-whmcs--register #registration #passwordStrengthTextLabel {
  color: var(--fh-muted) !important;
}

.fh-whmcs--register #registration .social-signin-btns {
  margin-bottom: 1rem;
}

.fh-whmcs--register #registration #passwdFeedback.w-hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
}

.fh-whmcs--register #registration .fh-phone-field {
  margin-bottom: 1rem;
}

.fh-whmcs--register #registration .form-group label[for^="customfield"] {
  color: var(--fh-muted);
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

.fh-whmcs--register #registration .fh-state-field #inputStateIcon {
  display: block !important;
}

.fh-whmcs--register #registration .fh-state-field select#stateselect,
.fh-whmcs--register #registration select#stateselect {
  width: 100% !important;
  min-height: 42px;
  padding: 0.5rem 2rem 0.5rem 42px;
  border: 1px solid var(--fh-border);
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.28) !important;
  color: var(--fh-text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 12px;
}

.fh-whmcs--register #registration .prepend-icon select.field,
.fh-whmcs--register #registration .prepend-icon select.form-control,
.fh-whmcs--register #registration #inputCountry {
  appearance: none;
  padding-right: 2rem !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 12px;
}

.fh-whmcs--register #registration .form-group .control select,
.fh-whmcs--register #registration .fh-custom-fields select,
.fh-whmcs--register #registration select[id^="customfield"],
.fh-whmcs--register #registration select[name^="customfield"],
.fh-whmcs--register #registration .fh-custom-fields .form-select,
.fh-whmcs--register #registration .form-group .control input[type="text"],
.fh-whmcs--register #registration .form-group .control textarea {
  width: 100%;
  min-height: 42px;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--fh-border);
  border-radius: 10px;
  appearance: none;
  background-color: rgba(0, 0, 0, 0.28) !important;
  color: var(--fh-text) !important;
  -webkit-text-fill-color: var(--fh-text);
  font-size: 0.9375rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 12px;
}

.fh-whmcs--register #registration .form-group .control input[type="text"],
.fh-whmcs--register #registration .form-group .control textarea {
  padding: 0.5rem 0.75rem;
  background-image: none;
}

.fh-whmcs--register #registration .fh-custom-fields select:focus,
.fh-whmcs--register #registration .form-group .control select:focus {
  border-color: var(--fh-accent);
  box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.18);
  outline: 0;
  background-color: rgba(0, 0, 0, 0.38) !important;
  color: var(--fh-text) !important;
}

.fh-whmcs--register #registration .fh-custom-fields select option,
.fh-whmcs--register #registration .form-group .control select option {
  background: var(--fh-bg-elevated);
  color: var(--fh-text);
}

/* ——— Tableau de bord espace client ——— */
.fh-whmcs--clienthome #main-body.fh-main-body {
  padding-top: 1.5rem;
}

/* Contenu sous la barre WHMCS — z-index 1 (chrome = 10050) */
body.fh-whmcs #main-body.fh-main-body {
  position: relative;
  z-index: 1;
}

.fh-whmcs .tiles {
  margin-bottom: 1.75rem;
}

.fh-whmcs .tiles .row {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

.fh-whmcs .tiles .tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  min-height: 118px;
  padding: 1rem 3.25rem 1rem 1.15rem;
  background: var(--fh-bg-elevated);
  border: 1px solid var(--fh-border);
  border-radius: var(--fh-radius);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fh-whmcs .tiles .tile:hover {
  border-color: rgba(59, 158, 255, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  background: var(--fh-bg-elevated);
}

.fh-whmcs .tiles .tile .stat {
  margin: 0 0 0.15rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fh-text);
}

.fh-whmcs .tiles .tile .title {
  font-weight: 600;
  color: var(--fh-muted);
  text-transform: none;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.fh-whmcs .tiles .tile .highlight {
  display: none;
}

.fh-whmcs .tiles .tile i {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  font-size: 2.25rem;
  line-height: 1;
  color: rgba(59, 158, 255, 0.22);
  transition: color 0.2s ease, transform 0.2s ease;
}

.fh-whmcs .tiles .tile:hover i {
  color: rgba(59, 158, 255, 0.45);
  transform: scale(1.05);
}

.fh-whmcs .tiles a.tile[href*="invoices"] i,
.fh-whmcs .tiles a.tile[href*="invoice"] i {
  color: rgba(251, 191, 36, 0.25);
}

.fh-whmcs .tiles a.tile[href*="invoices"]:hover i,
.fh-whmcs .tiles a.tile[href*="invoice"]:hover i {
  color: rgba(251, 191, 36, 0.42);
}

.fh-whmcs .tiles .row > div > .tile {
  border-right: 0;
  border-bottom: 0;
}

@media (max-width: 1199.98px) {
  .fh-whmcs .tiles div:nth-child(1) > .tile,
  .fh-whmcs .tiles div:nth-child(2) > .tile {
    border-bottom: 0;
  }
}

.fh-whmcs .client-home-cards .card {
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
}

.fh-whmcs .client-home-cards .card-header,
.fh-whmcs .client-home-cards .fh-dashboard-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--fh-border);
  padding: 0.85rem 1rem;
}

.fh-whmcs .client-home-cards .fh-dashboard-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fh-text);
}

.fh-whmcs .client-home-cards .fh-dashboard-card__title-icon {
  color: var(--fh-accent);
  opacity: 0.9;
  flex-shrink: 0;
}

.fh-whmcs .client-home-cards .fh-dashboard-card__title-text {
  line-height: 1.3;
}

.fh-whmcs .client-home-cards .fh-dashboard-card__action,
.fh-whmcs .client-home-cards .card-header .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin: 0;
  color: #fff !important;
  border: none !important;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.45rem 0.8rem;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: none;
}

.fh-whmcs .client-home-cards .fh-dashboard-card__action:hover,
.fh-whmcs .client-home-cards .card-header .btn:hover {
  filter: brightness(1.08);
  color: #fff !important;
  transform: translateY(-1px);
}

.fh-whmcs .client-home-cards .card-body {
  padding: 0;
  max-height: 200px;
  overflow: auto;
  color: var(--fh-text);
}

.fh-whmcs .client-home-cards .card-body p {
  padding: 0.75rem 1rem;
  margin: 0;
  color: var(--fh-muted);
}

.fh-whmcs .client-home-cards .card-footer {
  border-top: 1px solid var(--fh-border);
  color: var(--fh-muted);
  font-size: 0.8125rem;
}

.fh-whmcs .client-home-cards .list-group {
  max-height: 200px;
  overflow: auto;
  border-radius: 0;
  border: 0 !important;
}

.fh-whmcs .client-home-cards .list-group .list-group-item,
.fh-whmcs .client-home-cards .list-group .list-group-item-action {
  padding: 0.55rem 1rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fh-border);
  color: var(--fh-text);
}

.fh-whmcs .client-home-cards .list-group .list-group-item:last-child,
.fh-whmcs .client-home-cards .list-group .list-group-item-action:last-child {
  border-bottom: 0;
}

.fh-whmcs .client-home-cards .list-group .list-group-item-action:hover,
.fh-whmcs .client-home-cards .list-group .list-group-item-action.active {
  background: var(--fh-surface);
  color: var(--fh-accent);
}

.fh-whmcs .client-home-cards small {
  color: var(--fh-muted);
}

.fh-whmcs .bg-color-blue {
  background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-2)) !important;
}

.fh-whmcs .bg-color-green {
  background: linear-gradient(135deg, #34d399, #059669) !important;
}

.fh-whmcs .bg-color-red {
  background: linear-gradient(135deg, #f87171, #dc2626) !important;
}

.fh-whmcs .bg-color-gold {
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
}

.fh-whmcs .card-accent-blue,
.fh-whmcs .card-accent-green,
.fh-whmcs .card-accent-red,
.fh-whmcs .card-accent-gold,
.fh-whmcs .card-accent-orange {
  border-top: 3px solid var(--fh-accent);
}

.fh-whmcs--clienthome .fh-whmcs-bar__nav {
  border-top: 1px solid var(--fh-border);
  padding-top: 0.35rem;
  margin-top: 0.15rem;
  width: 100%;
}

@media (min-width: 992px) {
  .fh-whmcs--clienthome .fh-whmcs-bar__inner {
    flex-wrap: nowrap;
  }

  .fh-whmcs--clienthome .fh-whmcs-bar__nav {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
    width: auto;
  }
}

/* Header compact — espace client connecté */
.fh-header--client-area .fh-nav__container {
  justify-content: space-between;
}

.fh-nav__client-links {
  display: flex;
  align-items: center;
  gap: 0.35rem 1rem;
  margin: 0 auto 0 1.5rem;
}

.fh-nav__client-links .fh-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  color: var(--fh-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}

.fh-nav__client-links .fh-nav__link:hover {
  color: var(--fh-text);
  background: var(--fh-surface);
}

.fh-whmcs--loggedin .fh-sidebar .card,
.fh-whmcs--loggedin .client-home-cards .card,
.fh-whmcs--loggedin .tiles .tile {
  border-color: rgba(255, 255, 255, 0.08);
}

.fh-whmcs .client-home-cards .fh-dashboard-card__action.bg-color-gold,
.fh-whmcs .client-home-cards .card-header .btn.bg-color-gold {
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
}

.fh-whmcs .client-home-cards .fh-dashboard-card__action.bg-color-green,
.fh-whmcs .client-home-cards .card-header .btn.bg-color-green {
  background: linear-gradient(135deg, #34d399, #059669) !important;
}

.fh-whmcs .client-home-cards .fh-dashboard-card__action.bg-color-red,
.fh-whmcs .client-home-cards .card-header .btn.bg-color-red {
  background: linear-gradient(135deg, #f87171, #dc2626) !important;
}

.fh-whmcs .client-home-cards .fh-dashboard-card__action.bg-color-blue,
.fh-whmcs .client-home-cards .card-header .btn.bg-color-blue,
.fh-whmcs .client-home-cards .fh-dashboard-card__action.btn-default:not([class*="bg-color-"]),
.fh-whmcs .client-home-cards .card-header .btn-default:not([class*="bg-color-"]) {
  background: linear-gradient(135deg, var(--fh-accent), var(--fh-accent-2)) !important;
  color: #fff !important;
  border: none !important;
}

.fh-whmcs .client-home-cards .card-body a {
  color: var(--fh-accent);
}

.fh-whmcs .client-home-cards .card-body a:hover {
  color: var(--fh-text);
}

.fh-whmcs .primary-content p:has(a[href*="whmcs.com"]) {
  display: none;
}

.fh-whmcs--loggedin .fh-btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Menus barre WHMCS — thème sombre (portail body ou ancré dans la barre) */
body.fh-whmcs .fh-whmcs-bar .fh-whmcs-bar__menu,
body.fh-whmcs .fh-whmcs-bar ul.dropdown-menu,
body.fh-whmcs .dropdown-menu.fh-whmcs-bar__menu--portal,
body.fh-whmcs ul.dropdown-menu.fh-whmcs-bar__menu--portal {
  --bs-dropdown-bg: #122a45;
  --bs-dropdown-color: #e8f0fc;
  --bs-dropdown-link-color: #e8f0fc;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: rgba(59, 158, 255, 0.2);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: rgba(59, 158, 255, 0.28);
  --bs-dropdown-border-color: rgba(77, 163, 255, 0.35);
  background-color: #122a45 !important;
  color: #e8f0fc !important;
  border: 1px solid rgba(77, 163, 255, 0.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
  padding: 0.4rem !important;
  min-width: 12rem;
}

body.fh-whmcs .fh-whmcs-bar .fh-whmcs-bar__menu .dropdown-item,
body.fh-whmcs .fh-whmcs-bar ul.dropdown-menu .dropdown-item,
body.fh-whmcs .dropdown-menu.fh-whmcs-bar__menu--portal .dropdown-item,
body.fh-whmcs .dropdown-menu.fh-whmcs-bar__menu--portal > li > a.dropdown-item,
body.fh-whmcs .dropdown-menu.fh-whmcs-bar__menu--portal > li.dropdown-item > a {
  color: #e8f0fc !important;
  background: transparent !important;
}

body.fh-whmcs .fh-whmcs-bar .fh-whmcs-bar__menu .dropdown-item:hover,
body.fh-whmcs .fh-whmcs-bar ul.dropdown-menu .dropdown-item:hover,
body.fh-whmcs .dropdown-menu.fh-whmcs-bar__menu--portal .dropdown-item:hover,
body.fh-whmcs .dropdown-menu.fh-whmcs-bar__menu--portal > li > a.dropdown-item:hover {
  background: rgba(59, 158, 255, 0.2) !important;
  color: #fff !important;
}

body.fh-whmcs .fh-whmcs-bar .dropdown-divider,
body.fh-whmcs .dropdown-menu.fh-whmcs-bar__menu--portal .dropdown-divider {
  border-color: rgba(77, 163, 255, 0.22) !important;
  opacity: 1;
}

/* Tunnel commande — grille sidebar + produits */
.fh-whmcs #order-standard_cart.fh-order-cart > .fh-order-cart__row,
.fh-whmcs #order-standard_cart.fh-order-cart > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem;
}

.fh-whmcs #order-standard_cart.fh-order-cart::after {
  content: "";
  display: table;
  clear: both;
}

.fh-whmcs #order-standard_cart .fh-order-cart__sidebar,
.fh-whmcs #order-standard_cart .cart-sidebar {
  float: none !important;
  flex: 0 0 260px;
  width: 260px !important;
  max-width: 100%;
  position: relative;
  z-index: 2;
  padding-left: 0;
  padding-right: 0;
}

.fh-whmcs #order-standard_cart .cart-body {
  float: none !important;
  flex: 1 1 0;
  width: auto !important;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding-left: 0;
  padding-right: 0;
}

.fh-whmcs #order-standard_cart .cart-sidebar .card-minimise,
.fh-whmcs #order-standard_cart .cart-sidebar .panel-minimise {
  color: var(--fh-muted);
  opacity: 0.65;
}

@media (max-width: 1199px) {
  .fh-whmcs #order-standard_cart .fh-order-cart__sidebar,
  .fh-whmcs #order-standard_cart .cart-sidebar {
    display: none !important;
  }

  .fh-whmcs #order-standard_cart .cart-body {
    flex: 1 1 100%;
    width: 100% !important;
  }
}

/* ---------- DataTables (recherche, info, pagination) ---------- */
.fh-whmcs .dataTables_wrapper {
  color: var(--fh-text);
}

/* Toolbar / pied DataTables (dom : fh-dt-toolbar + fh-dt-footer) */
.fh-whmcs .dataTables_wrapper .fh-dt-toolbar,
.fh-whmcs .dataTables_wrapper .listtable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.35rem;
  flex-wrap: wrap;
  width: 100%;
  clear: both;
}

.fh-whmcs .dataTables_wrapper .fh-dt-toolbar .dataTables_length {
  flex: 0 0 auto;
  order: 1;
  margin: 0;
  padding: 0;
  text-align: left;
  white-space: nowrap;
}

.fh-whmcs .dataTables_wrapper .fh-dt-toolbar .dataTables_filter {
  flex: 0 0 auto;
  order: 2;
  margin-left: auto;
  text-align: right;
}

.fh-whmcs .dataTables_wrapper .fh-dt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  width: 100%;
  clear: both;
  margin-top: 1.25rem;
  padding: 0.85rem 1.1rem;
  background: rgba(12, 24, 41, 0.55);
  border: 1px solid rgba(77, 163, 255, 0.15);
  border-radius: 12px;
}

.fh-whmcs .dataTables_wrapper .fh-dt-footer .dataTables_info {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.4rem 0.75rem !important;
  margin: 0;
  text-align: left;
  background: rgba(6, 13, 24, 0.45);
  border: 1px solid rgba(77, 163, 255, 0.12);
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.fh-whmcs .dataTables_wrapper .fh-dt-footer .dataTables_paginate {
  flex: 0 0 auto;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  float: none !important;
  display: inline-flex !important;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0 !important;
  border: 1px solid rgba(77, 163, 255, 0.22);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(6, 13, 24, 0.65);
}

.fh-whmcs .dataTables_wrapper .dataTables_filter {
  margin-left: auto;
}

.fh-whmcs .dataTables_wrapper .dataTables_filter label {
  margin: 0;
  color: var(--fh-muted);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.fh-whmcs .dataTables_wrapper .dataTables_filter input {
  background-color: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--fh-border) !important;
  color: var(--fh-text) !important;
  border-radius: 8px;
  padding: 0.45rem 0.75rem 0.45rem 2.1rem;
  min-width: 240px;
  font-size: 0.875rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa3be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: 0.6rem center !important;
  background-size: 16px 16px !important;
}

/* Libellé « Rechercher » à gauche : pas d’icône + padding dans le champ */
.fh-whmcs .dataTables_filter.fh-dt-search input,
.fh-whmcs .dataTables_filter.fh-dt-search input.form-control {
  padding: 0.5rem 0.85rem !important;
  background-image: none !important;
  background-color: rgba(0, 0, 0, 0.25) !important;
}

.fh-whmcs .dataTables_wrapper .dataTables_filter input::placeholder {
  color: var(--fh-muted);
}

.fh-whmcs .dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--fh-accent) !important;
  box-shadow: 0 0 0 3px rgba(59, 158, 255, 0.18);
}

.fh-whmcs .dataTables_wrapper .dataTables_info {
  color: var(--fh-muted);
  font-size: 0.85rem;
  padding-top: 0;
}

.fh-whmcs .dataTables_wrapper .dataTables_length {
  color: var(--fh-muted);
  font-size: 0.85rem;
  padding-top: 0;
}

.fh-whmcs .dataTables_wrapper .dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.fh-whmcs .dataTables_wrapper .dataTables_length select {
  border-radius: 6px;
  padding: 0.25rem 1.5rem 0.25rem 0.6rem;
  margin: 0 0.4rem;
}

.fh-whmcs .dataTables_wrapper .dataTables_paginate {
  padding: 0 !important;
}

.fh-whmcs .dataTables_wrapper .dataTables_paginate .paginate_button,
.fh-whmcs .dataTables_wrapper .dataTables_paginate span.paginate_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  min-width: 2.5rem;
  margin: 0 !important;
  padding: 0.45rem 0.95rem !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(77, 163, 255, 0.15) !important;
  border-radius: 0 !important;
  color: #c5d4e8 !important;
  font-size: 0.8125rem !important;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.fh-whmcs .dataTables_wrapper .dataTables_paginate .paginate_button:last-child,
.fh-whmcs .dataTables_wrapper .dataTables_paginate span.paginate_button:last-child {
  border-right: 0 !important;
}

.fh-whmcs .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.fh-whmcs .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.fh-whmcs .dataTables_wrapper .dataTables_paginate span.paginate_button.current {
  background: linear-gradient(135deg, #3b9eff, #1d6fd8) !important;
  color: #fff !important;
  border-right-color: rgba(77, 163, 255, 0.2) !important;
}

.fh-whmcs .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  background: rgba(59, 158, 255, 0.14) !important;
  color: #fff !important;
}

.fh-whmcs .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.fh-whmcs .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.fh-whmcs .dataTables_wrapper .dataTables_paginate span.paginate_button.disabled {
  background: transparent !important;
  color: #5a6d85 !important;
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Labels / badges (Propriétaire, statuts) ---------- */
.fh-whmcs .label.label-info,
.fh-whmcs span.label-info {
  display: inline-block;
  background: rgba(59, 158, 255, 0.16);
  color: var(--fh-accent);
  border: 1px solid rgba(59, 158, 255, 0.4);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.4rem;
}

.fh-whmcs .label.label-success {
  background: rgba(52, 211, 153, 0.15);
  color: var(--fh-success);
  border: 1px solid rgba(52, 211, 153, 0.4);
}

.fh-whmcs .label.label-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* ---------- Form actions (boutons centrés sous formulaires) ---------- */
.fh-whmcs .fh-form-actions,
.fh-whmcs .form-group.text-center:has(> .btn) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.fh-whmcs .fh-form-actions .btn,
.fh-whmcs .form-group.text-center > .btn {
  margin: 0;
}

/* ---------- Modifier mot de passe — alignement ---------- */
.fh-whmcs .fh-password-form .form-group.row {
  margin-bottom: 1.1rem;
}

.fh-whmcs .fh-password-form .password-strength-meter {
  margin-top: 0.5rem;
}

.fh-whmcs .fh-password-form .progress {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  overflow: hidden;
  height: 6px;
}

/* ---------- Mode de paiement avec lien Discord ---------- */
.fh-whmcs .fh-product__stat dd a,
.fh-whmcs .fh-product__stat--wide dd a {
  color: var(--fh-accent);
  text-decoration: underline;
  word-break: break-all;
}

.fh-whmcs .fh-product__stat dd a:hover {
  color: #fff;
}

/* ---------- Sélecteur de contact (Ajouter un contact) ---------- */
.fh-whmcs .fh-contact-selector .card-body {
  padding: 1rem 1.25rem;
}

.fh-whmcs .fh-contact-selector label {
  color: var(--fh-muted);
  font-weight: 500;
}

/* Garantie que toutes les cartes WHMCS aient une marge si pas spécifiée */
.fh-whmcs .card + .card,
.fh-whmcs .card + form > .card:first-child,
.fh-whmcs form > .card + .card {
  margin-top: 1.25rem;
}

