/* ═══════════════════════════════════════════════════════════════════════
   philippequesnel.ca · the page system.
   Lineage: « Capture · Landing v4.0 » (Figma 1:2), rebuilt 2026-07-23.
   Craft floor raised 2026-07-29 (Impeccable pass; see impeccable-lab/).

   TOKENS AND TYPE NOW LIVE IN whitelabel.css, generated from
   apps/agency/brand/whitelabel.css -- the SAME file the seller-eval app inside
   the dashboard consumes. A homeowner meets both surfaces in one funnel (a Meta
   ad lands them on the eval app, this site is one tap away), and until
   2026-07-30 the two palettes were maintained by hand and had drifted: the app
   sat on the retired #E9E2D4 ground, spelled --blue-d as --blue-deep, and had
   neither --gut nor --r-card. Never re-declare a token here or in a page; edit
   apps/agency/brand/whitelabel.css and run node apps/agency/brand/sync.mjs.

   Laws carried in code:
   · the shell is retired: flat, full-bleed, no page frame, no body padding
   · tokens live in whitelabel.css only -- a page never re-declares one
   · shadows belong to objects (cards, buttons, pills), not to the page
   · every interactive element carries hover, focus-visible and a 44px target
   · secondary text clears 4.5:1 on cream, on white and on the dark bands
   ═══════════════════════════════════════════════════════════════════════ */

@import "./whitelabel.css";

/* ── base ── */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"General Sans",sans-serif;background:var(--ground);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.light{font-weight:300}.semi{font-weight:600}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── focus: visible everywhere, never removed ── */
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:6px}
.band-dark :focus-visible,footer :focus-visible{outline-color:var(--cream)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);
  padding:12px 18px;border-radius:0 0 var(--r-el) 0;font-size:14px;font-weight:600;z-index:50}
.skip:focus{left:0}

/* ── flat full-bleed system ── */
.wrap{max-width:1320px;margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}
.hero-band{background:linear-gradient(180deg,var(--shell-a) 0%,var(--ground) 100%)}
.band-dark{background:linear-gradient(150deg,var(--dark),var(--dark2));color:var(--cream)}

/* ── THE nav: byte-identical markup on every page, styled here ONLY ── */
nav .wrap{display:flex;align-items:center;gap:30px;padding-top:20px;padding-bottom:20px}
.brand{display:flex;align-items:center;gap:12px;padding:4px 0}
.mark{width:40px;height:40px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-sm);flex:none}
.mark img{width:26px;height:26px;object-fit:contain}
.bname{font-weight:600;font-size:15.5px;letter-spacing:-.01em;line-height:1.15}
.brole{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:3px}
.links{display:flex;gap:6px;margin-left:auto}
.links a{font-size:14px;color:var(--mut);padding:11px 12px;border-radius:999px;
  transition:color .16s var(--ease),background-color .16s var(--ease)}
.links a:hover{color:var(--ink);background:rgba(60,40,15,.055)}
.links a.on{color:var(--ink);font-weight:600}
.nav-cta{background:var(--blue);color:#fff;border-radius:999px;padding:13px 22px;font-weight:600;font-size:13.5px;
  white-space:nowrap;box-shadow:var(--sh-blue);transition:background-color .16s var(--ease),transform .16s var(--ease)}
.nav-cta:hover{background:var(--blue-d);transform:translateY(-1px)}

/* mobile menu: real navigation below the desktop link row */
.menu{display:none;margin-left:auto;position:relative}
.menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--rule);
  font-size:14px;font-weight:600;color:var(--ink)}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"";width:13px;height:13px;border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.menu[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.menu-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;background:var(--card);
  border-radius:var(--r-el);box-shadow:var(--sh-lift);padding:8px;z-index:40}
.menu-panel a{display:block;padding:13px 16px;border-radius:11px;font-size:15px;min-height:44px}
.menu-panel a:hover{background:rgba(60,40,15,.06)}
.menu-panel .sep{height:1px;background:var(--rule-soft);margin:8px 6px}
.menu-panel .tel{font-weight:600;font-variant-numeric:tabular-nums}

/* ── buttons ── */
.btn-blue,.pill-blue{background:var(--blue);color:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;box-shadow:var(--sh-blue);border:0;cursor:pointer;white-space:nowrap;min-height:44px;
  transition:background-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease)}
.btn-blue:hover,.pill-blue:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 16px 32px rgba(24,119,242,.32)}
.btn-blue:active{transform:translateY(0)}
.btn-blue.lg{padding:17px 32px;font-size:15.5px}
.btn-blue.nav{padding:12px 22px;font-size:13.5px}
.btn-dark{background:var(--ink);color:var(--cream);border-radius:999px;padding:13px 24px;font-weight:500;font-size:15px;
  display:inline-flex;align-items:center;white-space:nowrap;min-height:44px;
  transition:background-color .16s var(--ease),transform .16s var(--ease)}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.quiet{font-size:15px;color:var(--mut);display:inline-flex;align-items:center;min-height:44px;
  transition:color .16s var(--ease)}
.quiet:hover{color:var(--ink)}

/* ── section head row ── */
.seco{padding-top:var(--s9);display:flex;align-items:baseline;gap:20px}
.seco h2{font-weight:300;font-size:clamp(28px,3vw,34px);letter-spacing:-.018em;line-height:1.08}
.seco h2 b{font-weight:600}
/* inline padding: a 44px hit area without moving the baseline it sits on */
.seco .more{margin-left:auto;font-size:14px;color:var(--mut);white-space:nowrap;
  padding:14px 0;text-underline-offset:5px;text-decoration-thickness:1px;
  transition:color .16s var(--ease)}
.seco .more:hover{color:var(--ink);text-decoration:underline}
.seco .note{margin-left:auto;font-size:13.5px;color:var(--mut)}

/* ── listing card ── */
.lcard{background:var(--card);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card);
  display:block;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.lcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.lcard .ph{position:relative;aspect-ratio:379/220;overflow:hidden;background:var(--hair)}
.lcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.lcard:hover .ph img{transform:scale(1.035)}
.lcard .b{padding:20px 24px 24px}
.lcard .p{font-weight:600;font-size:21px;letter-spacing:-.01em}
.lcard .a{font-size:13.5px;color:var(--mut);margin-top:5px;line-height:1.45}
.lcard .m{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:14px;font-size:11.5px;color:var(--mut);
  letter-spacing:.04em;text-transform:uppercase}
.lcard .m span{background:rgba(60,40,15,.055);border-radius:999px;padding:5px 10px}

/* ── status pills on photos ── */
.status{position:absolute;top:14px;left:14px;border-radius:999px;padding:7px 13px;
  font-weight:600;font-size:11px;letter-spacing:.08em;color:#fff;background:var(--blue);
  box-shadow:0 6px 16px rgba(24,119,242,.34)}
/* sold is the past tense of the blue: same pill, ink fill, site-wide */
.status.sold{background:var(--ink);box-shadow:0 6px 16px rgba(29,24,18,.34)}

/* ── chips ── */
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chips span{background:#fff;border-radius:999px;padding:10px 16px;font-size:12.5px;color:var(--mut);box-shadow:var(--sh-sm)}

/* ── footer: the shared dark close ── */
footer{margin-top:var(--s9);background:var(--dark);color:var(--cream);padding:var(--s8) 0 var(--s4)}
.fin{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}
.fb{font-weight:600;font-size:19px;letter-spacing:-.01em}
.fid{font-size:13.5px;color:var(--on-dark-quiet);margin-top:var(--s2);line-height:1.6}
.fc{display:flex;flex-direction:column;font-size:14.5px}
.fc a{color:var(--on-dark);padding:11px 0;min-height:44px;display:flex;align-items:center;
  transition:color .16s var(--ease)}
.fc a:hover{color:var(--cream)}
.fc span{color:var(--on-dark-quiet)}
.legal{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid rgba(246,239,227,.14);
  font-size:12px;color:var(--on-dark-quiet);line-height:1.6}
/* The one link in the legal line (la politique de confidentialité, ajoutée le
   2026-07-31). Underlined because colour alone inside a 12px grey line is not a
   signal, and given a real hit area with padding that the negative margin then
   removes from the layout -- a 12px legal line must not become 44px tall to
   satisfy the touch-target law, and the law is about the FINGER, not the box. */
.legal a{display:inline-block;padding:12px 2px;margin:-12px 0;color:var(--on-dark);
  text-decoration:underline;text-underline-offset:3px;transition:color .16s var(--ease)}
.legal a:hover{color:var(--cream)}

/* ── shared responsive ── */
@media(max-width:1120px){
  .links{display:none}
  .menu{display:block;margin-left:0}
  .nav-cta{margin-left:auto;order:3}
  .menu{order:4}
}
@media(max-width:860px){
  /* --gut narrows to 26px here; that breakpoint now lives with the token, in
     whitelabel.css, so the eval app narrows on the same rule. */
  /* three elements will not fit one row at 390, so the second row is composed
     rather than left to wrap: identity above, the two actions below it */
  nav .wrap{flex-wrap:wrap;gap:10px 12px;padding-top:12px;padding-bottom:12px}
  .brand{flex:1 0 100%}
  .menu{order:3;margin-left:0}
  /* The panel right-anchors to its summary. On desktop the summary sits at the
     right of the nav, so right:0 is correct. Once the row wraps, `order:3` puts
     that 95px summary at the LEFT, and right:0 then hangs a 230px panel off the
     left edge of the screen -- measured at -115px on a 390 viewport, half of it
     clipped, on every page. It rendered as a blank white rectangle on the one
     device 100% of the ad traffic uses.
     site-gate.mjs cannot see this: it measures scrollWidth - clientWidth, and
     left overflow is CLIPPED rather than scrollable, so it adds nothing and the
     gate passes green. Verify this one by measuring getBoundingClientRect().left,
     not by trusting the gate. */
  .menu-panel{left:0;right:auto;min-width:0;width:min(300px,calc(100vw - 40px))}
  .nav-cta{order:4;margin-left:auto;padding:12px 18px}
  .seco{padding-top:var(--s8)}
  footer{margin-top:var(--s8);padding-top:var(--s7)}
  .fin{flex-direction:column;gap:var(--s5)}
  .legal{margin-top:var(--s6)}
}
@media(max-width:640px){.brole{display:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}