/* Empêche la table d'exploser la carte */
.kbmb-widget--account-subscription .kbmb-table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table responsive */
.kbmb-widget--account-subscription .kbmb-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 520px; /* OK: le scroll gère le dépassement */
}

/* Empêche les cellules de forcer des largeurs absurdes */
.kbmb-widget--account-subscription .kbmb-table th,
.kbmb-widget--account-subscription .kbmb-table td{
  white-space: nowrap;
}

/* On laisse la colonne "Détail" respirer (évite un scroll inutile si le texte est long) */
.kbmb-widget--account-subscription .kbmb-table td:last-child{
  white-space: normal;
  word-break: break-word;
}

/* Optionnel : sur mobile, on autorise le retour à la ligne partout pour limiter le scroll horizontal */
@media (max-width: 768px){
  .kbmb-widget--account-subscription .kbmb-table th,
  .kbmb-widget--account-subscription .kbmb-table td{
    white-space: normal;
  }
}<?php
function kbmb_render_account_summary_block() {
    ob_start();
    ?>
    <div class="kb-ux-container">
      <div class="kbmb-widget kbmb-glass kbmb-widget--account-subscription" data-widget="account-subscription">
        <div class="kbmb-account-subscription">
        <!-- Existing content here -->
        </div>
      </div>
    </div>
    <?php
    return ob_get_clean();
}
<?php
class KB_Widget_Account_Subscription extends KB_Widget_Base {
    public function render() {
        $user_id = get_current_user_id();
        if ( ! $user_id ) {
            return;
        }

        echo do_shortcode( '[kbmb_account_subscription]' );
    }
/* Donne plus de place à la colonne "bougies" (2e colonne) */
.kbmb-widget--account-subscription .kbmb-account-subscription-grid{
  grid-template-columns: 0.95fr 1.05fr;
}

/* Responsive : en dessous d'un certain seuil, on repasse en 1 colonne */
@media (max-width: 900px){
  .kbmb-widget--account-subscription .kbmb-account-subscription-grid{
    grid-template-columns: 1fr;
  }
}
	/* =========================================================
   KB — Header Band (Mon espace personnel)
   Cible : bandeau du profil / compte
   ========================================================= */

/* ⚠️ Mets cette classe sur le wrapper HTML du bandeau : .kbmb-header-band */
.kbmb-header-band{
  background: var(--kbmb-band-bg) !important;
  background-image: none !important; /* kill gradient */
  border: 1px solid var(--kbmb-band-border);
  color: var(--kbmb-band-title);
}

/* Hover (optionnel) */
.kbmb-header-band:hover{
  background: var(--kbmb-band-bg-hover) !important;
  background-image: none !important;
}

/* Titre */
.kbmb-header-band .kb-prof-title,
.kbmb-header-band h3,
.kbmb-header-band h4{
  color: var(--kbmb-band-title) !important;
}

/* Infos (Email / Free / Letters / Board items) => OR */
.kbmb-header-band .kb-prof-meta,
.kbmb-header-band .kb-usage,
.kbmb-header-band .kb-prof-meta *,
.kbmb-header-band .kb-usage *{
  color: var(--kbmb-band-meta) !important;
}

/* Optionnel : si certains bouts doivent être plus “gold” */
.kbmb-header-band .kb-prof-meta strong,
.kbmb-header-band .kb-usage strong{
  color: var(--kbmb-band-meta-strong) !important;
}

/* Boutons du bandeau */
.kbmb-header-band .kb-btn{
  background: var(--kbmb-band-btn-bg) !important;
  border: 1px solid var(--kbmb-band-btn-border) !important;
  color: var(--kbmb-band-btn-text) !important;
}
.kbmb-header-band .kb-btn:hover{
  filter: brightness(1.05);
}