/* ═══════════════════════════════════════════════════════════
   JeTravel Auth — Feuille de style principale
   Charte graphique v5.0 · Juin 2026 · Design 2.4.0 (septembre 2026)

   Chargée seulement sur les pages d'auth et sur un contenu qui contient un shortcode d'Auth
   (jta_should_enqueue_assets()). Aucune police chargée ici (Lot 5, B3) : Montserrat et Poppins
   sont servies par le thème (ou par jetravel-brand). Les couleurs et polices lisent les jetons
   --jt-brand-* (handle jetravel-tokens, CONTRAT_INTEGRATION §2) avec les valeurs de la charte en repli.

   Design 2.4.0 : flat design épuré (charte §26), équilibre 60 % blanc / gris clair, 20 % bleu,
   10 % jaune (§08), bouton principal jaune / texte marine, jamais de texte jaune sur fond bleu.
   Les quatre valeurs marquées « dérivé » ne sont pas dans la charte : ce sont des nuances
   neutres nécessaires à l'interface (bordure, texte secondaire) ou le survol du jaune défini
   par jetravel-brand (--jt-brand-yellow-hover).
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens de design — Palette officielle Je Travel ───────── */
:root {
  /* Couleur principale */
  --jta-blue:          var(--jt-brand-blue, #1CA3DD);
  --jta-blue-dark:     var(--jt-brand-blue-dark, #1276A8);
  --jta-blue-light:    var(--jt-brand-blue-pale, #E3F6FD);
  --jta-blue-navy:     var(--jt-brand-navy, #0B2545);

  /* Couleur secondaire */
  --jta-yellow:        var(--jt-brand-yellow, #F8B400);
  --jta-yellow-dark:   var(--jt-brand-yellow-hover, #E0A200); /* dérivé : survol, jeton de jetravel-brand */
  --jta-yellow-light:  var(--jt-brand-yellow-pale, #FEF6DC);

  /* Couleur d'action */
  --jta-red:           var(--jt-brand-red, #E63946);
  --jta-red-light:     var(--jt-brand-red-pale, #FEF0F1);

  /* Statut : turquoise de la charte (§15) à la place de l'ancien vert hors charte */
  --jta-green:         var(--jt-brand-turquoise, #1DA49C);

  /* Couleurs neutres */
  --jta-bg:            var(--jt-brand-gray-light, #F5F7FA);
  --jta-white:         var(--jt-brand-white, #FFFFFF);
  --jta-text:          var(--jt-brand-gray-dark, #333333);
  --jta-muted:         #5B6675; /* dérivé : texte secondaire, contraste 5,9:1 sur blanc */
  --jta-border:        #DCE2EA; /* dérivé : bordures des champs et des cartes */

  /* Ombres (bleu marine très léger, pas d'effet sur le logo : charte §12) */
  --jta-shadow:        0 1px 2px rgba(11,37,69,.04), 0 12px 32px rgba(11,37,69,.07);
  --jta-shadow-lg:     0 16px 48px rgba(11,37,69,.14);
  --jta-ring:          0 0 0 3px rgba(28,163,221,.22);

  /* Rayons */
  --jta-radius:        16px;
  --jta-radius-sm:     var(--jt-brand-radius, 10px);

  /* Polices — Charte : Montserrat (titres) + Poppins (corps), servies par le thème */
  --jta-font:          var(--jt-brand-font-body, 'Poppins', 'Trebuchet MS', Arial, sans-serif);
  --jta-font-heading:  var(--jt-brand-font-title, 'Montserrat', 'Trebuchet MS', Arial, sans-serif);
}

/* ── Reset ciblé ───────────────────────────────────────────── */
.jta-wrap *,
.jta-card * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.jta-icon {
  display: block;
  flex-shrink: 0;
}

/* ── Conteneur principal ───────────────────────────────────── */

/*
 * Sortie du conteneur WordPress (entry-content, site-main, etc.)
 * Certains thèmes limitent la largeur du contenu de page.
 * Ces règles forcent le .jta-wrap à occuper toute la largeur.
 * overflow-x: clip (et non hidden) : ne crée pas de conteneur de défilement,
 * le panneau de marque peut donc rester collé (position: sticky).
 */
.jta-wrap {
  box-sizing: border-box;
  display: flex;
  min-height: 100vh;
  width: 100vw !important;
  max-width: none !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  font-family: var(--jta-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--jta-text);
  background: var(--jta-bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.jta-wrap--centered {
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

/* ── Panneau de marque (gauche) ────────────────────────────── */
.jta-brand {
  flex: 0 0 42%;
  max-width: 600px;
  min-width: 400px;
  background: var(--jta-blue-navy);
  color: var(--jta-white);
  position: relative;
  overflow: hidden;
}

/* Illustration discrète : globe au trait + trajectoire de vol pointillée jaune */
.jta-brand__art {
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 520px;
  height: 520px;
  color: var(--jta-blue);
  pointer-events: none;
}

.jta-brand__inner {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 2.5rem clamp(2rem, 4vw, 3.5rem);
}

/* Logo : version principale sur fond blanc (charte §10), zone de protection préservée (§11), sans ombre (§12) */
.jta-logo-container {
  background: var(--jta-white) !important;
  padding: .75rem 1rem !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  display: inline-block;
  max-width: 170px;
  line-height: 0;
  text-align: center;
  text-decoration: none;
}
.jta-brand .jta-logo-container { align-self: flex-start; }
.jta-logo-container--mobile { display: none; }
.jta-brand__logo-link,
.jta-card__logo-mobile-link {
  display: inline-block;
  text-decoration: none;
  border: none !important;
}
.jta-brand__logo-link:focus-visible {
  outline: 3px solid var(--jta-yellow);
  outline-offset: 3px;
}
.jta-brand__logo,
.jta-card__logo-mobile {
  display: block;
  width: 104px;
  max-width: 100%;
  height: auto;
  filter: none !important;
}

.jta-brand__name {
  display: block;
  font-family: var(--jta-font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--jta-blue-navy);
}

.jta-brand__body { max-width: 440px; }

.jta-brand__eyebrow {
  font-family: var(--jta-font);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jta-blue);
  margin-bottom: 1rem;
}

.jta-brand__headline {
  font-family: var(--jta-font-heading);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--jta-white);
  margin-bottom: 1.25rem;
}
/* Jaune sur bleu marine : autorisé (la charte §08 n'interdit que le jaune sur bleu) */
.jta-brand__accent { color: var(--jta-yellow); }

.jta-brand__sub {
  font-family: var(--jta-font);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  margin-bottom: 2rem;
}

.jta-brand__perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.jta-brand__perks li {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-family: var(--jta-font);
  font-size: .95rem;
  line-height: 1.4;
  color: rgba(255,255,255,.92);
}

.jta-perk-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(28,163,221,.16);
  color: var(--jta-blue);
  font-size: 1.1rem;
}

.jta-brand__signature {
  font-family: var(--jta-font);
  font-size: .85rem;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255,255,255,.6);
  margin-bottom: 1rem;
}

.jta-brand__contact { line-height: 1; }

/* Lien d'aide (nom de classe historique conservé) */
.jta-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.1rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--jta-radius-sm);
  background: transparent;
  color: var(--jta-white);
  font-family: var(--jta-font);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.jta-whatsapp-btn:hover,
.jta-whatsapp-btn:focus-visible {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.45);
  color: var(--jta-white);
}
.jta-whatsapp-btn .jta-icon { color: var(--jta-blue); }

/* ── Colonne formulaire (droite) ───────────────────────────── */
.jta-form-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
}

/* ── Carte ─────────────────────────────────────────────────── */
.jta-card {
  background: var(--jta-white);
  border: 1px solid var(--jta-border);
  border-radius: var(--jta-radius);
  box-shadow: var(--jta-shadow);
  padding: 2.5rem;
  width: 100%;
  max-width: 480px;
  transition: max-width .3s ease;
}
.jta-wrap--split[data-tab="inscription"] .jta-card { max-width: 600px; }

.jta-card--narrow { max-width: 440px; }

.jta-card--success,
.jta-card--activation { text-align: center; }

/* Logo centré en tête des cartes simples (mot de passe oublié, activation…) */
.jta-card__logo-center {
  display: block;
  width: 132px;
  height: auto;
  margin: 0 auto 1.75rem;
}
.jta-card__logo-mobile { display: none; }
.jta-card__name-mobile { display: none; }
.jta-card__name-center {
  display: block;
  font-family: var(--jta-font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--jta-blue);
  text-align: center;
  margin-bottom: 1.5rem;
}

.jta-panel-head { margin-bottom: 1.5rem; }

.jta-card__title {
  font-family: var(--jta-font-heading);
  font-size: 1.6rem;
  font-weight: 600; /* §09 charte : Sous-titres H2 = Montserrat SemiBold 600 */
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--jta-blue-navy);
  margin-bottom: .4rem;
}

.jta-card__subtitle {
  font-family: var(--jta-font);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--jta-muted);
  margin-bottom: 1.5rem;
}
.jta-panel-head .jta-card__subtitle { margin-bottom: 0; }

.jta-card__footer-text {
  text-align: center;
  font-family: var(--jta-font);
  font-size: .9rem;
  color: var(--jta-muted);
  margin-top: 1.5rem;
}

/* Pastille d'icône (succès, e-mail envoyé, activation…) */
.jta-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--jta-blue-light);
  color: var(--jta-blue-dark);
}
.jta-badge-icon--success { background: rgba(29,164,156,.12); color: var(--jta-green); }
.jta-badge-icon--warning { background: var(--jta-yellow-light); color: #8A6400; }
.jta-badge-icon--error   { background: var(--jta-red-light); color: var(--jta-red); }
.jta-success-panel { text-align: center; }

/* ── Formulaire ────────────────────────────────────────────── */
.jta-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.jta-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: 100%;
  min-width: 0;
}

.jta-label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem;
  font-family: var(--jta-font);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--jta-blue-navy);
}

.jta-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.jta-required { color: var(--jta-red); font-weight: 600; }

.jta-hint {
  font-weight: 400;
  color: var(--jta-muted);
  font-size: .8rem;
}

/* ── Champs ────────────────────────────────────────────────── */
.jta-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Icône d'entrée (encore utilisée par complete-profile.php et les gabarits surchargés) */
.jta-input-icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #8A94A3;
  pointer-events: none;
  z-index: 2;
  transition: color .2s ease;
}
.jta-input-icon svg { width: 16px; height: 16px; display: block; }
.jta-input-wrap:focus-within .jta-input-icon { color: var(--jta-blue); }

/* Spécificité (0,2,0) : passe devant input[type="text"] du thème BuddyBoss (0,1,1) */
.jta-wrap .jta-input,
.jta-card .jta-input,
.jta-wrap .jta-select,
.jta-card .jta-select {
  width: 100%;
  height: 48px;
  padding: 0 .95rem;
  border: 1px solid var(--jta-border);
  border-radius: var(--jta-radius-sm);
  background: var(--jta-white);
  color: var(--jta-text);
  font-family: var(--jta-font);
  font-size: 1rem; /* 16px : pas de zoom automatique sur iOS */
  line-height: 1.4;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.jta-input-icon ~ .jta-input { padding-left: 2.6rem !important; }
.jta-input-wrap .jta-toggle-password ~ .jta-input,
.jta-input-wrap .jta-input:has(~ .jta-toggle-password) { padding-right: 3rem; }

.jta-wrap .jta-input:hover,
.jta-wrap .jta-select:hover { border-color: #C3CCD8; }

.jta-wrap .jta-input:focus,
.jta-card .jta-input:focus,
.jta-wrap .jta-select:focus,
.jta-card .jta-select:focus {
  outline: none;
  border-color: var(--jta-blue);
  box-shadow: var(--jta-ring);
}

.jta-wrap .jta-input::placeholder,
.jta-card .jta-input::placeholder {
  color: #8A94A3;
  opacity: 1;
}

.jta-wrap .jta-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--jta-blue-light) inset;
}

.jta-wrap .jta-toggle-password,
.jta-card .jta-toggle-password {
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--jta-muted);
  cursor: pointer;
  z-index: 2;
  transition: color .2s ease, background-color .2s ease;
}
.jta-wrap .jta-toggle-password:hover { color: var(--jta-blue-dark); background: var(--jta-bg); }
.jta-toggle-password .jta-icon--eye-off,
.jta-toggle-password[aria-pressed="true"] .jta-icon--eye { display: none; }
.jta-toggle-password[aria-pressed="true"] .jta-icon--eye-off { display: block; }

/* ── Select natif ──────────────────────────────────────────── */
.jta-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.jta-wrap .jta-select,
.jta-card .jta-select {
  padding-right: 2.5rem;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.jta-select-arrow {
  position: absolute;
  right: .95rem;
  pointer-events: none;
  color: var(--jta-muted);
}

/* ── Sections du formulaire d'inscription ──────────────────── */
.jta-section {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--jta-border);
}
.jta-social--before + .jta-form .jta-section:first-of-type,
.jta-form > .jta-section:first-of-type { border-top: none; padding-top: 0; }
.jta-section + .jta-section { margin-top: .4rem; }

/* H3 = Poppins Bold (charte §09) */
.jta-section__title {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--jta-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--jta-blue-navy);
}
.jta-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--jta-blue-light);
  color: var(--jta-blue-dark);
  font-size: .8rem;
  font-weight: 700;
}

/* ── Choix en pastilles (projet, tranche d'âge) ────────────── */
.jta-chips {
  display: grid;
  gap: .6rem;
  width: 100%;
}
.jta-chips--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jta-chips--age  { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }

/* 2.6.0 : « Qu’est-ce qui t’amène chez Je Travel ? » : une pastille par ligne, libellé et description ; blocs propres à un profil. */
.jta-chips--profiles { grid-template-columns: 1fr; }
.jta-chip__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.jta-chip__desc { font-size: .78rem; font-weight: 400; color: var(--jta-muted, #6B7280); }
.jta-profile-block { margin-top: .9rem; }
.jta-form [hidden],
.jta-wrap [hidden] { display: none !important; }

.jta-wrap .jta-chip,
.jta-card .jta-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
  min-height: 52px;
  padding: .65rem .85rem;
  border: 1px solid var(--jta-border);
  border-radius: var(--jta-radius-sm);
  background: var(--jta-white);
  color: var(--jta-text);
  font-family: var(--jta-font);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.jta-wrap .jta-chip--sm,
.jta-card .jta-chip--sm {
  justify-content: center;
  min-height: 44px;
  padding: .5rem .4rem;
  font-size: .8rem;
  text-align: center;
}

.jta-chip__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--jta-bg);
  color: var(--jta-blue-navy);
  font-size: 1.05rem;
}
/* Couleur par service (charte §15) */
.jta-chip--etudes  .jta-chip__icon { color: var(--jta-blue);   background: var(--jta-blue-light); }
.jta-chip--travail .jta-chip__icon { color: var(--jta-red);    background: var(--jta-red-light); }
.jta-chip--voyage  .jta-chip__icon { color: #B98700;           background: var(--jta-yellow-light); } /* jaune assombri : icône lisible sur jaune pâle */
.jta-chip--autre   .jta-chip__icon { color: var(--jta-blue-navy); background: #E8ECF2; }

.jta-wrap .jta-chip:hover { border-color: #B8C3D1; background: var(--jta-bg); }

.jta-wrap .jta-chip.is-selected,
.jta-card .jta-chip.is-selected {
  border-color: var(--jta-blue) !important;
  background: var(--jta-blue-light) !important;
  color: var(--jta-blue-navy) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px var(--jta-blue) !important;
}
.jta-wrap .jta-chip.is-selected .jta-chip__icon { background: var(--jta-white); }

.jta-wrap .jta-chip:focus-visible {
  outline: none;
  box-shadow: var(--jta-ring) !important;
}

/* ── Indicateur de force du mot de passe ───────────────────── */
.jta-password-strength {
  height: 4px;
  border-radius: 2px;
  background: var(--jta-border);
  margin-top: .15rem;
  overflow: hidden;
  position: relative;
}
.jta-password-strength::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 2px;
  width: var(--strength, 0%);
  background: var(--strength-color, var(--jta-red));
  transition: width .3s, background .3s;
}
.jta-password-strength__text {
  min-height: 1.1em;
  font-size: .78rem;
  color: var(--jta-muted);
}

/* ── Rangées ───────────────────────────────────────────────── */
.jta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
}
.jta-row--between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jta-row--gap { gap: 1rem; }

/* ── Cases à cocher ────────────────────────────────────────── */
.jta-consents {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--jta-radius-sm);
  background: var(--jta-bg);
}

.jta-checkbox-label {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--jta-font);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--jta-text);
  cursor: pointer;
}
.jta-checkbox-label--block { align-items: flex-start; }

.jta-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--jta-blue);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
}
.jta-checkbox-label--block input[type="checkbox"] { margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════
   BOUTONS — Charte §08 Je Travel v5.0
   Principal  = fond Jaune #F8B400 / texte Bleu marine #0B2545
   Secondaire = fond Bleu #1CA3DD  / texte Blanc
   ═══════════════════════════════════════════════════════════ */
.jta-wrap .jta-btn,
.jta-card .jta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 50px;
  padding: .8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--jta-radius-sm);
  font-family: var(--jta-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.jta-wrap .jta-btn--full,
.jta-card .jta-btn--full { width: 100%; }

/* Bouton principal : Jaune / Bleu marine — règle §08 charte officielle */
.jta-wrap .jta-btn--primary,
.jta-card .jta-btn--primary {
  background: var(--jta-yellow);
  border-color: var(--jta-yellow);
  color: var(--jta-blue-navy);
  box-shadow: none;
}
.jta-wrap .jta-btn--primary:hover,
.jta-card .jta-btn--primary:hover {
  background: var(--jta-yellow-dark);
  border-color: var(--jta-yellow-dark);
  color: var(--jta-blue-navy);
}

/* Bouton secondaire : Bleu / Blanc */
.jta-wrap .jta-btn--ghost,
.jta-card .jta-btn--ghost {
  background: var(--jta-blue);
  border-color: var(--jta-blue);
  color: var(--jta-white);
  box-shadow: none;
}
.jta-wrap .jta-btn--ghost:hover,
.jta-card .jta-btn--ghost:hover {
  background: var(--jta-blue-dark);
  border-color: var(--jta-blue-dark);
  color: var(--jta-white);
}

.jta-form .jta-btn--full { margin-top: .35rem; }

/* Spinner dans le bouton */
.jta-btn__spinner {
  display: none;
  width: 20px; height: 20px;
  border: 2px solid rgba(11,37,69,.2);
  border-top-color: var(--jta-blue-navy);
  border-radius: 50%;
  animation: jta-spin .7s linear infinite;
}
.jta-btn--ghost .jta-btn__spinner {
  border-color: rgba(255,255,255,.3);
  border-top-color: #fff;
}
.jta-btn--loading .jta-btn__text { display: none; }
.jta-btn--loading .jta-btn__spinner { display: block; }
.jta-btn--loading { pointer-events: none; opacity: .85; }

@keyframes jta-spin {
  to { transform: rotate(360deg); }
}

/* ── Alertes ───────────────────────────────────────────────── */
.jta-alert {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--jta-radius-sm);
  font-family: var(--jta-font);
  font-size: .9rem;
  line-height: 1.5;
  text-align: left;
}
.jta-form .jta-alert { margin-bottom: 0; }
.jta-alert__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: .1rem;
  border-radius: 50%;
  color: var(--jta-white);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
}
.jta-alert a { font-weight: 600; color: inherit; text-decoration: underline; }

.jta-alert--error   { background: var(--jta-red-light);    border-color: #F7C9CD; color: #8E1F29; }
.jta-alert--error   .jta-alert__icon { background: var(--jta-red); }
.jta-alert--success { background: rgba(29,164,156,.08);    border-color: rgba(29,164,156,.3); color: #0F5F5A; }
.jta-alert--success .jta-alert__icon { background: var(--jta-green); }
.jta-alert--warning { background: var(--jta-yellow-light); border-color: #F5DE9C; color: #6B4E00; }
.jta-alert--warning .jta-alert__icon { background: var(--jta-yellow); color: var(--jta-blue-navy); }
.jta-alert--info    { background: var(--jta-blue-light);   border-color: #B9E3F5; color: var(--jta-blue-navy); }
.jta-alert--info    .jta-alert__icon { background: var(--jta-blue); }

/* ── Liens ─────────────────────────────────────────────────── */
.jta-link {
  color: var(--jta-blue-dark);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s;
}
.jta-link:hover { color: var(--jta-blue-navy); text-decoration: underline; }
.jta-link--back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.jta-label__link {
  font-family: var(--jta-font);
  font-size: .82rem;
  font-weight: 600;
  color: var(--jta-blue-dark);
  text-decoration: none;
  white-space: nowrap;
}
.jta-label__link:hover { color: var(--jta-blue-navy); text-decoration: underline; }

/* ── Encadré d'information ─────────────────────────────────── */
.jta-tip {
  background: var(--jta-yellow-light);
  border-radius: var(--jta-radius-sm);
  padding: .8rem 1rem;
  font-family: var(--jta-font);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--jta-text);
  margin: 0 0 1.5rem;
  text-align: left;
}

/* ── Icônes historiques (émojis des gabarits surchargés) ───── */
.jta-success-icon {
  font-size: 3rem;
  display: block;
  margin: .25rem auto 1rem;
  text-align: center;
}
.jta-success-icon--sm { font-size: 2.5rem; }
.jta-activation-icon {
  font-size: 3rem;
  display: block;
  margin: .25rem auto 1.25rem;
}

/* ── Étapes (activation réussie) ───────────────────────────── */
.jta-activation-steps {
  background: var(--jta-bg);
  border-radius: var(--jta-radius-sm);
  padding: 1.25rem 1.4rem;
  margin-top: 1.5rem;
  text-align: left;
}
.jta-activation-steps__title {
  font-family: var(--jta-font);
  font-weight: 700;
  font-size: .9rem;
  color: var(--jta-blue-navy);
  margin-bottom: .75rem;
}
.jta-activation-steps ol {
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.jta-activation-steps li {
  font-family: var(--jta-font);
  font-size: .875rem;
  color: var(--jta-muted);
  line-height: 1.45;
}

/* ── Honeypot ─────────────────────────────────────────────── */
.jta-hp { display: none !important; }

/* ── Aide sous la carte (mobile) ───────────────────────────── */
.jta-help {
  display: none;
  margin-top: 1.25rem;
  text-align: center;
}
.jta-help__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--jta-font);
  font-size: .875rem;
  font-weight: 600;
  color: var(--jta-blue-dark);
  text-decoration: none;
}
.jta-help__link:hover { text-decoration: underline; }

/* ── Focus visible accessibilité ───────────────────────────── */
.jta-btn:focus-visible,
.jta-link:focus-visible,
.jta-label__link:focus-visible,
.jta-help__link:focus-visible,
.jta-social-btn:focus-visible,
.jta-toggle-password:focus-visible,
.jta-checkbox-label input:focus-visible {
  outline: 3px solid rgba(28,163,221,.55);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   CONNEXIONS SOCIALES
   ═══════════════════════════════════════════════════════════ */

.jta-social--after  { margin-top: 1.5rem; }
.jta-social--before { margin-bottom: 1.5rem; }

.jta-social__divider {
  display: flex;
  align-items: center;
  gap: .9rem;
  color: var(--jta-muted);
  font-family: var(--jta-font);
  font-size: .8rem;
  font-weight: 500;
}
.jta-social--after  .jta-social__divider { margin-bottom: 1rem; }
.jta-social--before .jta-social__divider { margin-top: 1.5rem; }
.jta-social__divider::before,
.jta-social__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--jta-border);
}

.jta-social__buttons {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
/* Deux ou trois réseaux : une seule rangée de colonnes égales */
.jta-social__buttons--compact {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.jta-wrap .jta-social-btn,
.jta-card .jta-social-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: .6rem 1rem;
  border: 1px solid var(--jta-border);
  border-radius: var(--jta-radius-sm);
  background: var(--jta-white);
  color: var(--jta-text);
  font-family: var(--jta-font);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: background-color .15s ease, border-color .15s ease;
}
.jta-social-btn svg { flex-shrink: 0; }
.jta-wrap .jta-social-btn:hover,
.jta-card .jta-social-btn:hover {
  background: var(--jta-bg);
  border-color: #B8C3D1;
  color: var(--jta-text);
}

.jta-social-btn--loading {
  pointer-events: none;
  opacity: .7;
}
.jta-social-btn--loading::after {
  content: '';
  position: absolute;
  right: .75rem;
  width: 16px; height: 16px;
  border: 2px solid var(--jta-border);
  border-top-color: var(--jta-blue);
  border-radius: 50%;
  animation: jta-spin .7s linear infinite;
}

/* ═══════════════════════════════════════════════════════════
   ONGLETS AUTH — contrôle segmenté
   ═══════════════════════════════════════════════════════════ */

.jta-tabs { margin-bottom: 1.75rem; }

.jta-tabs__track {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: 12px;
  background: #EDF1F6;
}

.jta-wrap .jta-tab {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 42px;
  padding: .6rem 1rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--jta-muted);
  font-family: var(--jta-font);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s;
}
.jta-wrap .jta-tab:hover { color: var(--jta-blue-navy); background: transparent; }

/* Neutralise le style .is-active générique de BuddyBoss sur les onglets */
.jta-wrap .jta-tab.is-active {
  background: transparent !important;
  color: var(--jta-blue-navy) !important;
  box-shadow: none !important;
}

.jta-wrap .jta-tab:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--jta-blue) !important;
}

/* Pastille blanche glissante */
.jta-tabs__slider {
  position: absolute;
  z-index: 1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 2);
  border-radius: 9px;
  background: var(--jta-white);
  box-shadow: 0 1px 3px rgba(11,37,69,.12);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.jta-tabs__slider.at-inscription { transform: translateX(100%); }

/* ── Panneaux de contenu ──────────────────────────────────── */
.jta-tab-panel { display: none; }
.jta-tab-panel.is-active {
  display: block;
  animation: jta-tab-in .22s cubic-bezier(.4, 0, .2, 1);
}

@keyframes jta-tab-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Contenu du panneau de marque selon l'onglet actif ─────── */
.jta-brand__content { display: none; }

.jta-wrap[data-tab="connexion"]   .jta-brand__content--connexion,
.jta-wrap[data-tab="inscription"] .jta-brand__content--inscription,
.jta-wrap:not([data-tab]) .jta-brand__content {
  display: block;
  animation: jta-brand-in .35s ease;
}

@keyframes jta-brand-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SÉLECTEUR DE PAYS / DESTINATION AVEC RECHERCHE EN DIRECT
   (!important conservés : le thème BuddyBoss stylise button, ul et li)
   ═══════════════════════════════════════════════════════════════ */

.jta-custom-select,
.jta-country-select,
.jta-wrap .jta-custom-select,
.jta-wrap .jta-country-select {
  position: relative !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Bouton déclencheur */
.jta-custom-select__trigger,
.jta-country-trigger,
button.jta-custom-select__trigger,
button.jta-country-trigger,
.jta-wrap .jta-custom-select__trigger,
.jta-wrap .jta-country-trigger {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .5rem !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 .95rem !important;
  border: 1px solid var(--jta-border) !important;
  border-radius: var(--jta-radius-sm) !important;
  background: var(--jta-white) !important;
  color: var(--jta-text) !important;
  font-family: var(--jta-font) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}

.jta-custom-select__trigger:hover,
.jta-country-trigger:hover {
  border-color: #C3CCD8 !important;
  background: var(--jta-white) !important;
}

.jta-custom-select__trigger:focus,
.jta-custom-select.is-open .jta-custom-select__trigger,
.jta-country-trigger:focus,
.jta-country-select.is-open .jta-country-trigger {
  outline: none !important;
  border-color: var(--jta-blue) !important;
  background: var(--jta-white) !important;
  box-shadow: var(--jta-ring) !important;
}

.jta-custom-select__label,
.jta-country-trigger__text {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--jta-text) !important;
  font-size: 1rem !important;
  pointer-events: none !important;
}
.jta-custom-select__label.is-placeholder { color: #8A94A3 !important; }

.jta-custom-select__trigger .jta-icon,
.jta-custom-select__arrow,
.jta-country-trigger__icon {
  flex-shrink: 0 !important;
  color: var(--jta-muted) !important;
  transition: transform .2s ease !important;
  pointer-events: none !important;
}

.jta-custom-select.is-open .jta-custom-select__trigger .jta-icon,
.jta-custom-select.is-open .jta-custom-select__arrow,
.jta-country-select.is-open .jta-country-trigger__icon {
  transform: rotate(180deg) !important;
}

/* Menu déroulant — masqué par défaut */
.jta-custom-select__dropdown,
.jta-country-dropdown,
.jta-wrap .jta-custom-select__dropdown,
.jta-wrap .jta-country-dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  background: var(--jta-white) !important;
  border: 1px solid var(--jta-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--jta-shadow-lg) !important;
  display: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  animation: jta-dropdown-in .16s cubic-bezier(.4, 0, .2, 1) !important;
}

@keyframes jta-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Affichage lorsque le sélecteur est ouvert */
.jta-custom-select.is-open > .jta-custom-select__dropdown,
.jta-country-select.is-open > .jta-country-dropdown,
.jta-custom-select.is-open .jta-custom-select__dropdown,
.jta-country-select.is-open .jta-country-dropdown,
.jta-custom-select__dropdown.is-open,
.jta-country-dropdown.is-open {
  display: block !important;
}

/* Zone de recherche dans le menu */
.jta-custom-select__search-wrap,
.jta-country-search-wrap {
  display: flex !important;
  align-items: center !important;
  gap: .55rem !important;
  padding: .7rem .9rem !important;
  border-bottom: 1px solid var(--jta-border) !important;
  background: var(--jta-white) !important;
  color: var(--jta-muted) !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.jta-custom-select__search-icon,
.jta-country-search-icon {
  color: var(--jta-muted) !important;
  flex-shrink: 0 !important;
}

.jta-custom-select__search-input,
.jta-country-search-input,
input.jta-custom-select__search-input,
input.jta-country-search-input,
.jta-wrap input.jta-custom-select__search-input {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 1rem !important;
  font-family: var(--jta-font) !important;
  color: var(--jta-text) !important;
  padding: .2rem 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.jta-custom-select__search-input::placeholder,
.jta-country-search-input::placeholder {
  color: #8A94A3 !important;
}

/* Liste des options — neutralisation des puces du thème */
.jta-custom-select__options,
.jta-country-options,
ul.jta-custom-select__options,
ul.jta-country-options {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: .35rem !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--jta-border) transparent !important;
}

.jta-custom-select__options::-webkit-scrollbar,
.jta-country-options::-webkit-scrollbar { width: 6px !important; }
.jta-custom-select__options::-webkit-scrollbar-track,
.jta-country-options::-webkit-scrollbar-track { background: transparent !important; }
.jta-custom-select__options::-webkit-scrollbar-thumb,
.jta-country-options::-webkit-scrollbar-thumb {
  background: var(--jta-border) !important;
  border-radius: 3px !important;
}

/* Option individuelle */
.jta-custom-select__option,
.jta-country-option,
li.jta-custom-select__option,
li.jta-country-option {
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .6rem .75rem !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--jta-text) !important;
  font-family: var(--jta-font) !important;
  font-size: .92rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
  list-style: none !important;
  list-style-type: none !important;
  cursor: pointer !important;
  transition: background .12s, color .12s !important;
}

.jta-custom-select__option::before,
.jta-country-option::before,
li.jta-custom-select__option::before,
li.jta-country-option::before,
.jta-custom-select__option::marker,
.jta-country-option::marker {
  display: none !important;
  content: none !important;
}

.jta-custom-select__option--placeholder,
.jta-country-option--placeholder {
  color: var(--jta-muted) !important;
}

.jta-custom-select__option:hover,
.jta-country-option:hover {
  background: var(--jta-bg) !important;
  color: var(--jta-blue-navy) !important;
}

.jta-custom-select__option.is-selected,
.jta-country-option.is-selected {
  background: var(--jta-blue-light) !important;
  color: var(--jta-blue-navy) !important;
  font-weight: 600 !important;
}

.jta-custom-select__option.jta-is-hidden,
.jta-country-option.jta-is-hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* Tablettes et mobiles : bandeau de marque compact en haut, carte qui le chevauche */
@media (max-width: 959px) {
  .jta-wrap {
    flex-direction: column;
    min-height: 100vh;
  }

  .jta-brand {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
  }
  .jta-brand__art { display: none; }
  .jta-brand__inner {
    position: relative;
    min-height: 0;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1rem 4.5rem;
    text-align: center;
  }
  .jta-brand .jta-logo-container {
    align-self: center;
    padding: .55rem .8rem !important;
  }
  .jta-brand__logo { width: 72px; }
  .jta-brand__body { max-width: 520px; }
  .jta-brand__eyebrow,
  .jta-brand__sub,
  .jta-brand__perks,
  .jta-brand__foot { display: none; }
  .jta-brand__headline {
    font-size: clamp(1.45rem, 5.6vw, 1.9rem);
    margin-bottom: 0;
  }

  .jta-form-col {
    justify-content: flex-start;
    margin-top: -3rem;
    padding: 0 1rem 2rem;
    position: relative;
    z-index: 2;
  }

  .jta-card { padding: 1.75rem 1.5rem; }
  .jta-card__title { font-size: 1.4rem; }

  .jta-help { display: block; }

  .jta-wrap--centered {
    justify-content: flex-start;
    padding: 1.5rem 1rem;
  }
}

/* Mobiles */
@media (max-width: 580px) {
  .jta-row { grid-template-columns: 1fr; }
  .jta-chips--age { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jta-card { padding: 1.5rem 1.15rem; border-radius: 14px; }
  .jta-tabs { margin-bottom: 1.4rem; }
  .jta-row--between {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  .jta-consents { padding: .9rem; }
  .jta-social__buttons--compact { gap: .45rem; }
  .jta-wrap .jta-social__buttons--compact .jta-social-btn {
    gap: .4rem;
    padding: .55rem .35rem;
    font-size: .85rem;
  }
  .jta-social__buttons--compact .jta-social-btn svg { width: 18px; height: 18px; }
}

/* Petits mobiles */
@media (max-width: 380px) {
  .jta-chips--grid { grid-template-columns: 1fr; }
  .jta-card { padding: 1.35rem 1rem; }
  .jta-wrap .jta-tab { font-size: .86rem; padding: .55rem .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jta-tab-panel.is-active,
  .jta-wrap[data-tab] .jta-brand__content,
  .jta-tabs__slider,
  .jta-card { animation: none !important; transition: none !important; }
}

/* ── Défilement horizontal : le .jta-wrap en 100vw déborde de la largeur de la barre de défilement ── */
body.jta-auth-page { overflow-x: clip; }

/* ═══════════════════════════════════════════════════════════
   Surcharges BuddyBoss sur les pages d'auth (U4, Lot 5)
   Déplacées depuis le <style id="jta-bb-override"> que jta_buddyboss_head_overrides() imprimait
   dans <head>. Sélecteur : body.jta-auth-page (classe ajoutée par le filtre body_class seulement
   sur les pages d'auth ; variantes jta-auth-page--login|register|lost-password|activation)
   au lieu du sélecteur dynamique par identifiant de page. Même spécificité, mêmes déclarations.
   ═══════════════════════════════════════════════════════════ */

/* Masque : titre, fil d'Ariane, logo injecté par BuddyBoss, en-tête et pied de page généraux, barre latérale */
body.jta-auth-page #masthead,
body.jta-auth-page .site-header,
body.jta-auth-page #colophon,
body.jta-auth-page .site-footer,
body.jta-auth-page .bb-footer,
body.jta-auth-page #footer-bottom,
body.jta-auth-page .entry-header,
body.jta-auth-page .entry-title,
body.jta-auth-page .page-title,
body.jta-auth-page .bb-breadcrumb,
body.jta-auth-page .breadcrumbs,
body.jta-auth-page .rank-math-breadcrumb,
body.jta-auth-page .yoast-breadcrumb,
body.jta-auth-page .site-breadcrumb,
body.jta-auth-page #bb-back-menu,
body.jta-auth-page .bb-page-header,
body.jta-auth-page .bb-login-header,
body.jta-auth-page .bb-register-header,
body.jta-auth-page .bb-register-logo,
body.jta-auth-page .entry-content > img:first-child,
body.jta-auth-page .entry-content > .site-logo,
body.jta-auth-page .entry-content > .custom-logo-link,
body.jta-auth-page #secondary,
body.jta-auth-page .widget-area { display: none !important; }

/* Supprime les contraintes de largeur BuddyBoss */
body.jta-auth-page .entry-content,
body.jta-auth-page .bb-content-inner,
body.jta-auth-page .site-content,
body.jta-auth-page #primary,
body.jta-auth-page #main,
body.jta-auth-page .content-area,
body.jta-auth-page article.page,
body.jta-auth-page .bb-page-wrap {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  float: none !important;
}

body.jta-auth-page .site-content .content-area {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Assure la pleine largeur du wrap même dans un conteneur restreint */
body.jta-auth-page .jta-wrap {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* ── 2.6.1 : onglet « Ce qui m’amène » du profil BuddyBoss ─────────────────
   Dans la colonne du profil : on annule la pleine largeur des pages d'inscription
   (.jta-wrap, 100vw). Les boutons du thème (.buddypress .buddypress-wrap button,
   bleus) sont plus précis que .jta-wrap .jta-chip : les pastilles et le bouton
   sont redonnés ici avec le préfixe .buddypress .buddypress-wrap. Réponses sur
   deux colonnes à partir de 783px. */
.jta-wrap.jta-wrap--tab {
  display: block;
  min-height: 0;
  width: auto !important;
  max-width: none !important;
  position: static;
  left: auto;
  right: auto;
  margin: 0 !important;
  padding: 0;
  background: transparent;
  overflow: visible;
}
/* La colonne du profil BuddyBoss est déjà une carte blanche : pas de seconde carte. */
.jta-wrap--tab .jta-card.jta-profile-tab {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.jta-wrap--tab .jta-card__title {
  margin: 0 0 6px;
  font-family: var(--jta-font-heading);
  font-size: 21px;
  color: var(--jta-blue-navy);
  text-align: left;
}
.jta-wrap--tab .jta-card__subtitle {
  margin: 0 0 22px;
  text-align: left;
}
.buddypress .buddypress-wrap .jta-wrap--tab .jta-chip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: .65rem .85rem;
  border: 1px solid var(--jta-border);
  border-radius: var(--jta-radius-sm);
  background: var(--jta-white);
  color: var(--jta-text);
  font-family: var(--jta-font);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  box-shadow: none;
}
.buddypress .buddypress-wrap .jta-wrap--tab .jta-chip:hover {
  border-color: #B8C3D1;
  background: var(--jta-bg);
  color: var(--jta-text);
}
.buddypress .buddypress-wrap .jta-wrap--tab .jta-chip .jta-chip__label { color: var(--jta-blue-navy); font-weight: 600; }
.buddypress .buddypress-wrap .jta-wrap--tab .jta-chip .jta-chip__desc { color: var(--jta-muted); }
.buddypress .buddypress-wrap .jta-wrap--tab .jta-btn--primary,
.buddypress .buddypress-wrap .jta-wrap--tab .jta-btn--primary:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.6rem;
  border: 2px solid var(--jta-yellow);
  border-radius: var(--jta-radius-sm);
  background: var(--jta-yellow);
  color: var(--jta-blue-navy);
  font-family: var(--jta-font-heading);
  font-size: 15px;
  font-weight: 700;
}
.buddypress .buddypress-wrap .jta-wrap--tab .jta-btn--primary:hover {
  border-color: var(--jta-yellow-dark);
  background: var(--jta-yellow-dark);
}
.jta-profile-tab__info {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 22px 0 6px;
  padding: 14px 16px;
  background: var(--jta-bg);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jta-text);
}
.jta-profile-tab__info .jta-icon {
  flex: none;
  margin-top: 1px;
  color: var(--jta-blue-dark);
}
.jta-profile-tab__info a {
  color: var(--jta-blue-dark);
  font-weight: 600;
}
.jta-wrap--tab .jta-marketing-consent {
  margin-top: 18px;
}
.buddypress .buddypress-wrap .jta-wrap--tab .jta-profile-tab__submit {
  align-self: flex-start; /* le formulaire est une colonne flex : sinon le bouton s'étire */
  width: auto;
  min-width: 180px;
  margin-top: 22px;
}
/* « Invite ton proche » : encadré jaune pâle de la maquette validée, sur toute la largeur. */
.jta-wrap--tab .jta-card.jta-relative-invite {
  width: auto;
  max-width: none;
  margin: 24px 0 0;
  padding: 22px 24px;
  background: var(--jta-yellow-light);
  border: 1.5px dashed #F3D27A;
  border-radius: 14px;
  box-shadow: none;
}
.jta-wrap--tab .jta-card.jta-relative-invite .jta-section__title {
  font-family: var(--jta-font-heading);
  font-size: 16px;
  color: var(--jta-blue-navy);
}
@media (min-width: 783px) {
  .jta-wrap--tab .jta-chips--profiles {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 782px) {
  .buddypress .buddypress-wrap .jta-wrap--tab .jta-profile-tab__submit {
    width: 100%;
  }
  .jta-wrap--tab .jta-card.jta-relative-invite {
    padding: 18px 16px;
  }
}