/**
 * OFF MARKET — color overrides (components)
 * Color values only — no layout, animation, or structure changes.
 */

/* Safe-area / root — match dark red, no white gaps on mobile */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--color-bg-primary);
}

body {
  font-size: var(--om-text-body, 17px);
  font-family: var(--om-font-main, Inter, system-ui, sans-serif);
  background-color: var(--color-bg-secondary);
}

/* Preserve legacy template body/spacing math (designed for 10px root) */
.page-content-wrapper,
.page-content-wrapper__inner {
  --scale-text-rem: 0.625rem;
}

/* Active UI — Inter only (override Victor Serif / template fonts) */
body .leading-trim,
.page-content-wrapper a.leading-trim,
.page-content-wrapper .text-t1,
.page-content-wrapper .text-c1,
.page-content-wrapper .text-c2,
.page-content-wrapper .text-body-1,
.page-content-wrapper .text-body-2,
.page-content-wrapper .text-body-3 {
  font-family: var(--om-font-main, Inter, system-ui, sans-serif);
}

.ui-dark.ui-background,
.ui-dark-background {
  background-color: var(--color-bg-primary);
}

.ui-light-background {
  background-color: var(--color-bg-secondary);
}

/* Modal / menu overlays — dark red, not flat black */
.modal__background {
  background: var(--color-bg-primary);
  opacity: 0.88;
}

.with-modal body,
.with-menu-modal body {
  background-color: var(--color-bg-primary);
}

/* Menu panel — subtle dark red wash over photography */
.modal--full.ui-dark .modal__content.ui-background {
  background-color: rgba(var(--om-dark-red-rgb), 0.92);
}

/* Primary CTA — solid ruby (visuals in om-buttons.css) */
.btn--primary:not(.is-disabled):not(:disabled),
.btn--primary .btn-container:not(.is-disabled) {
  --t-button-primary-background: #565449;
  --t-button-primary-background-rgb: 86, 84, 73;
  --t-button-primary-text: #f5f4f2;
  --t-button-primary-text-rgb: 245, 244, 242;
  --t-button-primary-hover-background: #454238;
  --t-button-primary-hover-background-rgb: 90, 0, 17;
  --t-button-primary-hover-text: #f5f4f2;
  --t-button-primary-hover-text-rgb: 245, 244, 242;
  --t-button-primary-active-background: #4a000e;
  --t-button-primary-active-text: #f5f4f2;
}

/* Outline / secondary — glass border, stone text, champagne hover */
.btn--outline:hover:not(.is-disabled):not(:disabled),
.btn--outline .btn-container:hover:not(.is-disabled) {
  border-color: rgba(var(--om-champagne-rgb), 0.55);
}

/* Footer decorative gradient — deep red + champagne orbs */
.footer__gradient .g3 {
  background: radial-gradient(
      circle at center,
      rgba(var(--om-champagne-rgb), 0.35) 0,
      rgba(var(--om-champagne-rgb), 0) 40%
    )
    no-repeat;
}

.footer__gradient .interactive {
  background: radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0.45) 0,
      rgba(0, 0, 0, 0) 50%
    )
    no-repeat;
}

/* Header on dark — ensure logo/icon contrast */
.ui-dark .header__background {
  background: linear-gradient(
    to bottom,
    rgba(var(--om-dark-red-rgb), 0.55) 0%,
    rgba(var(--om-dark-red-rgb), 0) 100%
  );
}

/* Link hover accent */
.ui-dark a:hover,
.ui-light a:hover {
  color: var(--color-accent-light);
}

/* Active / focus visibility — see global focus system at end of file */

/**
 * Disable rotate-device orientation blocker (.turn-message in global.css).
 * Shown via aspect-ratio media queries on tablet portrait and mobile landscape.
 * Keeps markup in DOM; never covers the page or blocks pointer events.
 */
.turn-message,
.turn-message__background,
.turn-message__background--mobile,
.turn-message__background--tablet,
.turn-message__content,
.turn-message__content__mobile,
.turn-message__content__tablet,
.turn-message__icon,
.turn-message__icon--mobile,
.turn-message__icon--tablet {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Section 7 Nature — remove legacy ruby panel bleeding on the left */
#nature .l-nature__slider > .col.ui-background {
  background-color: #f5f4f2;
}

/* Editorial split — phrase text reveal */
#l-design-sticky-3 .mav-text-reveal span,
#design-mobile-slide-4 .mav-text-reveal span {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(5px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--line-index, 0) * 80ms);
}

#l-design-sticky-3 .mav-text-reveal.is-visible span,
#design-mobile-slide-4 .mav-text-reveal.is-visible span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  #l-design-sticky-3 .mav-text-reveal span,
  #design-mobile-slide-4 .mav-text-reveal span {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Central editorial title — black text, ruby OFF MARKET */
#l-design-sticky-2 .l-design__title h3,
#design-mobile-slide-2 .l-design__title h3 {
  color: #111111;
}

#l-design-sticky-2 .om-brand-inline,
#l-design-sticky-2 .om-brand-inline .char,
#design-mobile-slide-2 .om-brand-inline,
#design-mobile-slide-2 .om-brand-inline .char {
  color: #565449;
  -webkit-text-fill-color: #565449;
  opacity: 1;
  text-shadow: none;
}

/* l-residences — property card hover panel */
.l-residences__caption__hover {
  margin-top: 1rem;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.74, 0.22, 0.99),
    transform 0.8s cubic-bezier(0.25, 0.74, 0.22, 0.99);
}

.has-hover .l-residences__caption:hover .l-residences__caption__hover {
  opacity: 1;
  transform: translateY(0);
}

.l-residences__caption__hover-desc {
  margin: 0;
  font-family: var(--font-body, var(--font-main, Inter, sans-serif));
  font-size: var(--om-small-readable);
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(245, 244, 242, 0.78);
}

.l-residences__caption__hover-desc::before,
.l-residences__caption__hover-desc::after {
  content: none !important;
  display: none !important;
}

.l-residences__caption__hover-points {
  display: grid;
  gap: 0.55rem;
  margin: 1.15rem 0 0;
  padding: 0;
  list-style: none;
}

.l-residences__caption__hover-points li {
  font-family: var(--font-body, var(--font-main, Inter, sans-serif));
  font-size: 0.86rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 244, 242, 0.72);
}

.l-residences__caption__hover-points li::before,
.l-residences__caption__hover-points li::after {
  content: none !important;
  display: none !important;
}

.l-residences__caption__top .l-residences__caption__hover {
  opacity: 1;
  transform: none;
  margin-top: 1.1rem;
}

.l-residences__caption__top .om-button {
  margin-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .l-residences__caption__hover {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── OFF MARKET global focus system ── */

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus,
summary:focus {
  outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--om-focus-ring);
  outline-offset: 4px;
}

/* Square icon / modal close — tighter offset */
.btn.btn--square:focus-visible,
.om-header__icon-btn:focus-visible {
  outline-offset: 2px;
}

/* Nav links — green ring only on keyboard focus, never on click focus */
.om-header__nav a:focus:not(:focus-visible),
.mav-nav__link:focus:not(:focus-visible) {
  outline: none !important;
}

/**
 * Homepage simulator — stacking context only (no section hiding).
 */
#simulateur,
#simulateur.om-simulator--home {
  position: relative;
  z-index: 11;
  isolation: isolate;
}

#simulateur ~ #territories {
  position: relative;
  z-index: 10;
  background: var(--om-ivory);
}

/**
 * Legacy archive — kept in DOM after footer, excluded from homepage flow.
 */
#legacy-editorial {
  display: none !important;
}

/* Legacy favorites card template — clone source, must not reserve layout space */
.js-favourite-list-single,
.js-favourite-list-single * {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.l-favorites.is-hidden,
.l-favorites__list.is-hidden,
.js-favourite-list-list.is-hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Document scroll — prevent dead zones from Locomotive leftovers */
html,
body {
  height: auto !important;
  max-height: none !important;
}

html.has-scroll-smooth,
html.no-scroll-smooth,
html.has-scroll-smooth body,
html.no-scroll-smooth body,
[data-scroll-container] {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
}

.pin-spacer:empty {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Lower sections — always in document flow and fully visible */
#territories,
#lectures-privees,
#final-cta,
#contact,
footer#contact,
.om-testimonials,
.om-final-cta,
.om-footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: none !important;
  pointer-events: auto !important;
  position: relative !important;
}

/* om-final-cta__reveal starts at opacity 0 in om-final-cta.css;
   no om-final-cta.js exists to add .is-visible → force it permanently on */
.om-final-cta .om-final-cta__reveal,
.om-final-cta.is-visible .om-final-cta__reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Testimonial card and its inner elements */
.om-testimonials,
.om-testimonials__inner,
.om-testimonial-card {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (min-width: 980px) {
  /**
   * Desktop — native document scroll (Locomotive virtual scroll breaks section flow).
   */
  html.has-scroll-smooth,
  html.no-scroll-smooth,
  html.no-hover.is-ios {
    position: static !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    width: 100% !important;
    inset: auto !important;
  }

  body,
  html.has-scroll-smooth body,
  html.no-scroll-smooth body {
    position: static !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    width: 100% !important;
  }

  .page-content-wrapper,
  .page-content-wrapper__inner,
  .js-page-content-wrapper,
  .has-scroll-smooth .page-content-wrapper,
  .has-scroll-smooth .page-content-wrapper__inner,
  .no-scroll-smooth .page-content-wrapper,
  .no-scroll-smooth .page-content-wrapper__inner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  [data-scroll-container],
  .has-scroll-smooth [data-scroll-container],
  [data-scroll-section],
  [data-scroll-section][data-scroll-section-id],
  [data-scroll-section][data-scroll-section-id]:not([data-scroll-section-inview]),
  .has-scroll-smooth [data-scroll-section],
  .has-scroll-smooth [data-scroll-section][data-scroll-section-id],
  .has-scroll-smooth [data-scroll-section][data-scroll-section-id]:not([data-scroll-section-inview]) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    will-change: auto !important;
  }

  /* OFF MARKET reveal items that stay hidden when Locomotive Scroll in-view never fires */
  #qui-sommes-nous .mav-reveal-item,
  #qui-sommes-nous .mav-who__phrase,
  #qui-sommes-nous .mav-who__eyebrow,
  #qui-sommes-nous .om-cta,
  #about-qui-sommes-nous .mav-reveal-item,
  #about-qui-sommes-nous .about-who__eyebrow,
  #about-qui-sommes-nous .om-cta {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }
}

/**
 * Homepage — mobile legacy fork + scroll fixes.
 */
@media (max-width: 979px) {
  html,
  html.no-hover,
  html.no-hover.is-ios,
  html.has-scroll-smooth,
  html.no-scroll-smooth,
  html.is-preloader-active,
  html.is-preloader-disabled {
    position: static !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    width: 100% !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body,
  html.no-hover body,
  html.has-scroll-smooth body,
  html.no-scroll-smooth body {
    position: static !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    width: 100% !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  body.menu-open {
    overflow: hidden !important;
    touch-action: none !important;
    position: fixed !important;
    width: 100% !important;
  }

  .page-content-wrapper,
  .page-content-wrapper__inner,
  .js-page-content-wrapper,
  .has-scroll-smooth .page-content-wrapper,
  .has-scroll-smooth .page-content-wrapper__inner,
  .no-scroll-smooth .page-content-wrapper,
  .no-scroll-smooth .page-content-wrapper__inner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    overscroll-behavior: auto !important;
    scroll-behavior: auto !important;
  }

  [data-scroll-container],
  .has-scroll-smooth [data-scroll-container],
  [data-scroll-section],
  [data-scroll-section][data-scroll-section-id],
  [data-scroll-section][data-scroll-section-id]:not([data-scroll-section-inview]),
  .has-scroll-smooth [data-scroll-section],
  .has-scroll-smooth [data-scroll-section][data-scroll-section-id],
  .has-scroll-smooth [data-scroll-section][data-scroll-section-id]:not([data-scroll-section-inview]) {
    min-height: 0 !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    will-change: auto !important;
  }

  #nature-mobile,
  #place-mobile-block,
  .l-place-description,
  #l-place-sticky-mobile-1,
  #l-place-sticky-mobile-2,
  #l-place-sticky-mobile-3,
  #design-mobile,
  #design-mobile-slide-2,
  #l-design-mobile-sticky-2,
  #design-mobile-slide-4,
  #l-residences-sticky-2,
  #residences-slider-mobile,
  #interiors-2,
  #interiors-slider-mobile {
    display: none !important;
  }
}

/**
 * Site-wide — disable legacy preloader overlay and reveal gates (om-no-preloader.js).
 */
html.is-preloader-disabled .js-preloader,
html.is-preloader-disabled .preloader {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.is-preloader-disabled .mv-chrome.is-preloader-hidden {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html.js-no-reveal [data-reveal],
html.is-preloader-disabled [data-reveal] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

html.is-preloader-disabled .is-invisible--js {
  opacity: 1 !important;
  visibility: visible !important;
}

html.is-preloader-disabled.not-ready body,
html.is-preloader-disabled.not-ready body * {
  transition: none !important;
}