/* =============================================================

   Public site — v2 chrome (pilule nav unifiée + bandeaux pleine largeur)

   Charge après ds-public-glass.css

   ============================================================= */



/* ── En-tête flottant : pilule unique (logo | liens | CTA) ───── */

body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .site-header {

  padding:

    max(0.65rem, env(safe-area-inset-top, 0px))

    clamp(0.85rem, 2.5vw, 1.75rem)

    0.85rem;

  background: transparent !important;

  border-bottom: none !important;

  box-shadow: none !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .site-header.is-scrolled {

  background: transparent !important;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .site-header::after {

  display: none;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .site-header .container.nav {

  max-width: min(1180px, calc(100% - 0.5rem));

  width: 100%;

  margin-inline: auto;

  padding: 0.38rem 0.45rem 0.38rem 0.55rem;

  min-height: 52px;

  align-items: center;

  gap: 0.65rem;

  border-radius: 9999px;

  background: rgba(10, 10, 12, 0.94);

  border: 1px solid rgba(255, 255, 255, 0.09);

  backdrop-filter: blur(20px) saturate(150%);

  -webkit-backdrop-filter: blur(20px) saturate(150%);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.05),

    0 10px 40px rgba(0, 0, 0, 0.38);

  transition:

    background 0.28s ease,

    border-color 0.28s ease,

    box-shadow 0.32s cubic-bezier(0.25, 1, 0.5, 1),

    transform 0.32s cubic-bezier(0.25, 1, 0.5, 1);

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .site-header.is-scrolled .container.nav {

  background: rgba(8, 8, 10, 0.98);

  border-color: rgba(255, 255, 255, 0.11);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.06),

    0 14px 44px rgba(0, 0, 0, 0.48);

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__links {

  background: transparent;

  border: none;

  box-shadow: none;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;

  padding: 0.2rem;

  gap: 0.12rem;

  align-items: center;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  white-space: nowrap;

  line-height: 1.2;

  padding: 0.48rem 0.9rem;

  border-radius: 9999px;

  font-size: 0.9rem;

  font-weight: 500;

  color: rgba(255, 255, 255, 0.72);

  transition:

    color 0.22s ease,

    background 0.22s ease;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__link:hover:not(.is-active) {

  color: #f4f6f8;

  background: rgba(255, 255, 255, 0.05);

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav-active-pill {

  box-sizing: border-box;

  border-radius: 9999px;

  background: var(--color-subtle);

  border: 1px solid rgba(var(--color-action-rgb), 0.42);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.1),

    0 0 20px rgba(var(--color-action-rgb), 0.16);

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__link.is-active {

  color: var(--pub-accent, var(--color-action));

  background: transparent;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__cta {

  gap: 0.45rem;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__account {

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 9999px;

  color: rgba(255, 255, 255, 0.82);

  padding: 0.46rem 0.82rem;

  font-size: 0.86rem;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__account:hover {

  border-color: rgba(var(--color-action-rgb), 0.4);

  color: var(--pub-accent, var(--color-action));

  background: rgba(var(--color-action-rgb), 0.06);

}



/* CTA « Réserver » — pilule glass vert v2 */

body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__cta .btn--primary {

  border-radius: 9999px;

  padding-inline: 1rem;

  font-weight: 700;

  letter-spacing: 0.01em;

  color: var(--pub-accent, var(--color-action));

  background: var(--color-subtle);

  border: 1px solid rgba(var(--color-action-rgb), 0.38);

  backdrop-filter: blur(12px) saturate(140%);

  -webkit-backdrop-filter: blur(12px) saturate(140%);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.08),

    0 0 18px var(--color-subtle);

  transition:

    transform 0.22s cubic-bezier(0.25, 1, 0.5, 1),

    background 0.22s ease,

    border-color 0.22s ease,

    color 0.22s ease,

    box-shadow 0.22s ease;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__cta .btn--primary:hover {

  background: rgba(var(--color-action-rgb), 0.2);

  color: #f4f6f8;

  border-color: rgba(var(--color-action-rgb), 0.55);

  transform: translateY(-1px);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.12),

    0 0 24px rgba(var(--color-action-rgb), 0.22);

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__toggle {

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 9999px;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__toggle:hover {

  border-color: rgba(var(--color-action-rgb), 0.4);

  color: var(--pub-accent, var(--color-action));

}



/* Logo circulaire dans la pilule */

body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .brand-logo--header {

  width: 38px;

  height: 38px;

  max-width: 38px;

  padding: 3px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(255, 255, 255, 0.06);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.08),

    0 4px 16px rgba(0, 0, 0, 0.32);

  object-fit: contain;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__brand-wordmark {

  font-family: var(--font-display);

  font-size: 1.02rem;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: #f4f6f8;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__brand--logo:hover .brand-logo--header {

  border-color: rgba(var(--color-action-rgb), 0.35);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.1),

    0 0 18px rgba(var(--color-action-rgb), 0.16),

    0 4px 16px rgba(0, 0, 0, 0.32);

  transform: scale(1.03);

}



@media (max-width: 900px) {

  body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .site-header .container.nav {

    padding: 0.42rem 0.45rem 0.42rem 0.5rem;

    border-radius: 9999px;

    align-content: flex-start;

  }



  /* Menu ouvert : la pilule ne doit pas s’étirer en ovale sur petit écran. */

  body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .site-header.nav-open .container.nav {

    border-radius: 20px;

    overflow: hidden;

    align-content: flex-start;

    padding-bottom: 0.35rem;

  }



  body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__brand-wordmark {

    display: none;

  }



  body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__cta .btn--primary {

    padding-inline: 0.85rem;

    min-height: 36px;

    font-size: 0.84rem;

  }



  body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__links {

    flex-direction: column;

    align-items: stretch;

    width: 100%;

    gap: 0.12rem;

    padding: 0.4rem;

  }



  body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__link {

    padding: 0.72rem 0.9rem;

    border-radius: 9999px;

  }



  body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .site-header.nav-open .nav__link.is-active {

    color: var(--pub-accent, var(--color-action));

    background: transparent;

  }

}



@media (max-width: 420px) {

  body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__cta .btn--primary span {

    display: none;

  }



  body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .nav__cta .btn--primary::after {

    content: attr(data-short-label);

    font-weight: 700;

  }

}



/* ── Bandeau titre pleine largeur (plus de « carte » centrée) ─ */

body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) main > .page-hero:first-child,

body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) main > section.page-hero:first-child {

  width: 100%;

  max-width: none;

  margin-inline: 0;

  margin-top: calc(-1 * var(--site-header-offset, 5rem));

  padding-top: calc(

    max(0.75rem, env(safe-area-inset-top, 0px)) + var(--site-header-h, 5rem) + clamp(1rem, 2.5vw, 1.5rem)

  );

  padding-bottom: clamp(1.1rem, 2.5vw, 1.65rem);

  padding-left: 0;

  padding-right: 0;

  border-radius: 0;

  border-left: none;

  border-right: none;

  border-top: none;

  text-align: left;

  background: rgba(12, 14, 18, 0.88);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.04),

    0 12px 40px rgba(0, 0, 0, 0.28);

  backdrop-filter: blur(18px) saturate(140%);

  -webkit-backdrop-filter: blur(18px) saturate(140%);

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) main > .page-hero:first-child::after,

body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) main > section.page-hero:first-child::after {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 1px;

  background: linear-gradient(

    90deg,

    transparent 0%,

    rgba(var(--color-action-rgb), 0.35) 50%,

    transparent 100%

  );

  pointer-events: none;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) main > .page-hero:first-child,

body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) main > section.page-hero:first-child {

  position: relative;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .page-hero .container {

  max-width: var(--pub-content-max, 1280px);

  margin-inline: auto;

  padding-inline: var(--pub-pad-x, clamp(1rem, 2.5vw, 2rem));

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .page-hero__subtitle {

  margin-inline: 0;

  max-width: min(68ch, 100%);

  text-align: left;

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) main > .page-hero:first-child + .section-tight,

body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) main > section.page-hero:first-child + .section-tight,

body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) main > .page-hero:first-child + section {

  border-top: none;

}



/* Accueil — hero marketing : bandeau haut sans boîte flottante */

body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) main > .hero:first-child {

  margin-top: calc(-1 * var(--site-header-offset, 5rem));

  padding-top: calc(

    max(0.75rem, env(safe-area-inset-top, 0px)) + var(--site-header-h, 5rem) + clamp(1.25rem, 3vw, 2rem)

  );

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



/* Pages légales — TOC v2 */

body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .legal-toc {

  background: rgba(20, 20, 22, 0.72);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.05),

    0 12px 36px rgba(0, 0, 0, 0.32);

}



body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .legal-toc a.is-active,

body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .legal-toc a[aria-current='true'] {

  background: var(--color-subtle);

  border-color: rgba(var(--color-action-rgb), 0.4);

  color: var(--pub-accent, var(--color-action));

}



body.page-legal:not(.ds-body--admin) main > section:not(.page-hero) {

  border-top: none;

}



/* Variantes news / FAQ — même bandeau, contenu aligné à gauche */

body:not(.ds-body--admin):not(.ds-body--account) .page-hero--news,

body:not(.ds-body--admin):not(.ds-body--account) .page-hero--faq {

  padding-top: inherit;

  padding-bottom: inherit;

}



body:not(.ds-body--admin):not(.ds-body--account) .page-hero--news .container,

body:not(.ds-body--admin):not(.ds-body--account) .page-hero--faq .container {

  max-width: var(--pub-content-max, 1280px);

  text-align: left;

}



body:not(.ds-body--admin):not(.ds-body--account) .page-hero--news .page-hero__subtitle,

body:not(.ds-body--admin):not(.ds-body--account) .page-hero--faq .page-hero__subtitle {

  margin-inline: 0;

  max-width: min(68ch, 100%);

}



@media (max-width: 560px) {

  body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) main > .page-hero:first-child,

  body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) main > section.page-hero:first-child {

    padding-top: calc(

      max(0.75rem, env(safe-area-inset-top, 0px)) + var(--site-header-h, 5rem) + 0.85rem

    );

    padding-bottom: 1rem;

  }

}


/* =============================================================
   Public site — v2 surfaces (dernier file du stack public)
   Unifie booking, legal, coach, pills, stepper, forms.
   Charge via @import dans ds-public-v2-chrome.css
   ============================================================= */

/* ── Scope public uniquement ─────────────────────────────────── */
body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) {

  /* Eyebrows / chips */
  .eyebrow,
  .page-hero .eyebrow,
  .hero__eyebrow,
  .booking-hero .eyebrow {
    background: var(--color-subtle) !important;
    border: 1px solid rgba(var(--color-action-rgb), 0.28) !important;
    color: var(--pub-accent, var(--color-action)) !important;
    border-radius: 999px !important;
  }

  /* Boutons primaires (hors nav Réserver blanc) */
  .btn--primary:not(.nav__cta .btn--primary) {
    background: var(--grad-action) !important;
    color: #0a0a0c !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    box-shadow:
      0 10px 28px rgba(var(--color-action-rgb), 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }

  .btn--primary:not(.nav__cta .btn--primary):hover {
    filter: brightness(1.05) !important;
    box-shadow:
      0 14px 40px rgba(var(--color-action-rgb), 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-2px);
  }

  .btn--ghost {
    border-radius: 999px !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .btn--ghost:hover {
    border-color: rgba(var(--color-action-rgb), 0.45) !important;
    color: var(--pub-accent, var(--color-action)) !important;
    background: rgba(var(--color-action-rgb), 0.06) !important;
  }

  /* ── Legal pages — TOC scroll menu ─────────────────────────── */
  .legal-toc {
    background: rgba(20, 20, 22, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 12px 36px rgba(0, 0, 0, 0.32) !important;
  }

  .legal-toc h5::after {
    background: var(--grad-action) !important;
    box-shadow: 0 0 8px rgba(var(--color-action-rgb), 0.35) !important;
  }

  .legal-toc::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--color-action-rgb), 0.45), rgba(43, 200, 90, 0.35)) !important;
    background-clip: padding-box;
  }

  .legal-toc::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(var(--color-action-rgb), 0.65), rgba(43, 200, 90, 0.5)) !important;
    background-clip: padding-box;
  }

  .legal-toc ol a {
    border-radius: 10px !important;
    transition:
      background 0.22s ease,
      color 0.22s ease,
      transform 0.22s ease,
      box-shadow 0.22s ease !important;
  }

  .legal-toc ol a:hover {
    background: rgba(var(--color-action-rgb), 0.08) !important;
    color: #f4f6f8 !important;
  }

  .legal-toc ol a.is-active,
  .legal-toc ol a[aria-current='true'] {
    background: var(--color-subtle) !important;
    color: var(--pub-accent, var(--color-action)) !important;
    border: 1px solid rgba(var(--color-action-rgb), 0.32) !important;
    box-shadow:
      inset 3px 0 0 var(--pub-accent, var(--color-action)),
      0 0 16px var(--color-subtle) !important;
    font-weight: 600 !important;
  }

  .legal-toc ol a.is-active::before,
  .legal-toc ol a[aria-current='true']::before {
    color: var(--pub-accent, var(--color-action)) !important;
  }

  .legal-meta {
    background: rgba(20, 20, 22, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
  }

  .legal-meta code {
    color: var(--pub-accent, var(--color-action)) !important;
  }

  .legal-prose h2,
  .legal-prose h3 {
    color: #f4f6f8;
  }

  .legal-prose a {
    color: var(--pub-accent, var(--color-action));
  }

  /* ── Booking wizard ─────────────────────────────────────────── */
  .booking-layout .card,
  .booking-panel,
  .booking-summary,
  .booking-subpanel {
    background: rgba(20, 20, 22, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 12px 36px rgba(0, 0, 0, 0.28) !important;
  }

  .stepper {
    background: rgba(20, 20, 22, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
  }

  .stepper::after {
    background: var(--grad-action) !important;
    box-shadow: 0 0 12px rgba(var(--color-action-rgb), 0.45) !important;
  }

  .stepper__step.is-active .stepper__dot,
  .stepper--five .stepper__step.is-active .stepper__dot {
    background: var(--grad-action) !important;
    border-color: transparent !important;
    color: var(--bg-0) !important;
    box-shadow:
      0 0 0 4px var(--color-glow),
      0 0 24px var(--color-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }

  .stepper__step.is-done .stepper__dot {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--bg-0) !important;
    box-shadow: 0 0 12px var(--color-glow) !important;
  }

  .stepper__step.is-active .stepper__label {
    color: var(--text-0) !important;
  }

  .booking-summary .total strong,
  .booking-summary__total strong,
  .summary-total strong {
    color: var(--pub-accent, var(--color-action)) !important;
    background: none !important;
    -webkit-text-fill-color: var(--pub-accent, var(--color-action)) !important;
  }

  .booking-chip,
  .booking-service-pill,
  .selected-service-pill,
  .booking-service-hint {
    background: var(--color-subtle) !important;
    border: 1px solid var(--color-glow) !important;
    color: var(--text-0) !important;
    border-radius: 999px !important;
  }

  .slot-btn.is-selected,
  .time-slot.is-selected,
  .booking-slot.is-selected {
    border-color: rgba(var(--color-action-rgb), 0.55) !important;
    background: var(--color-subtle) !important;
    box-shadow:
      0 0 0 2px rgba(var(--color-action-rgb), 0.2) inset,
      0 0 24px rgba(var(--color-action-rgb), 0.18) !important;
  }

  #card-element.StripeElement--focus,
  #payment-element .Input--focus {
    border-color: rgba(var(--color-action-rgb), 0.55) !important;
    box-shadow: 0 0 0 4px var(--color-subtle) !important;
  }

  /* ── Coach sections ─────────────────────────────────────────── */
  .coach-card {
    background: rgba(20, 20, 22, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }

  .coach-card:hover {
    border-color: rgba(var(--color-action-rgb), 0.35) !important;
    box-shadow:
      0 16px 48px rgba(0, 0, 0, 0.32),
      0 0 24px var(--color-subtle) !important;
  }

  .coach-card__role,
  .coachs-values__pill {
    background: var(--color-subtle) !important;
    border: 1px solid rgba(var(--color-action-rgb), 0.28) !important;
    color: var(--pub-accent, var(--color-action)) !important;
    border-radius: 999px !important;
  }

  .stat-box {
    background: rgba(20, 20, 22, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
  }

  .stat-box:hover {
    border-color: rgba(var(--color-action-rgb), 0.35) !important;
  }

  .stat-box__value {
    background: var(--grad-action) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
  }

  /* ── Service catalog cards ──────────────────────────────────── */
  .service-card--v2,
  .service-card__cta {
    border-radius: 16px;
  }

  .service-card__cta {
    background: var(--grad-action) !important;
    color: #0a0a0c !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow:
      0 8px 22px rgba(var(--color-action-rgb), 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  }

  .service-card__price-pill,
  .service-card--v2 .service-card__price {
    background: var(--color-subtle) !important;
    border: 1px solid var(--color-glow) !important;
    color: var(--text-0) !important;
    border-radius: 999px !important;
  }

  .service-card--v2 .service-card__price-amount {
    color: var(--text-0) !important;
    -webkit-text-fill-color: var(--text-0) !important;
    background: none !important;
  }

  /* ── Pills & filters (news, aide, services) ─────────────────── */
  .newsroom__filter.is-active,
  .help-pillars-tab.is-active,
  .help-pillars-sidebar__btn.is-active,
  .help-section-nav a.is-active,
  .services-catalog__pill.is-active,
  .aide-category-pill.is-active,
  .help-topic-btn.is-active {
    background: var(--color-subtle) !important;
    border-color: rgba(var(--color-action-rgb), 0.38) !important;
    color: var(--pub-accent, var(--color-action)) !important;
  }

  .newsroom__filter-indicator,
  .help-pillars-tabs__indicator,
  .cmtb-pill-track > [class*='indicator'] {
    background: var(--color-subtle) !important;
    border: 1px solid rgba(var(--color-action-rgb), 0.38) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 18px var(--color-subtle) !important;
  }

  /* ── Badges, dots, progress ─────────────────────────────────── */
  .badge {
    background: var(--color-subtle) !important;
    border: 1px solid rgba(var(--color-action-rgb), 0.28) !important;
    color: var(--pub-accent, var(--color-action)) !important;
    border-radius: 999px !important;
  }

  .scroll-progress,
  #scroll-progress {
    background: var(--grad-action) !important;
    box-shadow: 0 0 12px rgba(var(--color-action-rgb), 0.45) !important;
  }

  .reviews-carousel__dots button.is-active {
    background: var(--grad-action) !important;
    box-shadow: 0 0 12px rgba(var(--color-action-rgb), 0.5) !important;
  }

  /* ── CTA band & footer accents ──────────────────────────────── */
  .cta-band {
    border-color: rgba(var(--color-action-rgb), 0.2) !important;
  }

  .gradient-text,
  .gradient-text.animated {
    background: var(--grad-action) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
  }

  .card__icon {
    background:
      radial-gradient(60% 60% at 30% 30%, rgba(var(--color-action-rgb), 0.18), transparent 70%),
      rgba(var(--color-action-rgb), 0.08) !important;
    border: 1px solid rgba(var(--color-action-rgb), 0.28) !important;
    color: var(--pub-accent, var(--color-action)) !important;
  }

  .card:hover {
    border-color: rgba(var(--color-action-rgb), 0.32) !important;
  }

  /* ── Form focus rings ─────────────────────────────────────────── */
  input:focus:not([type='checkbox']):not([type='radio']),
  textarea:focus,
  select:focus,
  .cm-custom-select__btn:focus-visible,
  .cm-select__trigger:focus-visible {
    border-color: rgba(var(--color-action-rgb), 0.55) !important;
    box-shadow: 0 0 0 3px var(--color-subtle) !important;
  }

  .cm-custom-select__opt.is-active,
  .cm-select__option.is-selected {
    background: var(--color-subtle) !important;
    color: var(--text-0) !important;
    box-shadow: inset 3px 0 0 var(--color-action);
  }

  body[data-page="booking"] .btn--primary:not(:disabled),
  body.ds-booking-body .btn--primary:not(:disabled) {
    background: var(--grad-action) !important;
    color: var(--bg-0) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    box-shadow:
      0 10px 28px var(--color-glow),
      inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.ds-body--admin):not(.ds-body--account):not(.admin-body) .btn--primary:not(.nav__cta .btn--primary):hover {
    transform: none !important;
  }
}