/* ==========================================================================
   ValoraX — Web Experience Final Polish
   Loaded after all historic style layers.
   2026-08-22
   ========================================================================== */

:root {
  --vx-final-radius-sm: 14px;
  --vx-final-radius: 20px;
  --vx-final-radius-lg: 28px;
  --vx-final-shadow: 0 18px 52px rgba(18, 30, 25, .075);
  --vx-final-shadow-hover: 0 24px 68px rgba(18, 30, 25, .11);
}

/* --------------------------------------------------------------------------
   Typography safety
   -------------------------------------------------------------------------- */

body.vx-experience h1,
body.vx-experience h2,
body.vx-experience h3,
body.vx-member-experience h1,
body.vx-member-experience h2,
body.vx-member-experience h3 {
  position: relative;
  z-index: 2;
  min-width: 0;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: balance;
}

body.vx-experience p,
body.vx-member-experience p {
  min-width: 0;
  text-wrap: pretty;
}

/* Images can never push text outside the grid. */
body.vx-experience img,
body.vx-member-experience img {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Desktop editorial proportions
   -------------------------------------------------------------------------- */

@media (min-width: 1181px) {
  .vx-hero-title {
    max-width: 12.5ch !important;
    font-size: clamp(4.35rem, 6.1vw, 6.9rem) !important;
    line-height: .91 !important;
  }

  .vx-manifesto-grid {
    grid-template-columns: minmax(210px, .42fr) minmax(0, 1.58fr) !important;
    gap: clamp(42px, 5vw, 76px) !important;
  }

  .vx-manifesto h2 {
    max-width: 15ch !important;
    font-size: clamp(3.6rem, 5.3vw, 5.8rem) !important;
    line-height: .94 !important;
  }

  .vx-story-head {
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr) !important;
    gap: clamp(44px, 6vw, 86px) !important;
  }

  .vx-story-head h2 {
    max-width: 13ch !important;
    font-size: clamp(3rem, 4.25vw, 4.6rem) !important;
    line-height: .94 !important;
  }

  .vx-story-item {
    grid-template-columns: minmax(370px, .78fr) minmax(0, 1.22fr) !important;
    gap: clamp(56px, 7vw, 106px) !important;
  }

  .vx-story-item:nth-child(even) {
    grid-template-columns: minmax(0, 1.22fr) minmax(370px, .78fr) !important;
  }

  .vx-story-copy h3 {
    max-width: 10.5ch !important;
    font-size: clamp(2.7rem, 3.8vw, 4.1rem) !important;
    line-height: .94 !important;
  }

  .vx-story-copy p {
    max-width: 36ch !important;
  }

  .vx-universes-head {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr) !important;
    gap: 56px !important;
  }

  .vx-universes-head h2 {
    max-width: 13ch !important;
    font-size: clamp(2.9rem, 4vw, 4.35rem) !important;
  }

  .vx-universe h3 {
    max-width: 8.4ch !important;
    font-size: clamp(3rem, 4.15vw, 4.75rem) !important;
    line-height: .91 !important;
  }

  .vx-progress-card {
    grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr) !important;
    gap: clamp(52px, 6vw, 90px) !important;
  }

  .vx-progress-copy h2 {
    max-width: 11.5ch !important;
    font-size: clamp(2.8rem, 3.8vw, 4.1rem) !important;
    line-height: .96 !important;
  }

  .vx-final-inner {
    grid-template-columns: minmax(0, 1.28fr) minmax(260px, .72fr) !important;
  }

  .vx-final-cta h2 {
    max-width: 15.5ch !important;
    font-size: clamp(3.35rem, 5vw, 5.65rem) !important;
    line-height: .93 !important;
  }

  body.vx-track-experience .premium-hero-shell {
    grid-template-columns: minmax(380px, .86fr) minmax(0, 1.14fr) !important;
  }

  body.vx-track-experience .premium-hero-copy h1 {
    max-width: 12.8ch !important;
    font-size: clamp(3.5rem, 5vw, 5.55rem) !important;
    line-height: .92 !important;
  }

  body.pricing-page.vx-experience .premium-hero-copy h1,
  body.guides-page.vx-experience .premium-hero-copy h1,
  body.catalogue-page.vx-experience .premium-hero-copy h1 {
    max-width: 13ch !important;
  }
}

/* --------------------------------------------------------------------------
   Tablet / small laptop: intermediate layout, no accidental collisions
   -------------------------------------------------------------------------- */

@media (min-width: 761px) and (max-width: 1180px) {
  .vx-hero-title {
    max-width: 12ch !important;
    font-size: clamp(3.45rem, 7vw, 5.2rem) !important;
  }

  .vx-manifesto h2 {
    max-width: 14ch !important;
    font-size: clamp(3rem, 5.6vw, 4.5rem) !important;
  }

  .vx-story-head h2 {
    max-width: 13ch !important;
    font-size: clamp(2.6rem, 4.7vw, 3.8rem) !important;
  }

  .vx-story-item,
  .vx-story-item:nth-child(even) {
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr) !important;
    gap: 38px !important;
  }

  .vx-story-item:nth-child(even) .vx-story-copy {
    order: 2;
  }

  .vx-story-copy h3 {
    max-width: 10ch !important;
    font-size: clamp(2.25rem, 4.2vw, 3.45rem) !important;
  }

  .vx-universe h3 {
    max-width: 8ch !important;
    font-size: clamp(2.6rem, 4.7vw, 4rem) !important;
  }

  .vx-progress-card {
    grid-template-columns: minmax(290px, .82fr) minmax(0, 1.18fr) !important;
    gap: 34px !important;
  }

  .vx-progress-copy h2 {
    max-width: 11ch !important;
    font-size: clamp(2.35rem, 4vw, 3.4rem) !important;
  }

  body.vx-track-experience .premium-hero-shell {
    grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr) !important;
    gap: 38px !important;
  }

  body.vx-track-experience .premium-hero-copy h1 {
    max-width: 13ch !important;
    font-size: clamp(2.9rem, 5vw, 4.35rem) !important;
  }
}

/* --------------------------------------------------------------------------
   Campus marquee — seamless and extensible
   -------------------------------------------------------------------------- */

.vx-campus {
  overflow: hidden;
}

.vx-campus-inner {
  min-width: 0;
}

.vx-campus-logos {
  min-width: 0;
  overflow: hidden;
}

.vx-campus-marquee {
  --vx-campus-gap: clamp(42px, 6vw, 84px);
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 9px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.vx-campus-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: var(--vx-campus-gap) !important;
  animation: vxCampusMarqueeFinal 27s linear infinite !important;
  transform: translate3d(0,0,0);
  will-change: transform;
}

.vx-campus-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--vx-campus-gap) !important;
}

.vx-campus-logo {
  flex: 0 0 auto;
  opacity: .72;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}

.vx-campus-logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}

@keyframes vxCampusMarqueeFinal {
  from { transform: translate3d(0,0,0); }
  to {
    transform: translate3d(
      calc(-50% - (var(--vx-campus-gap) / 2)),
      0,
      0
    );
  }
}

.vx-campus-marquee:hover .vx-campus-track {
  animation-play-state: paused !important;
}

/* --------------------------------------------------------------------------
   Pricing: true visual symmetry
   -------------------------------------------------------------------------- */

body.pricing-page.vx-experience .pricing-grid {
  align-items: stretch !important;
  gap: clamp(16px, 2vw, 22px) !important;
}

body.pricing-page.vx-experience .pricing-card {
  min-width: 0;
  height: 100%;
  min-height: 570px !important;
  display: grid !important;
  grid-template-rows:
    34px
    minmax(102px, auto)
    minmax(92px, auto)
    1fr
    48px !important;
  padding: clamp(32px, 4vw, 48px) !important;
  border-radius: 26px !important;
}

body.pricing-page.vx-experience .pricing-card-topline {
  display: flex;
  min-width: 0;
  min-height: 34px !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 8px;
}

body.pricing-page.vx-experience .pricing-card h2 {
  min-height: 0 !important;
  margin: 28px 0 10px !important;
  align-self: end;
  font-size: clamp(2rem, 3.4vw, 2.75rem) !important;
  line-height: 1.03 !important;
}

body.pricing-page.vx-experience .pricing-amount {
  min-height: 0 !important;
  margin: 12px 0 0 !important;
  align-self: center;
  font-size: clamp(3rem, 5vw, 4.7rem) !important;
  line-height: .98 !important;
}

body.pricing-page.vx-experience .pricing-card ul {
  align-self: start;
  margin: 22px 0 30px !important;
}

body.pricing-page.vx-experience .pricing-card li {
  margin-block: 10px;
}

body.pricing-page.vx-experience .pricing-card .btn {
  width: 100%;
  min-height: 48px;
  align-self: end;
  margin: 0 !important;
}

body.pricing-page.vx-experience .pricing-saving-badge {
  flex: 0 0 auto;
  min-height: 26px;
  margin: 0 !important;
  border-color: rgba(38,84,68,.12) !important;
  color: #315f50 !important;
  background: #e7efe9 !important;
}

/* --------------------------------------------------------------------------
   Airier blocks and fine detailing
   -------------------------------------------------------------------------- */

.vx-story-visual,
.vx-progress-screen,
body.vx-track-experience .premium-hero-media,
body.vx-experience .premium-hero-shell,
body.vx-member-experience .card,
body.vx-member-experience .panel {
  isolation: isolate;
}

.vx-story-visual,
.vx-progress-screen,
body.vx-track-experience .premium-hero-media {
  box-shadow: var(--vx-final-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .vx-story-visual,
  .vx-progress-screen,
  body.vx-track-experience .premium-hero-media,
  body.guides-page.vx-experience .guide-card-compact,
  body.vx-member-experience .course-card,
  body.member-dashboard-page.vx-member-experience .dashboard-path-card {
    transition:
      transform .42s cubic-bezier(.22,1,.36,1),
      box-shadow .42s ease,
      border-color .3s ease;
  }

  .vx-story-item:hover .vx-story-visual,
  body.vx-track-experience .premium-hero-media:hover,
  body.guides-page.vx-experience .guide-card-compact:hover,
  body.vx-member-experience .course-card:hover,
  body.member-dashboard-page.vx-member-experience .dashboard-path-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vx-final-shadow-hover);
  }
}

.btn {
  transition:
    transform .24s cubic-bezier(.22,1,.36,1),
    box-shadow .24s ease,
    background-color .24s ease,
    color .24s ease,
    border-color .24s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
  }
}

/* A little more breathing room without turning the page into empty space. */
.vx-story-list {
  gap: clamp(88px, 10vw, 142px) !important;
}

.vx-universes,
.vx-progress-showcase {
  scroll-margin-top: 100px;
}

/* --------------------------------------------------------------------------
   Portrait: stable natural-height composition
   -------------------------------------------------------------------------- */

@media (max-width: 600px) and (orientation: portrait) {
  :root {
    --vx-portrait-edge: 14px;
  }

  body.vx-experience .container,
  body.vx-member-experience .container {
    width: calc(100% - (var(--vx-portrait-edge) * 2)) !important;
  }

  .vx-home-hero,
  .vx-manifesto,
  .vx-story,
  .vx-universes,
  .vx-progress-showcase,
  .vx-final-cta {
    overflow: hidden;
  }

  .vx-hero-title,
  .vx-manifesto h2,
  .vx-story-head h2,
  .vx-story-copy h3,
  .vx-universes-head h2,
  .vx-universe h3,
  .vx-progress-copy h2,
  .vx-final-cta h2,
  body.vx-track-experience .premium-hero-copy h1,
  body.vx-experience .page-hero h1,
  body.vx-member-experience .page-hero h1 {
    width: auto !important;
    max-width: 100% !important;
  }

  .vx-hero-title {
    font-size: clamp(2.28rem, 10.9vw, 2.95rem) !important;
  }

  .vx-manifesto {
    padding-block: 58px !important;
  }

  .vx-manifesto-grid,
  .vx-story-head,
  .vx-story-item,
  .vx-story-item:nth-child(even),
  .vx-universes-head,
  .vx-progress-card,
  .vx-final-inner,
  body.vx-track-experience .premium-hero-shell {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .vx-manifesto h2 {
    font-size: clamp(2.35rem, 10.6vw, 3rem) !important;
  }

  .vx-story {
    padding-block: 54px !important;
  }

  .vx-story-head {
    gap: 12px !important;
    margin-bottom: 34px !important;
  }

  .vx-story-head h2 {
    font-size: clamp(2.15rem, 9.7vw, 2.75rem) !important;
  }

  .vx-story-item,
  .vx-story-item:nth-child(even) {
    gap: 18px !important;
  }

  .vx-story-item:nth-child(even) .vx-story-copy,
  .vx-story-copy {
    order: 1 !important;
  }

  .vx-story-item:nth-child(even) .vx-story-visual,
  .vx-story-visual {
    order: 2 !important;
  }

  .vx-story-copy h3 {
    font-size: clamp(1.9rem, 8.7vw, 2.35rem) !important;
  }

  .vx-story-copy p {
    max-width: 100% !important;
  }

  .vx-story-visual,
  .vx-progress-screen,
  body.vx-track-experience .premium-hero-media {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    transform: none !important;
    border-radius: 17px !important;
  }

  .vx-universes {
    padding-bottom: 62px !important;
  }

  .vx-universes-head {
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .vx-universes-head h2 {
    font-size: clamp(2.15rem, 9.8vw, 2.7rem) !important;
  }

  .vx-universe-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .vx-universe {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 23px 18px !important;
    border-radius: 19px !important;
  }

  .vx-universe h3 {
    margin-top: 24px !important;
    font-size: clamp(2.1rem, 10vw, 2.65rem) !important;
  }

  .vx-universe-bottom {
    margin-top: 32px !important;
  }

  .vx-progress-showcase {
    padding-bottom: 60px !important;
  }

  .vx-progress-card {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 22px !important;
    padding: 23px 18px !important;
    border-radius: 20px !important;
  }

  .vx-progress-copy h2 {
    font-size: clamp(1.92rem, 8.8vw, 2.3rem) !important;
  }

  .vx-progress-copy p {
    max-width: 100% !important;
  }

  .vx-final-cta {
    padding-block: 58px 70px !important;
  }

  .vx-final-cta h2 {
    font-size: clamp(2.2rem, 10vw, 2.8rem) !important;
  }

  body.vx-track-experience .premium-hero-section {
    padding: 20px 0 42px !important;
  }

  body.vx-track-experience .premium-hero-shell {
    gap: 20px !important;
  }

  body.vx-track-experience .premium-hero-copy h1 {
    font-size: clamp(2.2rem, 10vw, 2.85rem) !important;
  }

  /* Pricing cards become natural-height in portrait; symmetry matters
     vertically only when they're side-by-side. */
  body.pricing-page.vx-experience .pricing-card {
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    padding: 20px !important;
  }

  body.pricing-page.vx-experience .pricing-card-topline {
    min-height: 28px !important;
  }

  body.pricing-page.vx-experience .pricing-card h2 {
    min-height: 0 !important;
    margin: 20px 0 8px !important;
    font-size: clamp(1.65rem, 8vw, 2rem) !important;
  }

  body.pricing-page.vx-experience .pricing-amount {
    margin: 8px 0 4px !important;
    font-size: clamp(2.35rem, 11vw, 3rem) !important;
  }

  body.pricing-page.vx-experience .pricing-card ul {
    margin: 18px 0 24px !important;
  }

  body.pricing-page.vx-experience .pricing-card .btn {
    margin-top: auto !important;
  }

  /* Campus remains an animated band but doesn't create horizontal overflow. */
  .vx-campus-marquee {
    --vx-campus-gap: 28px;
    width: 100%;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }

  .vx-campus-track {
    animation-duration: 23s !important;
  }

  .vx-campus-logo img {
    max-height: 34px !important;
  }

  /* Member grids: natural heights and no narrow columns. */
  body.member-dashboard-page.vx-member-experience .dashboard-path-grid,
  body.member-dashboard-page.vx-member-experience .dashboard-quick-grid,
  body.profile-progress-page.vx-member-experience .profile-grid-v2,
  body.profile-progress-page.vx-member-experience .profile-environment-grid {
    grid-template-columns: 1fr !important;
  }

  body.member-dashboard-page.vx-member-experience .dashboard-path-card,
  body.member-dashboard-page.vx-member-experience .dashboard-quick-card,
  body.profile-progress-page.vx-member-experience .profile-track-card,
  body.profile-progress-page.vx-member-experience .profile-weekly-card,
  body.profile-progress-page.vx-member-experience .profile-favorites-card,
  body.profile-progress-page.vx-member-experience .profile-activity-card {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .page-hero {
    grid-template-columns: 1fr !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-hero-visual {
    justify-self: start !important;
  }

  body.brain-theme-bordeaux.vx-member-experience .brain-sidebar {
    grid-template-columns: 1fr !important;
  }

  body.vx-course-page .lesson,
  body.vx-course-page .formula,
  body.vx-course-page .worked-example,
  body.vx-course-page .detail-callout {
    max-width: 100% !important;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .vx-hero-title {
    font-size: 2.18rem !important;
  }

  .vx-manifesto h2,
  .vx-universes-head h2,
  .vx-final-cta h2 {
    font-size: 2.08rem !important;
  }

  .vx-story-head h2 {
    font-size: 2rem !important;
  }

  .vx-story-copy h3,
  .vx-progress-copy h2 {
    font-size: 1.88rem !important;
  }

  .vx-universe h3 {
    font-size: 2rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vx-campus-track {
    animation: none !important;
    transform: none !important;
  }
}


/* ==========================================================================
   Mobile landscape — campus marquee full viewport width
   ========================================================================== */

@media (max-width: 980px) and (orientation: landscape) {
  .vx-campus {
    overflow: hidden !important;
  }

  .vx-campus-inner {
    display: grid !important;
    grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: center !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .vx-campus-copy {
    position: relative;
    z-index: 2;
    max-width: 230px !important;
    margin: 0 !important;
  }

  .vx-campus-logos {
    position: relative !important;
    left: 50% !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 100vw !important;
    margin-left: -50vw !important;
    overflow: hidden !important;
  }

  .vx-campus-marquee {
    width: 100vw !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding: 10px 0 !important;
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ) !important;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 4%,
      #000 96%,
      transparent 100%
    ) !important;
  }

  .vx-campus-track {
    min-width: max-content !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) and (orientation: landscape) {
  .vx-campus-inner {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .vx-campus-copy {
    max-width: 420px !important;
  }

  .vx-campus-logos {
    left: 50% !important;
    width: 100vw !important;
    min-width: 100vw !important;
    margin-left: -50vw !important;
  }

  .vx-campus-marquee {
    width: 100vw !important;
  }
}


/* ==========================================================================
   Campus marquee — TRUE full-width mobile, portrait + landscape
   ========================================================================== */

@media (max-width: 980px) {
  .vx-campus {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-inline: 0 !important;
  }

  /* Keep the explanatory copy aligned with the site content, but remove the
     container borders: the visual band itself now owns the full viewport. */
  .vx-campus-inner {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: 24px 0 26px !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }

  .vx-campus-copy {
    width: 100% !important;
    max-width: 38ch !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* This is the key fix:
     parent-left + 50% parent-width - 50vw = viewport left edge. */
  .vx-campus-logos {
    position: relative !important;
    left: 50% !important;
    display: block !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 8px 0 0 -50vw !important;
    padding: 16px 0 !important;
    overflow: hidden !important;
    border-top: 1px solid var(--vx-line) !important;
    border-bottom: 1px solid var(--vx-line) !important;
  }

  .vx-campus-marquee {
    --vx-campus-gap: clamp(30px, 8vw, 58px);
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    overflow: hidden !important;
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    ) !important;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    ) !important;
  }

  .vx-campus-track {
    display: flex !important;
    width: max-content !important;
    min-width: max-content !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--vx-campus-gap) !important;
    animation: vxCampusMarqueeMobile 20s linear infinite !important;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  .vx-campus-group {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--vx-campus-gap) !important;
  }

  .vx-campus-logo {
    display: flex !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 54px !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: .72 !important;
  }

  .vx-campus-logo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: 42px !important;
    max-width: min(42vw, 220px) !important;
    object-fit: contain !important;
  }

  .vx-campus-logo--arts img {
    max-width: min(44vw, 230px) !important;
  }

  .vx-campus-logo--dauphine img {
    max-width: min(42vw, 220px) !important;
  }

  @keyframes vxCampusMarqueeMobile {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(
        calc(-50% - (var(--vx-campus-gap) / 2)),
        0,
        0
      );
    }
  }
}

/* Portrait gets a little more horizontal logo density. */
@media (max-width: 600px) and (orientation: portrait) {
  .vx-campus-inner {
    width: calc(100% - 28px) !important;
    gap: 14px !important;
    padding-top: 22px !important;
  }

  .vx-campus-logos {
    margin-top: 6px !important;
    padding-block: 13px !important;
  }

  .vx-campus-marquee {
    --vx-campus-gap: 30px;
  }

  .vx-campus-logo {
    min-height: 48px !important;
  }

  .vx-campus-logo img {
    max-height: 36px !important;
  }

  .vx-campus-logo--arts img {
    max-width: min(46vw, 190px) !important;
  }

  .vx-campus-logo--dauphine img {
    max-width: min(43vw, 178px) !important;
  }
}

/* Landscape remains full-bleed; text can use the wider screen without forcing
   the marquee back into a column. */
@media (max-width: 980px) and (orientation: landscape) {
  .vx-campus-inner {
    grid-template-columns: 1fr !important;
    width: calc(100% - 32px) !important;
    gap: 12px !important;
  }

  .vx-campus-copy {
    max-width: 520px !important;
  }

  .vx-campus-logos {
    left: 50% !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
  }

  .vx-campus-marquee {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
  }

  .vx-campus-logo img {
    max-height: 38px !important;
    max-width: 220px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vx-campus-track {
    animation: none !important;
    transform: none !important;
  }
}


/* ==========================================================================
   Homepage — "Deux univers, une seule logique" forced single-line on desktop
   ========================================================================== */

@media (min-width: 981px) {
  .vx-universes-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 28px !important;
  }

  .vx-universes-head h2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: clamp(2.75rem, 3.8vw, 4rem) !important;
    line-height: .96 !important;
    letter-spacing: -.045em !important;
  }

  .vx-universes-head p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    justify-self: start !important;
    color: #6c726e !important;
    font-size: clamp(.88rem, 1.1vw, 1rem) !important;
    line-height: 1.45 !important;
  }
}

/* On smaller screens wrapping is intentional to avoid horizontal overflow. */
@media (max-width: 980px) {
  .vx-universes-head h2,
  .vx-universes-head p {
    white-space: normal !important;
  }
}


/* ==========================================================================
   Homepage hero title — slightly reduced on desktop
   ========================================================================== */

@media (min-width: 981px) {
  .vx-home-hero .vx-hero-title {
    max-width: 12.8ch !important;
    font-size: clamp(3.75rem, 5.2vw, 5.9rem) !important;
    line-height: .92 !important;
    letter-spacing: -.058em !important;
  }
}

/* ValoraX language selector — persistent in the top bar */
.vx-language-switch-topbar,
.vx-language-switch,
.vx-language-switch-mobile {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border, rgba(127,127,127,.25));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 90%, transparent);
  flex: 0 0 auto;
}
.vx-language-option {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  padding: .48rem .58rem;
  cursor: pointer;
  opacity: .58;
}
.vx-language-option:hover { opacity: .9; }
.vx-language-option.is-active {
  background: var(--text, #111);
  color: var(--surface, #fff);
  opacity: 1;
}

/* Older injected locations are no longer used. */
.vx-language-switch,
.vx-language-switch-mobile { display: none !important; }

@media (max-width: 980px) {
  /* Mobile header has three stable cells: brand | FR/EN | burger. */
  body.vx-experience .topbar .nav,
  body.vx-member-experience .topbar .nav,
  .topbar .nav {
    grid-template-columns: minmax(0, 1fr) auto 44px !important;
    gap: 8px !important;
  }

  .topbar .vx-language-switch-topbar {
    display: inline-flex !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 2px !important;
    background: rgba(255,255,255,.72) !important;
    border-color: rgba(16,21,18,.10) !important;
    z-index: 2;
  }

  .topbar .vx-language-switch-topbar .vx-language-option {
    min-width: 31px;
    min-height: 32px;
    padding: .42rem .45rem;
    font-size: .69rem;
  }

  body.vx-experience .topbar .menu-label,
  body.vx-member-experience .topbar .menu-label,
  .topbar .menu-label {
    grid-column: 3 !important;
  }
}

@media (max-width: 390px) {
  .topbar .vx-language-switch-topbar .vx-language-option {
    min-width: 28px;
    padding-inline: .36rem;
    font-size: .65rem;
  }
}


/* ========================================================================== */
/* ValoraX mobile language selector — dropdown placement + translated dock    */
/* ========================================================================== */
@media (max-width: 980px) {
  .topbar .vx-language-switch-topbar {
    display: none !important;
  }

  body.vx-experience .topbar .nav,
  body.vx-member-experience .topbar .nav,
  .topbar .nav {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 8px !important;
  }

  body.vx-experience .topbar .menu-label,
  body.vx-member-experience .topbar .menu-label,
  .topbar .menu-label {
    grid-column: 2 !important;
  }

  #primary-navigation > .vx-language-switch-mobile {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 7px;
    padding: 10px 8px 2px;
    border: 0;
    border-top: 1px solid rgba(16, 21, 18, .09);
    border-radius: 0;
    background: transparent;
  }

  #primary-navigation > .vx-language-switch-mobile .vx-language-switch-label {
    min-width: 0;
    padding-left: 6px;
    color: #68716d;
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .01em;
  }

  #primary-navigation > .vx-language-switch-mobile .vx-language-option {
    display: grid;
    place-items: center;
    width: 42px;
    min-width: 42px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid rgba(16, 21, 18, .09);
    background: #f7f8f7;
    font-size: 1.05rem;
    line-height: 1;
    opacity: .72;
    touch-action: manipulation;
  }

  #primary-navigation > .vx-language-switch-mobile .vx-language-option.is-active {
    border-color: rgba(16, 21, 18, .22);
    background: #273c34;
    color: #fff;
    opacity: 1;
  }
}

@media (min-width: 981px) {
  #primary-navigation > .vx-language-switch-mobile {
    display: none !important;
  }
}

/* ValoraX premium course editorial system 2026-08-22 */
.course-snapshot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 34px;
}
.course-snapshot-item {
  position: relative;
  min-height: 132px;
  padding: 18px 18px 17px;
  border: 1px solid color-mix(in srgb, var(--border, #d9dee8) 78%, transparent);
  border-radius: 17px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface, #fff) 96%, var(--accent, #9c1c30) 4%), var(--surface, #fff));
  box-shadow: 0 12px 34px rgba(15, 23, 42, .055);
}
.course-snapshot-label {
  display: inline-block;
  margin-bottom: 9px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--accent, #9c1c30);
}
.course-snapshot-item p {
  margin: 0;
  font-size: .94rem;
  line-height: 1.52;
  color: var(--text, #172033);
}
.lesson > section[data-course-section] > p:first-of-type {
  max-width: 78ch;
  font-size: 1.01rem;
  line-height: 1.72;
  color: color-mix(in srgb, var(--text, #172033) 91%, #667085 9%);
}
.formula-explainer {
  max-width: 78ch;
  margin: -2px 0 20px;
  padding: 11px 14px;
  border-left: 3px solid color-mix(in srgb, var(--accent, #9c1c30) 70%, transparent);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--surface-soft, #f6f7fa) 92%, var(--accent, #9c1c30) 8%);
  font-size: .91rem;
  line-height: 1.55;
}
.worked-example p, .detail-callout p { line-height: 1.62; }
@media (max-width: 900px) {
  .course-snapshot { grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }
  .course-snapshot-item { min-height: 0; padding: 16px; }
  .lesson > section[data-course-section] > p:first-of-type { font-size: .98rem; line-height: 1.66; }
}

/* ValoraX home editorial photography — user-selected Pexels visuals */
.vx-story-visual img.vx-home-editorial-photo {
  width: 100% !important;
  height: 100% !important;
  min-height: 430px;
  padding: 0 !important;
  object-fit: cover !important;
  transform: translate3d(0, var(--vx-parallax-y, 0), 0) scale(1.012);
}
.vx-story-visual--course img.vx-home-editorial-photo { object-position: 50% 46% !important; }
.vx-story-visual--library img.vx-home-editorial-photo { object-position: 50% 52% !important; }
.vx-story-visual--brain img.vx-home-editorial-photo { object-position: 50% 43% !important; }

@media (max-width: 760px) {
  .vx-story-visual--course,
  .vx-story-visual--library,
  .vx-story-visual--brain {
    aspect-ratio: 4 / 3 !important;
  }
  .vx-story-visual img.vx-home-editorial-photo {
    min-height: 0 !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }
}