/* ==========================================================================
   radioking.css — RadioKing design system on the six base
   Named .rk-* component classes, translated from the Customer Area mockup
   (Customer Area.dc.html). Bootstrap-class overrides (.btn/.table/.panel)
   are handled in a separate task — this file only defines the new .rk-*
   vocabulary.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
body {
  font-family: var(--font-brand);
  color: var(--text-strong);
  background: var(--surface-subtle);
  -webkit-font-smoothing: antialiased;
}

.rk-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 28px 56px;
}

/* -------------------------------------------------------------------------
   Card — generic white surface (mockup uses this shape everywhere)
   ------------------------------------------------------------------------- */
.rk-card {
  background: var(--surface-card);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.rk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: filter .12s ease, transform .12s ease, background .12s ease;
}
.rk-btn--gradient {
  background: var(--rk-gradient-orange);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255,72,72,0.25);
}
.rk-btn--gradient:hover { filter: brightness(1.05); }
.rk-btn--gradient:active { transform: scale(.97); }

.rk-btn--outline {
  background: #fff;
  color: var(--text-strong);
  border: 1.5px solid var(--border-strong);
}
.rk-btn--outline:hover { background: rgba(37,37,37,0.04); }

.rk-btn--white {
  background: #fff;
  color: var(--color-primary-strong);
}
.rk-btn--white:hover { filter: brightness(0.97); }

.rk-btn--danger {
  background: var(--color-danger);
  color: #fff;
}
.rk-btn--danger:hover { filter: brightness(1.05); }

/* -------------------------------------------------------------------------
   Badges — status pills (used in tables, service cards, filters)
   ------------------------------------------------------------------------- */
.rk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.rk-badge::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rk-badge--success { background: rgba(46,213,115,.14); color: #1f9d57; }
.rk-badge--warning  { background: rgba(255,165,2,.16); color: #b8770a; }
.rk-badge--danger   { background: rgba(255,71,87,.12); color: var(--color-danger); }
.rk-badge--muted    { background: rgba(37,37,37,.07); color: var(--text-muted); }
.rk-badge--muted::before { display: none; }

/* -------------------------------------------------------------------------
   Top bar (mockup lines ~30-80) — gradient header, actions, profile
   Shell stub: later task wires up real markup/positioning.
   ------------------------------------------------------------------------- */
.rk-topbar {
  height: 64px;
  background: var(--rk-gradient-orange);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.rk-topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rk-iconbtn {
  position: relative;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease;
  text-decoration: none;
}
/* Le bouton panier est un <a> : neutralise le soulignement hérité de a:hover */
.rk-iconbtn:hover,
.rk-iconbtn:focus { background: rgba(255,255,255,0.26); color: #fff; text-decoration: none; }

.rk-badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--rk-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FF6a4f;
}

.rk-profile__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: rgba(255,255,255,0.14);
  border-radius: 30px;
  padding: 5px 14px 5px 5px;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease;
}
.rk-profile__toggle:hover { background: rgba(255,255,255,0.26); }
.rk-profile__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary-strong);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-profile__name { color: #fff; font-size: 15px; font-weight: 600; }
.rk-profile__chevron { color: #fff; font-size: 11px; opacity: .85; }

/* -------------------------------------------------------------------------
   Secondary nav (mockup lines ~83-111) — nav bar + dropdown menus
   ------------------------------------------------------------------------- */
.rk-nav {
  background: #fff;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 28px;
  display: flex;
  align-items: stretch;
  height: 56px;
  position: sticky;
  top: 64px;
  z-index: 19;
}

.rk-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .12s ease;
}
.rk-nav__item:hover { color: var(--color-primary-strong); }
.rk-nav__item--active { color: var(--color-primary-strong); }
.rk-nav__item--active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--rk-gradient-orange);
}

.rk-dropdown {
  position: relative;
  display: flex;
}
.rk-dropdown__panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(37,37,37,0.22);
  z-index: 40;
  overflow: hidden;
}
.rk-dropdown.is-open .rk-dropdown__panel { display: block; }
/* right-align the top-bar profile/notification panels so they don't overflow the viewport edge */
.rk-topbar__actions .rk-dropdown__panel { left: auto; right: 0; }

.rk-menu-item {
  position: relative;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(37,37,37,0.07);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: rgba(37,37,37,0.7);
  cursor: pointer;
}
.rk-menu-item:last-child { border-bottom: none; }
.rk-menu-item:hover { color: var(--color-primary-strong); }

/* -------------------------------------------------------------------------
   Service quick-cards (mockup lines ~143-164)
   ------------------------------------------------------------------------- */
.rk-service-card {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-card);
  border: none;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .16s ease, transform .16s ease;
}
.rk-service-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.rk-service-card__icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--surface-tint);
  color: var(--color-primary-strong);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-service-card__body { flex: 1; }
.rk-service-card__title { display: block; font-size: 18px; font-weight: 700; }
.rk-service-card__meta {
  display: block;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}
.rk-service-card__chevron { color: var(--text-faint); font-size: 14px; }

/* -------------------------------------------------------------------------
   Overdue alert (mockup lines ~131-140)
   ------------------------------------------------------------------------- */
.rk-overdue-alert {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 0 0 2px var(--color-danger), 18px 18px 44px rgba(255,71,87,0.16);
}
.rk-overdue-alert__icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255,71,87,0.12);
  color: var(--color-danger);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-overdue-alert__body { flex: 1; min-width: 0; }
.rk-overdue-alert__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--color-danger); }
.rk-overdue-alert__text { margin: 3px 0 0; font-size: 15px; color: var(--text-body); line-height: 1.45; }

/* -------------------------------------------------------------------------
   Table (services table mockup lines ~222-276, invoices table ~499-514)
   ------------------------------------------------------------------------- */
.rk-table-wrap { overflow-x: auto; }
.rk-table { width: 100%; border-collapse: collapse; background: #fff; }
.rk-table thead th {
  padding: 14px 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(37,37,37,0.45);
  text-align: left;
}
.rk-table tbody tr { border-top: 1px solid rgba(37,37,37,0.07); }
.rk-table tbody tr:hover { background: rgba(37,37,37,0.025); }
.rk-table td { padding: 16px 22px; font-size: 15px; }

/* -------------------------------------------------------------------------
   Pagination (mockup lines ~278-288)
   ------------------------------------------------------------------------- */
.rk-pagination { display: flex; gap: 6px; }
.rk-pagination__btn {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--border-subtle);
  background: #fff;
  border-radius: 9px;
  color: var(--text-strong);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease;
}
.rk-pagination__btn:hover { background: rgba(37,37,37,0.04); }
.rk-pagination__btn--active {
  border: none;
  background: var(--rk-gradient-orange);
  color: #fff;
  font-weight: 700;
}
.rk-pagination__btn--muted { color: var(--text-muted); }

/* -------------------------------------------------------------------------
   Order summary sidebar (mockup lines ~422-431)
   ------------------------------------------------------------------------- */
.rk-summary {
  background: var(--surface-card);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
}
.rk-summary__label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rk-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 6px;
  font-size: 15px;
}
.rk-summary__row-label { color: var(--text-body); font-weight: 600; }
.rk-summary__row-value { font-weight: 700; }
.rk-summary__divider { height: 1px; background: var(--border-subtle); margin: 14px 0; }
.rk-summary__total { display: flex; align-items: baseline; justify-content: space-between; }
.rk-summary__total-label { font-size: 15px; font-weight: 700; }
.rk-summary__total-value { font-size: 26px; font-weight: 700; color: var(--color-primary-strong); }
.rk-summary__note { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); font-weight: 500; }

/* -------------------------------------------------------------------------
   Credit-card visual (mockup lines ~558-575)
   ------------------------------------------------------------------------- */
.rk-cc-card {
  background: var(--rk-gradient-dark);
  border-radius: 18px;
  padding: 26px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1.6/1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rk-cc-card__row { display: flex; align-items: center; justify-content: space-between; }
.rk-cc-card__chip {
  width: 46px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(135deg,#FFD479,#E5A93B);
}
.rk-cc-card__brand { font-size: 38px; }
.rk-cc-card__num { font-family: var(--font-mono); font-size: 22px; letter-spacing: 2px; margin: 0; }
.rk-cc-card__meta { display: flex; gap: 30px; margin-top: 14px; }
.rk-cc-card__meta-label {
  margin: 0;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.rk-cc-card__meta-value { margin: 2px 0 0; font-size: 14px; font-weight: 600; }

/* -------------------------------------------------------------------------
   Result screen pattern (confirmation / empty states)
   ------------------------------------------------------------------------- */
.rk-result { text-align: center; max-width: 640px; margin: 40px auto; }
.rk-result__icon { font-size: 42px; color: var(--color-primary-strong); margin-bottom: 16px; }
/* pastille colorée autour de l'icône (remplace les anciennes images PNG) */
.rk-result__icon--disc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 50%; font-size: 36px;
}
.rk-result__icon--success { background: rgba(46,213,115,.12); color: var(--color-success, #2ED573); }
.rk-result__icon--danger  { background: rgba(255,71,87,.12); color: var(--color-danger); }
.rk-result__title { margin: 0; font-size: 26px; font-weight: 700; }
.rk-result__text { margin: 8px 0 0; font-size: 15px; color: var(--text-muted); font-weight: 500; }
.rk-result__actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   Footer (mockup lines ~589-596)
   ------------------------------------------------------------------------- */
.rk-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
}
.rk-footer__links { display: flex; gap: 20px; }
.rk-footer__links a {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
}
.rk-footer__links a:hover { color: var(--text-strong); }
.rk-footer__copy { margin: 0; font-size: 14px; color: var(--text-faint); font-weight: 500; }

/* --- Stock Bootstrap/six overrides: every page on-brand --- */
.btn { border-radius:10px; font-weight:700; border-width:1.5px; }
.btn-primary { background:var(--rk-gradient-orange); border-color:transparent; color:#fff; }
.btn-primary:hover,.btn-primary:focus { filter:brightness(1.05); background:var(--rk-gradient-orange); }
.btn-default { background:#fff; border:1.5px solid var(--border-strong); color:var(--text-strong); }
.btn-success { background:var(--color-success); border-color:transparent; color:#fff; }
.btn-danger  { background:var(--color-danger); border-color:transparent; color:#fff; }
.btn-info    { background:var(--color-info); border-color:transparent; color:#fff; }

.panel { border:none; border-radius:12px; box-shadow:var(--shadow-sm); }
.panel-heading { background:#fff; border-bottom:1px solid var(--border-subtle); font-weight:700; }

.table > thead > tr > th { text-transform:uppercase; font-size:12px; letter-spacing:.05em; color:var(--text-muted); border-bottom:1px solid var(--border-subtle); }
.table-hover > tbody > tr:hover { background:rgba(37,37,37,0.025); }

.form-control { border:1.5px solid var(--field-border); border-radius:10px; box-shadow:none; }
.form-control:focus { border-color:var(--field-border-focus); box-shadow:none; }

.label-success{background:rgba(46,213,115,.14);color:#1f9d57;}
.label-warning{background:rgba(255,165,2,.16);color:#b8770a;}
.label-danger,.label-important{background:rgba(255,71,87,.12);color:var(--color-danger);}
.label-info{background:rgba(30,144,255,.12);color:var(--color-info);}

.pagination > .active > a,.pagination > .active > span { background:var(--rk-gradient-orange); border-color:transparent; }
.pagination > li > a { color:var(--text-strong); }

/* Alertes : fond teinté léger + texte lisible (le rouge/jaune Bootstrap sur tout
   le texte détonnait avec les encarts de la charte). */
.alert {
  border: none; border-radius: 12px; padding: 14px 18px;
  font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--text-body, #252525);
}
.alert p { margin: 0 0 6px; font-weight: 700; }
.alert p:last-child { margin-bottom: 0; }
.alert ul { margin: 0; padding-left: 20px; font-weight: 500; }
.alert strong { font-weight: 700; }
.alert-danger  { background: rgba(255,71,87,0.10); }
/* alert-error : variante Bootstrap 2 encore présente dans quelques templates stock */
.alert-error { background: rgba(255,71,87,0.10); }
.alert-error strong, .alert-error h2 { color: var(--color-danger); }
/* .errorbox : ancien conteneur d'erreur (flux PayPal legacy), sans style charte */
.errorbox {
  background: rgba(255,71,87,0.10); border-radius: 12px; padding: 14px 18px;
  font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--text-body, #252525);
}
.alert-danger strong, .alert-danger h2 { color: var(--color-danger); }
.alert-warning { background: rgba(240,168,48,0.12); }
.alert-warning strong, .alert-warning h2 { color: #C77C10; }
.alert-info    { background: rgba(41,182,216,0.12); }
.alert-info strong, .alert-info h2 { color: #1E8DA8; }
.alert-success { background: rgba(46,213,115,0.12); }
.alert-success strong, .alert-success h2 { color: #1f9d57; }
.nav-tabs > li.active > a { border:none; border-bottom:3px solid var(--color-primary); color:var(--color-primary); background:transparent; }
a { color:var(--text-link); transition:color .12s ease; }
/* generic link hover — but NOT button-links (any class containing "btn"),
   which keep their own variant colour/hover so text doesn't turn orange */
a:not([class*="btn"]):hover, a:not([class*="btn"]):focus { color:var(--color-primary-strong); }
h1,h2,h3,h4,h5 { font-family:var(--font-brand); }

/* button-link hover: keep variant text colour, never underline */
.rk-btn:hover, .rk-btn:focus, .btn:hover, .btn:focus { text-decoration:none; }
.rk-btn--gradient:hover, .rk-btn--gradient:focus,
.rk-btn--danger:hover, .rk-btn--danger:focus { color:#fff; }
.rk-btn--outline:hover, .rk-btn--outline:focus { color:var(--text-strong); }
.rk-btn--white:hover, .rk-btn--white:focus { color:var(--color-primary-strong); }

/* --- Accessibility + motion utilities --- */
:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }
.rk-skip-link { position:absolute; left:-9999px; top:0; background:#fff; padding:10px 16px; z-index:1000; }
.rk-skip-link:focus { left:8px; top:8px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* --- Shell glue: sidebar-less centered layout on six's #main-body --- */
#main-body { background: var(--surface-subtle); padding: 36px 0 56px; }
#main-body > .container { max-width: 1180px; }
#main-body .sidebar, #main-body .col-md-3.pull-md-left { display: none; }
/* La colonne du pageheader natif est un col-md-9 flottant DISTINCT de .main-content
   (header.tpl, branche « sidebar présente »). Comme la sidebar native est masquée
   juste au-dessus, elle se retrouvait à flotter à côté du contenu — d'où deux blocs
   de titre côte à côte. On dé-flotte toutes les colonnes de contenu, pas seulement
   .main-content. */
#main-body .main-content,
#main-body .col-md-9.pull-md-right { width: 100% !important; float: none !important; }

/* --- Responsive: nav toggle + small-screen layout + table stacking --- */
html, body { overflow-x: hidden; }

.rk-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  /* Le bouton vit dans le topbar en dégradé orange : même traitement que
     .rk-iconbtn (panier, notifications) qui l'encadrent. En `color: inherit` il
     héritait de la couleur de texte sombre du body. */
  background: rgba(255,255,255,0.14);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .12s ease;
}
.rk-nav__toggle:hover,
.rk-nav__toggle:focus { background: rgba(255,255,255,0.26); color: #fff; }

@media (max-width: 1024px) {
  .rk-nav__toggle { display: inline-flex; }

  /* Panneau déroulant plein largeur sous le topbar, et non plus la barre
     horizontale repliée. Le `height: 56px` de la règle de base doit être annulé :
     sans ça le fond blanc ne couvre que 56px et les entrées débordent par-dessus
     la page — d'où l'impression d'un menu sur fond transparent. */
  .rk-nav {
    display: none;
    position: fixed;
    top: 64px;                      /* hauteur du .rk-topbar */
    left: 0;
    right: 0;
    height: auto;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 6px 0;
    background: #fff;
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 18px 44px rgba(37,37,37,0.22);
    z-index: 30;
  }
  .rk-nav.is-open { display: flex; }
  .rk-nav .rk-nav__item,
  .rk-nav .rk-dropdown { width: 100%; }
  /* .rk-dropdown est en display:flex par défaut : le déclencheur et le panneau
     deviendraient deux colonnes côte à côte. En accordéon il faut du flux normal. */
  .rk-nav .rk-dropdown { display: block; }
  .rk-nav .rk-nav__item {
    min-height: 48px; display: flex; align-items: center;
    justify-content: space-between; padding: 0 20px;
  }
  /* Accordéon : le sous-menu s'insère dans le flux au lieu de flotter. */
  .rk-nav .rk-dropdown__panel {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    background: rgba(37,37,37,0.035);
  }
  .rk-nav .rk-menu-item { white-space: normal; padding-left: 34px; min-height: 44px; }
}

@media (max-width: 768px) {
  .rk-profile__name { display: none; }
  #main-body { padding-left: 12px; padding-right: 12px; }
  #main-body > .container, #main-body > .container-fluid { padding-left: 12px; padding-right: 12px; }
  .rk-table-wrap { overflow-x: auto; }
}

@media (max-width: 640px) {
  .rk-table-wrap .rk-table thead { display: none; }
  /* La table ET la carte qui l'enveloppe redeviennent transparentes : sinon leur
     fond blanc remplit les gouttières entre les cartes-lignes et « colle » les
     services entre eux. La carte-ligne (tr) porte alors son propre fond blanc. */
  .rk-card:has(.rk-table-wrap) { background: transparent; box-shadow: none; }
  .rk-table-wrap,
  .rk-table-wrap .rk-table { background: transparent; }
  .rk-table-wrap .rk-table tr {
    display: block;
    margin-bottom: 18px;                               /* plus d'air entre les cartes */
    background: #fff;                                  /* la carte est blanche, la gouttière laisse voir le fond gris */
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(37,37,37,0.06);        /* détache la carte du fond gris */
    /* pas d'overflow:hidden : il rognerait le panneau du menu « … » */
  }
  .rk-table-wrap .rk-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    text-align: right;
  }
  .rk-table-wrap .rk-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--text-muted);
    text-align: left;
  }
}

/* -------------------------------------------------------------------------
   WHMCS DataTables list tables → RadioKing look
   (overrides six's css/all.css dark toolbar / green header underline)
   ------------------------------------------------------------------------- */
/* the info bar ("Affichage 1 à N …") — was dark #4f5360 */
.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper div.dataTables_info {
  background: #fff !important;
  color: var(--text-muted) !important;
  border: none !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: 16px 22px !important;
  font-size: 14px;
  font-weight: 500;
}
/* length selector ("Afficher [10] éléments") — was grey #f6f6f6 */
.dataTables_wrapper .dataTables_length {
  background: #fff !important;
  color: var(--text-muted);
}
.dataTables_wrapper .dataTables_length label { padding: 16px 22px 8px; font-weight: 600; }
.dataTables_wrapper .dataTables_length label .form-control {
  height: auto; border: 1.5px solid var(--field-border); border-radius: 8px;
  padding: 6px 10px; background: #fff; font-weight: 600;
}
/* search filter */
.dataTables_wrapper .dataTables_filter label { padding: 14px 22px; }
.dataTables_wrapper .dataTables_filter label .form-control {
  background: var(--field-fill) !important;
  border: 1.5px solid var(--field-border) !important;
  border-radius: 10px !important;
  padding: 9px 14px 9px 38px !important;
  width: 240px; height: auto;
}
/* table header — drop six's green underline, use design hairline + uppercase */
.dataTables_wrapper table.table-list thead th,
table.rk-table thead th,
table.datatable thead th {
  border-bottom: 1px solid var(--border-subtle) !important;
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}
.dataTables_wrapper table.table-list thead th:nth-child(even) { border-bottom: 1px solid var(--border-subtle) !important; }
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc { background-color: var(--surface-subtle); }
/* pagination active → brand gradient (was dark #4f5360) */
.dataTables_wrapper .dataTables_paginate { padding: 14px 22px; }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span {
  background: var(--rk-gradient-orange) !important;
  border-color: transparent !important; color: #fff !important;
}
.pagination > li > a { color: var(--text-strong); border-radius: 8px; }
/* responsive "+" expander → brand colour, subtle */
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
  background: var(--rk-gradient-orange) !important; border: none !important;
  box-shadow: none !important; color: #fff !important;
}
/* the row logo avatar — consistent sizing/fit */
.logoradio { object-fit: cover; background: var(--surface-tint); }

/* dropdown menu-item leading icon (design nav) */
.rk-menu-item__icon { width: 20px; text-align: center; color: rgba(37,37,37,0.55); flex: none; }
/* Pastille de comptage à droite de l'item de menu (nombre de services). */
.rk-menu-item__badge { margin-left: auto; flex: none; }

/* -------------------------------------------------------------------------
   Custom list table widget (rk-listtable) — design-matched, no DataTables
   ------------------------------------------------------------------------- */
.rk-listtable__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.rk-listtable__length {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: rgba(37,37,37,0.6); font-weight: 600;
}
.rk-select {
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-strong);
  border: 1.5px solid rgba(37,37,37,0.14); border-radius: 8px; padding: 7px 10px;
  background: #fff; cursor: pointer;
}
.rk-listtable__search { position: relative; }
.rk-listtable__search i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: rgba(37,37,37,0.35); font-size: 14px;
}
.rk-listtable__search input {
  font-family: inherit; font-size: 15px; border: 1.5px solid rgba(37,37,37,0.14);
  border-radius: 10px; padding: 10px 14px 10px 38px; width: 260px; background: #fff;
}
.rk-listtable__search input:focus { border-color: var(--field-border-focus); outline: none; }
.rk-listtable__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 18px;
}
.rk-listtable__info { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.rk-listtable__pages { display: flex; gap: 6px; }
.rk-pagebtn {
  min-width: 38px; height: 38px; padding: 0 6px; border: 1.5px solid rgba(37,37,37,0.12);
  background: #fff; border-radius: 9px; color: var(--text-strong); font-family: inherit;
  font-weight: 600; cursor: pointer; transition: background .12s ease;
}
.rk-pagebtn:hover:not(:disabled) { background: rgba(37,37,37,0.04); }
.rk-pagebtn:disabled { color: var(--text-faint); cursor: default; }
.rk-pagebtn.is-active { background: var(--rk-gradient-orange); border-color: transparent; color: #fff; }

/* initials avatar (replaces broken logo images in listings) */
.rk-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; color: #fff;
  font-size: 14px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; text-transform: uppercase;
}
.rk-avatar--c0 { background: linear-gradient(135deg,#FF9150,#FF3648); }
.rk-avatar--c1 { background: linear-gradient(135deg,#7C5CFF,#4d7bff); }
.rk-avatar--c2 { background: linear-gradient(135deg,#1fa97a,#13c4a0); }
.rk-avatar--c3 { background: #C1272D; }
.rk-avatar--c4 { background: #252525; }
.rk-avatar--c5 { background: linear-gradient(135deg,#FF6a4f,#ff3648); }

/* page-header title (six .header-lined h1 was blue #058) → RadioKing ink */
div.header-lined h1 {
  color: var(--text-strong);
  font-family: var(--font-brand);
  font-weight: 700;
  border-bottom: 1px solid var(--border-subtle);
}
div.header-lined h1 small { color: var(--text-muted); font-weight: 500; }
div.header-lined .breadcrumb li a { color: var(--text-muted); }

/* smaller button variant for table action cells (2 side by side) */
.rk-btn--sm { padding: 8px 13px; font-size: 14px; border-radius: 9px; gap: 7px; }
.rk-btn--sm i { font-size: 12px; }
/* keep table action buttons on one row */
.rk-table .rk-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; }
.rk-table .rk-actions .rk-btn { white-space: nowrap; }

/* avatar: show real logo if it loads, else the coloured initials underneath */
.rk-avatar { position: relative; overflow: hidden; }
.rk-avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }

/* ==========================================================================
   Charte alignment — main surface, footer, page titles
   ========================================================================== */
/* Main surface must be the light-grey brand surface (#F9F9F9), cards sit on it */
html, body { background-color: var(--surface-subtle) !important; }
section#main-body { background-color: var(--surface-subtle) !important; }
section#main-body .main-content { background: transparent !important; }

/* Footer: no separate grey band — a hairline on the page surface, like the design */
section#footer {
  background: transparent !important;
  border-top: none !important;
  padding: 0 !important;
  color: inherit;
}

/* Page title (six .header-lined pageheader) → RadioKing charte: bold ink, no heavy rule */
div.header-lined {
  border-bottom: none;
  margin-bottom: 24px;
}
div.header-lined h1 {
  font-family: var(--font-brand);
  font-size: 30px;
  font-weight: 700;
  color: var(--text-strong);
  border-bottom: none;
  padding: 0;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
div.header-lined h1 small { color: var(--text-muted); font-weight: 500; }
div.header-lined .breadcrumb { margin: 0; font-size: 13px; }

/* -------------------------------------------------------------------------
   Product detail page — 2-column layout (clientareaproductdetails.tpl)
   ------------------------------------------------------------------------- */
.rk-page-title {
  font-family: var(--font-brand);
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.rk-detail-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1024px) {
  .rk-detail-grid { grid-template-columns: 1fr; }
}

/* pagination ellipsis (windowed pager) */
.rk-pageellipsis { min-width: 20px; height: 38px; display: inline-flex; align-items: flex-end; justify-content: center; color: var(--text-faint); font-weight: 700; padding-bottom: 6px; }

/* dashboard two-column area collapses on tablet/phone */
@media (max-width: 1024px) { .rk-2col { grid-template-columns: 1fr !important; } }

/* invoices status filter items */
.rk-filter-item:hover { background: rgba(37,37,37,0.03); }
.rk-filter-item.is-active { background: var(--surface-tint); color: var(--color-primary-strong); font-weight: 700; }

/* -------------------------------------------------------------------------
   Native WHMCS home panels (dashboard) → RadioKing cards
   ------------------------------------------------------------------------- */
.client-home-panels .panel { border: none; border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 20px; }
.client-home-panels .panel-heading { background: #fff; border-bottom: 1px solid var(--border-subtle); padding: 16px 20px; }
.client-home-panels .panel-title { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.client-home-panels .panel-body { padding: 20px; font-size: 14px; color: var(--text-body); line-height: 1.55; }
.client-home-panels .panel-footer { background: transparent; border: none; padding: 0; }
.client-home-panels .list-group { border-top: none; }
.client-home-panels .list-group-item { border: none; border-top: 1px solid var(--border-subtle); padding: 13px 20px; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.client-home-panels .list-group-item:hover { background: rgba(37,37,37,0.03); }
.client-home-panels .badge { background: var(--color-primary); }
/* accent for the overdue-payments panel (WHMCS gives it panel-accent-danger) */
.client-home-panels .panel-accent-danger { box-shadow: 0 0 0 2px var(--color-danger), 14px 14px 36px rgba(255,71,87,0.14); }
.client-home-panels .panel-accent-danger .panel-title { color: var(--color-danger); }
.client-home-panels .panel-accent-danger .panel-heading { border-bottom-color: rgba(255,71,87,0.2); }

/* -------------------------------------------------------------------------
   Focus, nav active underline hover, dashboard service tiles
   ------------------------------------------------------------------------- */
/* no blue focus box on mouse-click for shell links/buttons; keyboard focus
   still shown via the global :focus-visible orange ring */
.rk-topbar a:focus:not(:focus-visible),
.rk-topbar button:focus:not(:focus-visible),
.rk-nav a:focus:not(:focus-visible),
.rk-nav button:focus:not(:focus-visible),
.rk-dropdown__panel a:focus:not(:focus-visible),
.rk-nav__item:focus:not(:focus-visible),
[data-rk-toggle]:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* dashboard "Vos services" tiles — lift on hover (mockup) */
.rk-service-tile { transition: box-shadow .16s ease, transform .16s ease; }
.rk-service-tile:hover { box-shadow: 0 16px 40px rgba(37,37,37,0.12) !important; transform: translateY(-3px); }

/* -------------------------------------------------------------------------
   Affiliate program page (affiliates.tpl)
   ------------------------------------------------------------------------- */
.rk-aff-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}
.rk-aff-stat {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(37,37,37,.08);
  padding: 24px;
}
.rk-aff-stat__icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-aff-stat__value {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}
.rk-aff-stat__label {
  margin: 5px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.rk-aff-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}

.rk-aff-commissions {
  background: var(--rk-gradient-orange);
  border-radius: 14px;
  padding: 26px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(255,72,72,.22);
}
.rk-aff-commissions__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.rk-aff-commissions__row > span:first-child {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}
.rk-aff-commissions__sep { height: 1px; background: rgba(255,255,255,.2); }
.rk-aff-commissions__btn {
  width: 100%;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  border-radius: 10px;
  padding: 14px;
  background: rgba(255,255,255,.95);
  color: var(--color-primary-strong);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: filter .12s ease;
}
.rk-aff-commissions__btn:hover { filter: brightness(.97); color: var(--color-primary-strong); }
.rk-aff-commissions__btn.is-disabled { cursor: not-allowed; opacity: .75; }

@media (max-width: 860px) {
  .rk-aff-stats { grid-template-columns: 1fr; }
  .rk-aff-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   Profile page (clientareadetails.tpl)
   ------------------------------------------------------------------------- */
.rk-profile-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--rk-gradient-orange);
  border-radius: 16px;
  padding: 22px 26px;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(255,72,72,.22);
}
.rk-profile-hero__avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary-strong);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-profile-hero__name { margin: 0; color: #fff; font-size: 20px; font-weight: 700; }
.rk-profile-hero__meta { margin: 3px 0 0; color: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; }

.rk-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}

.rk-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.rk-card-head__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-tint);
  color: var(--color-primary-strong);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-card-head h3 { margin: 0; font-size: 17px; font-weight: 700; }

.rk-field { margin-bottom: 16px; }
.rk-field:last-child { margin-bottom: 0; }
.rk-field > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.rk-field-row { display: flex; gap: 14px; }
.rk-field-row > .rk-field { flex: 1; }

/* Email preferences (rendered when the commented block is enabled) */
.rk-emailprefs { display: flex; flex-direction: column; }
.rk-emailpref {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 600;
  margin: 0;
  cursor: pointer;
}
.rk-emailpref:last-child { border-bottom: none; }
.rk-emailpref input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-danger); }

@media (max-width: 860px) {
  .rk-profile-grid { grid-template-columns: 1fr; }
  .rk-field-row { flex-direction: column; gap: 0; }
}

/* -------------------------------------------------------------------------
   Empty states (service listing pages) — design 3
   ------------------------------------------------------------------------- */
.rk-empty {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(37,37,37,0.08);
  padding: 56px 40px;
  text-align: center;
}
.rk-empty__blob {
  position: absolute;
  top: -90px;
  right: -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: var(--rk-gradient-orange);
  opacity: .08;
}
.rk-empty__icon {
  position: relative;
  display: inline-flex;
  width: 88px;
  height: 88px;
  border-radius: 24px;
  background: var(--surface-tint);
  color: var(--color-primary-strong);
  font-size: 36px;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 8px 24px rgba(255,72,72,0.14);
}
.rk-empty__title { margin: 0 0 10px; font-size: 24px; font-weight: 700; }
.rk-empty__text {
  position: relative;
  margin: 0 auto 26px;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  font-weight: 500;
}
.rk-empty__actions { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   Product detail — radio (design 4)
   ------------------------------------------------------------------------- */
.rk-offer-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  border: 1px solid rgba(255,105,79,0.25);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-strong);
}
.rk-offer-pill__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rk-gradient-orange);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-field-k { margin: 0; font-size: 13px; color: var(--text-muted); font-weight: 600; }
.rk-field-v { margin: 2px 0 0; font-size: 16px; font-weight: 700; }

.rk-techcard {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border: 1px solid rgba(37,37,37,0.09);
  border-radius: 11px;
  background: var(--surface-subtle);
}
.rk-techcard__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface-tint);
  color: var(--color-primary-strong);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-techcard__k { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(37,37,37,0.42); }
.rk-techcard__v { margin: 3px 0 0; font-size: 16px; font-weight: 700; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rk-fnav {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(37,37,37,0.06);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
  transition: color .12s ease;
}
.rk-fnav:last-child { border-bottom: none; }
.rk-fnav > i { color: rgba(37,37,37,0.4); width: 18px; }
.rk-fnav:hover { color: var(--color-primary-strong); }
.rk-fnav--danger, .rk-fnav--danger > i { color: var(--color-danger); }
.rk-fnav--danger:hover { color: var(--color-danger); }
.rk-fnav.is-disabled { pointer-events: none; opacity: .5; }

/* Compact the module "Se connecter au Manager Radio" button to the mockup size */
.module-client-area .btn { padding: 12px 20px; font-size: 15px; font-weight: 700; border-radius: 10px; }
.module-client-area br { display: none; }

/* De-emphasized action row (cancellation request) — design 4 */
.rk-fnav--muted, .rk-fnav--muted > i { color: rgba(37,37,37,0.4); }
.rk-fnav--muted { font-size: 13px; font-weight: 500; }
.rk-fnav--muted:hover { color: rgba(37,37,37,0.7); }

/* Discreet icon-only action (e.g. draft delete) — no button background */
.rk-iconlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: rgba(37,37,37,0.4);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: color .12s ease;
}
.rk-iconlink:hover { color: var(--color-danger); }

/* Modifier mes options (upgrade configoptions) — lignes actuelle -> nouvelle */
.rk-optrow { display: grid; grid-template-columns: 1.4fr auto 1.4fr; gap: 16px; align-items: center; padding: 20px 24px; border-bottom: 1px solid rgba(37,37,37,0.06); }
.rk-optrow:last-child { border-bottom: none; }
.rk-optrow--head { padding: 14px 24px; background: var(--surface-subtle); border-bottom: 1px solid var(--border-subtle); }
@media (max-width: 640px) {
  .rk-optrow { grid-template-columns: 1fr; gap: 10px; }
  .rk-optrow--head { display: none; }
  .rk-optrow > i.fa-arrow-right { display: none; }
}

/* -------------------------------------------------------------------------
   Choix du moyen de paiement (upgradesummary) — même présentation que le
   tunnel de commande. iCheck ne s'applique qu'à .icheck-button dans ce thème,
   on peut donc piloter l'état en CSS pur via :checked (pas de JS, pas de :has).
   ------------------------------------------------------------------------- */
.rk-payopt__input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.rk-payopt {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 14px;
  border: 1.5px solid var(--field-border, rgba(37,37,37,0.14)); border-radius: 11px;
  cursor: pointer; font-size: 15px; font-weight: 700; color: #252525;
  transition: border-color .12s ease;
}
.rk-payopt:last-of-type { margin-bottom: 0; }
.rk-payopt:hover { border-color: rgba(255,145,80,0.6); }
.rk-payopt__dot {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(37,37,37,0.25); display: flex; align-items: center; justify-content: center;
}
.rk-payopt__dot span { width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.rk-payopt__input:checked + .rk-payopt { border-color: var(--color-primary-strong); }
.rk-payopt__input:checked + .rk-payopt .rk-payopt__dot { border-color: var(--color-primary-strong); }
.rk-payopt__input:checked + .rk-payopt .rk-payopt__dot span { background: var(--color-primary-strong); }
.rk-payopt__input:focus-visible + .rk-payopt { outline: 2px solid var(--color-primary-strong); outline-offset: 2px; }

/* Code promo discret (ligne compacte alignée à droite) */
/* Ligne compacte alignée à droite : elle ne doit pas occuper toute la largeur */
.rk-promo-inline { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; max-width: 430px; margin-left: auto; }
.rk-promo-inline input[type="text"] { flex: 1 1 180px; min-width: 0; }
/* .rk-select et .rk-btn ont des paddings/tailles différents : on impose une hauteur
   commune et un padding vertical nul pour que champ et bouton s'alignent. */
.rk-promo-inline input[type="text"],
.rk-promo-inline .rk-btn { height: 44px; font-size: 15px; border-radius: 10px; }
.rk-promo-inline input[type="text"] { padding: 0 14px; }
.rk-promo-inline .rk-btn { padding: 0 18px; }

/* Conteneur au même gabarit que le tunnel de commande */
.rk-narrow { max-width: 860px; margin: 0 auto; }

/* Barre d'action finale : bouton à droite, largeur auto (repli pleine largeur sur mobile) */
.rk-actions-end { display: flex; justify-content: flex-end; margin-top: 18px; }
@media (max-width: 640px) {
  .rk-actions-end { display: block; }
  .rk-actions-end .rk-btn { width: 100%; }
}

/* -------------------------------------------------------------------------
   Pages rendues par le cœur WHMCS (ionCube) : pas de template à retoucher,
   on les habille via le CSS. Cas type : redirection vers la passerelle.
   ------------------------------------------------------------------------- */

/* Barre de progression */
.progress {
  height: 8px; border-radius: 500px; overflow: hidden;
  background: rgba(37,37,37,0.08); box-shadow: none; margin: 22px auto; max-width: 420px;
}
.progress-bar {
  background: var(--rk-gradient-orange); box-shadow: none;
  background-image: var(--rk-gradient-orange);
}
/* on conserve les variantes de couleur (ex. jauge de robustesse du mot de passe) */
.progress-bar-success { background: var(--color-success); background-image: none; }
.progress-bar-warning { background: #F0A830; background-image: none; }
.progress-bar-danger  { background: var(--color-danger); background-image: none; }
.progress-bar-striped { background-image: none; }

/* Boutons rendus sans classe par le cœur (ex. "Pay Now") : sinon rendu natif du navigateur */
input[type="submit"]:not([class]),
button[type="submit"]:not([class]) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  border: none; border-radius: 10px; padding: 12px 22px; cursor: pointer;
  background: var(--rk-gradient-orange); color: #fff;
  box-shadow: 0 8px 20px rgba(255,72,72,0.25);
  transition: filter .12s ease, transform .12s ease;
}
input[type="submit"]:not([class]):hover,
button[type="submit"]:not([class]):hover { filter: brightness(1.05); }
input[type="submit"]:not([class]):active,
button[type="submit"]:not([class]):active { transform: scale(.97); }

/* En-têtes de liste triables */
.rk-th-sortable { cursor: pointer; user-select: none; position: relative; padding-right: 20px; }
.rk-th-sortable:hover { color: var(--color-primary-strong); }
.rk-th-sortable::after {
  content: "\f0dc"; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome; font-weight: 900;
  position: absolute; right: 6px; font-size: 10px; opacity: .25;
}
.rk-th-sortable.is-sorted-asc::after  { content: "\f0de"; opacity: 1; color: var(--color-primary-strong); }
.rk-th-sortable.is-sorted-desc::after { content: "\f0dd"; opacity: 1; color: var(--color-primary-strong); }
.rk-th-sortable:focus-visible { outline: 2px solid var(--color-primary-strong); outline-offset: -2px; }

/* Pastille de comptage des tuiles de services (orange clair) */
.rk-badge--tint { background: var(--surface-tint); color: var(--color-primary-strong); }
.rk-badge--tint::before { display: none; }

/* Menu d'actions "⋮" dans les listes.
   .rk-table-wrap a overflow-x:auto, qui rognerait un panneau en position:absolute.
   On le rend donc fixe via JS-free CSS : le panneau sort du flux mais reste dans
   la cellule, et on autorise le débordement vertical du conteneur sur desktop. */
/* :has() a un support inégal -> classe explicite posée sur le conteneur. */
@media (min-width: 641px) {
  .rk-table-wrap--menus { overflow: visible; }
}
.rk-kebab { position: relative; display: inline-flex; }
.rk-kebab__btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--border-strong);
  background: #fff; color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.rk-kebab__btn:hover { background: rgba(37,37,37,0.04); color: var(--text-strong); }
.rk-kebab__panel {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 232px; background: #fff; border-radius: 12px;
  box-shadow: 0 16px 44px rgba(37,37,37,0.22); overflow: hidden; text-align: left;
}
.rk-kebab.is-open .rk-kebab__panel { display: block; }
/* Ouverture vers le haut, décidée en JS (.rk-kebab--up) quand il n'y a pas la
   place en dessous : évite d'agrandir la page / le scroll en bas de liste. */
.rk-kebab--up .rk-kebab__panel { top: auto; bottom: calc(100% + 8px); }
.rk-kebab__item {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px;
  font-size: 15px; font-weight: 600; color: var(--text-strong); text-decoration: none;
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.rk-kebab__item:last-child { border-bottom: none; }
.rk-kebab__item:hover { background: var(--surface-tint); color: var(--color-primary-strong); text-decoration: none; }
.rk-kebab__item i { width: 18px; color: var(--color-primary-strong); font-size: 15px; }
/* Le panneau reste en position absolue sur mobile : en `static` il s'insérait dans
   le flux et repoussait toutes les lignes suivantes à chaque ouverture. Il est déjà
   ancré à droite (right:0), donc pas de débordement latéral. Cela suppose que la
   carte mobile ne rogne pas ses enfants — cf. le retrait d'`overflow:hidden` sur
   `.rk-table-wrap .rk-table tr` dans la media query 640px. */
@media (max-width: 640px) {
  .rk-kebab__panel { min-width: 0; width: max-content; max-width: calc(100vw - 56px); }
}

/* -------------------------------------------------------------------------
   Configuration d'un nom de domaine (configsitedomain) — parcours en étapes
   ------------------------------------------------------------------------- */
.rk-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.rk-step { flex: 1; height: 6px; border-radius: 500px; background: rgba(37,37,37,0.10); position: relative; }
.rk-step--done, .rk-step--on { background: var(--rk-gradient-orange); }
.rk-step__dot {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid rgba(37,37,37,0.12); color: var(--text-muted);
  font-size: 12px; font-weight: 700;
}
.rk-step--done .rk-step__dot, .rk-step--on .rk-step__dot { border-color: transparent; background: var(--rk-gradient-orange); color: #fff; }
.rk-steps + .rk-card { margin-top: 22px; }

.rk-step-title { margin: 0 0 16px; padding-bottom: 12px; font-size: 20px; font-weight: 700; color: var(--text-strong); border-bottom: 1px solid var(--border-subtle); }
.rk-step-subtitle { margin: 26px 0 10px; font-size: 16px; font-weight: 700; color: var(--text-strong); }
.rk-step-text { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--text-muted); font-weight: 500; }
.rk-step-list { margin: 0 0 12px; padding-left: 20px; font-size: 15px; line-height: 1.9; color: var(--text-muted); font-weight: 500; }

/* Saisie du domaine : préfixe "www." collé au champ */
.rk-domain-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rk-domain-field__prefix { font-size: 15px; font-weight: 700; color: var(--text-muted); }

/* Enregistrements DNS à créer */
.rk-dns-table { border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; margin: 6px 0 4px; }
.rk-dns-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); }
.rk-dns-row:last-child { border-bottom: none; }
.rk-dns-row--head { background: var(--surface-subtle); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint, rgba(37,37,37,0.45)); }
.rk-dns-cell { font-family: var(--font-mono, monospace); font-size: 14px; color: var(--text-strong); word-break: break-all; }
.rk-dns-type { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; padding: 4px 12px; border-radius: 500px; background: var(--surface-tint); color: var(--color-primary-strong); font-size: 12px; font-weight: 700; }
@media (max-width: 640px) {
  .rk-dns-row { grid-template-columns: 1fr; gap: 6px; }
  .rk-dns-row--head { display: none; }
}

/* Logos des registrars */
.rk-registrars { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 12px; margin: 8px 0 4px; }
.rk-registrar { display: flex; align-items: center; justify-content: center; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 12px; background: #fff; transition: border-color .12s ease; }
.rk-registrar:hover { border-color: var(--color-primary-strong); }
.rk-registrar img { max-width: 100%; height: auto; }

/* Bouton de copie (valeurs DNS…) */
.rk-copy {
  flex: none; width: 28px; height: 28px; border-radius: 8px; margin-left: 8px;
  border: 1px solid var(--border-subtle); background: #fff; color: var(--text-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rk-copy:hover { background: var(--surface-tint); color: var(--color-primary-strong); border-color: var(--color-primary-strong); }
.rk-copy.is-copied { background: rgba(46,213,115,.14); color: #1f9d57; border-color: #1f9d57; }
.rk-copy.is-failed { background: rgba(255,71,87,.12); color: var(--color-danger); border-color: var(--color-danger); }
.rk-dns-cell { display: flex; align-items: center; }
.rk-dns-val { min-width: 0; word-break: break-all; }

/* -------------------------------------------------------------------------
   Ouverture des menus déroulants au survol.
   Réservé aux périphériques à pointeur fin : sur tactile il n'y a pas de survol,
   et le clic (géré par radioking.js) reste le seul mode — il continue de
   fonctionner partout, y compris au clavier.
   ------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .rk-dropdown:hover > .rk-dropdown__panel { display: block; }

  /* Le panneau est décalé de 12px sous le déclencheur : sans ce pont invisible,
     la souris quitte la zone survolée en traversant l'espace et le menu se ferme. */
  .rk-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
    display: none;
  }
  .rk-dropdown:hover::after { display: block; }
}

/* -------------------------------------------------------------------------
   Survol des entrées de menu — changement de couleur uniquement.
   Pas de fond ("surlignage"), pas de décalage : seuls le texte et l'icône
   passent en couleur de marque. Vaut pour la barre de nav, ses sous-menus
   et les menus ⋮ des listings.
   ------------------------------------------------------------------------- */
.rk-nav__item,
.rk-menu-item,
.rk-kebab__item {
  transition: color .12s ease;
}
.rk-nav__item:hover,
.rk-nav__item:focus-visible,
.rk-menu-item:hover,
.rk-menu-item:focus-visible,
.rk-kebab__item:hover,
.rk-kebab__item:focus-visible {
  background: transparent;
  color: var(--color-primary-strong);
  text-decoration: none;
}
/* l'icône suit la mise en couleur */
.rk-menu-item:hover .rk-menu-item__icon,
.rk-menu-item:focus-visible .rk-menu-item__icon,
.rk-kebab__item:hover i,
.rk-kebab__item:focus-visible i,
.rk-nav__item:hover i,
.rk-nav__item:focus-visible i { color: var(--color-primary-strong); }

/* les entrées non cliquables (ex. "aucune notification") restent neutres */
.rk-menu-item.is-empty:hover { color: rgba(37,37,37,0.7); }

/* -------------------------------------------------------------------------
   Survols des boutons — harmonisation.
   Les variantes pleines s'éclaircissent, les variantes secondaires (outline,
   icônes, liens de retour) passent à la couleur de marque.
   ------------------------------------------------------------------------- */

/* Lien de retour ("Revenir au service") : n'était pas défini côté thème client */
.rk-link-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: color .12s ease;
}
.rk-link-back:hover,
.rk-link-back:focus-visible { color: var(--color-primary-strong); text-decoration: none; }

/* Bouton secondaire : bordure + texte en couleur de marque (plutôt qu'un simple
   gris à peine perceptible) */
.rk-btn--outline:hover,
.rk-btn--outline:focus-visible {
  background: var(--surface-tint);
  border-color: var(--color-primary-strong);
  color: var(--color-primary-strong);
}

/* Bouton "⋮" des listings et bouton de copie : même logique */
.rk-kebab__btn:hover,
.rk-kebab__btn:focus-visible {
  background: var(--surface-tint);
  border-color: var(--color-primary-strong);
  color: var(--color-primary-strong);
}

/* Retour tactile commun à tous les boutons */
.rk-btn:active { transform: scale(.97); }

/* Focus clavier visible sur l'ensemble des boutons */
.rk-btn:focus-visible,
.rk-kebab__btn:focus-visible,
.rk-copy:focus-visible {
  outline: 2px solid var(--color-primary-strong);
  outline-offset: 2px;
}

/* Sous-menus de la barre de nav : une entrée = une ligne.
   Le panneau s'élargit au contenu (width:max-content) au lieu de laisser le
   texte passer à la ligne. Volontairement limité à .rk-nav : le panneau des
   notifications partage .rk-menu-item mais contient des messages longs, qui
   doivent continuer de se répartir sur plusieurs lignes. */
@media (min-width: 1025px) {
  .rk-nav .rk-dropdown__panel {
    width: max-content;
    max-width: calc(100vw - 32px);
  }
  .rk-nav .rk-menu-item { white-space: nowrap; }
}

/* -------------------------------------------------------------------------
   Survol des boutons stylés en inline (dashboard, encarts…).
   Leur background est défini dans l'attribut style : une règle CSS externe ne
   peut pas le surcharger. On passe donc par un voile en box-shadow interne,
   qui fonctionne sur n'importe quel fond (blanc, couleur, transparent).
   ------------------------------------------------------------------------- */
.rk-hoverable {
  transition: box-shadow .12s ease, transform .12s ease;
}
.rk-hoverable:hover,
.rk-hoverable:focus-visible {
  box-shadow: inset 0 0 0 999px rgba(0,0,0,0.05);
  text-decoration: none;
}
.rk-hoverable:active { transform: scale(.97); }
/* sur fond sombre/coloré, un voile clair est plus lisible */
.rk-hoverable--light:hover,
.rk-hoverable--light:focus-visible { box-shadow: inset 0 0 0 999px rgba(255,255,255,0.16); }

/* Bandeaux du tableau de bord (démo, factures échues, impayées) ---------------
   Le flex vit ici et non dans le style inline : un style inline ne peut pas être
   repris par une media query sans !important. Sur mobile le bandeau passe en
   colonne, sinon le bouton en flex:none écrase la colonne de texte. */
.rk-banner { display: flex; align-items: center; gap: 18px; }
@media (max-width: 640px) {
  .rk-banner { flex-wrap: wrap; align-items: flex-start; gap: 14px; }
  .rk-banner > a,
  .rk-banner > .rk-btn { width: 100%; justify-content: center; }
}

/* Menu compte : dans le topbar en desktop, replié dans la nav en mobile pour
   désencombrer la barre. Un seul markup source (includes/account-menu.tpl). */
.rk-nav__account { display: none; }
@media (max-width: 1024px) {
  .rk-topbar .rk-profile { display: none; }
  .rk-nav .rk-nav__account { display: block; border-top: 1px solid var(--border-subtle); margin-top: 6px; padding-top: 6px; }
}

/* Listings en cartes sur mobile : hiérarchie interne ---------------------------
   Par défaut chaque cellule est une ligne « libellé / valeur ». Deux exceptions :
   la cellule d'identité (.rk-td-head, nom du service avec avatar) sert d'en-tête de
   carte, et celle des actions (.rk-td-actions) de pied — toutes deux en pleine
   largeur, sans libellé, sinon le contenu est comprimé à droite d'une étiquette
   redondante. Classes explicites et non :first-child/:last-child : le tableau des
   parrainages (affiliates.tpl) commence par une date et finit par un statut, deux
   vraies données dont le libellé doit rester. */
@media (max-width: 640px) {
  .rk-table-wrap .rk-table td.rk-td-head,
  .rk-table-wrap .rk-table td.rk-td-actions {
    display: block;
    text-align: left;
  }
  .rk-table-wrap .rk-table td.rk-td-head::before,
  .rk-table-wrap .rk-table td.rk-td-actions::before,
  .rk-table-wrap .rk-table td:not([data-label])::before { content: none; }

  .rk-table-wrap .rk-table td.rk-td-head {
    padding: 14px;
    background: rgba(37,37,37,0.025);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 9px 9px 0 0;
    font-size: 15px;
  }
  .rk-table-wrap .rk-table td.rk-td-actions {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--border-subtle);
  }
  /* Boutons pleine largeur, le menu « … » garde sa taille naturelle. */
  .rk-table-wrap .rk-table td.rk-td-actions .rk-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  }
  .rk-table-wrap .rk-table td.rk-td-actions .rk-actions > .rk-btn {
    flex: 1 1 auto; justify-content: center;
  }
  .rk-table-wrap .rk-table td.rk-td-actions .rk-actions > .rk-kebab { flex: 0 0 auto; }

  /* Panneau ancré à la cellule d'actions, près du bouton, et ouvert VERS LE HAUT
     en permanence sur mobile (top:auto; bottom). Le kebab est toujours dans la
     barre d'actions en bas de carte, avec du contenu au-dessus : ouvrir vers le
     haut garantit qu'on n'agrandit jamais le document — un panneau vers le bas
     s'étend sous le footer et rend la page scrollable (le « scroll » perçu au
     clic). Se base sur la position, pas sur la place viewport (qui pouvait laisser
     croire qu'il y avait la place en bas alors que le document, lui, débordait). */
  .rk-table-wrap .rk-table td.rk-td-actions { position: relative; }
  .rk-table-wrap .rk-table td.rk-td-actions .rk-kebab { position: static; }
  .rk-table-wrap .rk-table td.rk-td-actions .rk-kebab__panel {
    left: 14px; right: 14px; width: auto; min-width: 0; max-width: none;
    top: auto; bottom: calc(100% + 8px);
    max-height: 70vh; overflow-y: auto;
  }
}

/* Logo du header ---------------------------------------------------------------
   all.min.css (hérité de six) applique `img { max-width:100%; height:auto }`.
   Une déclaration CSS l'emporte sur l'attribut HTML height="30", qui n'est qu'un
   indice de présentation : le logo était donc dimensionné par la largeur
   disponible, à une échelle fractionnaire — d'où un rendu flou malgré un SVG
   vectoriel. On impose une hauteur entière et on libère la largeur. */
.rk-topbar__logo { flex: none; display: flex; align-items: center; }
.rk-topbar__logo img {
  display: block;
  height: 30px;
  width: auto;
  max-width: none;
}
@media (max-width: 480px) {
  .rk-topbar__logo img { height: 26px; }
}

/* Bouton « Augmenter mon offre » : pleine largeur sur mobile (le bloc upsell passe
   en colonne quand il wrap, le bouton doit alors occuper toute la largeur). */
@media (max-width: 640px) {
  .rk-upsell-btn { width: 100%; justify-content: center; }
}