/* generated by assets.py — variable fonts, one file per family/style/subset (fontsource 5.3.0) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-roman-latin-ext.a2930b27d1.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-roman-latin.7234ed860a.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-italic-latin-ext.4983926d3a.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces-italic-latin.066710ce7e.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-ext.c4fcfea41f.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/instrument-sans-latin.2ee17598a9.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ============================================================
   Gestion IFY — « maison montréalaise » design system (premium pass 2026-10-25)
   Fraunces (display, real variable roman + italic) · Instrument Sans (text)
   Paper / ink / one red. The roofline of the logo (peak at 36 %) is the structural motif.
   Token names on :root are shared with booking.css, form-theme.css and the staff portal — keep them stable.
   ============================================================ */

:root{
  --paper:#FAF8F4;
  --paper-2:#F3EFE8;       /* tonal terrace (in-flow depth without a shadow) */
  --card:#FFFFFF;
  --ink:#191613;
  --ink-2:#57504A;         /* 7.9:1 on paper */
  --ink-3:#756D63;         /* 4.8:1 on paper, 5.1:1 on white */
  --red:#E60000;           /* brand FILL (buttons, marks, rings) */
  --red-deep:#BC0000;
  --red-tint:#FCEEEA;
  --line:#E8E1D6;          /* decoration only — never a control boundary */
  --line-strong:#D9CFC1;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-lg:18px; --r-md:12px; --r-sm:8px;
  --shadow-1:0 1px 2px rgba(25,22,19,.06);
  --shadow-2:0 2px 6px rgba(25,22,19,.06),0 20px 44px -24px rgba(25,22,19,.22);
  --container:1180px;
  --pad:clamp(16px,4vw,40px);
  /* shared system tokens (premium pass) — used by the site, booking widget, rental form, staff portal */
  --red-text:#C40000;      /* red TEXT on paper/white/tint (5.9:1); --red stays the brand FILL */
  --red-on-dark:#FF5A4A;   /* red text on --ink (5.9:1) */
  --line-field:#8C8378;    /* field / control borders — 3.5:1 on paper, 3.7:1 on white (WCAG 1.4.11) */
  --r-control:10px; --r-panel:16px; --r-pill:999px;
  --h-control:48px; --touch:44px;
  --ease:cubic-bezier(.23,1,.32,1);       /* hover / press / colour */
  --ease-std:cubic-bezier(.2,0,0,1);      /* panels, popovers */
  --t-fast:140ms; --t:180ms; --t-panel:220ms;
  --shadow-pop:0 1px 2px rgba(25,22,19,.08),0 12px 32px -8px rgba(25,22,19,.24);
  --header-h:72px;
  /* dark surfaces (about band, footer, lightbox) */
  --on-dark:#F6F2EC;       /* 16:1 on ink */
  --on-dark-2:#CFC8BE;     /* 11:1 */
  --on-dark-3:#A39B90;     /* 6.6:1 */
  --line-dark:rgba(255,255,255,.14);
  --focus:2px solid var(--red);
  --roof:polygon(0 100%,0 62%,36% 0,100% 62%,100% 100%);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* the ONE header offset for anchors, scrollIntoView and focus scrolling — an element scroll-margin would add to it */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);-webkit-text-size-adjust:100%;font-synthesis:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;padding-top:var(--header-h);
}
body.hdr-clear{padding-top:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:var(--focus);outline-offset:2px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* skip link — the first Tab stop is a visible pill */
.skip{
  position:fixed;left:16px;top:-80px;z-index:200;
  background:var(--ink);color:#fff;font:600 15px/1 var(--sans);text-decoration:none;
  min-height:48px;display:inline-flex;align-items:center;padding:0 22px;border-radius:var(--r-pill);box-shadow:var(--shadow-pop);
}
.skip:focus,.skip:focus-visible{top:12px;outline:var(--focus);outline-offset:3px}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0;letter-spacing:-.012em;text-wrap:balance}
h3{font-weight:600;letter-spacing:-.006em}
p,li{text-wrap:pretty}
.h-display{font-size:clamp(38px,5.4vw,70px)}
.h-section{font-size:clamp(30px,3.6vw,46px)}
.eyebrow{
  font:600 13px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-text);display:flex;align-items:center;gap:10px;margin:0 0 16px;
}
/* the roofline as the eyebrow mark (logo geometry, peak at 36 %) */
.eyebrow::before{content:"";width:18px;height:10px;background:currentColor;flex:none;clip-path:var(--roof);transform:translateY(-1px)}
.lead{font-size:clamp(18px,1.55vw,20px);color:var(--ink-2);line-height:1.65}
.muted{color:var(--ink-2)}
.small{font-size:15px}
.num{font-variant-numeric:tabular-nums}

/* text links: a real underline at rest, full strength on hover */
.tl,.prose a,.feature-list a{
  color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb,currentColor 38%,transparent);
  transition:text-decoration-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
  border-radius:3px;
}
.tl-red{color:var(--red-text)}
@media (hover:hover) and (pointer:fine){
  .tl:hover,.prose a:hover,.feature-list a:hover{text-decoration-color:currentColor;color:var(--red-text)}
}
.tl:active,.prose a:active,.feature-list a:active{color:var(--ink);text-decoration-color:var(--ink)}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(64px,9vw,120px)}
.section-head{max-width:680px;margin-bottom:clamp(28px,4vw,48px)}
.section-head p{margin:14px 0 0}
.hairline{border:0;border-top:1px solid var(--line);margin:0}

/* ---------- buttons (one family: primary red fill · secondary outline · text) ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--h-control);padding:0 24px;
  font:600 15.5px/1.15 var(--sans);text-decoration:none;text-align:center;cursor:pointer;
  border-radius:var(--r-pill);border:1px solid transparent;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.btn:focus-visible{outline:var(--focus);outline-offset:3px}
.btn:active{transform:scale(.98)}
.btn-red{background:var(--red);color:#fff}
.btn-red:active{background:var(--red-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-field)}
.btn-ghost:active{background:var(--paper-2);border-color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff}
.btn-lg{min-height:56px;padding:0 30px;font-size:16.5px}
.btn-block{width:100%}
.btn .arr{display:inline-block;transition:transform var(--t) var(--ease)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn[aria-busy="true"]{cursor:progress}
@media (hover:hover) and (pointer:fine){
  .btn-red:not(:disabled):hover{background:var(--red-deep)}
  .btn-ghost:hover{border-color:var(--ink);background:var(--card)}
  .btn-ink:hover{background:#000}
  .btn:hover .arr{transform:translateX(3px)}
}
/* text button: ink, underline grows, arrow nudges */
.btn-text{
  display:inline-flex;align-items:center;gap:8px;min-height:var(--touch);padding:0 2px;
  font:600 15.5px/1.2 var(--sans);color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.3em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);border-radius:4px;
  transition:color var(--t-fast) var(--ease),text-decoration-color var(--t-fast) var(--ease);
}
.btn-text .arr{transition:transform var(--t) var(--ease)}
.btn-text:active{color:var(--red-deep)}
@media (hover:hover) and (pointer:fine){
  .btn-text:hover{color:var(--red-text);text-decoration-color:currentColor}
  .btn-text:hover .arr{transform:translateX(3px)}
}

/* ---------- header (always fixed — no fixed→sticky switch, no page jump) ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--header-h);
  background:var(--paper);border-bottom:1px solid var(--line);
  transition:background-color var(--t-panel) var(--ease-std),border-color var(--t-panel) var(--ease-std);
}
.site-header .bar{
  height:100%;display:flex;align-items:center;gap:24px;
  max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);
}
.brand{display:flex;align-items:center;flex:none;min-height:var(--touch);border-radius:6px;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
@media (hover:hover) and (pointer:fine){.brand:hover{opacity:.82}}
.brand:active{opacity:.66;transform:scale(.98)}
.brand img{width:81px;height:40px}
.brand .logo-rev{display:none}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-link{
  position:relative;display:inline-flex;align-items:center;min-height:var(--touch);padding:0 12px;
  font:500 16px/1 var(--sans);color:var(--ink-2);text-decoration:none;border-radius:8px;
  transition:color var(--t-fast) var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:9px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t) var(--ease);
}
.nav-link:active{color:var(--ink);opacity:.62}
@media (hover:hover) and (pointer:fine){
  .nav-link:hover{color:var(--ink)}
  .nav-link:hover::after{transform:scaleX(1)}
}
.nav-cta{display:flex;align-items:center;gap:10px;margin-left:10px}
.nav-cta .btn{min-height:44px;padding:0 20px;font-size:15.5px}
/* language: compact segmented FR | EN — the current language is filled, the other is the link */
.lang-seg{display:inline-flex;align-items:center;margin-left:6px;border:1px solid var(--line-field);border-radius:var(--r-pill);padding:0;gap:0}
.lang-seg > *{
  display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:44px;padding:0 12px;
  font:600 13px/1 var(--sans);letter-spacing:.08em;border-radius:var(--r-pill);text-decoration:none;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.lang-seg .is-current{background:var(--ink);color:#fff}
.lang-seg a{color:var(--ink-2);position:relative}
.lang-seg a:active{background:var(--paper-2)}
@media (hover:hover) and (pointer:fine){.lang-seg a:hover{color:var(--ink);background:var(--paper-2)}}
.lang-seg .lang-long{display:none}
.nav-toggle{display:none}

/* transparent over the home hero only, paper as soon as the page scrolls */
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open){background:transparent;border-bottom-color:transparent}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .logo-col{display:none}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .logo-rev{display:block}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .nav-link{color:rgba(255,255,255,.92)}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .nav-link::after{background:#fff}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .btn-ghost{color:#fff;border-color:rgba(255,255,255,.62)}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .lang-seg{border-color:rgba(255,255,255,.55)}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .lang-seg .is-current{background:#fff;color:var(--ink)}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .lang-seg a{color:rgba(255,255,255,.92)}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .nav-toggle{border-color:rgba(255,255,255,.6);color:#fff}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) :focus-visible{outline-color:#fff}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .nav-link:active{color:rgba(255,255,255,.7)}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .btn-ghost:active{background:rgba(255,255,255,.22)}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .lang-seg a:active{background:rgba(255,255,255,.22)}
@media (hover:hover) and (pointer:fine){
  html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .nav-link:hover{color:#fff}
  html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
  html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .lang-seg a:hover{background:rgba(255,255,255,.16);color:#fff}
}

/* ---------- mobile + tablet menu (≤1023px): solid paper sheet ---------- */
@media (max-width:1023px){
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-left:auto;
    min-height:var(--touch);padding:0 14px 0 16px;border:1px solid var(--line-field);border-radius:var(--r-pill);
    background:transparent;color:var(--ink);font:600 15px/1 var(--sans);cursor:pointer;
    transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
  }
  .nav-toggle:active{transform:scale(.97);background:var(--paper-2)}
  .nav-toggle .bars{position:relative;width:18px;height:12px}
  .nav-toggle .bars span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform var(--t) var(--ease),opacity var(--t-fast) var(--ease)}
  .nav-toggle .bars span:nth-child(1){top:0}
  .nav-toggle .bars span:nth-child(2){top:5px}
  .nav-toggle .bars span:nth-child(3){top:10px}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
  .nav-toggle[aria-expanded="true"]{border-color:var(--ink);background:var(--paper-2)}
  @media (hover:hover) and (pointer:fine){.nav-toggle:hover{border-color:var(--ink)}}
  .site-header.menu-open{background:var(--paper);border-bottom-color:var(--line)}
  .nav{
    position:fixed;left:0;right:0;top:var(--header-h);height:calc(100dvh - var(--header-h));
    display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--paper);padding:12px var(--pad) calc(24px + env(safe-area-inset-bottom));overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nav.open{display:flex;animation:sheet-in var(--t-panel) var(--ease-std) both}
  .nav-link{
    min-height:60px;padding:0 4px;border-bottom:1px solid var(--line);border-radius:0;
    font:500 26px/1.1 var(--serif);color:var(--ink);letter-spacing:-.01em;
  }
  .nav-link::after{display:none}
  .nav-link::before{content:"";order:2;margin-left:auto;width:9px;height:9px;border-top:2px solid var(--ink-3);border-right:2px solid var(--ink-3);transform:rotate(45deg);margin-right:6px}
  @media (hover:hover) and (pointer:fine){.nav-link:hover{color:var(--red-text)}}
  .lang-seg{order:7;align-self:flex-start;margin:20px 0 0}
  .lang-seg > *{height:40px;min-width:0;padding:0 16px;letter-spacing:.02em;font-size:14.5px}
  .lang-seg .lang-short{display:none}
  .lang-seg .lang-long{display:inline}
  .nav-cta{order:6;flex-direction:column;align-items:stretch;gap:10px;margin:0;padding-top:24px}
  .nav-cta .btn{min-height:56px;font-size:16.5px}
}
/* no JavaScript: the menu cannot open, so the links sit in the header instead */
@media (max-width:1023px){
  html.no-js body{padding-top:0}
  html.no-js .site-header{position:relative;height:auto;background:var(--paper)!important}
  html.no-js .site-header .bar{flex-wrap:wrap;height:auto;padding-block:12px;gap:4px 12px}
  html.no-js .nav-toggle{display:none}
  html.no-js .nav{display:flex;position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:0;margin:0;width:100%;background:none;overflow:visible}
  html.no-js .nav-link{min-height:44px;font:500 16px/1 var(--sans);border:0;padding:0 8px;color:var(--ink)!important}
  html.no-js .nav-link::before{display:none}
  html.no-js .lang-seg{margin:0}
  html.no-js .nav-cta{flex-direction:row;flex-wrap:wrap;margin:0;padding:0;width:100%}
  html.no-js .nav-cta .btn{min-height:44px;font-size:15px;flex:1 1 auto}
  html.no-js .logo-rev{display:none!important}
  html.no-js .logo-col{display:block!important}
}
/* phones: the sheet is as tall as its content (links, then the visit/apply actions, then the language) over a scrim
   that closes it — no empty paper between the links and the actions (carried finding, final judge 2026-10-27) */
@media (max-width:767px){
  html:not(.no-js) .nav{z-index:1;height:auto;max-height:calc(100dvh - var(--header-h));border-bottom:1px solid var(--line);box-shadow:0 24px 48px -24px rgba(25,22,19,.25)}
  html:not(.no-js) .site-header.menu-open::after{content:"";position:fixed;left:0;right:0;top:var(--header-h);bottom:0;z-index:0;background:rgba(25,22,19,.42);animation:lb-in var(--t-panel) var(--ease-std) both;cursor:pointer}
}
@media (min-width:768px) and (max-width:1023px){
  html:not(.no-js) .nav{left:auto;width:420px;border-left:1px solid var(--line);box-shadow:-24px 0 48px -24px rgba(25,22,19,.25)}
  html:not(.no-js) .site-header.menu-open::after{content:"";position:fixed;left:0;right:420px;top:var(--header-h);bottom:0;background:rgba(25,22,19,.42);animation:lb-in var(--t-panel) var(--ease-std) both;cursor:pointer}
}
@keyframes sheet-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- home hero ---------- */
.hero-full{
  position:relative;min-height:min(100svh,920px);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--header-h) + 40px) 0 clamp(96px,12vw,150px);isolation:isolate;
}
.hero-media{position:absolute;inset:0;overflow:hidden;z-index:-1;background:#2a2622}
.hero-media picture,.hero-media img{position:absolute;inset:0;width:100%;height:100%}
.hero-media img{object-fit:cover;object-position:center 62%}
/* portrait screens see a third of the photo's width: centred, that third is mostly the out-of-focus sofa back;
   78 % keeps the kitchen, the pendants and the floor in frame (same photo, phone crop only) */
@media (max-aspect-ratio:1/1){.hero-media img{object-position:78% 62%}}
/* one-shot settle on load (≤2.2 s, never loops — no pause control needed); none under reduced motion */
@media (prefers-reduced-motion:no-preference){
  .hero-media img{animation:hero-settle 2.2s var(--ease) both}
}
@keyframes hero-settle{from{transform:scale(1.04)}to{transform:scale(1)}}
.hero-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 78% 62% at 50% 50%,rgba(14,11,9,.62),rgba(14,11,9,.18) 70%,rgba(14,11,9,0) 100%),
    linear-gradient(to top,rgba(14,11,9,.80) 0%,rgba(14,11,9,.42) 42%,rgba(14,11,9,.30) 70%,rgba(14,11,9,.55) 100%);
}
.hero-full::after{  /* the roof wedge — logo geometry */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(34px,5vw,66px);z-index:1;
  background:var(--paper);clip-path:var(--roof);pointer-events:none;
}
.hero-full-inner{position:relative;z-index:3;width:100%;max-width:800px;min-width:0;display:flex;flex-direction:column;align-items:center}
.eyebrow-light{color:#fff;justify-content:center;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.eyebrow-light::before{background:var(--red)}
.hero-full h1{
  color:#fff;font-weight:420;font-size:clamp(38px,6.4vw,82px);line-height:1.03;letter-spacing:-.02em;
  text-shadow:0 2px 28px rgba(0,0,0,.35);max-width:15ch;
}
.hero-full h1 .accent{
  font-style:italic;font-weight:380;
  text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:max(2px,.032em);
  text-underline-offset:.16em;text-decoration-skip-ink:none;
}
.hero-full .lead{color:rgba(255,255,255,.92);max-width:46ch;margin:22px 0 32px;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.hero-search{width:min(580px,100%);min-width:0}
.hero-hint{color:rgba(255,255,255,.88);font-size:15px;margin:20px 0 0;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero-hint,.cta-band p{text-wrap:balance}
.hero-hint a{color:#fff;white-space:nowrap}
.hero-hint a:focus-visible{outline-color:#fff}

/* ---------- civic search (the one job) ---------- */
.search{position:relative;width:100%;max-width:580px;text-align:left}
.search-box{
  display:flex;align-items:stretch;gap:6px;min-height:56px;padding:4px;
  background:var(--card);border:1px solid var(--line-field);border-radius:var(--r-md);
  box-shadow:var(--shadow-1);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.hero-search .search-box{border-color:transparent;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
@media (hover:hover) and (pointer:fine){.search-box:hover:not(:focus-within){border-color:var(--ink-3);box-shadow:var(--shadow-2)}}
.search-box:focus-within{border-color:var(--ink);box-shadow:0 0 0 2px var(--red),var(--shadow-1)}
.hero-search .search-box:focus-within{box-shadow:0 0 0 3px var(--red),0 24px 60px -20px rgba(0,0,0,.6)}
.search-field{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 8px 0 14px;cursor:text}
.search-field label{font:600 14px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.search-field label{position:absolute;left:14px;top:6px;pointer-events:none}
.search-field input{
  width:100%;min-width:0;height:48px;border:0;outline:0;background:transparent;padding:18px 0 0;margin:0;
  font:500 20px/1.3 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.search-field input::placeholder{color:#A69E94;font-weight:400;letter-spacing:0}
.search-box .btn{flex:none;min-height:48px;border-radius:8px;padding:0 22px;gap:0;white-space:pre}
.search-box .btn .w2{display:inline}
@media (max-width:420px){.search-box .btn .w2{display:none}.search-box .btn{padding:0 18px}}
.search-panel{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:40;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-pop);
  overflow:hidden;display:none;
}
.search-panel.open{display:block;animation:pop-in var(--t) var(--ease) both}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
.search-msg{position:relative;margin:0;padding:16px 18px 16px 44px;color:var(--ink);font:400 15px/1.5 var(--sans)}
.search-msg::before{content:"";position:absolute;left:18px;top:23px;width:16px;height:10px;background:var(--red);clip-path:var(--roof)}
.search-msg.is-invalid::before{background:var(--ink-3)}
.search-nojs{display:block;margin-top:8px;background:var(--card);border-radius:var(--r-md);box-shadow:var(--shadow-pop)}
.search-msg a{color:var(--red-text)}
/* the reveal card: one link, a house-shaped photo (roof peak at 36 %) */
.reveal-card{
  display:flex;align-items:center;gap:16px;padding:14px 16px 14px 14px;text-decoration:none;color:var(--ink);
  transition:background-color var(--t-fast) var(--ease);
}
.reveal-card:focus-visible{outline-offset:-3px;border-radius:var(--r-md)}
.reveal-card .rc-ph{flex:none;width:84px;height:72px;background:var(--paper-2);clip-path:polygon(0 34%,36% 0,100% 34%,100% 100%,0 100%);overflow:hidden}
.reveal-card .rc-ph img{width:100%;height:100%;object-fit:cover}
.reveal-card .rc-body{flex:1;min-width:0}
.reveal-card .rc-k{display:block;font:600 12.5px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--red-text)}
.reveal-card .rc-title{display:block;font:500 20px/1.2 var(--serif);margin-top:4px;overflow-wrap:break-word}
.reveal-card .rc-sub{display:block;font-size:14px;color:var(--ink-2);margin-top:3px}
.reveal-card .rc-go{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;transition:transform var(--t) var(--ease),background-color var(--t-fast) var(--ease)}
.reveal-card .rc-go svg{width:18px;height:18px}
.reveal-card:active{background:var(--paper-2)}
.reveal-card:active .rc-go{background:var(--red-deep);transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .reveal-card:hover{background:var(--paper)}
  .reveal-card:hover .rc-go{background:var(--red-deep);transform:translateX(2px)}
}
@keyframes ifypulse{0%{box-shadow:0 0 0 0 rgba(230,0,0,.55)}70%{box-shadow:0 0 0 14px rgba(230,0,0,0)}100%{box-shadow:0 0 0 0 rgba(230,0,0,0)}}
.search.pulse .search-box{animation:ifypulse 1.2s var(--ease) 1}

/* ---------- home: the journey (3 steps) ---------- */
.journey{padding-block:clamp(56px,7vw,96px) clamp(56px,8vw,104px)}
.journey .section-head{margin-inline:auto;text-align:center}
.journey .section-head .eyebrow{justify-content:center}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);counter-reset:step}
.steps{align-items:stretch}
.step{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto 1fr;gap:6px 18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);padding:24px 24px 26px}
.step p{grid-column:1 / -1}
.step .n,.step h3{align-self:baseline}   /* the numeral and the title read as one line */
.step .n{
  display:grid;place-items:end center;width:52px;height:46px;margin:0;padding-bottom:6px;
  background:var(--red-tint);clip-path:polygon(0 38%,36% 0,100% 38%,100% 100%,0 100%);
  font:italic 500 21px/1 var(--serif);color:var(--red-text);font-variant-numeric:lining-nums;
}
.step h3{font-size:22px;margin:0}
.step p{margin-top:10px!important}
.step p{margin:0;color:var(--ink-2);font-size:16.5px}
.step .btn-text{margin-top:14px}

/* ---------- home: about (dark band) ---------- */
.about-wrap{padding-block:0}
.about{background:var(--ink);color:var(--on-dark);border-radius:var(--r-lg);margin-inline:var(--pad);position:relative;overflow:hidden}
@media(min-width:1280px){.about{margin-inline:auto;max-width:calc(var(--container) + 40px)}}
.about .inner{max-width:var(--container);margin-inline:auto;padding:clamp(48px,7vw,96px) clamp(24px,5vw,72px);display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,80px)}
.about .eyebrow{color:var(--red-on-dark)}
.about h2{color:#fff}
.about .lead{color:var(--on-dark)}
.about p{color:var(--on-dark-2);margin:0 0 16px}
.facts-dark{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0}
.facts-dark li{display:flex;flex-direction:column;gap:2px;padding:16px 0;border-top:1px solid var(--line-dark)}
.facts-dark b{font:500 30px/1.1 var(--serif);color:#fff;letter-spacing:-.01em;text-wrap:balance}
.facts-dark span{font-size:15px;color:var(--on-dark-3)}
.about .sig{display:flex;align-items:center;gap:16px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line-dark)}
.about .sig img{width:73px;height:36px}
.about .sig span{font-size:15px;color:var(--on-dark-3)}

/* ---------- apply band (home) + closing band (unit) ---------- */
.apply{padding-block:clamp(16px,3vw,40px)}
.apply-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;padding:clamp(32px,5vw,52px) clamp(24px,5vw,56px);background:var(--paper-2);border-radius:var(--r-lg)}
.apply-band h2{font-size:clamp(26px,3vw,36px)}
.apply-band p{margin:10px 0 0;color:var(--ink-2);max-width:56ch}
.cta-band{
  position:relative;background:var(--red);border-radius:var(--r-lg);color:#fff;margin-top:clamp(56px,8vw,96px);
  padding:clamp(44px,6vw,72px) var(--pad) clamp(40px,5vw,60px);text-align:center;overflow:hidden;
}
.cta-band::before{content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(16px,2.6vw,30px);background:var(--paper);clip-path:polygon(0 0,100% 0,100% 0,36% 100%,0 0)}
.cta-band h2{color:#fff;font-size:clamp(28px,3.4vw,40px);margin-bottom:10px}
.cta-band p{color:#fff;margin:0 auto 26px;max-width:52ch}
.cta-band .btn{background:#fff;color:var(--red-text);border-color:#fff}
.cta-band .btn{white-space:nowrap;max-width:100%}
@media (max-width:480px){.cta-band{padding-inline:12px}.cta-band .btn{padding:0 18px;font-size:15px;gap:8px}}
@media (max-width:359px){.cta-band .btn{white-space:normal}}
.cta-band .btn:active{background:var(--paper-2)}
.cta-band :focus-visible{outline-color:#fff}
@media (hover:hover) and (pointer:fine){.cta-band .btn:hover{background:var(--paper)}}

/* ---------- home: contact ---------- */
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,72px);align-items:start}
.contact-info{list-style:none;margin:28px 0 0;padding:0}
.contact-info li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
.contact-info li:last-child{border-bottom:1px solid var(--line)}
.contact-info .k{font:600 13px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.contact-info .v{font-size:17px;color:var(--ink);overflow-wrap:anywhere;text-wrap:balance}
.contact-info a.v{display:inline-flex;align-items:center;min-height:var(--touch);margin-block:-10px;font-weight:500}
@media (hover:hover) and (pointer:fine){.contact-info a.v:hover{color:var(--red-text);text-decoration-color:currentColor}}
.contact-info a.v:active{color:var(--red-deep)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px)}
.panel h2{font-size:24px;margin-bottom:16px}

/* ---------- form fields (contact form; same grammar as booking + rental form) ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin:0 0 18px}
.field label{font:600 14.5px/1.3 var(--sans);color:var(--ink)}
.field .opt{font-weight:400;color:var(--ink-3)}
.field input,.field textarea{
  width:100%;min-height:var(--h-control);padding:11px 14px;
  font:400 16px/1.45 var(--sans);color:var(--ink);background:var(--card);
  border:1px solid var(--line-field);border-radius:var(--r-control);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.field textarea{resize:vertical;min-height:132px}
@media (hover:hover) and (pointer:fine){.field input:hover,.field textarea:hover{border-color:var(--ink-2)}}
#contact-form{--focus:2px solid var(--ink)}   /* in a form red means « error »: a valid focused field gets the ink ring */
.field input:focus-visible,.field textarea:focus-visible{outline:var(--focus);outline-offset:1px;border-color:var(--ink)}
.field [aria-invalid="true"]{border-color:var(--red-text);box-shadow:inset 0 0 0 1px var(--red-text)}
.field .msg{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;line-height:1.4;color:var(--red-text);margin:0}
.field .msg::before{content:"!";flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--red-text);color:#fff;font:700 12px/1 var(--sans)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}
.cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.notice{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-control);padding:12px 14px;font-size:15px;line-height:1.5;margin:0 0 16px}
.notice-err{color:#8F1A10;background:#FDEFED;border:1px solid #EDB7AE}
.notice-ok{color:#0A5C35;background:#EDF7F0;border:1px solid #A9D7BA}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.form-foot .small{color:var(--ink-3);margin:0}
.cf-success{text-align:center;padding:clamp(20px,4vw,40px) 8px}
.cf-success .ok-mark{width:56px;height:50px;margin:0 auto 18px;display:grid;place-items:end center;padding-bottom:9px;background:#E6F3EA;clip-path:polygon(0 38%,36% 0,100% 38%,100% 100%,0 100%);color:#0A5C35}
.cf-success .ok-mark svg{width:22px;height:22px}
.cf-success h3{font-size:26px;margin:0 0 8px}
.cf-success h3:focus{outline:none}
.cf-success h3:focus-visible{outline:var(--focus);outline-offset:4px;border-radius:4px}
.cf-success p{color:var(--ink-2);margin:0 auto;max-width:42ch}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--on-dark-2);margin-top:clamp(72px,10vw,128px);position:relative;font-size:15px}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:calc(1px - clamp(22px,3.4vw,42px));height:clamp(22px,3.4vw,42px);
  background:var(--ink);clip-path:var(--roof);
}
.site-footer .inner{
  max-width:var(--container);margin-inline:auto;padding:clamp(28px,4vw,48px) var(--pad) clamp(28px,4vw,44px);
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);
}
.site-footer .f-logo{width:89px;height:44px;margin-bottom:18px}
.site-footer p{margin:0;max-width:34ch;color:var(--on-dark-2);line-height:1.6}
.site-footer h2{font:600 13px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-3);margin:0 0 12px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.site-footer li{font-size:15px;line-height:1.5;color:var(--on-dark-2)}
.site-footer li.txt{padding:10px 0;text-wrap:balance}
.f-link{
  display:inline-flex;align-items:center;min-height:var(--touch);color:var(--on-dark);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:rgba(246,242,236,.28);border-radius:4px;
  transition:color var(--t-fast) var(--ease),text-decoration-color var(--t-fast) var(--ease);overflow-wrap:anywhere;
}
.f-link:active{color:#fff;text-decoration-color:var(--red)}
.site-footer :focus-visible{outline-color:var(--red-on-dark)}
@media (hover:hover) and (pointer:fine){.f-link:hover{color:#fff;text-decoration-color:var(--red-on-dark)}}
.site-footer .legal{
  max-width:var(--container);margin-inline:auto;padding:14px var(--pad) 26px;
  border-top:1px solid var(--line-dark);font-size:13.5px;color:var(--on-dark-3);
  display:flex;justify-content:space-between;align-items:center;gap:4px 24px;flex-wrap:wrap;
}
.site-footer .legal .f-link{font-size:13.5px;color:var(--on-dark-3);text-decoration-color:rgba(163,155,144,.4)}
.site-footer .legal .sep{margin:0 8px;color:#6F675E}
@media (hover:hover) and (pointer:fine){.site-footer .legal .f-link:hover{color:#fff;text-decoration-color:var(--red-on-dark)}}
.site-footer .legal .f-link:active{color:var(--on-dark-2);text-decoration-color:var(--red)}
.site-footer .wordmark{
  max-width:var(--container);margin-inline:auto;padding:clamp(40px,6vw,72px) var(--pad) 0;
  font:400 clamp(44px,8vw,112px)/.95 var(--serif);letter-spacing:-.03em;color:rgba(255,255,255,.12);
  user-select:none;white-space:nowrap;overflow:hidden;
}
.site-footer .wordmark::before{content:"Gestion IFY"}
.site-footer .wordmark::after{content:".";color:var(--red)}

/* ---------- unit page — a property sheet ---------- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;padding-top:clamp(14px,2vw,24px);font-size:15px;color:var(--ink-3)}
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);min-width:var(--touch);color:var(--ink-2)}
.crumbs .sep{color:var(--line-strong)}
.unit-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end;padding:6px 0 0}
.unit-head h1{font-size:clamp(36px,5vw,62px);overflow-wrap:break-word}
.unit-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px;font-size:16px;color:var(--ink-2)}
.unit-sub .dot{width:4px;height:4px;border-radius:50%;background:var(--line-strong)}
.unit-lede{margin:16px 0 0;max-width:58ch;font-size:clamp(18px,1.5vw,19.5px);color:var(--ink-2)}
.chip{
  display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 13px;border-radius:var(--r-pill);
  font:600 13.5px/1 var(--sans);letter-spacing:.01em;margin-bottom:16px;
}
.chip-ok{background:var(--red-tint);color:var(--red-text)}
.chip-ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.chip-muted{background:var(--paper-2);color:var(--ink-2)}
.chip-muted::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink-3)}
.unit-head .actions{display:flex;gap:12px;flex-wrap:wrap}
.unit-head.has-photo{grid-template-columns:minmax(0,1fr) minmax(0,var(--solo-w,520px));grid-template-areas:"text photo" "cta photo";align-items:center;gap:20px clamp(28px,5vw,64px)}
.unit-head.has-photo .uh-text{grid-area:text;align-self:end}
.unit-head.has-photo .head-cta{grid-area:cta;align-self:start}
.unit-head.has-photo .g-solo{grid-area:photo;justify-self:end}
@media (max-width:1023px){
  .unit-head.has-photo{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "cta" "photo"}
  .unit-head.has-photo .g-solo{max-width:min(var(--solo-w),100%);justify-self:start}
}
@media (min-width:1024px){.unit-head .head-cta{display:none}}

/* gallery: a real button trigger + a tidy tile grid, « +N photos » when more than fit */
.gallery{margin-top:clamp(22px,3vw,34px);display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/* mosaic: the lead column never exceeds native × 1.15 (--lead-w, set per building by build.py) */
.g-mosaic{grid-template-columns:minmax(0,min(calc((100% - 10px) * 2 / 3),var(--lead-w,9999px))) minmax(0,1fr)}
.g-mosaic .g-main{aspect-ratio:var(--lead-ar,3/2)}
/* justified row (portrait/square façade, ≤3 photos): one height, widths ∝ aspect, curated order */
.g-row{display:flex;gap:10px;max-width:var(--row-max,none)}
.g-row .g-ritem{flex:var(--ar) var(--ar) 0;aspect-ratio:var(--ar);min-width:0;border-radius:var(--r-lg)}
/* portrait façade + 2×2 tiles */
.g-plead{grid-template-columns:min(calc(var(--lead-h) * var(--lead-ar)),46%) minmax(0,1fr)}
.g-plead .g-main{aspect-ratio:var(--lead-ar);max-height:var(--lead-h)}
.g-plead .g-thumbs{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.g-plead .g-thumbs[data-n="1"]{grid-template-columns:1fr;grid-template-rows:1fr}
.g-plead .g-thumbs[data-n="2"]{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.g-plead .g-thumbs[data-n="3"] .g-th:first-child{grid-column:1 / -1}
/* solo: one photo beside the title, boxed at its own aspect */
.g-solo{margin:0;width:100%;max-width:var(--solo-w)}
.g-solo .g-main{aspect-ratio:var(--solo-ar,3/2);border-radius:var(--r-lg)}
.g-main{
  position:relative;display:block;width:100%;aspect-ratio:3/2;padding:0;border:0;margin:0;
  border-radius:var(--r-lg);overflow:hidden;background:#2a2622;cursor:zoom-in;
}
.g-main picture{position:absolute;inset:0}
.g-main picture img{width:100%;height:100%;object-fit:cover;transition:opacity var(--t) var(--ease),transform var(--t-panel) var(--ease),filter var(--t-fast) var(--ease)}
.g-main .g-count{
  position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;
  border-radius:var(--r-pill);background:rgba(25,22,19,.72);color:#fff;font:600 13.5px/1 var(--sans);font-variant-numeric:tabular-nums;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.g-main .g-count svg{width:15px;height:15px}
.g-main:focus-visible{outline:var(--focus);outline-offset:3px}
.g-main:active picture img,.g-main:hover:active picture img{transform:scale(1);filter:brightness(.86)}
.g-thumbs{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px;height:0;min-height:100%}
.g-thumbs[data-n="1"],.g-thumbs[data-n="2"]{grid-template-columns:1fr}
.g-thumbs[data-n="3"] .g-th:first-child{grid-column:1 / -1}
.g-th{
  position:relative;display:block;min-height:0;padding:0;border:0;border-radius:var(--r-md);overflow:hidden;
  background:var(--paper-2);cursor:pointer;
}
.g-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-panel) var(--ease),opacity var(--t) var(--ease)}
.g-th::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 var(--ink);transition:box-shadow var(--t-fast) var(--ease)}
.g-th:focus-visible{outline:var(--focus);outline-offset:2px}
.g-th:active img{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .g-th:hover::after{box-shadow:inset 0 0 0 3px rgba(25,22,19,.6)}
  .g-th:hover img,.g-main:hover picture img{filter:brightness(.94)}
}
.g-th:active::after{box-shadow:inset 0 0 0 3px var(--ink)}
.g-th:active img{filter:brightness(.86)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .g-th:hover img{transform:scale(1.04)}
  .g-main:hover picture img{transform:scale(1.015)}
}
@media (prefers-reduced-motion:reduce){.g-th:active img,.g-main:active picture img{transform:none}}
.g-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(25,22,19,.6);color:#fff;font:600 16px/1.2 var(--sans);text-align:center;padding:8px}

/* lightbox — real modal dialog */
.lb{position:fixed;inset:0;z-index:120;display:none;flex-direction:column;background:rgba(17,14,12,.975);color:#fff;overscroll-behavior:contain}
.lb.open{display:flex;animation:lb-in var(--t-panel) var(--ease-std) both}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.lb-top{display:flex;align-items:center;gap:16px;padding:12px clamp(12px,3vw,24px);min-height:68px}
.lb-title{flex:1;min-width:0;font:500 17px/1.3 var(--serif);color:var(--on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:clip}
.lb-count{font:600 14.5px/1 var(--sans);font-variant-numeric:tabular-nums;color:#fff;letter-spacing:.04em}
.lb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 clamp(8px,8vw,96px) clamp(16px,3vw,32px);touch-action:pan-y}
.lb-stage picture{display:contents}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);user-select:none;-webkit-user-drag:none}
.lb.swapping .lb-stage img{opacity:0}
.lb-btn{
  flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.lb-btn svg{width:20px;height:20px}
.lb-btn:active{transform:scale(.95);background:rgba(255,255,255,.22)}
.lb-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.lb-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6)}}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px}
.lb-prev:active,.lb-next:active{transform:translateY(-50%) scale(.95)}
.lb-prev{left:clamp(8px,2vw,24px)}
.lb-next{right:clamp(8px,2vw,24px)}
.lb.single .lb-prev,.lb.single .lb-next,.lb.single .lb-count{display:none}
@media (max-width:720px){
  .lb-stage{padding:0 0 88px}
  .lb-prev,.lb-next{top:auto;bottom:18px;transform:none}
  .lb-prev:active,.lb-next:active{transform:scale(.95)}
  .lb-prev{left:calc(50% - 72px)}
  .lb-next{right:calc(50% - 72px)}
}

/* the sheet */
.unit-cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(32px,5vw,72px);margin-top:clamp(40px,6vw,72px);align-items:start}
.sheet > section{padding-block:0}
.sheet > * + *{margin-top:clamp(40px,5vw,56px)}
.sheet h2{font-size:clamp(26px,2.6vw,32px);margin:0 0 18px}
.units{display:grid;gap:16px}
.unit-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(20px,2.6vw,30px)}
.unit-card h3{font-size:22px;line-height:1.2}
.unit-card .unit-ref{margin-bottom:8px}
.facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:10px 0 0;padding:0;list-style:none;font:600 15px/1.3 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.facts li + li::before{content:"";display:inline-block;width:4px;height:4px;margin:0 12px;border-radius:50%;background:var(--line-strong);vertical-align:middle}
.unit-card .chip{margin:14px 0 0}
.unit-card .summary{margin:14px 0 0;color:var(--ink-2)}
.units-common{margin-top:16px;padding:clamp(18px,2.4vw,26px);border-radius:var(--r-panel);background:var(--paper-2)}
.units-common h3{font-size:19px;margin:0 0 14px}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 20px;margin:18px 0 0;padding:0}
.kv dt{padding:12px 0;border-top:1px solid var(--line);font:600 13px/1.6 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.kv dd{margin:0;padding:12px 0;border-top:1px solid var(--line);color:var(--ink);font-size:16px}
.kv dd ul{list-style:none;margin:0;padding:0}
.kv dd li + li{margin-top:4px}
@media (max-width:560px){.kv{grid-template-columns:1fr}.kv dt{padding-bottom:0}.kv dd{border-top:0;padding-top:4px}}
.feature-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.feature-list li{position:relative;padding-left:26px;color:var(--ink)}
.feature-list li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:8px;background:var(--red);clip-path:var(--roof)}
.feature-list.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
@media (max-width:640px){.feature-list.cols{grid-template-columns:1fr}}
.sheet-note{margin:14px 0 0;font-size:15px;color:var(--ink-3)}
.included{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.included li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--paper-2);font-size:15px;color:var(--ink)}
.included li::before{content:"";width:12px;height:7px;background:var(--red);clip-path:var(--roof)}
/* aside — the visit card */
.aside-sticky{position:sticky;top:calc(var(--header-h) + 24px)}
.visit-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);padding:26px 24px 24px;box-shadow:var(--shadow-1)}
.visit-card h2{font-size:22px;margin:0 0 4px}
.visit-card .addr{margin:0;color:var(--ink-2);font-size:16px}
.visit-card dl{margin:18px 0 20px;padding:0}
.visit-card dt{font:600 13px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:12px;border-top:1px solid var(--line)}
.visit-card dd{margin:2px 0 12px;font-size:16px;color:var(--ink)}
.visit-card dd a{font-weight:600}
.visit-card dd a.tel{display:inline-flex;align-items:center;min-height:var(--touch);margin-block:-10px}
.visit-card .btn-text{margin-top:6px}
/* neighbourhood photos (after the booking) */
.quartier{margin-top:clamp(56px,7vw,88px)}
.quartier h2{font-size:clamp(26px,2.6vw,32px);margin:0}
.q-grid{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.q-grid[data-n="1"]{grid-template-columns:minmax(0,320px)}
.q-grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px}
.q-grid[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:767px){
  .q-grid,.q-grid[data-n="2"],.q-grid[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .q-grid[data-n="3"] li:last-child{grid-column:1 / -1}   /* three photos: two, then one across — never an orphan */
}
.q-grid figure{margin:0}
.q-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md);background:var(--paper-2)}
.q-grid figcaption{margin-top:8px;font-size:15px;color:var(--ink-2);line-height:1.35}
.booking{margin-top:clamp(56px,8vw,96px);padding-block:0}
.quartier{padding-block:0}

/* ---------- form page shell + policy + 404 ---------- */
.form-intro{max-width:760px;margin-inline:auto;padding-block:clamp(36px,6vw,72px) 8px}
.form-intro .lead{max-width:60ch;margin:16px 0 0}
.form-shell{padding-top:24px}
.form-intro .lead a{color:var(--red-text)!important;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);transition:text-decoration-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);border-radius:3px}
@media (hover:hover) and (pointer:fine){.form-intro .lead a:hover{text-decoration-color:currentColor;color:var(--red-deep)!important}}
.form-intro .lead a:active{color:var(--ink)!important}
.policy-intro{max-width:760px;padding-block:clamp(36px,6vw,72px) clamp(24px,3vw,36px)}
.policy-intro .lead{margin:16px 0 0}
.policy-grid{display:grid;grid-template-columns:minmax(0,760px) 260px;justify-content:space-between;gap:56px;align-items:start}
.policy{max-width:760px;min-width:0}
.policy-toc{position:sticky;top:calc(var(--header-h) + 28px);padding-left:20px;border-left:1px solid var(--line)}
.policy-toc .toc-h{font:600 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.policy-toc ol{list-style:none;margin:0;padding:0}
.policy-toc a{display:flex;align-items:center;min-height:var(--touch);padding:6px 0;font-size:15px;line-height:1.35;color:var(--ink-2);text-decoration:none;border-radius:4px;transition:color var(--t-fast) var(--ease)}
.policy-toc a:active{color:var(--red-deep)}
@media (hover:hover) and (pointer:fine){.policy-toc a:hover{color:var(--red-text)}}
@media (max-width:1023px){.policy-grid{grid-template-columns:minmax(0,1fr)}.policy-toc{display:none}}
.policy .panel{margin-bottom:22px}
.policy .feature-list li{color:var(--ink-2)}
.policy .feature-list strong{color:var(--ink)}
.policy .stamp{margin:14px 0 0;color:var(--ink-3);font-size:15px}
.err-wrap{min-height:calc(78svh - var(--header-h));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-block:clamp(48px,8vw,96px)}
.err-wrap .code{font:italic 400 clamp(96px,16vw,184px)/1 var(--serif);color:var(--red-text);letter-spacing:-.04em}
.err-wrap h1{font-size:clamp(26px,3.2vw,38px);margin:10px 0 12px}
.err-wrap p{color:var(--ink-2);max-width:48ch;margin:0}
.err-wrap .en-line{margin-top:10px;font-size:15px;color:var(--ink-3)}
.err-wrap .search{margin:30px auto 0}
.err-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}

/* ---------- decorative reveal (only on images/decor; content is never hidden) ---------- */
@media (prefers-reduced-motion:no-preference){
  html:not(.no-js) .rv{opacity:0;transition:opacity .5s var(--ease)}
  html:not(.no-js) .rv.in{opacity:1}
}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .unit-cols{grid-template-columns:minmax(0,1fr)}
  .aside-sticky{position:static}
  .about .inner{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
  .step{padding:22px 22px 24px}
}
@media (max-width:767px){
  .g-mosaic{grid-template-columns:minmax(0,1fr)}
  .g-plead{grid-template-columns:minmax(0,1fr)}
  .g-plead .g-main{max-height:none;width:min(100%,calc(var(--lead-h) * var(--lead-ar)))}
  .g-plead .g-thumbs,.g-plead .g-thumbs[data-n]{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto}
  .g-plead .g-thumbs[data-n="3"] .g-th:first-child{grid-column:auto}
  .g-row{gap:6px;flex-wrap:wrap}
  .g-row .g-ritem:first-child{flex:1 1 100%;aspect-ratio:var(--ar-m)}   /* façade full width on phones (≤6 % crop) */
  .g-thumbs,.g-thumbs[data-n]{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;height:auto;min-height:0}
  .g-mosaic .g-th,.g-plead .g-th{aspect-ratio:4/3}
  .gallery .g-thumbs[data-n="1"]{grid-template-columns:1fr}
  .gallery .g-thumbs[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-thumbs[data-n="3"] .g-th:first-child{grid-column:auto}
  .g-more{font-size:14px}
  .g-main .g-count{right:10px;bottom:10px}
  .unit-head{grid-template-columns:minmax(0,1fr)}
  .unit-head .actions .btn{flex:1 1 auto}
  .apply-band{grid-template-columns:1fr}
  .site-footer .inner{grid-template-columns:1fr}
  .contact-info li{grid-template-columns:96px minmax(0,1fr)}
}

/* ---------- forced colours: keep state legible ---------- */
.logo-fc{display:none}
@media (forced-colors:active){
  .logo-rev,.f-logo:not(.logo-fc),.sig img:not(.logo-fc){display:none!important}
  .logo-col,.logo-fc{display:block!important}
  .btn,.lang-seg,.search-box,.field input,.field textarea,.nav-toggle{border:1px solid ButtonText}
  .g-th[aria-current="true"]::after{box-shadow:none;outline:3px solid Highlight;outline-offset:-3px}
  .lang-seg .is-current{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .eyebrow::before,.feature-list li::before,.included li::before{forced-color-adjust:none;background:CanvasText}
}

/* ---------- print (policy / sheet) ---------- */
@media print{
  .rv{opacity:1!important;transform:none!important}
  .gallery .g-thumbs,.g-count,.g-row .g-ritem:nth-child(n+2),.visit-card .btn,.visit-card .btn-text,.head-cta,.lang-seg{display:none!important}
  .gallery,.g-mosaic{display:block}
  .g-main{max-width:100%;break-inside:avoid}
  .unit-card,.panel{break-inside:avoid;box-shadow:none}
  .site-header,.site-footer,.skip,.lb,.cta-band,.gallery .g-thumbs,.nav-toggle,.policy-toc{display:none!important}
  .booking{display:block!important;break-inside:avoid}   /* booking.css hides the widget and shows .bkw-print (phone/email) */
  .policy-grid{display:block}
  body{padding-top:0;background:#fff}
  .unit-cols{grid-template-columns:1fr}
}

/* ---------- press states last: at equal specificity :active must win over the :hover blocks above ---------- */
.btn-text:active{color:var(--red-deep)}
.nav-link:active{color:var(--ink);opacity:.62}
.lang-seg a:active{background:var(--line)}
.f-link:active{color:var(--on-dark-2);text-decoration-color:var(--red)}
.policy-toc a:active{color:var(--red-deep)}
.btn-red:active{background:#A30000}
.btn-ghost:active{background:var(--paper-2);border-color:var(--ink)}
.cta-band .btn:active{background:var(--paper-2)}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .nav-link:active{color:rgba(255,255,255,.7)}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .btn-ghost:active{background:rgba(255,255,255,.24)}
html:not(.no-js) body.hdr-clear .site-header:not(.scrolled):not(.menu-open) .lang-seg a:active{background:rgba(255,255,255,.24)}
/* ---------- inline visit-booking widget ---------- */
.booking .section-head{text-align:center;max-width:680px;margin-left:auto;margin-right:auto;margin-bottom:22px}
.booking .h-section{font-size:clamp(28px,3vw,38px)}
.bkw-noscript{text-align:center;padding:22px}
.bkw-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.bkw-print{display:none}
@media print{
  .ify-book>.bkw{display:none!important}
  .ify-book>.bkw-print{display:block;margin:0;padding:14px 18px;border:1px solid #999;border-radius:10px;font:500 15px/1.5 var(--sans);color:#000;text-align:center}
}
.booking .eyebrow{justify-content:center}

/* widget-local tokens (derived from the shared :root system; nothing is written to :root) */
.ify-book{
  --bk-ink:var(--ink,#191613); --bk-ink-2:var(--ink-2,#57504A); --bk-ink-3:var(--ink-3,#756D63);
  --bk-card:var(--card,#fff); --bk-paper:var(--paper,#FAF8F4);
  --bk-line:var(--line,#E8E1D6); --bk-field:var(--line-field,#8C8378);
  --bk-red:var(--red,#E60000); --bk-red-text:var(--red-text,#C40000);
  --bk-dim:var(--ink-3,#756D63); /* day numbers without a slot: 5.1:1 on white; regular weight + no dot vs ink 600 + dot */
  --bk-hover:#F3EFE8;          /* hover wash on white */
  --bk-warn-bg:#FDF3F1; --bk-warn-line:#EDC4BC;
  --bk-ease:var(--ease,cubic-bezier(.23,1,.32,1)); --bk-t:var(--t-fast,140ms); --bk-tp:var(--t,180ms);
  --bk-touch:var(--touch,44px); --bk-ctl:var(--h-control,48px); --bk-r:var(--r-control,10px);
  --bk-focus:2px solid var(--bk-red);
  max-width:880px;margin:0 auto;color:var(--bk-ink);font-family:var(--sans)
}
.ify-book .bkw-num,.ify-book .bkw-cell,.ify-book .bkw-time,.ify-book .bkw-step-n,.ify-book .bkw-day-title,
.ify-book .bkw-sum-v,.ify-book .bkw-ok-w,.ify-book .bkw-jump-v,.ify-book .bkw-input{font-variant-numeric:tabular-nums}
.ify-book :focus-visible{outline:var(--bk-focus);outline-offset:2px}
.ify-book button{font-family:var(--sans)}
.ify-book [hidden]{display:none!important}
.bkw-ic{display:inline-flex;flex:none}
.bkw-ic svg{width:100%;height:100%;display:block}
.bkw-nav .bkw-ic{width:100%;height:100%}
.bkw-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- card + panes ---------- */
.bkw{position:relative;background:var(--bk-card);border:1px solid var(--bk-line);border-radius:20px;box-shadow:var(--shadow-2);padding:clamp(14px,3.4vw,32px)}
.bkw-panes{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.bkw-pane{min-width:0;padding-top:0;padding-bottom:0}   /* header offset: html scroll-padding-top (style.css) */
.bkw-step-form{margin-top:28px;padding-top:28px;padding-bottom:0;border-top:1px solid var(--bk-line);animation:bkw-in var(--bk-tp) var(--bk-ease) both}
.bkw-step-form.is-pending{height:0;margin:0;padding:0;border:0;overflow:hidden;visibility:hidden;animation:none}
.bkw-step-h{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:400 19px/1.25 var(--serif);letter-spacing:-.005em;color:var(--bk-ink)}
.bkw-step-n{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--bk-field);display:inline-grid;place-items:center;font:600 12px/1 var(--sans);color:var(--bk-ink-2)}
@media (min-width:720px){
  .bkw-panes{grid-template-columns:332px minmax(0,1fr);gap:0}
  .bkw-pane-cal{padding-right:24px;border-right:1px solid var(--bk-line)}
  .bkw-pane-times{padding-left:24px}
}
@media (min-width:860px){
  .bkw-panes{grid-template-columns:368px minmax(0,1fr)}
  .bkw-pane-cal{padding-right:32px}
  .bkw-pane-times{padding-left:32px}
}

/* ---------- calendar ---------- */
.bkw-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.bkw-cal-title{margin:0;font:500 18px/1.2 var(--serif);color:var(--bk-ink);letter-spacing:-.005em;text-align:center}
.bkw-cal-title .bkw-num{font:500 15px/1 var(--sans);color:var(--bk-ink-2);margin-left:2px}
.bkw-nav{flex:none;width:var(--bk-touch);height:var(--bk-touch);padding:12px;border:1px solid var(--bk-line);border-radius:12px;background:var(--bk-card);color:var(--bk-ink);cursor:pointer;
  transition:background-color var(--bk-t) var(--bk-ease),border-color var(--bk-t) var(--bk-ease),color var(--bk-t) var(--bk-ease),transform var(--bk-t) var(--bk-ease)}
.bkw-nav:active:not(:disabled){transform:scale(.96);background:var(--bk-hover)}
.bkw-nav:disabled{color:#CFC6B9;border-color:transparent;background:transparent;cursor:not-allowed}
.bkw-grid{width:100%;border-collapse:collapse;table-layout:fixed}
.bkw-grid th{padding:8px 0 6px;font:600 11.5px/1 var(--sans);letter-spacing:.02em;color:var(--bk-ink-3);text-align:center}
.bkw-grid td{padding:1px 0;text-align:center}
.bkw-cell{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:46px;height:var(--bk-touch);margin:0 auto;padding:0;border:0;border-radius:12px;background:transparent;
  font:400 15px/1 var(--sans);color:var(--bk-dim);cursor:pointer;
  transition:background-color var(--bk-t) var(--bk-ease),color var(--bk-t) var(--bk-ease),box-shadow var(--bk-t) var(--bk-ease)}
.bkw-cell.open{color:var(--bk-ink);font-weight:600}
.bkw-cell.open::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--bk-red)}
.bkw-cell.today{box-shadow:inset 0 0 0 1.5px var(--bk-field)}
.bkw-cell.sel,.bkw-cell.sel.today{background:var(--bk-ink);color:#fff;box-shadow:none}
.bkw-cell.sel::after{background:#fff}
.bkw-cell:active{background:#ECE6DC}
.bkw-cell.sel:active{background:#000}
.bkw-cell:focus-visible{z-index:1;border-radius:12px}

/* ---------- time slots ---------- */
.bkw-fade{animation:bkw-in var(--bk-tp) var(--bk-ease) both}
.bkw-times-h{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 14px;margin:0 0 12px}
.bkw-day-title{margin:0;font:600 16px/1.3 var(--sans);color:var(--bk-ink)}
.bkw-tz{display:inline-flex;align-items:center;gap:6px;font:500 13px/1.2 var(--sans);color:var(--bk-ink-3)}
.bkw-tz .bkw-ic{width:15px;height:15px}
.bkw-slots{position:relative;contain:content;max-height:300px;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:2px 6px 0;scrollbar-width:thin;scrollbar-color:var(--bk-field) transparent}
/* bottom fade without JS: a sticky gradient that rests over the list's own bottom padding once the end is reached */
.bkw-slots::after{content:"";position:sticky;bottom:0;display:block;height:24px;pointer-events:none;background:linear-gradient(rgba(255,255,255,0),var(--bk-card))}
.bkw-group+.bkw-group{margin-top:14px}
.bkw-group-h{position:sticky;top:-2px;z-index:2;margin:0 -6px;padding:8px 6px;background:var(--bk-card);font:600 11.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--bk-ink-3)}
.bkw-chips{display:grid;gap:8px}
/* chips come in chunks of 12: off-screen chunks skip layout + paint (content-visibility); the 4px padding/-4px
   margin keeps the 2px focus ring + offset inside the chunk's paint clip */
.bkw-chunk{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin:-4px;padding:4px;content-visibility:auto;contain-intrinsic-size:auto 156px}
.bkw-time{height:var(--bk-touch);padding:0 8px;border:1px solid var(--bk-field);border-radius:var(--bk-r);background:var(--bk-card);
  font:500 15px/1 var(--sans);color:var(--bk-ink);white-space:nowrap;cursor:pointer;
  transition:background-color var(--bk-t) var(--bk-ease),border-color var(--bk-t) var(--bk-ease),color var(--bk-t) var(--bk-ease),transform var(--bk-t) var(--bk-ease)}
.bkw-time:active{transform:scale(.98);background:var(--bk-hover)}
.bkw-time.sel,.bkw-time.sel:active{background:var(--bk-ink);border-color:var(--bk-ink);color:#fff}
.bkw-time:focus-visible{border-radius:var(--bk-r)}
.bkw-hint{margin:0 0 14px;font:400 15px/1.55 var(--sans);color:var(--bk-ink-2);max-width:42ch}
.bkw-jump{display:flex;align-items:center;gap:10px;width:100%;max-width:360px;min-height:56px;padding:10px 14px 10px 16px;border:1px solid var(--bk-field);border-radius:12px;background:var(--bk-card);color:var(--bk-ink);text-align:left;cursor:pointer;
  transition:background-color var(--bk-t) var(--bk-ease),border-color var(--bk-t) var(--bk-ease)}
.bkw-jump-l{display:block;font:500 12.5px/1.3 var(--sans);color:var(--bk-ink-3)}
.bkw-jump-v{display:block;font:600 15.5px/1.3 var(--sans)}
.bkw-jump>span:first-child{flex:1;display:flex;flex-direction:column}
.bkw-jump .bkw-ic{width:18px;height:18px;margin-left:auto;color:var(--bk-ink-2);transition:transform var(--bk-t) var(--bk-ease)}
.bkw-jump:active{background:var(--bk-hover)}
.bkw-jump:focus-visible{border-radius:12px}

/* ---------- loading placeholders (still — no shimmer, no spinner) ---------- */
.bkw-skel-bar{height:20px;width:46%;margin:12px auto 18px;border-radius:6px;background:var(--bk-hover)}
.bkw-skel-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.bkw-skel-grid span{height:38px;border-radius:10px;background:var(--bk-paper)}

/* ---------- summary + form ---------- */
.bkw-summary{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;margin:0 0 24px;padding:14px 12px 14px 18px;border:1px solid var(--bk-line);border-radius:14px;background:var(--bk-paper);
  transition:background-color var(--bk-tp) var(--bk-ease),border-color var(--bk-tp) var(--bk-ease)}
.bkw-sum-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.bkw-sum-l{font:600 11.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--bk-ink-2)}
.bkw-sum-v{font:600 16px/1.35 var(--sans);color:var(--bk-ink)}
.bkw-sum-v:empty{display:none}
.bkw-sum-b{font:400 14.5px/1.4 var(--sans);color:var(--bk-ink-2)}
.bkw-sum-w{display:flex;align-items:flex-start;gap:7px;margin-top:4px;font:500 14px/1.45 var(--sans);color:var(--bk-red-text)}
.bkw-sum-w .bkw-ic,.bkw-msg .bkw-ic{width:16px;height:16px;margin-top:2px}
.bkw-summary.warn{background:var(--bk-warn-bg);border-color:var(--bk-warn-line)}
.bkw-link{flex:none;min-height:var(--bk-touch);padding:0 12px;border:0;border-radius:var(--bk-r);background:transparent;font:600 15px/1 var(--sans);color:var(--bk-ink);
  text-decoration:underline;text-decoration-color:var(--bk-field);text-underline-offset:4px;cursor:pointer;transition:text-decoration-color var(--bk-t) var(--bk-ease),background-color var(--bk-t) var(--bk-ease)}
.bkw-link:active{background:var(--bk-hover)}
.bkw-form{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media (min-width:600px){.bkw-form{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}}
.bkw-form .full,.bkw-field.full{grid-column:1/-1}
.bkw-field{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0}
fieldset.bkw-field{display:block}
fieldset.bkw-field>.bkw-lbl{float:none;margin:0 0 8px;padding:0}
.bkw-lbl{display:block;font:600 14.5px/1.3 var(--sans);color:var(--bk-ink)}
.bkw-opt{margin-left:7px;font-weight:400;color:var(--bk-ink-3)}
.bkw-input{width:100%;min-height:var(--bk-ctl);padding:0 14px;border:1px solid var(--bk-field);border-radius:var(--bk-r);background:var(--bk-card);
  font:400 16px/1.3 var(--sans);color:var(--bk-ink);-webkit-appearance:none;appearance:none;
  transition:border-color var(--bk-t) var(--bk-ease),box-shadow var(--bk-t) var(--bk-ease),background-color var(--bk-t) var(--bk-ease)}
textarea.bkw-input{min-height:112px;padding:12px 14px;line-height:1.5;resize:vertical}
.bkw-input::placeholder{color:var(--bk-ink-3);opacity:1}
.bkw-input:focus-visible{border-color:var(--bk-ink);border-radius:var(--bk-r)}
.bkw-field.bad .bkw-input,.bkw-field.bad .bkw-seg{border-color:var(--bk-red-text);box-shadow:inset 0 0 0 1px var(--bk-red-text)}
.bkw-msg{display:flex;align-items:flex-start;gap:7px;margin:0;font:500 14px/1.45 var(--sans);color:var(--bk-red-text)}
fieldset.bkw-field>.bkw-msg{margin-top:8px}
.bkw-sub{margin-top:14px}
.bkw-more{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:58px;padding:10px 14px 10px 16px;border:1px solid var(--bk-line);border-radius:12px;background:var(--bk-paper);color:var(--bk-ink);text-align:left;cursor:pointer;
  transition:border-color var(--bk-t) var(--bk-ease),background-color var(--bk-t) var(--bk-ease)}
.bkw-more-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.bkw-more-t{font:600 15px/1.3 var(--sans)}
.bkw-more-h{font:400 13.5px/1.4 var(--sans);color:var(--bk-ink-3)}
.bkw-more[aria-expanded="true"] .bkw-chev{transform:rotate(180deg)}
.bkw-more:active{background:var(--bk-hover)}
.bkw-more:focus-visible{border-radius:12px}
.bkw-more-body{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;animation:bkw-in var(--bk-tp) var(--bk-ease) both}
@media (min-width:600px){.bkw-more-body{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}}

/* segmented radio groups (real radios; the face carries the visual state + focus ring) */
.bkw-seg{display:flex;gap:4px;width:100%;max-width:420px;padding:3px;border:1px solid var(--bk-field);border-radius:12px;background:var(--bk-paper)}
.bkw-segbtn{position:relative;flex:1 1 0;display:flex;min-width:0;cursor:pointer}
.bkw-segbtn input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.bkw-seg-face{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:9px;font:500 15px/1.2 var(--sans);color:var(--bk-ink-2);text-align:center;
  transition:background-color var(--bk-t) var(--bk-ease),color var(--bk-t) var(--bk-ease),box-shadow var(--bk-t) var(--bk-ease)}
.bkw-segbtn input:checked+.bkw-seg-face{background:var(--bk-ink);color:#fff;box-shadow:0 1px 2px rgba(25,22,19,.18)}
.bkw-segbtn input:focus-visible+.bkw-seg-face{outline:var(--bk-focus);outline-offset:2px}
.bkw-segbtn input:active+.bkw-seg-face{background:#ECE6DC}
.bkw-segbtn input:checked:active+.bkw-seg-face{background:#000}

/* move-in month: button + APG listbox popover */
.bkw-select{position:relative}
.bkw-select-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer}
.bkw-select-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bkw-select-v.is-ph{color:var(--bk-ink-3)}
.bkw-chev{width:18px;height:18px;color:var(--bk-ink-2);transition:transform var(--bk-tp) var(--bk-ease)}
.bkw-select.is-open .bkw-chev{transform:rotate(180deg)}
.bkw-select.is-open .bkw-select-btn{border-color:var(--bk-ink)}
.bkw-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;padding:6px;border:1px solid var(--bk-line);border-radius:14px;background:var(--bk-card);box-shadow:var(--shadow-pop,0 12px 32px -8px rgba(25,22,19,.24));
  transform-origin:top center;animation:bkw-pop var(--bk-tp) var(--bk-ease) both}
.bkw-select.up .bkw-pop{top:auto;bottom:calc(100% + 6px);transform-origin:bottom center}
.bkw-lb{position:relative;max-height:280px;margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain;list-style:none;outline:none;scrollbar-width:thin;scrollbar-color:var(--bk-field) transparent}
.bkw-lb-y{padding:10px 12px 6px;font:600 11.5px/1 var(--sans);letter-spacing:.1em;color:var(--bk-ink-3)}
.bkw-option{display:flex;align-items:center;gap:4px;min-height:var(--bk-touch);padding:0 12px;border-radius:9px;font:500 15.5px/1.2 var(--sans);color:var(--bk-ink);cursor:pointer;
  transition:background-color var(--bk-t) var(--bk-ease)}
.bkw-option .bkw-num{color:var(--bk-ink-2);font-weight:400}
.bkw-tick{width:18px;height:18px;margin-left:auto;color:var(--bk-ink);visibility:hidden}
.bkw-option[aria-selected="true"]{font-weight:600}
.bkw-option[aria-selected="true"] .bkw-tick{visibility:visible}
.bkw-option.is-active{background:var(--bk-hover)}
.ify-book .bkw-lb:focus-visible{outline:none} /* the active option carries the focus ring instead */
.bkw-lb:focus-visible .bkw-option.is-active{outline:var(--bk-focus);outline-offset:-2px}

/* submit + errors */
.bkw-foot{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:4px}
.bkw-err{margin:0;font:500 14.5px/1.5 var(--sans);color:var(--bk-red-text)}
.bkw-err:not(:empty){padding:12px 14px;border:1px solid var(--bk-warn-line);border-radius:12px;background:var(--bk-warn-bg);width:100%}
.bkw-submit{position:relative;min-height:52px;padding:0 32px;font-size:16px;overflow:hidden}
.ify-book .bkw-submit.is-loading{opacity:1;cursor:progress;background:var(--red-deep,#BC0000)} /* busy ≠ disabled: full contrast (white on #BC0000 = 6.4:1) */
.bkw-submit.is-loading::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:38%;background:rgba(255,255,255,.75);animation:bkw-progress 1.1s cubic-bezier(.4,0,.2,1) infinite}

/* ---------- notice states (inactive building / nothing open) ---------- */
.bkw-off{text-align:center;padding:clamp(24px,4vw,40px) clamp(18px,4vw,40px)}
.bkw-none{margin:0 auto 22px;max-width:52ch;font:400 16px/1.6 var(--sans);color:var(--bk-ink-2)}
.bkw-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.bkw-btn{min-height:var(--bk-ctl)}

/* ---------- success ---------- */
.bkw-done{animation:bkw-in var(--bk-tp) var(--bk-ease) both}
.bkw-ok{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(18px,4vw,36px) 8px}
.bkw-ok-i{width:56px;height:56px;padding:14px;margin-bottom:18px;border-radius:50%;background:var(--bk-ink);color:#fff}
.bkw-ok-t{margin:0 0 16px;font:400 clamp(26px,3vw,30px)/1.15 var(--serif);letter-spacing:-.01em;outline:none}
.bkw-ok-card{display:flex;flex-direction:column;gap:4px;margin:0 0 16px;padding:14px 22px;border:1px solid var(--bk-line);border-radius:14px;background:var(--bk-paper)}
.bkw-ok-w{font:600 16.5px/1.4 var(--sans);color:var(--bk-ink)}
.bkw-ok-bn{font:400 15px/1.4 var(--sans);color:var(--bk-ink-2)}
.bkw-ok-b{margin:0 auto 22px;max-width:46ch;font:400 15.5px/1.6 var(--sans);color:var(--bk-ink-2)}
.bkw-ok-help{margin:20px 0 0;font:400 14.5px/1.5 var(--sans);color:var(--bk-ink-3)}
.bkw-ok-help a{color:var(--bk-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--bk-field);text-underline-offset:3px}

/* ---------- hover: fine pointers only; every selected state out-ranks it ---------- */
@media (hover:hover) and (pointer:fine){
  .bkw-nav:hover:not(:disabled){border-color:var(--bk-ink);background:var(--bk-paper)}
  .bkw-cell:hover{background:var(--bk-hover)}
  .bkw-cell.open:hover{background:#EDE7DD}
  .bkw-cell.sel:hover{background:var(--bk-ink);color:#fff}
  .bkw-time:hover{border-color:var(--bk-ink);background:var(--bk-paper)}
  .bkw-time.sel:hover{background:var(--bk-ink);border-color:var(--bk-ink);color:#fff}
  .bkw-jump:hover{border-color:var(--bk-ink);background:var(--bk-paper)}
  .bkw-jump:hover .bkw-ic{transform:translateX(2px)}
  .bkw-more:hover{border-color:var(--bk-field)}
  .bkw-link:hover{text-decoration-color:var(--bk-ink)}
  .bkw-input:hover:not(:focus){border-color:var(--bk-ink-2)}
  .bkw-segbtn:hover input:not(:checked)+.bkw-seg-face{background:var(--bk-hover);color:var(--bk-ink)}
  .bkw-option:hover{background:var(--bk-hover)}
  .bkw-ok-help a:hover{text-decoration-color:var(--bk-ink)}
}

/* Windows High Contrast / forced colours: selection must not rely on author fills */
/* press states last: the (hover:hover) block above out-ranks the plain :active rules for open / selected days,
   and a click on the segmented label never showed a press — these must stay distinct from hover under a mouse */
.bkw-cell.open:active,.bkw-cell.open:hover:active{background:#E2DACD}
.bkw-cell.sel:active,.bkw-cell.sel:hover:active{background:#000}
.bkw-segbtn:active .bkw-seg-face,.bkw-segbtn:hover:active input:not(:checked)+.bkw-seg-face{background:#E2DACD}
.bkw-segbtn:active input:checked+.bkw-seg-face{background:#000}
@media (forced-colors:active){
  .bkw-cell.sel,.bkw-cell.sel.today,.bkw-cell.sel:hover,.bkw-cell.sel:active,.bkw-cell.sel:hover:active,.bkw-time.sel,.bkw-time.sel:hover,.bkw-segbtn input:checked+.bkw-seg-face,.bkw-segbtn:active input:checked+.bkw-seg-face{forced-color-adjust:none;background:Highlight;color:HighlightText;border:2px solid Highlight}
  .bkw-cell.sel::after{background:HighlightText}
  .bkw-cell.open::after{forced-color-adjust:none;background:CanvasText}
  .bkw-cell.today:not(.sel){box-shadow:none;border:2px solid CanvasText}
  .bkw-cell.closed,.bkw-nav:disabled{color:GrayText}
  .bkw-time,.bkw-input,.bkw-seg,.bkw-jump,.bkw-more,.bkw-nav{border:1px solid ButtonText}
  .bkw-option.is-active,.bkw-option[aria-selected="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .bkw-submit.is-loading::after{background:HighlightText}
  .ify-book :focus-visible,.bkw-segbtn input:focus-visible+.bkw-seg-face,.bkw-lb:focus-visible .bkw-option.is-active{outline:2px solid Highlight;outline-offset:2px}
}
@keyframes bkw-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes bkw-pop{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
@keyframes bkw-progress{from{transform:translateX(-100%)}to{transform:translateX(280%)}}
@media (prefers-reduced-motion:reduce){
  @keyframes bkw-in{from{opacity:0}to{opacity:1}}
  @keyframes bkw-pop{from{opacity:0}to{opacity:1}}
  .bkw-submit.is-loading::after{animation:none;width:100%;opacity:.35}
  .bkw-nav:active:not(:disabled),.bkw-time:active{transform:none}
}
@media (max-width:719.98px){
  .bkw-slots{max-height:340px}
  .bkw-chunk{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));contain-intrinsic-size:auto 208px}
  .bkw-cal{max-width:420px}
}
/* phones ≤ 400 px: the card reaches 4 px from the screen edge and the calendar spans the card, so 7 day
   cells get ≥ 44 px each even at 320 px (hit area from width, not bigger ink) */
@media (max-width:400px){
  .ify-book{margin-inline:-16px}
  .ify-book .bkw-cal{margin-inline:-13px;max-width:none}
}
@media (max-width:480px){
  .bkw{border-radius:16px}
  .bkw-submit{width:100%}
  .bkw-seg{max-width:none}
  .bkw-summary{align-items:flex-start}
}