/**
 * Badges / pilules / CTA en forme de capsule — comportement responsive global.
 * Chargé en fin de page (footer) pour surcharger les styles existants.
 */

/* --- Profil : ligne abonnement (badge + lien) --- */
.profile-sub-v2__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    width: 100%;
    min-width: 0;
}

.profile-sub-v2__row .subscription-badge,
.profile-sub-v2__row .subscription-manage-link {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 400px) {
    .profile-sub-v2__row {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-sub-v2__row .subscription-manage-link {
        text-align: center;
    }
}

.subscription-badge {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
    vertical-align: middle;
    padding: clamp(0.28rem, 1.4vw, 0.5rem) clamp(0.45rem, 2.6vw, 0.85rem);
    font-size: clamp(0.62rem, 2.5vw, 0.8rem);
    border-radius: 999px;
}

.subscription-badge--staff {
    max-width: 100%;
}

.subscription-manage-link {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
    padding: clamp(0.28rem, 1.4vw, 0.5rem) clamp(0.45rem, 2.6vw, 0.85rem);
    font-size: clamp(0.65rem, 2.4vw, 0.8rem);
    display: inline-block;
    text-align: center;
}

/* Ancien panneau profil (header_footer / style_tcf) */
.subscription-section .subscription-badge {
    max-width: 100%;
    margin-bottom: 0.5rem;
}

/* --- Section tarifs : badge période + cartes --- */
.pricing-grid,
.pricing-card {
    min-width: 0;
}

@media (max-width: 1100px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 350px) {
    .pricing-grid {
        grid-template-columns: 1fr !important;
    }
}

.card-header {
    min-width: 0;
    padding-left: clamp(0.75rem, 3vw, 1.5rem);
    padding-right: clamp(0.75rem, 3vw, 1.5rem);
}

.period-badge {
    max-width: min(100%, 100vw - 2rem);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    display: inline-block;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
    padding: clamp(0.2rem, 1.1vw, 0.35rem) clamp(0.45rem, 2.8vw, 1rem);
    font-size: clamp(0.62rem, 2.1vw, 0.8rem);
}

.pricing-card--current {
    box-shadow:
        0 0 0 clamp(1px, 0.35vw, 2px) var(--main-color, #d30d0d),
        0 8px 22px rgba(211, 13, 13, 0.22);
}

.tcf-sub-current-pill {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
    padding: clamp(0.22rem, 1.1vw, 0.4rem) clamp(0.4rem, 2.4vw, 0.75rem);
    font-size: clamp(0.62rem, 2.2vw, 0.8rem);
    margin-left: auto;
    margin-right: auto;
}

.card-content {
    min-width: 0;
}

/* --- Accueil : CTA pilule blanche / bordure rouge --- */
.tcf-cta-btn {
    max-width: min(100%, calc(100vw - 2rem));
    width: auto;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
    padding: clamp(0.55rem, 1.8vw, 1rem) clamp(0.75rem, 3.5vw, 2.5rem);
    font-size: clamp(0.76rem, 2.3vw, 1rem);
}

.tcf-skill-btn {
    max-width: min(100%, calc(100vw - 2rem));
    min-width: 0;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: center;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding-left: clamp(0.55rem, 2.5vw, 1.25rem);
    padding-right: clamp(0.55rem, 2.5vw, 1.25rem);
}

/* --- Chaîne vidéos : pastille Premium --- */
.tcf-tv-premium-badge {
    max-width: calc(100% - 12px);
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.55rem, 1.9vw, 0.72rem);
    padding: clamp(0.12rem, 0.9vw, 0.25rem) clamp(0.3rem, 1.6vw, 0.5rem);
    line-height: 1.2;
}

.tcf-tv-body .tcf-tv-meta {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --- Modale checkout : boutons moyens de paiement --- */
.tfc-checkout-methods {
    min-width: 0;
}

.tfc-pay-method {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: clamp(0.62rem, 2vw, 0.78rem);
    padding: clamp(0.38rem, 1.4vw, 0.55rem) clamp(0.28rem, 1.2vw, 0.45rem);
    line-height: 1.25;
}

/* --- Super admin : pastilles dans tableaux --- */
.tcf-superadmin-app .sa-badge {
    max-width: 100%;
    display: inline-block;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
    vertical-align: middle;
    font-size: clamp(0.58rem, 1.6vw, 0.7rem);
    padding: 0.1rem 0.38rem;
}

.tcf-superadmin-app .sa-actions-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem;
    min-width: 0;
    width: max-content;
    margin-left: auto;
}

.tcf-superadmin-app .sa-table-actions {
    min-width: 7rem;
    white-space: nowrap;
}

.tcf-superadmin-app .sa-actions-row .btn,
.tcf-superadmin-app .sa-actions-row .sa-btn-icon {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

.tcf-superadmin-app table td {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --- Profil : badges rôle / statut --- */
.profile-badge {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
    font-size: clamp(0.55rem, 2vw, 0.65rem);
    padding: clamp(0.18rem, 0.9vw, 0.35rem) clamp(0.35rem, 1.8vw, 0.65rem);
}

/* ============================================================
   ELITE TCF CANADA — Polish responsive mobile (global, doux)
   On laisse style_tcf.css piloter la mise en page, on ne fait
   QUE compléter ce qui manque sans !important agressifs.
   ============================================================ */

/* Anti débordement horizontal (sans modifier la mise en page). */
html, body { max-width: 100%; }
body { overflow-x: clip; }

img, video { max-width: 100%; height: auto; }

/* Tables : défilement horizontal sur petits écrans. */
@media (max-width: 768px) {
    .tcf-nclc-table-wrap,
    .support-section table,
    .tcf-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Champs : empêcher le zoom auto iOS (>=16px). */
@media (max-width: 600px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px;
    }
}

/* Typographie : voir theme-vars.css + tcf-typography.css (footer) */