/* ============================================================
 * Triangle Nation — Mon compte unifié (thème sombre/or forcé)
 * ============================================================ */
:root{
  --tn-bg:#0a0a0a;
  --tn-card:#111214;
  --tn-line:#23262b;
  --tn-text:#ffffff;
  --tn-muted:#9aa1a9;

  --tn-accent:#C9A227;
  --tn-accent-d:#B38F1F;
  --tn-panel:#121212;
  --tn-panel-2:#171717;
  --tn-border:#262626;

  --tn-gold-2:#e3c86a;
  --tn-white:#ffffff;
  --tn-black:#111111;
  --tn-danger:#ef476f;
  --tn-success:#06d6a0;
  --tn-warn:#ffd166;

  --tn-radius:14px;
  --tn-radius-lg:18px;
  --tn-shadow:0 10px 24px rgba(0,0,0,.22);
}

/* Titres */
.mel-title{
  font-size:clamp(28px,2.2vw,40px);
  font-weight:800;
  margin:10px 0 24px;
  color:var(--tn-text);
}
.mel-account-form .mel-title{
  font-size: clamp(42px, 4.2vw, 72px);
  letter-spacing:.5px;
}

/* Cartes génériques */
.mel-card{
  background:#0f1012;
  border-radius:14px;
  padding:22px;
  margin:0 0 18px;
  border:1px solid var(--tn-line);
  color:var(--tn-text);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.mel-card h3{
  margin-top:0;
  font-size:18px;
  color:var(--tn-accent);
  border-bottom:1px solid var(--tn-line);
  padding-bottom:6px;
  margin-bottom:12px;
}

/* Grilles utilitaires */
.mel-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.mel-grid .col-2{ grid-column:span 2; }
@media (max-width:640px){
  .mel-grid{ grid-template-columns:1fr; }
  .mel-grid .col-2{ grid-column:span 1; }
}
@media (min-width:769px){
  .col-md-1{ grid-column: span 1; }
}

/* Labels + champs */
.mel-card label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
  color:var(--tn-text);
}
.mel-card input[type="text"],
.mel-card input[type="tel"],
.mel-card input[type="password"],
.mel-card input[type="date"],
.mel-card select,
.mel-card textarea{
  width:100%;
  border:1px solid var(--tn-line);
  border-radius:10px;
  padding:10px 12px;
  background:#18191b;
  color:var(--tn-text);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mel-card ::placeholder{ color:var(--tn-muted); }
.mel-card input:focus,
.mel-card select:focus,
.mel-card textarea:focus{
  outline:none;
  border-color:var(--tn-accent);
  box-shadow:0 0 0 3px rgba(201,162,39,.18);
}

/* Champ date */
.mel-card input[type="date"]{
  appearance:none;
  color-scheme: dark; /* pour garder le picker sombre */
  accent-color: var(--tn-accent);
}
.mel-card input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(65%) sepia(90%) saturate(450%) hue-rotate(10deg) brightness(95%) contrast(90%);
  cursor:pointer;
  opacity:.9;
}
.mel-card input[type="date"]::-webkit-calendar-picker-indicator:hover{
  opacity:1;
}

/* Boutons Woo "alt" */
.mel-card .button.alt{
  border-radius:999px;
  padding:10px 18px;
  background:var(--tn-accent)!important;
  color:#111!important;
  border:none;
  font-weight:800;
  letter-spacing:.2px;
  transition:background .2s ease, color .2s ease, transform .06s ease;
  margin-top:10px;
}
.mel-card .button.alt:hover{
  background:#fff!important;
  color:#000!important;
  transform:translateY(-1px);
}

/* Ghost harmonisés */
.mel-card a.button:not(.alt),
.mel-card button.button:not(.alt){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  border:1px solid #2a2a2a;
  background:transparent;
  color:#f5f5f5!important;
  transition:transform .12s, background-color .18s, color .18s, border-color .18s;
}
.mel-card a.button:not(.alt):hover,
.mel-card button.button:not(.alt):hover{
  transform:translateY(-1px);
  border-color:#C9A227;
  color:#C9A227!important;
  background:rgba(201,162,39,.10);
}

/* --- Styles des boutons "Ghost" pour la section Paiement Elementor ---Ajout 1 décembre 2025 */
/* 1. État Normal */
.elementor-10 .elementor-element.elementor-element-0221083 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .shop_table .button, 
.elementor-10 .elementor-element.elementor-element-0221083 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .order-again .button, 
.elementor-10 .elementor-element.elementor-element-0221083 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-pagination .button, 
.elementor-10 .elementor-element.elementor-element-0221083 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom).e-my-account-tab__payment-methods .woocommerce-MyAccount-content-wrapper .button,
.woocommerce-MyAccount-paymentMethods .button /* Sécurité pour le bouton Ajouter */
{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px !important;
    font-weight: 700 !important;
    line-height: 1;
    text-decoration: none;
    border: 1px solid #2a2a2a !important;
    background: transparent !important;
    color: #f5f5f5 !important;
    transition: transform .12s, background-color .18s, color .18s, border-color .18s !important;
    /* Reset des styles par défaut WooCommerce */
    float: none; 
    margin-bottom: 5px;
}

/* 2. État Au Survol (Hover) */
.elementor-10 .elementor-element.elementor-element-0221083 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .shop_table .button:hover, 
.elementor-10 .elementor-element.elementor-element-0221083 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .order-again .button:hover, 
.elementor-10 .elementor-element.elementor-element-0221083 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-pagination .button:hover, 
.elementor-10 .elementor-element.elementor-element-0221083 .e-my-account-tab:not(.e-my-account-tab__dashboard--custom).e-my-account-tab__payment-methods .woocommerce-MyAccount-content-wrapper .button:hover,
.woocommerce-MyAccount-paymentMethods .button:hover
{
    transform: translateY(-1px);
    border-color: #C9A227 !important;
    color: #C9A227 !important;
    background: rgba(201,162,39,.10) !important;
}

/* Accordéons (profil) */
.mel-account-form{ max-width:980px; }
.mel-acc{
  margin:0 0 16px;
  border-radius:14px;
  overflow:clip;
  background:#121212;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.mel-acc__summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 22px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: background .25s, color .25s, border-color .25s;
  position:relative;
  font-size:clamp(18px,1.6vw,22px);
}
.mel-acc__summary::-webkit-details-marker{ display:none; }
.mel-acc__summary:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:#c9a227;
  opacity:.8;
}
.mel-acc__chev{
  margin-left:auto;
  color:#c9a227;
  transition: transform .25s, color .25s;
  width:22px;
  height:22px;
}
.mel-acc[open] .mel-acc__chev{
  transform:rotate(180deg);
  color:#fff;
}
.mel-acc__summary:hover{
  background:rgba(201,162,39,.16);
  color:#fff;
}
.mel-acc__panel{
  padding:16px 18px 18px;
}
.mel-acc .mel-card{
  background:#161616;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.mel-acc .mel-card h3{ display:none; }

/* Préférences comms: switches + chips */
.tn-label{
  display:block;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
}
.tn-switch{
  --h:28px; --w:56px;
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px 12px 18px;
  background:#1b1b1b;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  position:relative;
  transition:border-color .2s, background .2s, box-shadow .2s;
  margin:10px 0;
}
.tn-switch + .tn-switch{ margin-top:10px; }
.tn-switch::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  border-radius:10px 0 0 10px;
  background:transparent;
  transition:width .25s, background .25s;
}
.tn-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.tn-switch-text{
  order:1;
  flex:1;
  min-width:0;
  text-align:left;
  color:#f0f0f0;
  font-weight:800;
}
.tn-switch-track{
  order:2;
  flex:0 0 var(--w);
  margin-left:auto;
  width:var(--w);
  height:var(--h);
  background:#2a2a2a;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  position:relative;
  transition:background .2s, border-color .2s, box-shadow .2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.tn-switch-track:before{
  content:"";
  position:absolute;
  top:50%;
  left:3px;
  width:22px;
  height:22px;
  transform:translateY(-50%);
  border-radius:999px;
  background:#fff;
  transition:transform .25s, background .25s;
}
.tn-switch input:checked + .tn-switch-track{
  background:#c9a227;
  border-color:#c9a227;
  box-shadow:0 0 0 3px rgba(201,162,39,.20);
}
.tn-switch input:checked + .tn-switch-track:before{
  transform:translate(calc(var(--w) - 28px), -50%);
  background:#000;
}
@supports(selector(:has(*))){
  .tn-switch:has(input:checked){
    border-color:#c9a227;
    background:rgba(201,162,39,.08);
    box-shadow: inset 0 0 0 1px rgba(201,162,39,.15);
  }
  .tn-switch:has(input:checked)::before{
    background:#c9a227;
    width:10px;
  }
}

.tn-chip-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.tn-chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:#1a1a1a;
  padding:8px 14px;
  cursor:pointer;
  user-select:none;
  transition:border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.tn-chip input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.tn-chip span{
  color:#f0f0f0;
  font-weight:800;
}
@supports(selector(:has(*))){
  .tn-chip:has(input:checked){
    background:#c9a227;
    border-color:#c9a227;
    box-shadow:0 0 0 3px rgba(201,162,39,.25);
  }
  .tn-chip:has(input:checked) span{
    color:#000;
  }
}
.tn-chip--disabled{
  opacity:.45;
  filter:grayscale(40%);
  pointer-events:none;
}

/* Dashboard abonnement */
.tn-card-subscription{
  background:#101010;
  border:1px solid #262626;
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  color:#f5f5f5;
}
.tn-card-title{
  color:#e5e7eb;
  font-weight:800;
  font-size:clamp(20px,2.1vw,24px);
  margin:0 0 12px;
}
.tn-card-row{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
.tn-card-col{ flex:1; }
.tn-card-col-right{
  flex:0 0 auto;
  min-width:320px;
}
.tn-card-plan{
  font-size:1.1em;
  margin-bottom:8px;
}
.tn-card-price{
  font-size:1.3em;
  font-weight:800;
  color:var(--tn-accent);
}
.tn-card-period{
  font-size:.85em;
  color:var(--tn-muted);
}
.tn-card-status{
  margin-top:8px;
  color:var(--tn-muted);
}
.tn-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* Boutons TN (généraux) */
.tn-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  line-height:1;
  text-decoration:none;
  border:1px solid transparent;
  background:transparent;
  color:#f5f5f5;
  transition:transform .12s, background-color .18s, color .18s, border-color .18s;
}
.tn-btn:hover{
  transform:translateY(-1px);
  border-color:var(--tn-accent);
  color:var(--tn-accent);
  background:rgba(201,162,39,.10);
}
.tn-btn-primary{
  background:var(--tn-accent);
  color:#111!important;
  border-color:var(--tn-accent);
}
.tn-btn-primary:hover{
  background:#fff;
  border-color:#fff;
  color:#111;
}
.tn-btn-outline{
  border-color:var(--tn-accent);
  background:rgba(201,162,39,.10);
  color:#f5f5f5;
}
.tn-btn-outline:hover{
  background:transparent;
  color:#fff!important;
  border-color:#fff;
}
.tn-btn-ghost{
  border-color:#2a2a2a;
  background:transparent;
  color:#f5f5f5!important;
}
.tn-btn-ghost:hover{
  border-color:#c9a227;
  background:transparent;
  color:#c9a227!important;
}
.tn-btn-danger{
  background:#d62828;
  color:var(--tn-white)!important;
  border-color:transparent;
}
.tn-btn-danger:hover{
  background:var(--tn-white);
  color:var(--tn-black)!important;
  border-color:var(--tn-black);
}

/* Picker abonnements */
.tn-tabs{
  display:flex;
  gap:8px;
  margin:10px 0 8px;
}
.tn-tab{
  background:#1a1a1a;
  border:1px solid #2a2a2a;
  color:#f7f7f7;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  cursor:pointer;
}
.tn-tab.is-active{
  background:#c9a227;
  color:#111;
  border-color:#c9a227;
}
.tn-sub-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:12px 0 16px;
}
.tn-sub-option{
  display:flex;
  align-items:center;
  gap:10px;
  background:#1a1a1a;
  border:1px solid #2a2a2a;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
}
.tn-sub-option input{ accent-color:#c9a227; }
.tn-sub-name{ font-weight:700; }
.tn-sub-price{
  margin-left:auto;
  color:#c9a227;
  font-weight:700;
}
.tn-var-fields{
  background:#141414;
  border:1px dashed #2a2a2a;
  border-radius:12px;
  padding:12px;
  margin:-4px 0 10px;
}
.tn-field{
  display:grid;
  gap:6px;
  margin-bottom:12px;
  max-width:560px;
}
.tn-field label{
  color:#d9d9d9;
  font-weight:700;
  letter-spacing:.2px;
}
.tn-field input,
.tn-field select{
  background:#0e0e0e;
  color:#f5f5f5;
  border:1px solid #2a2a2a;
  border-radius:10px;
  padding:11px 12px;
  outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.tn-field input::placeholder{ color:#9b9b9b; }
.tn-field input:focus,
.tn-field select:focus{
  border-color:#c9a227;
  box-shadow:0 0 0 3px rgba(201,162,39,.18);
}

/* Enfants + formulaires */
.tn-child-form{
  background:#131313;
  border:1px dashed #2a2a2a;
  border-radius:14px;
  padding:16px;
  margin-top:10px;
}
.tn-child-form h3,
.tn-child-form h4{
  margin:0 0 10px;
  font-weight:800;
  color:#fff;
}
.tn-help{
  opacity:.85;
  font-size:.95em;
  color:#e5e7eb;
}

/* Tableaux unifiés */
table.shop_table.tn-table{
  width:100%;
  border:1px solid #2a2a2a;
  border-radius:14px;
  overflow:hidden;
  background:#0f0f0f;
  border-collapse:separate;
  border-spacing:0;
  margin:14px 0 22px;
}
table.shop_table.tn-table thead th{
  background:#1d1d1d;
  color:#ffffff;
  padding:14px 18px;
  border-bottom:1px solid #2a2a2a;
  text-align:left;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
}
table.shop_table.tn-table tbody tr:first-child td{ border-top:0; }
table.shop_table.tn-table tbody td{
  color:#ffffff;
  padding:14px 18px;
  border-top:1px solid #1c1c1c;
  font-size:15px;
  vertical-align:middle;
}
table.shop_table.tn-table tbody tr:nth-child(even) td{
  background:#121212;
}
table.shop_table.tn-table tbody tr:hover td{
  background:#111111;
}
table.shop_table.tn-table a.tn-btn,
table.shop_table.tn-table .button,
table.shop_table.tn-table a.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  border:1px solid #2a2a2a;
  color:#f5f5f5!important;
  background:transparent;
  transition:transform .12s, background-color .18s, color .18s, border-color .18s;
}
table.shop_table.tn-table a.tn-btn:hover,
table.shop_table.tn-table .button:hover,
table.shop_table.tn-table a.button:hover{
  transform:translateY(-1px);
  border-color:#C9A227;
  color:#C9A227!important;
  background:rgba(201,162,39,.10);
}

/* Icônes menu (FA5 forcé) */
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link a:before{
  font-family:'Font Awesome 5 Free';
  font-weight:900;
  display:inline-block;
  margin-right:10px;
  transition: color .3s ease;
  color:#000;
}
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--dashboard a:before{ content:"\f015"; }
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--profil a:before{ content:"\f007"; }
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--mes-enfants a:before{ content:"\f1ae"; }
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--mon-abonnement a:before{ content:"\f3ff"; }
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--paiements-factures a:before{ content:"\f570"; }
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--contrats a:before{ content:"\f5b7"; }
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link--customer-logout a:before{ content:"\f2f5"; }
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link a:hover::before,
body.woocommerce-account ul li.is-active a:before{
  color:#000!important;
}

/* Notices Woo */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info{
  background:var(--tn-panel);
  border:1px solid var(--tn-border);
  border-left:4px solid var(--tn-accent);
  color:var(--tn-text);
  border-radius:var(--tn-radius);
}

/* Responsive */
@media (max-width:860px){
  .tn-card-subscription{ padding:16px; }
  .tn-sub-grid{ grid-template-columns:1fr; }
  .tn-card-row{ flex-direction:column; }
  .tn-card-col-right{ min-width:auto; }

  table.shop_table.tn-table thead{ display:none; }
  table.shop_table.tn-table tbody td{
    display:block;
    border-top:1px solid #1c1c1c;
    padding:10px 14px;
  }
  table.shop_table.tn-table tbody tr td:first-child{ padding-top:14px; }
  table.shop_table.tn-table tbody tr td:last-child{ padding-bottom:14px; }

  .tn-btn{ width:100%; text-align:center; }
  .tn-actions .tn-btn + .tn-btn{
    margin-left:0;
    margin-top:8px;
  }
}
@media (max-width:768px){
  .mel-acc__summary{ padding:14px 16px; }
  .mel-acc__panel{ padding:12px 14px 16px; }
}

/* Masquer intro Woo dashboard */
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type{
  display:none;
}

/* États désactivés */
.tn-btn.disabled,
.tn-btn[disabled],
.tn-btn.is-disabled,
.tn-btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
  color:#9aa1a9;
  background:#1a1a1a;
  border-color:#2a2a2a;
  transform:none;
}

.mel-hint{
  margin-top:6px;
  color:#e5e7eb;
  font-size:.9em;
}
.tn-var-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.tn-confirm-note{
  color:#C9A227;
  font-weight:700;
  display:none;
}
.mel-acc .mel-card h3{ display:none; }
.tn-actions .tn-btn + .tn-btn{ margin-left:8px; }

/* ===== Badges de statut (contrastes) ===== */
.woocommerce .status,
.woocommerce .order-status,
.woocommerce .subscription-status,
.wcs-status,
.woocommerce .woocommerce-orders-table__cell-order-status mark,
.woocommerce .woocommerce-table__cell-order-status mark{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:.85rem;
  line-height:1;
  border:1px solid transparent;
}
.status-active,
.subscription-status--active,
.woocommerce-orders-table__cell-order-status .status-active{
  background:#0f3;
  color:#0a0a0a;
  border-color:#00c740;
}
.status-on-hold,
.subscription-status--on-hold{
  background:#ffd166;
  color:#111;
  border-color:#d1a500;
}
.status-pending,
.subscription-status--pending,
.status-pending-cancel,
.subscription-status--pending-cancel{
  background:#ffb347;
  color:#111;
  border-color:#e1901b;
}
.status-cancelled,
.subscription-status--cancelled{
  background:#ef476f;
  color:#fff;
  border-color:#c2274b;
}
.status-expired,
.subscription-status--expired{
  background:#9aa1a9;
  color:#111;
  border-color:#7b848c;
}

/* Correctifs préférences (si formulaire isolé) */
.tn-comms-form .tn-switch{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  gap:14px!important;
}
.tn-comms-form .tn-switch-text{
  order:1!important;
  flex:1 1 auto!important;
  min-width:0!important;
  text-align:left!important;
}
.tn-comms-form .tn-switch-track{
  order:2!important;
  flex:0 0 56px!important;
  margin-left:auto!important;
}

/* ============================
 * Bouton Stripe / Vérifier identité
 * (reset + style sombre-or unifié)
 * ============================ */

/* Neutralise les styles globaux sur tn-btn-stripe */
button.tn-btn-stripe,
.tn-btn-stripe[type=button],
.tn-btn-stripe[type=submit]{
  all: unset;
  display: inline-flex;
}

/* Réapplique le style après reset */
button.tn-btn-stripe{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:44px;
  padding:0 20px;
  border-radius:999px;
  font-weight:700;
  font-size:18px;
  line-height:1;
  text-decoration:none;
  border:1px solid #fff;
  color:#f5f5f5 !important;
  background:transparent;
  transition:
    transform .12s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease;
  cursor:pointer;
}
button.tn-btn-stripe:hover{
  transform:translateY(-1px);
  border-color:#C9A227;
  color:#C9A227 !important;
  background:rgba(201,162,39,.10);
}

/* Logo Stripe PNG */
.tn-btn-stripe .stripe-logo{
  display:inline-block;
  width:72px;
  height:22px;
  background:url('https://trianglenationstagingautomatisation.montrealenligne.dev/wp-content/uploads/2025/09/stripe_2_2.png') no-repeat center / contain;
}

/* ============================================================
 * MODULE GATE (Accès Gym) — Thème sombre forcé
 * Variables SCOPÉES pour ne pas réécrire :root
 * ============================================================ */
.tn-gate{
  /* variables locales utilisées SEULEMENT dans le bloc Gate */
  --tn-bg:#15171A;
  --tn-card:#0f1012;
  --tn-text:#E5E7EB;
  --tn-muted:#9CA3AF;
  --tn-border:#2a2e35;
  --tn-radius:14px;

  --tn-primary:#C9A227;            /* branding or */
  --tn-primary-contrast:#111111;

  --tn-success-bg:#0f2b1c;
  --tn-success-text:#91e1b3;
  --tn-success-border:#1e3d2b;

  --tn-danger-bg:#2b1414;
  --tn-danger-text:#ffb3b3;
  --tn-danger-border:#3f1d1d;
}

/* Bloc principal Gate */
.elementor-widget-woocommerce-my-account .tn-gate.tn-card{
  background: var(--tn-bg);
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius);
  padding: 18px;
  color: var(--tn-text);
}

/* Header */
.tn-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 8px;
}
.tn-card__title{
  margin:0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing:.2px;
  color: var(--tn-text);
}

/* Lead + body */
.tn-card__lead{
  margin: 0 0 12px;
  color: var(--tn-muted);
}
.tn-card__body{
  background: var(--tn-card);
  border: 1px solid var(--tn-border);
  border-radius: 12px;
  padding: 14px;
  color: var(--tn-text);
}
.tn-steps{
  margin:0 0 6px 0;
  padding-left: 18px;
  line-height: 1.5;
  color: var(--tn-text);
}
.tn-card__note{
  color: var(--tn-muted);
  display:block;
}

/* Actions */
.tn-card__actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
}
.tn-feedback{
  min-height: 18px;
  font-size: .95rem;
}
.tn-feedback.is-ok{ color:#0f7a2f; }
.tn-feedback.is-ko{ color:#c5162b; }

/* Badge statut */
.tn-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  border:1px solid transparent;
}
.tn-badge.is-success{
  background: var(--tn-success-bg);
  color: var(--tn-success-text);
  border-color: var(--tn-success-border);
}
.tn-badge.is-danger{
  background: var(--tn-danger-bg);
  color: var(--tn-danger-text);
  border-color: var(--tn-danger-border);
}

/* Integration dans My Account */
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce{
  /* rien à forcer ici */
}

/* Responsive Gate */
@media (max-width: 640px){
  .tn-card__header{
    flex-direction: column;
    align-items:flex-start;
    gap:6px;
  }
}

/* Espacement sous Accès Gym */
.elementor-widget-woocommerce-my-account .tn-gate.tn-card {
  margin-bottom: 24px;
}

/* Bouton Synchroniser / Vérifier identité DANS GATE
   (on applique le même style que tn-btn-stripe, mais sur .tn-btn--primary) */
.tn-btn.tn-btn--primary{
  all: unset;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:44px;
  padding:0 20px;
  border-radius:999px!important;
  font-weight:700;
  font-size:18px;
  line-height:1;
  text-decoration:none;
  border:1px solid #fff!important;
  color:#f5f5f5 !important;
  background:transparent!important;
  cursor:pointer;
  transition:
    transform .12s ease,
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease;
}
.tn-btn.tn-btn--primary:hover{
  transform:translateY(-1px);
  border-color:#C9A227!important;
  color:#C9A227 !important;
  background:rgba(201,162,39,.10)!important;
}