/*!
 * ImmoCloud — mobile menu + top-header (announcement bar) fixes
 * Loads AFTER the theme's style.css so these rules win.
 * Two concerns:
 *   1) Mobile menu — full-screen opaque overlay, body-scroll lock
 *   2) Top announcement bar — flex alignment, no layout shifts, responsive
 */

/* =========================================================================
   1. MOBILE MENU — full-screen overlay
   The theme's .mobile-menu was showing through the hero because it was
   partially transparent or wrongly positioned. Replace with a solid,
   full-viewport overlay driven by body.adc-mobile-open.
   ========================================================================= */

.mobile-menu {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 999999 !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
  overflow: hidden;
}

/* When the mobile menu is open, keep the header ancestor at a high z-index
   so its .mobile-menu descendant can also be at 999999. We DO NOT hide
   .top-header-item outright — that risked leaving the top bar empty if the
   open-class ever got stuck. The full-screen .mobile-menu + backdrop already
   covers everything visually; hiding is unnecessary. */
body.adc-mobile-open .main-header,
body.adc-mobile-open #header {
  z-index: 999999 !important;
}

body.adc-mobile-open .mobile-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .28s ease, visibility 0s linear 0s;
}

/* Solid opaque backdrop — hero can NO LONGER bleed through */
.mobile-menu .menu-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #0f1830 !important;
  opacity: 1 !important;
  z-index: 1 !important;
  cursor: pointer;
}

/* Menu panel — slides in from left */
.mobile-menu .menu-box {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: min(88vw, 380px) !important;
  max-width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: 24px 22px 32px !important;
  background: #ffffff !important;
  color: #0f1626 !important;
  z-index: 2 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-100%);
  transition: transform .32s cubic-bezier(.22,.68,.28,1);
  box-shadow: 6px 0 32px -8px rgba(15, 22, 38, .35);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.adc-mobile-open .mobile-menu .menu-box { transform: translateX(0); }

/* Menu logo header — clean spacing */
.mobile-menu .menu-box .nav-logo {
  padding-bottom: 16px;
  border-bottom: 1px solid #e9edf4;
  margin-bottom: 4px;
}
.mobile-menu .menu-box .nav-logo img { max-height: 40px; height: auto; width: auto; }

/* Close button — reposition/restyle so it lives INSIDE the menu panel, top-right */
.main-header .close-btn {
  position: fixed !important;
  top: 14px !important;
  right: calc(100vw - min(88vw, 380px) + 14px);
  width: 40px !important;
  height: 40px !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f6f8fb !important;
  color: #0f1626 !important;
  border-radius: 12px !important;
  z-index: 10002 !important;
  cursor: pointer !important;
  border: 1px solid #e9edf4 !important;
  transition: background .18s ease;
}
.main-header .close-btn:hover { background: #e9edf4 !important; }
.main-header .close-btn svg,
.main-header .close-btn i { width: 20px !important; height: 20px !important; font-size: 20px !important; }
body.adc-mobile-open .main-header .close-btn { display: flex !important; }

/* Menu navigation items — readable, touchable */
.mobile-menu .menu-box .navigation,
.mobile-menu .menu-box .menu-outer ul,
.mobile-menu .menu-box .navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mobile-menu .menu-box .navigation > li,
.mobile-menu .menu-box .menu-outer > ul > li {
  display: block !important;
  border-bottom: 1px solid #eff2f8;
}
.mobile-menu .menu-box .navigation > li > a,
.mobile-menu .menu-box .menu-outer a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 4px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #0f1626 !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
}
.mobile-menu .menu-box .navigation > li > a:hover { color: #1e88e5 !important; }

/* ---- Mobile CTAs — two distinct, high-contrast card styles ---- */

/* PRIMARY card (Déposer une annonce / Submit Property) — filled brand gradient */
.mobile-menu .mobile-add-listing-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  background: linear-gradient(135deg, #1e88e5 0%, #114c89 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -10px rgba(30, 136, 229, .55) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.mobile-menu .mobile-add-listing-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(30, 136, 229, .70) !important;
}
.mobile-menu .mobile-add-listing-btn .add-listing-icon-wrapper {
  background: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
}
.mobile-menu .mobile-add-listing-btn .add-listing-title { color: #fff !important; }
.mobile-menu .mobile-add-listing-btn .add-listing-subtitle { color: rgba(255, 255, 255, .8) !important; }
.mobile-menu .mobile-add-listing-btn .add-listing-arrow { color: rgba(255, 255, 255, .85) !important; }

/* SECONDARY card (Se connecter / Sign in / User) — solid dark navy */
.mobile-menu .mobile-signin-btn,
.mobile-menu .mobile-user-btn {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  background: #0f1830 !important;
  border: 1px solid #1a2542 !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: #fff !important;
  transition: background .18s ease, border-color .18s ease;
}
.mobile-menu .mobile-signin-btn:hover,
.mobile-menu .mobile-user-btn:hover {
  background: #141d31 !important;
  border-color: #1e88e5 !important;
}
.mobile-menu .mobile-signin-btn .signin-icon-wrapper,
.mobile-menu .mobile-user-btn .user-avatar-wrapper {
  background: #1e88e5 !important;
  color: #fff !important;
}
.mobile-menu .signin-title,
.mobile-menu .user-name { color: #fff !important; }
.mobile-menu .signin-subtitle,
.mobile-menu .user-subtitle { color: rgba(255, 255, 255, .65) !important; }
.mobile-menu .signin-arrow,
.mobile-menu .user-arrow { color: rgba(255, 255, 255, .5) !important; }

/* Shared icon wrapper sizing (all three variants) */
.mobile-menu .add-listing-icon-wrapper,
.mobile-menu .signin-icon-wrapper,
.mobile-menu .user-avatar-wrapper {
  width: 42px; height: 42px; flex: 0 0 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
}
/* Shared text wrapper */
.mobile-menu .add-listing-text-wrapper,
.mobile-menu .signin-text-wrapper,
.mobile-menu .user-text-wrapper {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.mobile-menu .add-listing-title,
.mobile-menu .signin-title,
.mobile-menu .user-name { font-size: 15px; font-weight: 700; line-height: 1.2; }
.mobile-menu .add-listing-subtitle,
.mobile-menu .signin-subtitle,
.mobile-menu .user-subtitle { font-size: 12.5px; margin-top: 2px; }

.mobile-menu .mobi-icon-box {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 16px !important;
  padding: 16px 0 !important;
  border-top: 1px solid #eff2f8 !important;
  border-bottom: 1px solid #eff2f8 !important;
  margin-top: 4px !important;
}
.mobile-menu .mobi-icon-box .box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  color: #334155 !important;
}
.mobile-menu .mobi-icon-box .box a { color: inherit !important; text-decoration: none !important; }

.mobile-menu .mobile-switchers {
  display: flex !important;
  gap: 12px !important;
  padding-top: 8px !important;
  flex-wrap: wrap !important;
}

/* Body-scroll lock when menu is open — CSS-only, no position:fixed
   (that would break link navigation because the click's default action
   fires against a body with a broken layout). */
body.adc-mobile-open {
  overflow: hidden !important;
}

/* Toggler button — ensure a good tap target */
.main-header .mobile-nav-toggler {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: inherit;
}
.main-header .mobile-nav-toggler svg,
.main-header .mobile-nav-toggler i { width: 24px; height: 24px; font-size: 22px; }

@media (min-width: 992px) {
  /* Desktop — mobile toggler + mobile-menu never visible */
  .main-header .mobile-nav-toggler { display: none !important; }
  .mobile-menu { display: none !important; }
  body.adc-mobile-open { overflow: auto !important; touch-action: auto !important; }
}


/* =========================================================================
   2. TOP ANNOUNCEMENT BAR — desktop alignment + responsive
   Structure:  .top-header
                 .top-header-left
                   .ae-anno-announcement-wrapper
                     .ae-anno-announcement__items
                       .ae-anno-announcement
                         .ae-anno-announcement__content
                           .ae-anno-announcement__text
                           .ae-anno-announcement__button
                     .ae-anno-announcement__dismiss-button (absolute)
                 .top-header-right
                   wishlist / currency / language / login
   ========================================================================= */

/* Top bar: everything (phone + any adjacent content) centered as one row */
.top-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 20px !important;
  padding: 8px 22px !important;
  min-height: 42px !important;
  flex-wrap: wrap !important;
}
.top-header-left,
.top-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

/* --- The injected .adc-demo-banner (from adcloudit-immo.js) sits at the very
   top of <body>. Style it as a centered flexbox row. --- */
body > .adc-demo-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 10px 22px !important;
  min-height: 42px !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  text-align: center !important;
  flex-wrap: wrap !important;
}
body > .adc-demo-banner span { flex: 0 1 auto !important; }
body > .adc-demo-banner strong { color: #ffffff !important; font-weight: 700; }
body > .adc-demo-banner .adc-demo-banner__close {
  border: 1px solid rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: #fff !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background .18s ease;
}
body > .adc-demo-banner .adc-demo-banner__close:hover { background: rgba(255,255,255,.15) !important; }

/* --- Hide the email item (2nd .top-header-item on the left) ---
   Also covers :has(mailto) for future re-ordering safety. */
.top-header-left .top-header-item:nth-child(2),
.top-header-left .top-header-item:has(a[href^="mailto:"]) {
  display: none !important;
}

/* --- Phone number + icon → pure white for legibility on dark top bar --- */
.top-header-left .top-header-item,
.top-header-left .top-header-item a,
.top-header-left .top-header-item a:hover,
.top-header-left .top-header-item a:visited {
  color: #ffffff !important;
}
.top-header-left .top-header-item svg,
.top-header-left .top-header-item .icon {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
.top-header-left .top-header-item a { font-weight: 600; letter-spacing: .01em; }

/* --- Right side (Wishlist / Login / Register) — soft white for readability --- */
.top-header-right,
.top-header-right a,
.top-header-right a:hover,
.top-header-right a:visited,
.top-header-right .register,
.top-header-right .register ul,
.top-header-right .register li,
.top-header-right .my-wishlist-link {
  color: rgba(255, 255, 255, .85) !important;
}
.top-header-right a:hover { color: #ffffff !important; }
.top-header-right .register ul { list-style: none; margin: 0; padding: 0; gap: 6px; }

/* Reset the announcement wrapper — no more padding-inline-end trick,
   let the dismiss button live inline instead of absolute */
.top-header .ae-anno-announcement-wrapper {
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}
.top-header .ae-anno-announcement-wrapper.ae-anno-announcement--dismissible {
  padding-inline-end: 0 !important;
}
.top-header .ae-anno-announcement__items {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}
.top-header .ae-anno-announcement {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  animation: none !important;
}
.top-header .ae-anno-announcement__content {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}
.top-header .ae-anno-announcement__text {
  margin: 0 !important;
  line-height: 1.4 !important;
  font-size: 13.5px !important;
  color: inherit !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.top-header .ae-anno-announcement__text a { color: inherit !important; }

/* --- Modernized demo CTA button (announcement CTA) --- */
.top-header .ae-anno-announcement__button {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  background: linear-gradient(135deg, #1e88e5 0%, #2fa8e0 55%, #13b6a6 100%) !important;
  background-size: 200% 100% !important;
  background-position: 0% 50% !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 18px -6px rgba(30, 136, 229, .55),
              inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  transition: background-position .35s ease, transform .18s ease, box-shadow .18s ease;
  flex: 0 0 auto;
  overflow: hidden;
}
.top-header .ae-anno-announcement__button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.top-header .ae-anno-announcement__button:hover {
  background-position: 100% 50% !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(30, 136, 229, .70),
              inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
.top-header .ae-anno-announcement__button:hover::after { transform: translateX(120%); }
.top-header .ae-anno-announcement__button:active { transform: translateY(0); }

/* Dismiss button — move from absolute to inline, size properly */
.top-header .ae-anno-announcement__dismiss-button {
  position: static !important;
  inset-inline-end: auto !important;
  inset-block-start: auto !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, .08) !important;
  color: inherit !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: background .18s ease;
  flex: 0 0 auto;
}
.top-header .ae-anno-announcement__dismiss-button:hover { background: rgba(255, 255, 255, .16) !important; }
.top-header .ae-anno-announcement__dismiss-button-icon {
  width: 16px !important;
  height: 16px !important;
}

/* Small screens — hide the dismiss + button-cta so the text fits */
@media (max-width: 768px) {
  .top-header {
    padding: 6px 14px !important;
    gap: 8px !important;
    min-height: 38px !important;
  }
  .top-header .ae-anno-announcement__text {
    font-size: 12.5px !important;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .top-header .ae-anno-announcement__button {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .top-header .ae-anno-announcement__button { display: none !important; }
}


/* =========================================================================
   3. RELOCATED "Réserver ma démo" BUTTON
   adcloudit-menu-fix.js moves the injected .adc-top-demo-link out of the
   top-header-right and into .header-account (next to "Déposer une annonce").
   Style it here so it looks like a proper primary CTA inline in the header.
   ========================================================================= */

/* Hide the button when it's still in the OLD location (top-header-right).
   This prevents a flash before the JS relocation runs. */
.top-header-right .adc-top-demo-link { display: none !important; }

/* Style it as a solid primary CTA once relocated to the header account area */
.header-account .adc-top-demo-link,
.flat-bt-top .adc-top-demo-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  margin-right: 12px !important;
  background: linear-gradient(135deg, #1e88e5 0%, #2fa8e0 55%, #13b6a6 100%) !important;
  background-size: 200% 100% !important;
  background-position: 0% 50% !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 18px -6px rgba(30, 136, 229, .55),
              inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  transition: background-position .35s ease, transform .18s ease, box-shadow .18s ease;
  vertical-align: middle;
}
.header-account .adc-top-demo-link:hover,
.flat-bt-top .adc-top-demo-link:hover {
  background-position: 100% 50% !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(30, 136, 229, .70),
              inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  color: #ffffff !important;
}

/* Container for the two buttons (demo + submit property) — align them right.
   IMPORTANT: do NOT set display:flex on .header-account itself — the theme
   relies on it being a normal block inside .inner-container's flex row. */
.header-account .flat-bt-top {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  vertical-align: middle;
}

/* On mobile (< 992px), .header-account is usually hidden. Keep the relocated
   demo button visible by putting it inline in the header wrap. Actually we
   just let the theme hide it as normal. */
@media (max-width: 991px) {
  .header-account .adc-top-demo-link,
  .flat-bt-top .adc-top-demo-link {
    display: none !important; /* hamburger takes over on mobile */
  }
}


/* =========================================================================
   4. CONTACT PAGE — phone field (intl-tel-input) fix
   The theme's contact form wraps the phone <input> in .iti (from
   international telephone input plugin). The default plugin styles need
   help so the flag dropdown + dial code sit nicely inside our rounded input.
   ========================================================================= */
.adc-form-shell .iti,
.contact-page .iti {
  position: relative !important;
  width: 100% !important;
  display: block !important;
}
.adc-form-shell .iti__flag-container,
.contact-page .iti__flag-container {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  padding: 0 !important;
  z-index: 2;
  height: 100% !important;
  display: flex;
  align-items: center;
}
.adc-form-shell .iti__selected-flag,
.contact-page .iti__selected-flag {
  position: relative !important;
  height: 100% !important;
  min-width: 68px !important;
  padding: 0 10px 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #f6f8fb !important;
  border-radius: 11px 0 0 11px !important;
  border-right: 1px solid #e9edf4 !important;
  cursor: pointer;
}
.adc-form-shell .iti__flag,
.contact-page .iti__flag { flex: 0 0 auto; }
.adc-form-shell .iti__selected-dial-code,
.contact-page .iti__selected-dial-code {
  font-size: 14px !important;
  color: #0f1626 !important;
  font-weight: 500 !important;
  padding-left: 4px !important;
}
.adc-form-shell .iti__arrow,
.contact-page .iti__arrow {
  border-top-color: #94a3b8 !important;
  margin-left: 4px !important;
}
.adc-form-shell .iti input[type="tel"],
.adc-form-shell .iti .form-control,
.contact-page .iti input[type="tel"],
.contact-page .iti .form-control {
  padding-left: 82px !important;   /* room for flag + dial code */
  width: 100% !important;
}
/* Country list dropdown polish */
.adc-form-shell .iti__country-list,
.contact-page .iti__country-list {
  border-radius: 12px !important;
  box-shadow: 0 20px 40px -10px rgba(15, 22, 38, .18) !important;
  border: 1px solid #e9edf4 !important;
  max-height: 260px !important;
}


/* =========================================================================
   5. FOOTER polish
   a) Add breathing room around the logo + between social row
   b) Style the newsletter submit button to match the brand CTAs
   ========================================================================= */

/* Logo spacing — center + top/bottom padding */
.footer .top-footer { padding: 28px 0 20px !important; }
.footer .content-footer-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.footer .footer-logo {
  padding: 4px 0 !important;
  margin: 0 !important;
}
.footer .footer-logo img {
  max-height: 44px !important;
  height: auto !important;
  width: auto !important;
  filter: brightness(1) contrast(1);
  padding: 4px 12px 4px 0 !important;
}
.footer .content-footer-top .wd-social { flex: 0 0 auto; }

/* Newsletter subscribe button — currently empty class + only icon */
.footer .subscribe-form {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.footer .subscribe-form .mb-3 {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
}
.footer .subscribe-form .icon-left {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2;
  color: rgba(255, 255, 255, .55);
  pointer-events: none;
  font-size: 16px;
}
.footer .subscribe-form input[type="email"] {
  flex: 1 1 auto !important;
  padding: 12px 14px 12px 40px !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-right: none !important;
  border-radius: 12px 0 0 12px !important;
  color: #fff !important;
  font-size: 14px !important;
  min-height: 46px !important;
  outline: none !important;
}
.footer .subscribe-form input[type="email"]::placeholder { color: rgba(255, 255, 255, .55) !important; }
.footer .subscribe-form input[type="email"]:focus {
  border-color: #1e88e5 !important;
  background: rgba(255, 255, 255, .1) !important;
  box-shadow: none !important;
}

.footer .subscribe-form button[type="submit"] {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 20px !important;
  min-width: 52px;
  min-height: 46px;
  background: linear-gradient(135deg, #1e88e5 0%, #2fa8e0 55%, #13b6a6 100%) !important;
  background-size: 200% 100% !important;
  background-position: 0% 50% !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 12px 12px 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  transition: background-position .35s ease, transform .18s ease;
}
.footer .subscribe-form button[type="submit"]:hover {
  background-position: 100% 50% !important;
  transform: translateY(-1px);
}
.footer .subscribe-form button[type="submit"] i,
.footer .subscribe-form button[type="submit"] .icon-send {
  font-size: 16px !important;
  line-height: 1 !important;
  color: #fff !important;
}

/* Inner footer breathing room */
.footer .inner-footer { padding: 40px 0 32px !important; }


/* =========================================================================
   6. CONTACT FORM — "conditions générales" checkbox
   The theme's .form-check-input.style-1 uses a custom appearance that left
   the checkbox invisible / unclickable, so the required field never validated
   ("il manque un champ obligatoire"). Force a real, clickable native checkbox.
   ========================================================================= */
.contact-page .form-check,
.adc-form-shell .form-check,
.contact-form .form-check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  cursor: pointer !important;
  position: relative !important;
  margin: 4px 0 6px !important;
}
.contact-page .form-check-input,
.adc-form-shell .form-check-input,
.contact-form .form-check-input,
.contact-page input[type="checkbox"],
.adc-form-shell input[type="checkbox"],
.contact-form input[type="checkbox"] {
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: auto !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 1px 0 0 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  clip: auto !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  background-image: none !important;
  box-shadow: none !important;
  accent-color: #1e88e5 !important;
}
.contact-page .form-check-label,
.adc-form-shell .form-check-label,
.contact-form .form-check-label {
  cursor: pointer !important;
  pointer-events: auto !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: var(--text, #334155) !important;
  user-select: none;
}
.contact-page .form-check-label a,
.adc-form-shell .form-check-label a { color: #1e88e5 !important; text-decoration: underline; }


/* =========================================================================
   7. CONTACT FORM — layout repair
   The redesign's grid explicitly places name/email/phone/collaborators but
   NEVER places the required message field (a plain .contact-form-group),
   so it auto-flowed off-view → "il manque un champ obligatoire".
   Force message full-width + correct field order, fix phone padding.
   ========================================================================= */

/* Message (content) textarea — full width, its own row, visible */
.contact-page .adc-form-shell .contact-form-group:has(textarea[name="content"]) {
  grid-column: 1 / -1 !important;
  order: 10 !important;
  display: block !important;
  visibility: visible !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  margin: 4px 0 0 !important;
}
.contact-page .adc-form-shell textarea[name="content"] {
  display: block !important;
  width: 100% !important;
  min-height: 120px !important;
  visibility: visible !important;
  opacity: 1 !important;
  resize: vertical;
}

/* Checkbox (conditions générales) — full width, after message */
.contact-page .adc-form-shell .contact-form-group:has(input[name="agree_terms_and_policy"]) {
  grid-column: 1 / -1 !important;
  order: 11 !important;
}

/* Submit button — full width, last */
.contact-page .adc-form-shell .contact-form-group:has(button[type="submit"]),
.contact-page .adc-form-shell .contact-form-group:has(input[type="submit"]),
.contact-page .adc-form-shell button[type="submit"] {
  grid-column: 1 / -1 !important;
  order: 12 !important;
}

/* Phone (intl-tel-input) — fix the clipped number. Standard padding that clears
   the flag + "+33" dial code + arrow, and give the input room. */
.contact-page .adc-form-shell .iti { width: 100% !important; }
.contact-page .adc-form-shell .iti input,
.contact-page .adc-form-shell .iti .form-control,
.contact-page .adc-form-shell input[name="phone_display"] {
  padding-left: 78px !important;
  min-height: 48px !important;
  text-overflow: ellipsis;
}
.contact-page .adc-form-shell .iti__selected-flag {
  padding: 0 8px 0 12px !important;
  border-radius: 11px 0 0 11px !important;
}

/* Remove any stray gradient accent line at the top of the form card */
.contact-page .adc-form-card::before { display: none !important; content: none !important; }
.contact-page .adc-form-card {
  border-top: 1px solid var(--border, #e9edf4) !important;
  background: #fff !important;
}


/* =========================================================================
   8. MOBILE AUDIT FIXES
   ========================================================================= */

/* 8a. Badge "+216% sur l'année" overlapping the "Leads captés & qualifiés"
   title in the Données & performance card — wrap + push the badge below. */
@media (max-width: 768px) {
  .adc-page .adc-card-head {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 6px 10px !important;
  }
  .adc-page .adc-card-badge {
    position: static !important;
    margin: 2px 0 0 !important;
    align-self: flex-start !important;
    white-space: nowrap;
  }
}

/* 8b. Mobile menu — put the real navigation links FIRST, promo card after. */
.mobile-menu .bottom-canvas {
  display: flex !important;
  flex-direction: column !important;
}
.mobile-menu .menu-outer            { order: 1 !important; margin-top: 4px !important; }
.mobile-menu .mobile-add-listing-wrapper { order: 2 !important; margin-top: 14px !important; }
.mobile-menu .mobile-signin-wrapper,
.mobile-menu .mobile-user-wrapper   { order: 3 !important; }
.mobile-menu .mobi-icon-box         { order: 4 !important; }
.mobile-menu .mobile-switchers      { order: 5 !important; }

/* 8c. Top info bar — on mobile keep only the phone; hide the rest so nothing
   is truncated. (Injected banner / right-side items collapse.) */
@media (max-width: 640px) {
  .top-header { flex-wrap: nowrap !important; padding: 6px 14px !important; }
  .top-header-right { display: none !important; }
  .top-header-left { justify-content: center !important; width: 100%; }
  .top-header-left .top-header-item a { font-size: 13px !important; }
  /* The JS-injected "Logiciel SaaS · CRM…" banner text — clamp to 1 line */
  body > .adc-demo-banner span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* 8d. Burger toggler — visible focus ring + larger tap target for a11y */
.main-header .mobile-nav-toggler {
  border-radius: 10px;
}
.main-header .mobile-nav-toggler:focus-visible {
  outline: 2px solid #1e88e5 !important;
  outline-offset: 2px;
}

/* 8e. Properties / Projects — reveal the page title (was display:none / d-none)
   and let it sit ABOVE the map on mobile. */
.flat-property h1.d-none,
.flat-recommended-v2 h1.d-none,
.page-title-heading h1.d-none,
h1.d-none.adc-force-show {
  display: block !important;
}

/* 8f. Visible page title for Properties / Projects listings */
.adc-listing-title {
  display: block !important;
  font-family: "Plus Jakarta Sans", -apple-system, sans-serif;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #0f1626;
  margin: 18px 0 6px;
  padding: 0 4px;
}
@media (max-width: 768px) {
  .adc-listing-title { font-size: 22px; margin: 14px 0 4px; text-align: left; }
}


/* =========================================================================
   9. MOBILE — definitive top-bar + menu-overlay fixes (v12)
   ========================================================================= */

/* 9a. Top bar on phones: show ONLY the phone, on a single centered line.
   Higher specificity (body .top-header …) so it beats any equal-specificity
   or JS-injected display:flex. */
@media (max-width: 767px) {
  body .top-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    min-height: 38px !important;
    overflow: hidden !important;
  }
  body .top-header .top-header-right { display: none !important; }
  body .top-header .top-header-left {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  /* keep only the first item (phone), drop any injected email/tagline/demo link */
  body .top-header .top-header-left .top-header-item ~ .top-header-item,
  body .top-header .top-header-left a[href^="mailto:"],
  body .top-header .top-header-left .adc-top-demo-link { display: none !important; }
  body .top-header .top-header-left .top-header-item,
  body .top-header .top-header-left .top-header-item a {
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }
  /* the JS-injected demo banner strip (Logiciel SaaS · …) — clamp to 1 line */
  body > .adc-demo-banner {
    flex-wrap: nowrap !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  body > .adc-demo-banner span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
}

/* 9b. Menu overlay must never move with the sticky-header transform.
   (Backup to the JS reparent — the header can't drag the menu if it has no
   transform while the menu is open.) */
body.adc-mobile-open .main-header,
body.adc-mobile-open #header,
body.adc-mobile-open .header-lower,
body.adc-mobile-open .fixed-header {
  transform: none !important;
  transition: none !important;
}

/* 9c. Hard scroll-lock (paired with the JS lock) */
html.adc-noscroll, body.adc-mobile-open {
  overflow: hidden !important;
  touch-action: none;
}

/* 9d. The "Logiciel SaaS · CRM immobilier · France · Démo gratuite sous 2 h"
   tagline is a ::after pseudo on .top-header-left — hide it on phones so only
   the phone number remains (it was wrapping to 2 lines). */
@media (max-width: 767px) {
  body .top-header .top-header-left::after,
  body .top-header .top-header-left::before {
    content: none !important;
    display: none !important;
  }
}