/**
 * QA fixes for Evohome sheet BUG-001–010 (2026-08-20).
 * Loaded after the theme stylesheet; keep selectors specific.
 */

/* BUG-003 side-effect: intro heading was promoted to h1 for a11y, but theme
   only styles .flexible_intro-text h2 — restore the same display typography. */
.flexible_intro-text h1 {
  font-size: 70px;
  line-height: 70px;
  font-size: clamp(30px, 6vw, 80px);
  line-height: clamp(30px, 6vw, 80px);
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.flexible_intro-text h1 strong {
  font-weight: 700;
}

.flexible_intro-text h1:not(:last-child) {
  margin-bottom: 53px;
}

@media (max-width: 960px) {
  .flexible_intro-text h1:not(:last-child) {
    margin-bottom: 30px;
  }
}

/* BUG-001: theme targets .dl_form-feedback (wrong); markup is .dl_form--feedback.
   On success fields fade to opacity .05 — overlay must cover them. */
.dl_form.success .dl_form--feedback {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}

.dl_form.success .dl_form--feedback.success,
.dl_form.success .dl_form--feedback.error {
  visibility: visible;
  opacity: 1;
}

.dl_form.success .dl_form--feedback a {
  pointer-events: auto;
  color: #fff;
  text-decoration: underline;
}

/* Contact form already uses the correct BEM selector in theme CSS;
   reinforce so success copy stays readable over faded fields. */
.contact-form.success .contact_form--feedback {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  visibility: visible;
  opacity: 1;
  pointer-events: none;
}

/* BUG-008: when a row is open, hide the toggle so plan/price/contact buttons
   receive taps. Desktop caps toggle height; mobile uses dense-table row rules below. */
@media (min-width: 961px) {
  #building .flats__list-toggle,
  #search .flats__list-toggle {
    max-height: 56px !important;
    height: 56px !important;
  }
}

#building .flats__list_flat.open > .flats__list-toggle,
#search .flats__list_flat.open > .flats__list-toggle {
  display: none !important;
  pointer-events: none !important;
  max-height: 0 !important;
  height: 0 !important;
}

#building .flat-item-btns,
#search .flat-item-btns {
  position: relative;
  z-index: 40;
}

#building .flat-item-btns .dl_btn--toggle,
#building .flat-item-btns .contact_btn--toggle,
#search .flat-item-btns .dl_btn--toggle,
#search .flat-item-btns .contact_btn--toggle {
  position: relative;
  z-index: 41;
  pointer-events: auto !important;
}

/* BUG-009: custom checkboxes must receive pointer hits */
.dl_form--input__checkbox,
.contact_form--input__checkbox {
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 2;
  flex-shrink: 0;
}

.dl_form--field-type-checkbox,
.contact_form--field-type-checkbox {
  position: relative;
  z-index: 5;
  align-items: flex-start;
}

.dl_form--field-type-checkbox .dl_form--label,
.contact_form--field-type-checkbox .contact_form--label {
  pointer-events: auto;
  cursor: pointer;
}

/* Privacy link stays clickable without swallowing the whole label */
.dl_form--field-type-checkbox .dl_form--label a,
.contact_form--field-type-checkbox .contact_form--label a {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* Contact form: typology multi-select + message counter */
.contact_form--field-typologies {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Theme reset sets legend{color:#000}; force light text on the teal panel. */
#contact_form .contact_form--typologies-legend,
#contact_form legend.contact_form--label {
  color: #fff;
  font-size: 0.95rem;
  margin: 0;
  padding: 0;
}

.contact_form--typologies-legend {
  font-size: 0.95rem;
  margin: 0;
  padding: 0;
}

#contact_form .contact_form--char-counter {
  color: rgba(255, 255, 255, 0.85);
}

.contact_form--typology-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
}

.contact_form--typology-option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
  line-height: 1.35;
}

.contact_form--typology-option .contact_form--input__checkbox {
  margin-top: 0.15rem;
}

.contact_form--char-counter {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  opacity: 0.75;
  text-align: right;
}

.contact_form--char-counter.is-limit {
  opacity: 1;
}

@media (max-width: 520px) {
  .contact_form--typology-options {
    grid-template-columns: 1fr;
  }
}

/* Close button: theme pins it to the left edge (left:-25px, sticky mid-height),
   which both covers the consent checkbox and hides the X after success.
   Desktop: sit it top-right inside the teal panel. Tablet/mobile keep the
   theme's top bar (max-width: 960px). */
@media (min-width: 961px) {
  .dl_form--btn_close-wrapper,
  .contact_form--btn_close-wrapper {
    top: 28px;
    right: 28px;
    left: auto;
    height: 50px;
    width: 50px;
    z-index: 60;
  }

  .dl_form--btn_close,
  .contact_form--btn_close {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 60;
  }
}

.dl_form--wrapper:has(form.success) .dl_form--btn_close,
.contact_form--wrapper:has(form.success) .contact_form--btn_close {
  background-color: #b6cdce;
}

/* Mobile hero + safe areas: theme pulls intro text up (top:-50px, 120px pad)
   and keeps a sticky scroll disc that floats over page content when scrolled.
   Touch users do not need the chevron; hide it and respect iPhone safe areas. */
@media (max-width: 960px) {
  .flexible_intro-text {
    position: relative;
    z-index: 20;
    top: 0 !important;
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: none;
  }

  .flexible_intro-text h1 {
    letter-spacing: 2px;
  }

  .flexible_intro-text .button {
    position: relative;
    z-index: 21;
  }

  .flexible_intro-scroll_wrapper {
    display: none !important;
  }

  button.dl_btn.dl_btn--toggle:not(.dl_form--overlay):not(.dl_form--btn_close) {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
  }

  .fp--wrapper_1 > .center_wrapper,
  .fp--wrapper_1 > .cw__p {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }

  .fp--block_text_1 .flexible__text-wrapper {
    padding-top: 24px !important;
    padding-right: 0;
    padding-left: 0;
  }

  #page_wrapper {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 500px) {
  .flexible_intro-text {
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  }

  .flexible_intro-text h1:not(:last-child) {
    margin-bottom: 20px;
  }

  .fp--block_text_1 .flexible__text-wrapper h2 {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.15;
  }
}

/* BUG-010: clearer separation between desktop nav labels */
@media (min-width: 961px) {
  body:not(.home) .main_menu--item-link,
  .menu-sticky .main_menu--item-link {
    font-size: 13px;
    letter-spacing: 0.6px;
    padding: 0 clamp(8px, calc((100vw - 1000px) / 18), 18px) !important;
  }
}

/* BUG-003 helper: visually hidden but available to AT / outline */
.eveil-page-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Mobile: cookie bar (#cookies z-index:93) covered the fixed menu FAB
 * (.menu_mobile_btn z-index:20) and download FAB at bottom-right, so the
 * site looked like it had no mobile nav. Keep FABs above the bar and leave
 * room in the banner so labels stay readable.
 */
@media (max-width: 960px) {
  .menu_mobile_btn {
    z-index: 100 !important;
  }

  /* Theme fixed download FAB (not form/building toggles) sits under the cookie bar */
  button.dl_btn.dl_btn--toggle:not(.dl_form--overlay):not(.dl_form--btn_close) {
    z-index: 100 !important;
  }

  #cookies {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #cookies .cookies-inner {
    padding-right: 72px;
    box-sizing: border-box;
  }

  #cookies .cookies-btns {
    padding-right: 8px;
  }
}

/* Home icons: theme stacks them vertically with huge gaps under 500px */
@media (max-width: 500px) {
  .fp--wrapper_1 > .center_wrapper,
  .fp--wrapper_1 > .cw__p {
    padding-bottom: 80px !important;
  }

  .fp--wrapper_1 .flexible__icons {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    padding-top: 0;
    padding-bottom: 0;
  }

  .fp--wrapper_1 .flexible__icons-icon-wrapper {
    margin: 0 8px !important;
    max-width: none;
  }

  .fp--wrapper_1 .flexible__icons-text {
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 14px;
  }
}

/*
 * Mobile layout + interaction fixes (2026-08-26).
 * Forms above cookie bar; full-width layout; visible top nav bar.
 */
@media (max-width: 960px) {
  html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  body.eveil-has-mobile-topbar {
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
  }

  .eveil-mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    padding-left: 16px;
    padding-right: 72px;
    background-color: #375557;
    z-index: 100;
    box-sizing: border-box;
    pointer-events: none;
  }

  .eveil-mobile-topbar .eveil-mobile-topbar__logo {
    display: flex;
    align-items: center;
    max-width: 100%;
    pointer-events: auto;
  }

  .eveil-mobile-topbar .eveil-mobile-topbar__logo svg,
  .eveil-mobile-topbar .eveil-mobile-topbar__logo .icon {
    width: auto;
    height: 28px;
    display: block;
    filter: brightness(0) invert(1);
  }

  .eveil-mobile-topbar .eveil-mobile-topbar__logo a {
    display: block;
    line-height: 0;
  }

  /* Keep DOM node in place for theme JS; pin the hamburger to the top bar. */
  .menu_mobile_btn {
    position: fixed !important;
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto !important;
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    z-index: 101 !important;
  }

  #page_wrapper,
  .page_container,
  .page_content,
  .flexible_intro,
  .fp--wrapper_1 {
    width: 100%;
    max-width: 100%;
  }

  #dl_form.open,
  #contact_form.open {
    z-index: 110 !important;
  }

  body:has(#dl_form.open) #cookies,
  body:has(#contact_form.open) #cookies,
  body:has(#dl_form.open) #infos_message,
  body:has(#contact_form.open) #infos_message,
  body.eveil-form-open #cookies,
  body.eveil-form-open #infos_message {
    display: none !important;
  }

  .dl_form--wrapper,
  .contact_form--wrapper {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .fp--block_text_1 .center_wrapper,
  .fp--block_text_1 .cw__p {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }
}

@media (max-width: 500px) {
  /*
   * Theme fixes intro at 380px with image height:100%. Do NOT use height:auto —
   * that collapses the hero to 0 because the text wrapper is absolute.
   * Taller fixed height keeps headline + CTA + image visible together.
   */
  .flexible_intro {
    height: 500px !important;
  }

  .flexible_intro-text {
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 12px !important;
  }

  .flexible_intro-text .button {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 4px;
  }
}

/* Expanded flat rows: keep action buttons reachable on narrow screens. */
@media (max-width: 960px) {
  #building .flats__list_flat.open .flat-item-btns,
  #search .flats__list_flat.open .flat-item-btns {
    position: relative;
    z-index: 45;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  #building .flats__list_flat.open .flats__item_content_wrapper,
  #search .flats__list_flat.open .flats__item_content_wrapper {
    overflow: visible;
  }

  #building .flats__list_flat.open .flats__item_content,
  #search .flats__list_flat.open .flats__item_content {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }

  /* Cookie bar covers action buttons at the bottom of an open row. */
  body:has(#building .flats__list_flat.open) #cookies,
  body:has(#search .flats__list_flat.open) #cookies,
  body:has(#building .flats__list_flat.open) #infos_message,
  body:has(#search .flats__list_flat.open) #infos_message,
  body.eveil-flat-open #cookies,
  body.eveil-flat-open #infos_message {
    display: none !important;
  }
}

/*
 * Mobile dense table (2026-08-26): theme stacks 9 label/value pairs per lot
 * (~560px cards). Match laptop browsing with a horizontally scrollable table.
 */
@media (max-width: 960px) {
  #building .flats__list,
  #search .flats__list {
    overflow-x: visible;
  }

  #building .flats__list_header,
  #search .flats__list_header {
    display: flex !important;
    position: sticky;
    top: calc(56px + env(safe-area-inset-top, 0px));
    z-index: 12;
    height: 44px;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Let taps pass through to rows beneath; horizontal scroll syncs from container. */
    pointer-events: none;
  }

  #building .flats__list_header::-webkit-scrollbar,
  #search .flats__list_header::-webkit-scrollbar {
    display: none;
  }

  #building .flats__list_header .flats__list_table,
  #search .flats__list_header .flats__list_table {
    min-width: 640px;
  }

  #building .flats__list_header .flats__list_item,
  #search .flats__list_header .flats__list_item {
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.4px;
    padding: 4px 2px 0;
    text-transform: uppercase;
  }

  #building .flats__list_container,
  #search .flats__list_container {
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  #building .flats__list_header .flats__list_table,
  #search .flats__list_header .flats__list_table,
  #building .flats__list_flat .flats__list_table,
  #search .flats__list_flat .flats__list_table {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    width: 100%;
    min-width: 640px;
    height: 44px !important;
    padding: 0 8px !important;
    margin: 0;
    box-sizing: border-box;
  }

  #building .flats__list_flat,
  #search .flats__list_flat {
    margin-bottom: 0 !important;
    min-width: 640px;
  }

  #building .flats__list_flat:nth-child(odd),
  #search .flats__list_flat:nth-child(odd),
  #building .flats__list_flat:nth-child(even),
  #search .flats__list_flat:nth-child(even) {
    background-color: transparent;
  }

  #building .flats__list_flat:not(.open),
  #search .flats__list_flat:not(.open) {
    position: relative;
    height: 44px;
    overflow: hidden;
    border-bottom: 1px solid rgba(157, 179, 180, 0.55);
  }

  #building .flats__list_flat:not(.open) > .flats__list-toggle,
  #search .flats__list_flat:not(.open) > .flats__list-toggle {
    max-height: 44px !important;
    height: 44px !important;
  }

  #building .flats__list_flat:not(.open):hover .flats__list_table,
  #search .flats__list_flat:not(.open):hover .flats__list_table,
  #building .flats__list-toggle:hover + .flats__list_table,
  #search .flats__list-toggle:hover + .flats__list_table {
    background-color: #fff;
  }

  #building .flats__list_flat .flats__list_item,
  #search .flats__list_flat .flats__list_item {
    display: block !important;
    flex: 1 1 0;
    min-width: 0;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    padding: 2px 4px;
    text-align: center;
    border-bottom: none !important;
    max-width: none !important;
    justify-content: center !important;
  }

  #building .flats__list_flat .flats__list_item_label,
  #search .flats__list_flat .flats__list_item_label {
    display: none !important;
  }

  #building .flats__list_flat .flats__list_item_value,
  #search .flats__list_flat .flats__list_item_value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Prix column slightly wider */
  #building .flats__list_flat .flats__list_item:nth-child(8),
  #search .flats__list_flat .flats__list_item:nth-child(8),
  #building .flats__list_header .flats__list_item:nth-child(8),
  #search .flats__list_header .flats__list_item:nth-child(8) {
    flex: 1.3 1 0;
  }

  #building .flats__list_flat .flats__item_plus,
  #search .flats__list_flat .flats__item_plus {
    display: none !important;
  }

  #building .buildings__flats,
  #building .flats__list,
  #search .buildings__flats,
  #search .flats__list {
    padding-bottom: 48px;
  }
}

/*
 * Mobile typography, CTA, and map layout (2026-08-26).
 * Fixes misaligned section titles, pill button shape/position, and map gap.
 */
@media (max-width: 960px) {
  /* CTAs: theme margin-left:-5px shifts pills; allow wrap on long labels. */
  .rich_text .button,
  .rich_text a.button {
    margin-left: 0 !important;
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    padding: 12px 28px;
    vertical-align: top;
  }

  .flexible_intro-text {
    width: 100% !important;
    max-width: none !important;
  }

  .flexible_intro-text h1 {
    line-height: 1.08;
  }

  /* Home: icons + h2 share the same left edge (theme centers icons, left-aligns h2). */
  .fp--wrapper_1 > .center_wrapper,
  .fp--wrapper_1 > .cw__p {
    align-items: stretch !important;
  }

  .fp--wrapper_1 .flexible__icons {
    justify-content: space-between !important;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .fp--block_text_1 .flexible__text-wrapper {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left;
  }

  .fp--block_text_1 .flexible__text-wrapper h2 {
    text-align: left;
  }

  .fp--block_text_1 .flexible__text-wrapper h2:after {
    left: 0;
  }

  /* Decorative shape bleeds through icons/titles on narrow screens. */
  .fp--container_2:before {
    display: none !important;
  }

  .fp--block_text_2 {
    margin-top: 48px !important;
  }

  /* Theme pulls slider up (-100px) through the sustainability CTA block. */
  .fp--wrapper_2 .flexible__slider_simple {
    margin-top: 0 !important;
  }

  .fp--block_text_1 {
    position: relative;
    z-index: 15;
    padding-bottom: 24px;
  }

  /* Localisation big titles: center under hero like desktop mobile intent. */
  .loc--block_text_1 .flexible__text-wrapper,
  .loc--block_text_2 .flexible__text-wrapper {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .loc--block_text_1 .txt_big {
    line-height: 1.25;
    letter-spacing: 1px;
  }

  .loc--block_text_2 .rich_text h2:after {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Map: drop sticky aspect-ratio hack that leaves white gap above footer. */
  .flexible__map-images-wrapper {
    flex: none !important;
    width: 100%;
    overflow: hidden;
  }

  .flexible__map-images-inner {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    padding-bottom: 0 !important;
    aspect-ratio: 100 / 138.16;
    width: 100%;
  }

  .flexible__map-image,
  .flexible__map-ui {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .loc--wrapper_2 {
    padding-bottom: 0;
  }

  .flexible__map-content {
    padding-top: 48px !important;
    padding-bottom: 24px !important;
  }

  /* Activity category rows: flex-align icon with title; clear download FAB. */
  .flexible__map-activities_group-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 56px;
    min-height: 30px;
  }

  .flexible__map-activities_group-name {
    line-height: 1.3;
  }

  .flexible__map-activities_group-icon {
    position: static !important;
    margin: 0 !important;
    flex-shrink: 0;
    width: 27px;
    height: 27px;
  }

  .flexible__map-activities {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .flexible__map-activity-time {
    margin-right: 56px !important;
  }
}

@media (max-width: 500px) {
  /* Theme adds padding-bottom:350px here — pushes CTA over the slider. */
  .fp--wrapper_1 > .center_wrapper,
  .fp--wrapper_1 > .cw__p {
    padding-top: 32px !important;
    padding-bottom: 48px !important;
  }

  .fp--wrapper_1 .flexible__icons {
    justify-content: center !important;
    gap: 4px;
    max-width: none;
  }

  .flexible_intro-text h1 {
    font-size: clamp(26px, 7.5vw, 34px);
    line-height: 1.1;
    letter-spacing: 1.5px;
  }

  .flexible_intro-text h1:not(:last-child) {
    margin-bottom: 16px;
  }

  .loc--block_text_1 {
    padding-top: 80px !important;
  }

  .loc--block_text_2 {
    padding-bottom: 64px !important;
  }
}