:root {
    --white:  #FFFFFF;
    --paper:  #F4F5F7;
    --warm:   #F8F7F4;
    --line:   #E3E5E9;
    --black:  #0B0B0D;
    --ink:    #16171A;
    --grey:   #8A8F98;
    --grey-d: #5A5F68;
    --navy:   #0F2A4A;
    --navy-d: #0A1E36;
    --orange: #E8641E;
    --orange-d: #C9520F;
    /* legacy aliases kept so existing rules resolve to the new palette */
    --blue:   #0F2A4A;
    --blue-d: #0A1E36;

    --serif: "Cormorant Garamond", Georgia, serif;
    --sans:  "Inter", system-ui, sans-serif;

    --maxw: 1240px;
    --gutter: clamp(1.25rem, 5vw, 4.5rem);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; line-height: 1.02; letter-spacing: -0.01em; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

  .eyebrow {
    font-family: var(--sans);
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--orange);
    display: inline-flex; align-items: center; gap: 0.7rem;
  }
  .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--orange); }

  /* ---------- Nav ---------- */
  header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, background 0.3s ease;
  }
  header.scrolled { border-color: var(--line); }
  .nav { display: flex; align-items: center; justify-content: space-between; height: 82px; }
  .brand-wrap { display: flex; align-items: center; gap: 1rem; }
  .brand { display: flex; flex-direction: column; line-height: 1; }
  .brand .name { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: 0; }
  .brand .role { font-family: var(--sans); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--grey); margin-top: 5px; }
  .brand-logo { height: 30px; width: auto; padding-left: 1rem; border-left: 1px solid var(--line); }
  @media (max-width: 900px) { .brand-logo { display: none; } }
  .nav-links { display: flex; gap: 2.4rem; align-items: center; }
  .nav-links a { font-size: 0.86rem; font-weight: 500; color: var(--ink); position: relative; }
  .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: var(--blue); transition: width 0.3s ease; }
  .nav-links a:hover::after { width: 100%; }
  .nav-links a.nav-cta { display: flex; flex-direction: column; align-items: center; line-height: 1.15; font-size: 0.9rem; font-weight: 700; background: var(--navy); color: #fff; padding: 0.6rem 1.4rem; border-radius: 2px; box-shadow: 0 6px 18px -6px rgba(15,42,74,0.55); transition: background 0.25s ease, box-shadow 0.25s ease; }
  .nav-links a.nav-cta:hover { background: var(--navy-d); color: #fff; box-shadow: 0 8px 22px -6px rgba(15,42,74,0.7); }
  .nav-cta .cta-sub { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-top: 2px; }
  .nav-cta-alt { background: transparent; color: var(--navy); border: 1px solid var(--navy); box-shadow: none; }
  .nav-cta-alt:hover { background: var(--navy); color: #fff; box-shadow: 0 8px 22px -6px rgba(15,42,74,0.5); }
  .nav-cta::after { display: none; }
  /* ---------- Nav dropdown (Outils) ---------- */
  .has-drop { position: relative; display: flex; align-items: center; }
  .has-drop .drop-toggle { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; font-size: 0.86rem; font-weight: 500; color: var(--ink); user-select: none; }
  .has-drop .drop-toggle:focus { outline: none; }
  .has-drop:hover .drop-toggle { color: var(--navy); }
  .has-drop .caret { font-size: 0.7rem; transition: transform 0.25s ease; color: var(--grey); }
  .has-drop:hover .caret { transform: rotate(180deg); color: var(--navy); }
  .drop-menu {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
    min-width: 232px; background: #fff; border: 1px solid var(--line);
    border-radius: 3px; box-shadow: 0 18px 40px -14px rgba(15,42,74,0.28);
    padding: 0.5rem 0; opacity: 0; visibility: hidden; transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 60;
  }
  .drop-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
  .has-drop:hover .drop-menu, .has-drop:focus-within .drop-menu {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px);
  }
  .drop-menu a {
    display: block; padding: 0.62rem 1.25rem; font-size: 0.85rem; font-weight: 500;
    color: var(--ink); white-space: nowrap; transition: background 0.18s ease, color 0.18s ease;
  }
  .drop-menu a::after { display: none; }
  .drop-menu a:hover { background: var(--paper); color: var(--navy); }
  .nav-toggle { display: none; background: none; border: 0; cursor: pointer; }

  /* ---------- Hero ---------- */
  .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; color: var(--white); }
  .hero-bg {
    position: absolute; inset: 0; z-index: -2;
    background:
      linear-gradient(180deg, rgba(15,42,74,0.55) 0%, rgba(15,42,74,0.40) 45%, rgba(15,42,74,0.82) 100%),
      #14161b url("images/hero-interior.png") center / cover no-repeat;
  }
  .hero-inner { width: 100%; padding-bottom: clamp(3rem, 7vw, 6rem); padding-top: 120px; }
  .hero .eyebrow { color: #fff; }
  .hero .eyebrow::before { background: var(--orange); width: 40px; }
  .hero h1 { font-size: clamp(3rem, 8.5vw, 7rem); font-weight: 400; margin-top: 1.4rem; max-width: 15ch; }
  .hero h1 em { font-style: italic; }
  .hero-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; margin-top: 2.5rem; }
  .hero .lede { max-width: 34rem; color: rgba(255,255,255,0.82); font-size: 1.06rem; }
  .hero .lede-note { display: inline-block; margin-top: 0.9rem; font-size: 0.8rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); }
  .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

  /* Centered hero variant */
  .hero-center { align-items: center; text-align: center; }
  .hero-center .hero-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding-top: 120px; padding-bottom: 0; position: relative; }
  .hero-center h1 { max-width: 18ch; }
  .hero-center .hero-actions { justify-content: center; margin-top: 2.6rem; }
  .hero-facts { position: absolute; left: 0; right: 0; bottom: clamp(2rem, 5vw, 3.5rem); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.9rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
  .hero-facts .dot { color: var(--orange); }

  .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--sans); font-size: 0.9rem; font-weight: 600; padding: 1rem 1.9rem; border-radius: 2px; cursor: pointer; transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; white-space: nowrap; }
  .btn:hover { transform: translateY(-2px); }
  .btn .arrow { transition: transform 0.25s ease; }
  .btn:hover .arrow { transform: translateX(4px); }
  .btn-primary { background: var(--blue); color: #fff; }
  .btn-primary:hover { background: var(--blue-d); }
  .btn-dark { background: var(--black); color: #fff; }
  .btn-dark:hover { background: var(--blue); }
  .btn-light { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(4px); }
  .btn-light:hover { background: #fff; color: var(--black); border-color: #fff; }
  .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
  .btn-ghost:hover { border-color: var(--black); }

  /* ---------- Intro ---------- */
  .intro { padding: clamp(4.5rem, 10vw, 8rem) 0; }
  .intro-grid { display: grid; grid-template-columns: 0.4fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .intro h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 400; color: var(--black); max-width: 20ch; }
  .intro h2 em { font-style: italic; color: var(--blue); }
  .intro p { color: var(--grey-d); font-size: 1.08rem; }
  .intro p + p { margin-top: 1.2rem; }

  /* ---------- Stats ---------- */
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
  .stat { padding: 2.4rem 0.5rem; border-right: 1px solid var(--line); }
  .stat:last-child { border-right: 0; }
  .stat .num { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--black); line-height: 1; font-weight: 500; }
  .stat .num span { color: var(--orange); }
  .stat .lbl { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-top: 0.8rem; }

  /* ---------- Services ---------- */
  .services { background: var(--paper); padding: clamp(4.5rem, 10vw, 8rem) 0; }
  .svc-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 3rem; }
  .svc-head h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 400; color: var(--black); }
  .svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
  .svc { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line); padding: 2.2rem 1.8rem; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
  .svc:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -30px rgba(11,11,13,0.35); border-color: transparent; }
  /* Image that fades in on hover, softened by a white veil */
  .svc-bg { position: absolute; inset: -1px; z-index: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.5s ease; }
  .svc-bg::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.6); }
  .svc:hover .svc-bg { opacity: 1; }
  .svc > *:not(.svc-bg) { position: relative; z-index: 1; }
  .svc .idx { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; color: var(--orange); }
  .svc h3 { font-size: 1.7rem; font-weight: 500; margin-top: 2rem; color: var(--black); }
  .svc p { font-size: 0.94rem; color: var(--grey-d); margin-top: 0.7rem; }

  /* ---------- Featured ---------- */
  .featured { padding: clamp(4.5rem, 10vw, 8rem) 0; }
  .feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 3rem; }
  .prop { position: relative; overflow: hidden; aspect-ratio: 3 / 2.1; background: linear-gradient(135deg, #2a2d36, #14161b); color: #fff; display: flex; align-items: flex-end; }
  .prop.tall { aspect-ratio: auto; grid-row: span 2; }
  .prop::before { content: attr(data-ph); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.12); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; }
  .prop-overlay { position: relative; z-index: 2; width: 100%; padding: 1.8rem; background: linear-gradient(180deg, rgba(11,11,13,0) 0%, rgba(11,11,13,0.8) 100%); transition: background 0.3s ease; }
  .prop:hover .prop-overlay { background: linear-gradient(180deg, rgba(15,42,74,0) 0%, rgba(15,42,74,0.88) 100%); }
  .prop .tagline { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
  .prop h3 { font-size: 1.7rem; font-weight: 500; color: #fff; margin-top: 0.4rem; }
  .prop .meta { font-size: 0.85rem; color: rgba(255,255,255,0.8); margin-top: 0.4rem; }

  /* ---------- About / broker ---------- */
  .about { background: var(--warm); color: var(--ink); padding: clamp(4.5rem, 10vw, 8rem) 0; }
  .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
  .about-photo { aspect-ratio: 4/5; background: #EDECEB; border: 1px solid var(--line); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
  .about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .about h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 400; color: var(--black); margin-top: 1.4rem; }
  .bio-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin: 1.8rem 0; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--navy); }
  .bio-facts .dot { color: var(--orange); }
  .about .quote { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.45; color: var(--blue); margin: 1.8rem 0; }
  .about p { color: var(--grey-d); }
  .about p + p { margin-top: 1.1rem; }
  .about .signoff { display: flex; justify-content: flex-end; margin-top: 2rem; }
  .about .sig { font-family: "Dancing Script", cursive; font-size: 2rem; font-weight: 600; color: var(--navy); line-height: 1; }

  /* ---------- Testimonials ---------- */
  .quotes { position: relative; padding: clamp(4.5rem, 10vw, 8rem) 0; background:
      linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)),
      url("images/quotes-bg.jpg") center / cover no-repeat fixed; }
  .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 3rem; }
  /* Auto-scrolling carousel */
  .quote-carousel { margin-top: 3rem; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .quote-track { display: flex; gap: 1.6rem; width: max-content; animation: quote-scroll 60s linear infinite; }
  .quote-carousel:hover .quote-track { animation-play-state: paused; }
  .quote-track .qcard { width: 360px; flex-shrink: 0; }
  @keyframes quote-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .qcard { height: 340px; background: var(--white); border: 1px solid var(--line); padding: 2rem 1.9rem; display: flex; flex-direction: column; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
  .qcard:hover { border-color: transparent; box-shadow: 0 20px 44px -28px rgba(11,11,13,0.3); }
  .qcard .stars { color: var(--orange); letter-spacing: 3px; font-size: 0.85rem; flex-shrink: 0; }
  .qcard .qtext { flex: 0 0 auto; margin: 1rem 0 0.6rem; position: relative; overflow: hidden; }
  .qcard .qtext p { font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; color: var(--ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  .qcard .readmore { align-self: flex-start; background: none; border: 0; padding: 0; margin: 0 0 1rem; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--orange); cursor: pointer; flex-shrink: 0; }
  .qcard .readmore:hover { text-decoration: underline; }
  .qcard .who-row { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; margin-top: auto; }
  .qcard .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
  .qcard .ini { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; }
  .qcard .who { font-size: 0.86rem; font-weight: 600; color: var(--black); }
  .qcard .loc { font-size: 0.78rem; color: var(--grey); }

  /* Testimonial modal */
  .quote-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(11,11,13,0.55); backdrop-filter: blur(3px); }
  .quote-modal.open { display: flex; }
  .quote-modal .box { background: var(--white); max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto; padding: clamp(2rem, 5vw, 3rem); border-radius: 4px; position: relative; }
  .quote-modal .stars { color: var(--orange); letter-spacing: 3px; font-size: 0.9rem; }
  .quote-modal .m-text { font-family: var(--serif); font-size: 1.3rem; line-height: 1.55; color: var(--ink); margin: 1.2rem 0 1.6rem; }
  .quote-modal .who { font-size: 0.9rem; font-weight: 600; color: var(--black); }
  .quote-modal .loc { font-size: 0.8rem; color: var(--grey); margin-top: 0.2rem; }
  .quote-modal .close { position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px; border: 1px solid var(--line); background: none; border-radius: 50%; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--ink); }
  .quote-modal .close:hover { background: var(--paper); }

  /* ---------- CTA band (full-width) ---------- */
  .cta-band { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: clamp(4rem, 9vw, 7rem) 0; }
  /* Interior image that fades in on hover, tinted navy */
  .cta-band-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.6s ease; }
  .cta-band-bg::after { content: ""; position: absolute; inset: 0; background: rgba(15,42,74,0.72); }
  .cta-band:hover .cta-band-bg { opacity: 1; }
  .cta-band-inner { position: relative; z-index: 1; text-align: center; max-width: 44rem; margin-left: auto; margin-right: auto; }
  .cta-band-inner h2 { font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 400; margin-top: 1.2rem; }
  .cta-band-inner p { color: rgba(255,255,255,0.85); max-width: 36rem; margin: 1.2rem auto 2.4rem; }
  .cta-band-inner .btn-light { border-color: rgba(255,255,255,0.6); }

  /* Light variant: white bg, navy text, property fades in white on hover */
  .cta-band.light { background: var(--white); color: var(--navy); border-top: 1px solid var(--line); }
  .cta-band.light .cta-band-bg::after { background: rgba(255,255,255,0.8); }
  .cta-band.light .eyebrow { color: var(--orange) !important; }
  .cta-band.light h2 { color: var(--navy); }
  .cta-band.light p { color: var(--grey-d); }
  /* Inverted: image shown by default, fades to white on hover */
  .cta-band.light.invert .cta-band-bg { opacity: 1; }
  .cta-band.light.invert .cta-band-bg::after { background: rgba(255,255,255,0.7); transition: background 0.6s ease; }
  .cta-band.light.invert:hover .cta-band-bg::after { background: rgba(255,255,255,0.92); }
  /* Static faded image, no hover change (navy band) */
  .cta-band.static-bg .cta-band-bg { opacity: 1; }
  .cta-band.static-bg .cta-band-bg::after { background: rgba(15,42,74,0.82); }
  .cta-band.static-bg:hover .cta-band-bg { opacity: 1; }
  /* Static faded image, no hover change (light band, navy text) */
  .cta-band.light.static-light .cta-band-bg { opacity: 1; }
  .cta-band.light.static-light .cta-band-bg::after { background: rgba(255,255,255,0.8); }
  .cta-band.light.static-light:hover .cta-band-bg::after { background: rgba(255,255,255,0.8); }

  /* Testimonials CTA */
  .quotes-cta { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; margin-top: 3.4rem; text-align: center; }
  .quotes-cta p { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--black); margin: 0; }

  /* ---------- Contact ---------- */
  .contact { background: var(--white); padding: clamp(4.5rem, 10vw, 8rem) 0; border-top: 1px solid var(--line); }
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
  .contact h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 400; color: var(--black); margin-top: 1.2rem; }
  .contact .lede { color: var(--grey-d); margin-top: 1rem; max-width: 30rem; }
  .contact-info { margin-top: 2.4rem; display: flex; flex-direction: column; gap: 1.3rem; }
  .contact-info a, .contact-info span { display: flex; align-items: baseline; gap: 0.8rem; }
  .contact-info .k { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); min-width: 90px; }
  .contact-info .v { font-size: 1.05rem; color: var(--ink); }
  form { display: flex; flex-direction: column; gap: 1.1rem; }
  form label { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
  form input, form select, form textarea { padding: 0.95rem 1rem; border: 1px solid var(--line); border-radius: 2px; font-family: var(--sans); font-size: 1rem; background: var(--white); color: var(--ink); transition: border-color 0.2s ease; }
  form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--blue); }
  form textarea { resize: vertical; }
  #sent { display: none; color: var(--blue); font-weight: 600; font-size: 0.9rem; margin: 0; }

  /* ---------- Social (Instagram grid) ---------- */
  .social { background: var(--navy); color: #fff; padding: clamp(4rem, 9vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem); }
  .social-inner { text-align: center; max-width: 40rem; margin: 0 auto; }
  .social .eyebrow { color: #fff; }
  .social h2 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 400; margin-top: 1.1rem; }
  .social-inner > p { color: rgba(255,255,255,0.78); margin: 1rem auto 0; max-width: 32rem; }
  .ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 2.8rem 0 0; }
  .ig-tile { position: relative; aspect-ratio: 1; background-size: cover; background-position: center; overflow: hidden; }
  .ig-tile .ig-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15,42,74,0.15); opacity: 0; transition: opacity 0.3s ease, background 0.3s ease; }
  .ig-tile:hover .ig-ov { opacity: 1; background: rgba(15,42,74,0.55); }
  .social-cta { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; margin-top: 2.6rem; }
  .ig-handle { font-family: var(--serif); font-size: clamp(1.5rem, 3.5vw, 2.2rem); color: #fff; }
  .social-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
  @media (max-width: 700px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }

  /* ---------- Footer ---------- */
  footer { background: var(--white); color: var(--grey-d); padding: clamp(4rem, 8vw, 6rem) 0 2.5rem; border-top: 1px solid var(--line); }
  .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; }
  footer .name { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; color: var(--black); }
  footer .tag { color: var(--grey-d); margin-top: 0.9rem; max-width: 26rem; }
  .foot-logo { height: 68px; width: auto; margin-top: 1.6rem; }
  .foot-logo-fallback { display: none; margin-top: 1.4rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0.22em; font-size: 1.1rem; color: var(--black); }
  footer h4 { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); margin: 0 0 1.1rem; font-weight: 600; }
  footer a { color: var(--grey-d); font-size: 0.94rem; display: block; margin-bottom: 0.6rem; transition: color 0.2s ease; }
  footer a:hover { color: var(--black); }
  .foot-social { display: flex; gap: 0.7rem; margin-top: 1rem; }
  .foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 0; border: 1px solid var(--line); border-radius: 3px; color: var(--navy); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
  .foot-social a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
  .foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3.5rem; padding-top: 1.7rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--grey); }

  /* Dark footer variant (interior pages) */
  footer.dark { background: var(--navy); color: rgba(255,255,255,0.75); border-top: 0; }
  footer.dark .name { color: #fff; }
  footer.dark .tag { color: rgba(255,255,255,0.7); }
  footer.dark h4 { color: var(--orange); }
  footer.dark a { color: rgba(255,255,255,0.75); }
  footer.dark a:hover { color: #fff; }
  footer.dark .foot-logo { filter: brightness(0) invert(1); opacity: 0.92; }
  footer.dark .foot-social a { border-color: rgba(255,255,255,0.25); color: #fff; }
  footer.dark .foot-social a:hover { background: #fff; color: var(--navy); border-color: #fff; }
  footer.dark .foot-bottom { border-top-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.55); }

  /* ---------- Reveal ---------- */
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* ---------- Responsive ---------- */
  @media (max-width: 960px) {
    .intro-grid { grid-template-columns: 1fr; }
    .svc-grid { grid-template-columns: repeat(2, 1fr); }
    .feat-grid { grid-template-columns: 1fr; }
    .prop.tall { grid-row: span 1; aspect-ratio: 3/2.1; }
    .about-grid { grid-template-columns: 1fr; }
    .about-photo { max-width: 24rem; order: -1; }
    .quote-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(2) { border-right: 0; }
    .foot-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 620px) {
    .nav-links { display: none; }
    .nav-toggle { display: block; }
    .svc-grid { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
    /* Static, scrollable row instead of the marquee */
    .quote-carousel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .quote-track { animation: none; }
  }
  /* ---------- Listings (Propriétés) ---------- */
  .listings { padding: clamp(4.5rem, 10vw, 8rem) 0; }
  .listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 3rem; }
  .listing { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--white); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .listing:hover { transform: translateY(-6px); box-shadow: 0 26px 54px -30px rgba(11,11,13,0.4); }
  .listing-media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
  .listing-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
  .listing:hover .listing-media img { transform: scale(1.05); }
  .listing-badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: var(--navy); padding: 0.4rem 0.8rem; border-radius: 2px; }
  .listing-badge.active { background: var(--orange); }
  .listing-body { padding: 1.6rem 1.5rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
  .listing-price { font-family: var(--serif); font-size: 1.6rem; color: var(--navy); line-height: 1; }
  .listing h3 { font-size: 1.15rem; font-weight: 600; color: var(--black); margin-top: 0.6rem; font-family: var(--sans); letter-spacing: 0; }
  .listing .addr { font-size: 0.88rem; color: var(--grey-d); margin-top: 0.3rem; }
  .listing-specs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--grey-d); }
  .listing-specs span { display: inline-flex; align-items: center; gap: 0.35rem; }
  .listing-specs strong { color: var(--black); font-weight: 600; }
  /* Clickable active listing (links to Centris) */
  a.listing { text-decoration: none; color: inherit; }
  a.listing:hover { border-color: var(--orange); }
  .listing-cta { margin-top: 1.1rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; color: var(--orange); display: inline-flex; align-items: center; gap: 0.4rem; }
  a.listing:hover .listing-cta { gap: 0.7rem; }
  @media (max-width: 900px) { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .listing-grid { grid-template-columns: 1fr; } }

  /* ---------- VIP / alerte form (shared) ---------- */
  .vip-head { text-align: center; max-width: 42rem; margin: 0 auto 3rem; }
  .vip-head h2 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 400; color: var(--black); margin-top: 1.1rem; }
  .vip-head .eyebrow { justify-content: center; }
  .vip-head p { color: var(--grey-d); margin-top: 1rem; }
  .vip-form { max-width: 860px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); padding: clamp(1.8rem, 4vw, 3rem); }
  .fieldset { margin-bottom: 2.2rem; border: 0; padding: 0; }
  .fieldset:last-of-type { margin-bottom: 1.4rem; }
  .fieldset > legend { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); padding-bottom: 1rem; border: 0; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  .vip-form label { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
  .vip-form input, .vip-form select, .vip-form textarea { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 2px; font-family: var(--sans); font-size: 1rem; background: var(--white); color: var(--ink); transition: border-color 0.2s ease; }
  .vip-form input:focus, .vip-form select:focus, .vip-form textarea:focus { outline: none; border-color: var(--navy); }
  .checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem 1rem; }
  .checks label { flex-direction: row; align-items: center; gap: 0.6rem; text-transform: none; letter-spacing: 0; font-size: 0.92rem; font-weight: 400; color: var(--ink); cursor: pointer; }
  .checks input { width: 18px; height: 18px; padding: 0; accent-color: var(--navy); flex-shrink: 0; }
  .vip-submit { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 1rem; }
  .vip-submit .note { font-size: 0.82rem; color: var(--grey); text-align: center; }
  #vip-sent, #alert-sent { display: none; text-align: center; color: var(--navy); font-weight: 600; background: #EAF0F7; border: 1px solid var(--line); padding: 1.2rem; margin-top: 1.4rem; }
  @media (max-width: 760px) { .grid2, .grid3 { grid-template-columns: 1fr; } .checks { grid-template-columns: 1fr 1fr; } }

  /* ---------- FAQ (shared) ---------- */
  .faq { background: var(--warm); padding: clamp(4.5rem, 9vw, 7rem) 0; }
  .faq-head { text-align: center; max-width: 40rem; margin: 0 auto 2.6rem; }
  .faq-head .eyebrow { justify-content: center; }
  .faq-head h2 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; color: var(--black); margin-top: 1rem; }
  .faq-list { max-width: 760px; margin: 0 auto; }
  .faq-item { background: var(--white); border: 1px solid var(--line); margin-bottom: 0.9rem; }
  .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 1.4rem 1.6rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: var(--navy); }
  .faq-q .ic { flex-shrink: 0; font-size: 1.4rem; color: var(--orange); transition: transform 0.3s ease; line-height: 1; }
  .faq-item.open .faq-q .ic { transform: rotate(45deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
  .faq-a p { padding: 0 1.6rem 1.4rem; margin: 0; color: var(--grey-d); font-size: 0.98rem; line-height: 1.6; }

  /* ---------- Quartiers / secteurs ---------- */
  .areas { background: var(--warm); padding: clamp(4.5rem, 10vw, 8rem) 0; }
  .areas-head { max-width: 44rem; }
  .areas-head h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 400; color: var(--black); margin-top: 1.2rem; }
  .areas-head p { color: var(--grey-d); margin-top: 1rem; max-width: 36rem; }
  /* ---------- Interactive quartiers map ---------- */
  .map-wrap { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.5rem, 3vw, 2.6rem); margin-top: 3rem; align-items: stretch; }
  .map-canvas { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: clamp(0.8rem, 2vw, 1.4rem); overflow: hidden; }
  .region-map { width: 100%; height: auto; display: block; }
  .region-map .land { fill: url(#landG); stroke: #C6CFDA; stroke-width: 1.5; }
  .region-map .map-lbl { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; fill: #9AA6B4; pointer-events: none; }
  .region-map .dot { cursor: pointer; }
  .region-map .dot circle { fill: var(--orange); stroke: #fff; stroke-width: 2.5; transition: r 0.2s ease, fill 0.2s ease; }
  .region-map .dot::after { content: ""; }
  .region-map .dot:hover circle,
  .region-map .dot:focus circle,
  .region-map .dot.active circle { fill: var(--orange-d); r: 10; outline: none; }
  .region-map .dot:focus { outline: none; }
  /* pulse halo on active/hover */
  .region-map .dot circle { filter: drop-shadow(0 2px 4px rgba(232,100,30,0.4)); }

  .map-panel { background: var(--navy); color: #fff; border-radius: 4px; padding: clamp(1.8rem, 4vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; }
  .map-panel .mp-eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); font-weight: 600; }
  .map-panel h3 { font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 500; margin: 0.7rem 0 0.9rem; line-height: 1.1; }
  .map-panel p { color: rgba(255,255,255,0.82); line-height: 1.65; font-size: 0.98rem; min-height: 5.5rem; }
  .map-panel .mp-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.4rem; color: #fff; font-weight: 600; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 3px; align-self: flex-start; transition: gap 0.25s ease, border-color 0.25s ease; }
  .map-panel .mp-link:hover { gap: 0.75rem; border-color: var(--orange); }
  @media (max-width: 820px) {
    .map-wrap { grid-template-columns: 1fr; }
    .map-panel p { min-height: 0; }
  }

  /* ---------- Floating contact buttons ---------- */
  .float-contact { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90; display: flex; flex-direction: column; gap: 0.7rem; }
  .float-contact a { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 8px 24px -6px rgba(0,0,0,0.4); transition: transform 0.25s ease; }
  .float-contact a:hover { transform: scale(1.08); }
  .float-call { background: var(--navy); }
  .float-wa { background: #25D366; }
  .float-contact svg { width: 26px; height: 26px; }
  /* Hidden on large screens, shown on tablet/mobile */
  @media (min-width: 981px) { .float-contact { display: none; } }

  :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }