*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;font-family:'Jost',sans-serif;font-weight:300; background-color: #262626;}

/* ─── SCREENS ─── */
.screen{position:fixed;inset:0;display:none;overflow:hidden;}
.screen.active{display:block;}

/* ════════════════════════════
   LANDING — diagonal split
   Both halves are full-screen, clipped by a diagonal polygon.
   On hover the clip shifts so the diagonal line moves.
════════════════════════════ */
#landing.active{display:block;position:fixed;inset:0;}

/* Each half fills the whole screen; clip-path carves out its territory */
.half{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  cursor:pointer;
}

/* Default split: diagonal runs from ~42% at top to ~58% at bottom */
.half-dark{
  background:#262626;
  clip-path:polygon(0 0, 42% 0, 58% 100%, 0 100%);
  transition:clip-path .55s cubic-bezier(.4,0,.2,1);
  z-index:1;
}
.half-gold{
  background:#c9b165;
  clip-path:polygon(42% 0, 100% 0, 100% 100%, 58% 100%);
  transition:clip-path .55s cubic-bezier(.4,0,.2,1);
  z-index:1;
}

/* Hover LEFT (dark) — diagonal shifts left: more dark, less gold */
#landing:has(.half-dark:hover) .half-dark{
  clip-path:polygon(0 0, 55% 0, 71% 100%, 0 100%);
}
#landing:has(.half-dark:hover) .half-gold{
  clip-path:polygon(55% 0, 100% 0, 100% 100%, 71% 100%);
}

/* Hover RIGHT (gold) — diagonal shifts right: less dark, more gold */
#landing:has(.half-gold:hover) .half-dark{
  clip-path:polygon(0 0, 29% 0, 45% 100%, 0 100%);
}
#landing:has(.half-gold:hover) .half-gold{
  clip-path:polygon(29% 0, 100% 0, 100% 100%, 45% 100%);
}

/* Content positioning — each side centred in its own territory */
.half-dark .half-inner{
  position:absolute;
  left:18%;top:50%;transform:translateY(-50%);
  text-align:center;
  pointer-events:none;
}
.half-gold .half-inner{
  position:absolute;
  right:18%;top:50%;transform:translateY(-50%);
  text-align:center;
  pointer-events:none;
}

.half-name{
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;font-weight:300;letter-spacing:.2em;
  text-transform:uppercase;margin-top:1.3rem;
  transition:color .3s;
}
.half-dark .half-name{color:rgba(255,255,255,.45);}
.half-dark:hover .half-name{color:rgba(255,255,255,.9);}
.half-gold .half-name{color:rgba(38,38,38,.5);}
.half-gold:hover .half-name{color:rgba(30,29,27,.85);}

.half-hint{
  position:absolute;bottom:2.2rem;
  font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;
  opacity:0;transition:opacity .3s;z-index:3;
  pointer-events:none;
}
.half-dark:hover .half-hint{opacity:1;}
.half-gold:hover .half-hint{opacity:1;}
.half-dark .half-hint{color:#c9b165;left:18%;}
.half-gold .half-hint{color:rgba(30,29,27,.6);right:18%;}

/* ════════════════════════════
   ROYALE HOME — gold bg
════════════════════════════ */
#home-screen{background:#c9b165;}

/* Title — top left */
#home-title{
  position:absolute;
  top:10%;left:6%;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.3rem,2.9vw,2.2rem);
  font-weight:300;color:#262626;
  letter-spacing:.03em;
  z-index:5;
}

/* Logo — top right, white angular fins */
#home-logo{
  position:absolute;
  top:48px;right:20px;
  width:130px;height:130px;
  z-index:5;
}

/* Lang toggle */
#home-lang{
  /* sits above the logo: FR directly over it, EN / NL above-right of it */
  position:absolute;top:14px;right:28px;
  display:flex;gap:.6rem;align-items:center;
  font-size:.85rem;letter-spacing:.12em;color:#7a6e3a;
  z-index:6;
}
#home-lang span{cursor:pointer;transition:color .2s;}
#home-lang span.on{color:#262626;font-weight:400;}

/* Contact pill — white oval, LEFT EDGE, fully on-screen */
#contact-pill{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:64px;
  height:150px;
  background:#ffffff;
  border-radius:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:20;
  box-shadow:4px 2px 18px rgba(0,0,0,.22);
  transition:background .2s;
}
#contact-pill:hover{background:#f5f2ea;}

/* Intro text — sits just below the title, aligned to its left edge */
#home-intro{
  position:absolute;
  left:6%;         /* same left as #home-title */
  top:calc(10% + clamp(1.3rem,2.9vw,2.2rem) + 1rem); /* title top + title height + small gap */
  max-width:36%;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(.95rem,1.45vw,1.25rem);
  font-weight:400;
  line-height:1.35;
  color:#262626;
  z-index:5;
}
#contact-pill span{
  writing-mode:vertical-lr;
  transform:rotate(180deg);
  font-size:.95rem;
  letter-spacing:.2em;
  text-transform:lowercase;
  color:#262626;
  padding-left:2px;
}

/* Prochainement — LARGE dark parallelogram, right side */
/* ← lachose.net link under the dark block on the Chose Royale home page */
#home-back-row{
  position:absolute;
  right:5%;
  top:calc(max(22%, 192px) + min(69%, calc(100% - max(22%, 192px) - 5%)) + 10px);
  display:flex;
  align-items:baseline;
  gap:5rem;
  z-index:6;
}
#home-back,#home-privacy{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#262626;
  cursor:pointer;
  transition:color .2s;
}
#home-back:hover,#home-privacy:hover{color:#fff;}
#soon-block{
  position:absolute;
  right:0;
  /* keeps clear of the 130px logo (16px top + 130px), even on short viewports */
  top:max(22%, 192px);
  height:min(69%, calc(100% - max(22%, 192px) - 5%));
  width:52%;
  display:flex;
  flex-direction:column;
  /* centres the label + list vertically in the block */
  justify-content:center;
  padding:4.2rem 7% 1.6rem 6.5%;
  overflow:visible;
  z-index:3;
}
/* Tilted quadrilateral matching the sketched outline:
   top edge rises to the right, left edge leans out at the bottom,
   bottom edge rises slightly to the right. Bleeds off the right edge. */
#soon-block::before{
  content:'';position:absolute;inset:0;right:-60px;z-index:-1;
  background:#262626;
  clip-path:polygon(6% 10%, 100% 0%, 100% 96%, 0% 100%);
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
#soon-label{
  font-size:.78rem;letter-spacing:.24em;
  text-transform:uppercase;color:#c9b165;
  margin-bottom:1.2rem;font-weight:300;
}
/* Shows exactly 5 events; scrolls when the agenda has more upcoming.
   The precise height is set by renderSoon() so no row is cropped. */
#soon-events{
  position:relative;
  overflow-y:auto;
  padding-right:.6rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(201,177,101,.35) transparent;
}
#soon-events::-webkit-scrollbar{width:4px;}
#soon-events::-webkit-scrollbar-track{background:transparent;}
#soon-events::-webkit-scrollbar-thumb{background:rgba(201,177,101,.35);border-radius:2px;}
.soon-event{
  padding:.75rem 0;
  border-top:.5px solid rgba(184,154,56,.18);
  cursor:pointer;
  display:flex;align-items:baseline;gap:1.4rem;
}
.soon-event:hover .soon-title{color:#e8dfc8;}
.soon-date-num{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;font-weight:300;
  color:#c9b165;line-height:1;
  width:42px;min-width:42px;flex-shrink:0;text-align:right;
}
.soon-date-num-range{font-size:1.4rem;width:56px;min-width:56px;}
.soon-date-mon{
  font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:#7a6e3a;
  width:34px;min-width:34px;flex-shrink:0;
}
.soon-title{
  font-size:.95rem;color:#9a9080;
  line-height:1.4;transition:color .2s;flex:1;
}
.soon-type{
  font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:#b8b2a8;
  margin-left:auto;white-space:nowrap;
}



/* Bottom nav tabs — angled, dark, rotated text */
#bottom-nav{
  position:absolute;
  bottom:0;left:40px;
  display:flex;align-items:flex-end;
  gap:.55rem;
  z-index:4;
}
/* Tabs styled like the slanted parallelogram links on the inner pages,
   but kept black with gold text. Each tab bleeds off the bottom edge. */
.nav-tab{
  position:relative;z-index:0;
  width:64px;height:196px;
  margin-bottom:-14px; /* bleed to the screen edge like the sidebar tabs */
  display:flex;align-items:center;justify-content:center;
  padding-bottom:14px;
  text-align:center;
  cursor:pointer;
  flex-shrink:0;
}
.nav-tab::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:#262626;
  transform:skewX(-4deg) skewY(-2deg);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:background .2s,transform .2s;
}
.nav-tab:hover::before{
  background:#333;transform:skewX(-4deg) skewY(-2deg) translateY(-4px);
}
.nav-tab span{
  writing-mode:vertical-rl;
  transform:rotate(180deg); /* sideways letters, reading bottom to top */
  font-size:.78rem;letter-spacing:.28em;
  text-transform:uppercase;
  color:#c9b165;
  transition:color .2s;
}
.nav-tab:hover span{color:#e8dfc8;}

/* Back to landing */


/* ════════════════════════════
   INNER PAGES — dark bg
════════════════════════════ */
#inner-screen{
  background:#262626;
  display:none;
  grid-template-columns:1fr 210px;
  grid-template-rows:100%;
}
#inner-screen.active{display:grid;}

#inner-content{
  overflow-y:auto;
  padding:4.5rem 3.5rem 3rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(184,154,56,.2) transparent;
}

/* sidebar */
#inner-sidebar{
  border-left:.5px solid rgba(184,154,56,.13);
  display:flex;flex-direction:column;
  justify-content:center;align-items:flex-end;
  padding:0 2.8rem 0 1rem;gap:.08rem;
}
#inner-sidebar .lang-btn{transition:color .2s;}
#inner-sidebar .lang-btn:not(.on):hover{color:#c9b165!important;}

/* Lang toggle — top-right corner of Chose Royale inner pages,
   same position and font size as the home-page toggle */
#inner-lang{
  position:absolute;top:14px;right:28px;
  display:flex;gap:.6rem;align-items:center;
  font-size:.85rem;letter-spacing:.12em;
  z-index:30;
}
#inner-lang .lang-btn{cursor:pointer;color:rgba(201,177,101,.5);transition:color .2s;}
#inner-lang .lang-btn:hover{color:#c9b165;}
#inner-lang .lang-btn.on{color:#c9b165;}
#inner-lang .il-sep{color:rgba(201,177,101,.3);}
.s-nav{
  font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:#c9b165;cursor:pointer;padding:.52rem 0;
  text-align:right;transition:color .2s;
  position:relative;
}
.s-nav::after{
  content:'';position:absolute;right:-1.3rem;top:50%;
  transform:translateY(-50%);
  width:4px;height:4px;background:#c9b165;
  border-radius:50%;opacity:0;transition:opacity .2s;
}
.s-nav:hover{color:#e8e0c8;}
.s-nav:hover::after,.s-nav.on::after{opacity:1;}
.s-nav.on{color:#c9b165;}

/* ── La Chose Royale sidebar: nav links as cream parallelogram tabs ──
   Each link sits on a slanted cream shape that bleeds off the right edge
   of the screen (per mockup). Scoped to #inner-sidebar so the Trois
   Jambes sidebar keeps its plain text links. */
#inner-sidebar .s-nav,
#inner-sidebar .s-contact{
  position:relative;z-index:0;
  font-size:.88rem;letter-spacing:.2em;text-transform:uppercase;
  color:#262626;text-align:center;cursor:pointer;
  /* right padding = the 2.8rem that bleeds off-screen, so the text is
     centered within the VISIBLE part of the tab. The top padding
     compensates for the skewY tilt (the shape's midline sits ~7px lower
     than the box midline at the text position); with align-items:center
     only half the padding translates into shift, hence .9rem */
  padding:.9rem 2.8rem 0 0;
  margin:.42rem -2.8rem .42rem 0; /* negative margin: tab runs to the screen edge */
  box-sizing:border-box;
  width:12.5rem;              /* identical width for every tab */
  height:2.3rem;              /* identical height for every tab */
  display:flex;align-items:center;justify-content:center;
  white-space:nowrap;
  transition:color .2s;
}
#inner-sidebar .s-contact{margin-top:.42rem;} /* same rhythm as the other tabs */
/* Language toggle above the tabs: uses the exact same box recipe as the
   parallelogram tabs (bleed to the screen edge with a negative margin,
   then inset the text with padding-right:2.8rem) so FR / EN / NL lines
   up flush with the text inside the tabs. */
.side-lang{
  display:flex;justify-content:flex-end;align-self:stretch;
  gap:.44rem;font-size:.72rem;letter-spacing:.1em;
  margin:0 -2.8rem 1.4rem 0;
  padding-right:2.8rem;
}
/* the parallelogram itself */
#inner-sidebar .s-nav::before,
#inner-sidebar .s-contact::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:#efdcab;
  transform:skewY(-3.5deg);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:background .2s,transform .2s;
}
/* hide the old dot indicator inside this sidebar */
#inner-sidebar .s-nav::after{display:none;}
#inner-sidebar .s-nav:hover,
#inner-sidebar .s-contact:hover{color:#262626;}
#inner-sidebar .s-nav::before,
#inner-sidebar .s-contact::before{transform-origin:right center;}
#inner-sidebar .s-nav:hover::before,
#inner-sidebar .s-contact:hover::before{
  /* grow leftward from the anchored right edge — the tab never detaches
     from the frame */
  background:#f7e9c4;transform:skewY(-3.5deg) scaleX(1.035);
}
/* active page: gold tab */
#inner-sidebar .s-nav.on{color:#262626;}
#inner-sidebar .s-nav.on::before{background:#c9b165;}
/* keep the back-links clear of the tab stack */
#inner-sidebar .s-contact + .s-back{margin-top:1.6rem;}
.s-contact{
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:#c9b165;cursor:pointer;margin-top:1.5rem;
  text-align:right;transition:color .2s;
}
.s-contact:hover{color:#c9b165;}
.s-back{
  font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;
  color:#c9b165;cursor:pointer;text-align:right;
  transition:color .2s;margin-top:.55rem;
}
.s-back:hover{color:#c9b165;}
/* Larger back links (← Accueil / ← lachose.net) on the Chose Royale inner pages */
#inner-sidebar .s-back{font-size:.68rem;}
/* Privacy is a full s-nav tab now (same treatment as Espaces/Agenda/etc.),
   so the extra breathing room that used to sit after .s-contact now sits
   after whichever .s-nav immediately precedes the back link. */
#inner-sidebar .s-nav + .s-back{margin-top:1.6rem;}

/* page sections */
.ipage{
  background-color: #262626;display:none;}
.ipage.on{display:block;}
.i-hdr{
  margin-bottom:2.2rem;padding-bottom:1.5rem;
  border-bottom:.5px solid rgba(184,154,56,.16);
}
.i-lbl{
  font-size:.53rem;letter-spacing:.24em;text-transform:uppercase;
  color:#c9b165;margin-bottom:.55rem;
}
.i-back{
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:#928d85;cursor:pointer;margin-bottom:1rem;transition:color .2s;
}
.i-back:hover{color:#e8dfc8;}
.i-ttl{
  font-family:'Cormorant Garamond',serif;
  font-size:2.4rem;font-weight:300;color:#e8dfc8;line-height:1.1;
}
.i-body{font-size:.84rem;line-height:1.5;color:#928d85;max-width:540px;}

/* spaces grid */
.sg{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;background:rgba(184,154,56,.1);
  border:.5px solid rgba(184,154,56,.1);
  margin-top:1.8rem;
}
.sc{background:#262626;padding:1.9rem 1.6rem;display:flex;flex-direction:column;}
/* Pin the button pair to the bottom of the card so both cards' buttons
   line up regardless of how many lines the description wraps to */
.sc .bg{margin-top:auto;}
.sc-lbl{font-size:.51rem;letter-spacing:.17em;text-transform:uppercase;color:#7a6e3a;margin-bottom:.45rem;}
.sc-name{
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;font-weight:300;color:#e8dfc8;margin-bottom:.7rem;
}
.sc-desc{font-size:.76rem;line-height:1.5;color:#928d85;margin-bottom:1.2rem;}
.bg{
  display:block;padding:.5rem 1rem;
  border:.5px solid #c9b165;color:#c9b165;
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;background:transparent;
  transition:background .2s,color .2s;
  text-align:center;margin-bottom:.46rem;
}
.bg:hover{background:#c9b165;color:#262626;}
.bgh{
  display:block;padding:.5rem 1rem;
  border:.5px solid rgba(184,154,56,.22);color:#b8b2a8;
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;background:transparent;
  transition:color .2s,border-color .2s;text-align:center;
}
.bgh:hover{background:#c9b165;color:#262626;border-color:#c9b165;}

/* ── Space photos ──
   Each space card shows one photo at a time, as a small carousel.
   Arrows fade in on hover and cycle through the images like a
   revolving door (wrapping at both ends). Any number of <img>
   elements can be dropped inside .sp-preview — the script picks
   them all up automatically. Clicking a photo opens it enlarged
   in the fullscreen lightbox, which can also be browsed. */
.sc{position:relative;}
.sp-preview{
  position:relative;
  display:flex;
  gap:.45rem;
  margin-bottom:1.1rem;
}
.sp-preview img{
  display:none;
  width:calc((100% - .9rem)/3);
  aspect-ratio:4/3;object-fit:cover;
  border-radius:4px;cursor:zoom-in;
  border:.5px solid rgba(255,255,255,.15);
  transition:border-color .18s;
  background:#2a2a2a;
}
.sp-preview img.active{display:block;}
.sp-preview img.active:hover{border-color:#c9b165;}
.sp-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;
  background:rgba(38,38,38,.6);
  border:.5px solid rgba(201,177,101,.55);
  color:#e8dfc8;font-size:1.05rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;z-index:2;
  opacity:0;transition:opacity .2s,background .2s,color .2s;
}
.sp-preview:hover .sp-arrow{opacity:1;}
.sp-arrow:hover{background:rgba(201,177,101,.9);color:#262626;}
.sp-arrow.prev{left:.55rem;}
.sp-arrow.next{right:.55rem;}

/* "contactez-nous." link on the spaces page — lights up on hover */
.esp-contact-link{
  color:#c9b165;cursor:pointer;
  border-bottom:.5px solid transparent;
  transition:color .2s,border-color .2s,text-shadow .2s;
}
.esp-contact-link:hover{
  color:#e8dfc8;border-color:#e8dfc8;
  text-shadow:0 0 12px rgba(232,223,200,.45);
}

/* Fullscreen lightbox for an enlarged image */
#img-lightbox{
  display:none;position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.88);
  align-items:center;justify-content:center;
  cursor:zoom-out;
}
#img-lightbox.on{display:flex;}
#img-lightbox img{
  max-width:88vw;max-height:86vh;
  border-radius:6px;
  border:.5px solid rgba(201,177,101,.4);
  box-shadow:0 12px 60px rgba(0,0,0,.7);
}
#img-lightbox .lb-close{
  position:absolute;top:18px;right:26px;
  font-size:1.5rem;color:#e8dfc8;cursor:pointer;
  font-family:'Cormorant Garamond',serif;
}
#img-lightbox .lb-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(38,38,38,.55);
  border:.5px solid rgba(201,177,101,.55);
  color:#e8dfc8;font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;
  transition:background .2s,color .2s;
}
#img-lightbox .lb-arrow:hover{background:rgba(201,177,101,.9);color:#262626;}
#img-lightbox .lb-arrow.prev{left:26px;}
#img-lightbox .lb-arrow.next{right:26px;}

/* calendar */
.cal-hdr{
  display:flex;align-items:center;
  justify-content:space-between;margin-bottom:1.5rem;
}
.cal-mo{
  font-family:'Cormorant Garamond',serif;
  font-size:1.7rem;font-weight:300;color:#e8dfc8;
}
.cal-btn{
  width:32px;height:32px;
  border:.5px solid rgba(184,154,56,.28);
  background:transparent;color:#c9b165;
  cursor:pointer;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.cal-btn:hover{background:rgba(184,154,56,.1);}
.cal-rooms{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1rem;}
.cal-rlbl{
  font-size:.53rem;letter-spacing:.17em;text-transform:uppercase;
  color:#b8b2a8;margin-bottom:.85rem;
  display:flex;align-items:center;gap:.5rem;
}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cdh{
  font-size:.49rem;text-transform:uppercase;
  color:#5a5650;text-align:center;padding:.3rem 0;
}
.cd{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.63rem;color:#9a8e78;cursor:pointer;position:relative;overflow:hidden;
  border-radius:5px;
  outline:1px solid rgba(255,255,255,.85);outline-offset:-1px;
}
.cd.empty{cursor:default;pointer-events:none;outline:none;}
/* today marker removed per request — no ring around the current day */
/* Partial days: white diagonal line from bottom-left to top-right corner,
   outlining the hypotenuse shared by the AM and PM triangles */
.cd.partial-am-g::after,.cd.partial-am-s::after,
.cd.partial-pm-g::after,.cd.partial-pm-s::after,
.cd.split-g::after,.cd.split-s::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,
    transparent calc(50% - .7px),
    rgba(255,255,255,.85) calc(50% - .7px),
    rgba(255,255,255,.85) calc(50% + .7px),
    transparent calc(50% + .7px));
}
/* Full reservation: solid square */
.cd.full-g::before{content:'';position:absolute;inset:0;background:#c9b165;opacity:.55;}
.cd.full-s::before{content:'';position:absolute;inset:0;background:#6a8fc0;opacity:.55;}
/* Partial AM (morning, first half of day): triangle covering the lower half, split along the diagonal */
.cd.partial-am-g::before{content:'';position:absolute;inset:0;background:linear-gradient(to top right,#c9b165 50%,transparent 50%);opacity:.65;}
.cd.partial-am-s::before{content:'';position:absolute;inset:0;background:linear-gradient(to top right,#6a8fc0 50%,transparent 50%);opacity:.65;}
/* Fully booked by two different events: both triangles filled with the SAME
   shade of the room colour — the white diagonal line (::after) alone marks
   the boundary between the two bookings */
.cd.split-g::before{content:'';position:absolute;inset:0;background:#c9b165;opacity:.65;}
.cd.split-s::before{content:'';position:absolute;inset:0;background:#6a8fc0;opacity:.65;}
/* Partial PM (afternoon, second half of day): triangle covering the upper half, split along the diagonal */
.cd.partial-pm-g::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom left,#c9b165 50%,transparent 50%);opacity:.65;}
.cd.partial-pm-s::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom left,#6a8fc0 50%,transparent 50%);opacity:.65;}
.cd-num{position:relative;z-index:1;}
/* ── Multi-day events: consecutive days rendered as one connected rectangle ──
   Every cell keeps its own hover/click behaviour (same markup as a normal
   day); only the shape changes. Non-final cells in a row-segment are pulled
   2px to the right with a negative margin, so the item's own box (border
   included, not just the background) grows to swallow the grid gap. That
   way the top/bottom border is one continuous line across the whole
   rectangle instead of being broken at each internal cell boundary, and
   only the true first/last cell of the segment gets rounded corners. When
   a multi-day event's date range rolls onto a new calendar row, that day
   is its own one-cell segment (see .md-solo) — a plain standalone square,
   not a continuation of the bar. */
.cd.cd-md{overflow:visible;outline:none;
  border-top:1px solid rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.85);}
.cd.cd-md.md-start{border-left:1px solid rgba(255,255,255,.85);border-right:none;border-radius:5px 0 0 5px;margin-right:-2px;z-index:1;}
.cd.cd-md.md-mid{border-left:none;border-right:none;border-radius:0;margin-right:-2px;z-index:1;}
.cd.cd-md.md-end{border-left:none;border-right:1px solid rgba(255,255,255,.85);border-radius:0 5px 5px 0;}
.cd.cd-md.md-solo{border:1px solid rgba(255,255,255,.85);border-radius:5px;}
/* Hovering any day of a multi-day span lights up every cell in that
   rectangle at once (JS toggles this class on the whole segment together,
   instead of relying on the default per-cell :hover). */
.cd.cd-md.seg-hover .cd-hover{opacity:1;}
/* ── Private-event crown marker (transparent background, stroke-only SVG) ── */
.cd-crown{
  position:absolute;z-index:2;pointer-events:none;
  width:15px;height:15px;color:#c9b165;
  display:flex;align-items:center;justify-content:center;
}
.cd-crown svg{width:100%;height:100%;display:block;}
/* full-day private booking: crown centered above the day number */
.cd-crown.crown-full{top:1px;left:50%;transform:translateX(-50%);}
/* morning half — lower-left triangle */
.cd-crown.crown-am{left:2px;bottom:2px;}
/* afternoon half — upper-right triangle */
.cd-crown.crown-pm{right:2px;top:2px;}
/* on booked (gold/blue) cells the dark crown reads better than gold-on-gold */
.cd.full-g .cd-crown,.cd.split-g .cd-crown,.cd.partial-am-g .cd-crown,.cd.partial-pm-g .cd-crown,
.cd.full-s .cd-crown,.cd.split-s .cd-crown,.cd.partial-am-s .cd-crown,.cd.partial-pm-s .cd-crown{color:#262626;}
/* crown + "private event" line inside the info popup */
.p-priv{display:flex;align-items:center;gap:.5rem;margin:.3rem 0 .9rem;}
.p-priv .leg-crown{width:18px;height:18px;}
.p-priv span:last-child{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#c9b165;}
/* shared crown icon holder (legend + popup) */
.leg-crown{width:14px;height:14px;color:#c9b165;flex-shrink:0;display:inline-flex;}
.leg-crown svg{width:100%;height:100%;display:block;}
/* Hover overlay: sits above the booking shapes, below the day number */
.cd-hover{
  position:absolute;inset:0;z-index:1;
  pointer-events:none;opacity:0;
  background:rgba(201,177,101,.16); /* light translucent gold — free, selectable date */
  transition:opacity .18s ease,clip-path .18s ease,background-color .18s ease;
}
.cd:hover .cd-hover{opacity:1;}
.cd.empty .cd-hover{display:none;}
/* Booked days (gold or blue, full squares or partial triangles): translucent near-grey tint */
.cd.full-g .cd-hover,.cd.full-s .cd-hover,
.cd.partial-am-g .cd-hover,.cd.partial-am-s .cd-hover,
.cd.partial-pm-g .cd-hover,.cd.partial-pm-s .cd-hover,
.cd.split-g .cd-hover,.cd.split-s .cd-hover,
.cd.event-pub .cd-hover,.cd.event-priv .cd-hover,
.cd.cd-md .cd-hover{
  background:rgba(38,38,38,.45); /* #262626-ish, translucent */
}
/* Half-day hover shapes: solid overlays clipped to a triangle. Both triangles
   share the same 3-point polygon count, so clip-path animates smoothly as the
   cursor crosses the diagonal (no hard gradient snap). */
/* lower-left triangle (morning half) / upper-right triangle (afternoon half) */
.cd.hov-lower .cd-hover,
.cd.partial-am-g.hov-booked .cd-hover,.cd.partial-am-s.hov-booked .cd-hover,
.cd.partial-pm-g.hov-free   .cd-hover,.cd.partial-pm-s.hov-free   .cd-hover{
  clip-path:polygon(0% 0%,100% 100%,0% 100%);
}
.cd.hov-upper .cd-hover,
.cd.partial-pm-g.hov-booked .cd-hover,.cd.partial-pm-s.hov-booked .cd-hover,
.cd.partial-am-g.hov-free   .cd-hover,.cd.partial-am-s.hov-free   .cd-hover{
  clip-path:polygon(0% 0%,100% 0%,100% 100%);
}
/* Partial days: hover feedback depends on which half the cursor is in (set via JS) */
.cd[class*="partial-"]:hover .cd-hover{opacity:0;}
.cd[class*="partial-"].hov-booked:hover .cd-hover{opacity:1;}
.cd[class*="partial-"].hov-free:hover .cd-hover{opacity:1;}
/* free half keeps the light-gold "available" tint */
.cd[class*="partial-"].hov-free .cd-hover{background:rgba(201,177,101,.16);}
/* Split days (two events): hover darkens only the half under the cursor */
.cd[class*="split-"]:hover .cd-hover{opacity:0;}
.cd[class*="split-"].hov-lower:hover .cd-hover,
.cd[class*="split-"].hov-upper:hover .cd-hover{opacity:1;}
.legend{
  display:flex;flex-wrap:wrap;gap:.75rem;
  margin-top:1.4rem;padding-top:1.2rem;
  border-top:.5px solid rgba(184,154,56,.1);
}
.leg{display:flex;align-items:center;gap:.5rem;font-size:.74rem;color:#b8b2a8;}
.ld{width:9px;height:9px;flex-shrink:0;}
.ld-g{background:#c9b165;opacity:.75;}
.ld-s{background:#6a8fc0;opacity:.75;}

/* activities */
.ai{
  display:grid;grid-template-columns:110px 1fr;
  gap:1.5rem;padding:1.4rem 0;
  border-top:.5px solid rgba(184,154,56,.08);
  cursor:pointer;transition:padding-left .18s;
  align-items:center;
}
.ai:hover{padding-left:.5rem;}
.ai-dt{font-family:'Cormorant Garamond',serif;font-size:.92rem;color:#c9b165;line-height:1.5;}
.ai-nm{font-family:'Cormorant Garamond',serif;font-size:1.22rem;font-weight:300;color:#e8dfc8;margin-bottom:.2rem;}
.ai-tag{font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:#b8b2a8;margin-bottom:.1rem;}
.ai.past .ai-nm{color:#7a746b;}
.ai.past .ai-dt{color:#8a7a52;}
.ai.past .ai-tag{color:#9a9080;}
.ai.past:hover .ai-nm{color:#e8dfc8;}
.ai.past:hover .ai-dt{color:#c9b165;}
.ai-past-tag{font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:#5f9e6e;border:.5px solid #5f9e6e;border-radius:4px;padding:.14rem .45rem;display:inline-block;margin-top:.35rem;}
.ai-up-tag{font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:#3dff7a;border:.5px solid #3dff7a;border-radius:4px;padding:.14rem .45rem;display:inline-block;margin-top:.35rem;}
.act-sentinel{height:1px;}
.act-loading{padding:1.6rem 0;text-align:center;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:#5a5650;}
.act-loading::after{content:'···';display:inline-block;animation:actdots 1.2s infinite steps(4);}
@keyframes actdots{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}
.act-end{padding:2rem 0 1rem;text-align:center;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:#5a5650;border-top:.5px solid rgba(184,154,56,.08);margin-top:1rem;}

/* ── General contact form ── */
.cform{max-width:420px;margin-top:2rem;}
.fl{display:block;font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:#c9b165;margin-bottom:.42rem;}
.fi,.fta,.fsel{
  width:100%;background:rgba(255,255,255,.03);
  border:.5px solid rgba(184,154,56,.2);
  color:#e8dfc8;font-family:'Jost',sans-serif;
  font-weight:300;font-size:.79rem;
  padding:.68rem .82rem;margin-bottom:1rem;
  outline:none;transition:border-color .18s;
}
.fi::placeholder,.fta::placeholder{color:#a8a299;}
.fi:focus,.fta:focus,.fsel:focus{border-color:#c9b165;}
.fta{height:140px;resize:none;}
.fsel option{background:#262626;}
.fsub{
  padding:.74rem 2rem;border:.5px solid #c9b165;
  background:transparent;color:#c9b165;
  font-family:'Jost',sans-serif;font-weight:300;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:background .2s,color .2s;
}
.fsub:hover{background:#c9b165;color:#262626;}
/* newsletter */
.nl-block{
  margin-top:2.6rem;
  padding-top:2rem;
  border-top:.5px solid rgba(201,177,101,.12);
}
.nl-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;font-weight:300;
  color:#e8dfc8;margin-bottom:.32rem;
}
.nl-sub{font-size:.68rem;color:#5a5650;line-height:1.7;margin-bottom:1.1rem;}
.nl-row{display:flex;gap:.6rem;align-items:flex-start;}
.nl-row .fi{margin-bottom:0;flex:1;}
.nl-btn{
  padding:.68rem 1.4rem;
  background:transparent;
  border:.5px solid rgba(201,177,101,.5);
  color:#c9b165;
  font-family:'Jost',sans-serif;font-weight:300;
  font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s;
  flex-shrink:0;
}
.nl-btn:hover{background:#c9b165;color:#262626;border-color:#c9b165;}
/* Consent checkbox — required, unchecked by default. Custom-drawn box
   reuses the same border/gold-fill/dark-invert language as the rest of
   the form controls (.fi border, .nl-btn hover-fill). */
.nl-check{
  display:flex;align-items:flex-start;gap:.6rem;
  margin-top:1rem;cursor:pointer;user-select:none;
}
.nl-check-input{position:absolute;opacity:0;width:0;height:0;}
.nl-check-box{
  flex-shrink:0;width:15px;height:15px;margin-top:.2rem;
  border:.5px solid rgba(201,177,101,.5);
  background:rgba(255,255,255,.03);
  position:relative;
  transition:background .18s,border-color .18s;
}
.nl-check:hover .nl-check-box{border-color:#c9b165;}
.nl-check-input:focus-visible + .nl-check-box{
  border-color:#c9b165;box-shadow:0 0 0 2px rgba(201,177,101,.25);
}
.nl-check-input:checked + .nl-check-box{background:#c9b165;border-color:#c9b165;}
.nl-check-input:checked + .nl-check-box::after{
  content:'';position:absolute;left:4px;top:1px;
  width:4px;height:8px;
  border:solid #262626;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}
.nl-check-label{font-size:.62rem;line-height:1.6;color:#928d85;}
.nl-err{
  font-size:.58rem;letter-spacing:.05em;
  color:#c17b5a;margin-top:.55rem;display:none;
}
.nl-ok{
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:#c9b165;margin-top:.7rem;display:none;
}
/* ── Reservation form ── */
.rform{max-width:560px;margin-top:1.4rem;}
.rspace-banner{
  background:rgba(201,177,101,.07);
  border-left:2px solid #c9b165;
  padding:.9rem 1.1rem;
  margin-bottom:1.6rem;
  display:flex;align-items:center;gap:1rem;
}
.rspace-label{font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:#c9b165;margin-bottom:.3rem;}
.rspace-name{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:300;color:#c9b165;}
.rform-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;}
.rform-cols .fl,.rform-cols .fi{grid-column:span 1;}
.rform-full{grid-column:span 2;}
.rfsel{
  width:100%;background:rgba(255,255,255,.03);
  border:.5px solid rgba(184,154,56,.35);
  color:#e8dfc8;font-family:'Jost',sans-serif;
  font-weight:300;font-size:.79rem;
  padding:.68rem .82rem;margin-bottom:1rem;
  outline:none;transition:border-color .18s;
}
.rfsel:focus{border-color:#c9b165;}
.rfsel option{background:#262626;}
.rsub{
  padding:.82rem 2.4rem;
  background:#c9b165;color:#262626;
  border:none;
  font-family:'Jost',sans-serif;font-weight:400;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;transition:opacity .2s;
  margin-top:.4rem;
}
.rsub:hover{opacity:.82;}

/* manuel */
/* Manuel — presented as a printed document: numbered margin, run-in headings
   flowing into their paragraph. Continuous prose reads as text, not as UI. */
.ms{margin-bottom:1.7rem;}
.ms-flow{font-size:.8rem;line-height:1.5;color:#928d85;max-width:780px;}
.ms-t{
  display:inline;
  font-family:'Space Grotesk',sans-serif;
  font-size:.95rem;font-weight:500;font-style:normal;letter-spacing:.04em;
  color:#e8dfc8;letter-spacing:.01em;
}
.ms-b{display:inline;}
/* On the Manuel page, the kicker label is static text, not a link */
#ip-manuel .i-lbl{color:#928d85;}
#ip-privacy .i-lbl{color:#928d85;}

/* "Last updated" note at the foot of the privacy policy — same quiet
   scale as the activities end-of-list marker, not a full section */
.priv-updated{margin-top:2rem;font-size:.58rem;letter-spacing:.1em;color:#5a5650;}

/* popup */
.pov{
  position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,.82);
  display:none;align-items:center;justify-content:center;
}
.pov.on{display:flex;}
.pbox{
  background:#262626;
  border:.5px solid rgba(184,154,56,.22);
  max-width:460px;width:90%;padding:2rem;
  position:relative;
  animation:fadeUp .28s ease;
}
/* ════════════════════════════
   TROIS JAMBES — minimal section
   Same palette as La Chose Royale: #262626 / #c9b165.
   Home: outlined tab-over-box buttons on the dark ground.
════════════════════════════ */
#trois-home{background:#262626;overflow-y:auto;}

#tj-home-wrap{
  max-width:1100px;margin:0 auto;
  padding:9vh 6% 4rem;
}

#tj-logo{
  display:block;
  width:120px;height:auto;
  margin-bottom:1.4rem;
  /* renders the logo in pure white on the dark ground */
  filter:brightness(0) invert(1);
}
#tj-name{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.3rem,2.9vw,2.2rem);
  font-weight:300;color:#fff;
  letter-spacing:.03em;
  margin-bottom:2.2rem;
}

/* Mission statement */
#tj-mission{
  font-size:.8rem;line-height:1.9;color:#928d85;
  max-width:720px;margin-bottom:.6rem;
}
#tj-mission-back-row{
  max-width:720px;
  display:flex;
  justify-content:flex-end;
  align-items:baseline;
  gap:5rem;
  margin-bottom:3.5rem;
}

/* Lang toggle — shared markup pattern, gold-on-dark colouring */
.tj-lang{
  position:absolute;top:14px;right:28px;
  display:flex;gap:.6rem;align-items:center;
  font-size:.85rem;letter-spacing:.12em;
  z-index:30;
}
.tj-lang .lang-btn{cursor:pointer;color:rgba(255,255,255,.5);transition:color .2s;}
.tj-lang .lang-btn:hover{color:#fff;}
.tj-lang .lang-btn.on{color:#fff;}
.tj-lang .tj-sep{color:rgba(255,255,255,.3);}

/* The three buttons — one aligned horizontal row: productions, collaborations, contact */
#tj-squares{
  display:flex;flex-direction:row;
  justify-content:flex-start;align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  flex-wrap:nowrap;
  margin-bottom:4rem;
}
.tj-btn{cursor:pointer;}
.tj-btn-tab{
  display:inline-block;
  border:1px solid #fff;
  padding:.7rem clamp(.8rem,2vw,1.5rem);
  font-size:clamp(.56rem,1.1vw,.72rem);
  letter-spacing:.14em;text-transform:uppercase;
  color:#e8dfc8;white-space:nowrap;
  background:transparent;
  transition:background .25s,color .25s;
}
.tj-btn:hover .tj-btn-tab{background:#fff;color:#262626;}
.tj-btn:focus-visible{outline:1px solid #e8dfc8;outline-offset:4px;}
@media (prefers-reduced-motion:reduce){.tj-btn-tab{transition:none;}}

.tj-back{
  font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.5);cursor:pointer;
  transition:color .2s;
}
.tj-back:hover{color:#fff;}


/* Trois Jambes inner pages — content column + right sidebar (like Chose Royale) */
#trois-inner{
  background:#262626;
  display:none;
  grid-template-columns:1fr 210px;
  grid-template-rows:100%;
}
#trois-inner.active{display:grid;}
#tj-content{
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(184,154,56,.2) transparent;
}
#tj-inner-wrap{
  max-width:560px;margin:0 auto;
  padding:16vh 1.6rem 5rem;
}
#tj-sidebar{
  border-left:.5px solid rgba(184,154,56,.13);
  display:flex;flex-direction:column;
  justify-content:center;align-items:flex-end;
  padding:0 2.8rem 0 1rem;gap:.08rem;
}
/* lang toggle inside the sidebar sits in flow, right-aligned */
/* Trois Jambes: gold replaced by the logo's white */
#tj-sidebar .s-nav,#tj-sidebar .s-nav.on,#tj-sidebar .s-contact,#tj-sidebar .s-back{color:#fff;}
#tj-sidebar .s-nav:hover,#tj-sidebar .s-contact:hover,#tj-sidebar .s-back:hover{color:rgba(255,255,255,.75);}
#tj-sidebar .s-nav::after{background:#fff;}
#tj-sidebar .lang-btn:not(.on):hover{color:#fff!important;}
.tj-lang-side{
  position:static;
  justify-content:flex-end;
  margin-bottom:1.4rem;
}
.tjpage{display:none;}
.tjpage.on{display:block;}
/* Static text styling: gold is reserved for interactive elements;
   labels and separators on content pages stay neutral */
.tj-lbl{
  font-size:.53rem;letter-spacing:.24em;text-transform:uppercase;
  color:#928d85;margin-bottom:.6rem;
}
.tj-ttl{
  font-family:'Cormorant Garamond',serif;
  font-size:2.4rem;font-weight:300;color:#e8dfc8;
  line-height:1.1;margin-bottom:1.6rem;
}
.tj-body{font-size:.84rem;line-height:1.5;color:#928d85;margin-bottom:2rem;}

/* Entries read as editorial prose: the name runs into its description
   on one line, like a printed catalogue — no rows, no separators. */
.tj-item{
  margin-bottom:1.5rem;
  font-size:.8rem;line-height:1.5;color:#928d85;
}
.tj-item-name{
  display:inline;
  font-family:'Space Grotesk',sans-serif;
  font-size:.95rem;font-weight:500;font-style:normal;letter-spacing:.04em;
  color:#e8dfc8;letter-spacing:.01em;
}
/* Privacy page sections use the same .tj-item/.tj-item-name structure as
   productions/collaborations — cream title, grey body, never gold */
#tjp-privacy .tj-item-name{color:#e8dfc8;}
.tj-item-sub{display:inline;}



@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.px{position:absolute;top:.85rem;right:1rem;font-size:1.1rem;cursor:pointer;color:#5a5650;line-height:1;}
.px:hover{color:#c9b165;}
.p-img{
  display:block;width:100%;
  max-height:320px;object-fit:contain;object-position:left;
  margin-bottom:1.1rem;border-radius:4px;
}
.p-tag{font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;color:#c9b165;margin-bottom:.48rem;}
.p-ttl{font-family:'Cormorant Garamond',serif;font-size:1.65rem;font-weight:300;color:#e8dfc8;margin-bottom:.32rem;}
.p-dt{font-size:.65rem;color:#5a5650;margin-bottom:.88rem;}
.p-desc{font-size:.77rem;line-height:1.8;color:#928d85;}
.p-act{
  margin-top:1.1rem;padding:.66rem 1.5rem;
  border:.5px solid #c9b165;background:transparent;color:#c9b165;
  font-family:'Jost',sans-serif;font-weight:300;
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:background .2s,color .2s;
}
.p-act:hover{background:#c9b165;color:#262626;}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET & MOBILE
   The desktop design above is an absolutely-positioned "app shell"
   (fixed full-viewport screens, diagonal clip-paths, skewed tabs,
   a 2-column CSS grid). Below 900px we convert every screen to a
   normal stacked, scrollable flow; below 520px we tighten spacing
   and font sizes further. Nothing above this point is modified.
════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* ── base: allow the page to scroll instead of being viewport-locked ── */
  html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;}
  .screen{position:relative;inset:auto;height:auto;min-height:100vh;overflow:visible;}
  .screen.active{display:block;}

  /* ── LANDING: same diagonal-seam technique as desktop, rotated
     90° — both halves are full-size layers clipped to complementary
     diagonal polygons, stacked top/bottom instead of left/right ── */
  #landing.active{position:relative;inset:auto;height:auto;min-height:100vh;display:block;}
  .half{
    position:absolute;inset:0;
    width:100%;height:100%;
  }
  .half-dark,
  #landing:has(.half-dark:hover) .half-dark,
  #landing:has(.half-gold:hover) .half-dark{
    clip-path:polygon(0% 0%, 100% 0%, 100% 58%, 0% 42%)!important;
  }
  .half-gold,
  #landing:has(.half-dark:hover) .half-gold,
  #landing:has(.half-gold:hover) .half-gold{
    clip-path:polygon(0% 42%, 100% 58%, 100% 100%, 0% 100%)!important;
  }
  .half-dark .half-inner,.half-gold .half-inner{
    position:absolute;left:50%;right:auto;
    transform:translateX(-50%);
    text-align:center;
  }
  .half-dark .half-inner{top:24%;transform:translate(-50%,-50%);}
  .half-gold .half-inner{top:76%;transform:translate(-50%,-50%);}
  .half-dark .half-hint,.half-gold .half-hint{
    left:50%;right:auto;bottom:auto;
    transform:translateX(-50%);
  }
  .half-dark .half-hint{top:38%;}
  .half-gold .half-hint{top:88%;}
  .half svg{max-width:120px;height:auto;}

  /* ── ROYALE HOME: convert absolute art-direction into stacked flow ── */
  #home-screen{
    position:relative;height:auto;min-height:100vh;overflow:visible;
    padding:7rem 6% 0;
  }
  #home-title{position:static;max-width:100%;margin-bottom:1.4rem;font-size:clamp(1.4rem,5vw,2rem);}
  /* inline style on the SVG wins over stylesheet rules unless !important */
  #home-logo{
    position:absolute!important;top:14px!important;right:14px!important;
    width:56px!important;height:56px!important;z-index:6!important;
  }
  #home-lang{position:absolute;top:78px;right:14px;font-size:.68rem;gap:.4rem;z-index:6;}
  #home-intro{position:static;left:auto;top:auto;max-width:100%;margin-bottom:2.2rem;font-size:.9rem;}
  #soon-block{
    position:relative;z-index:0;right:auto;top:auto;width:100%;height:auto;
    padding:2rem 5%;margin-bottom:2rem;
  }
  #soon-block::before{right:0;clip-path:none;}
  #soon-events{max-height:60vh;}
  #home-back-row{position:static;top:auto;right:auto;justify-content:flex-end;margin-bottom:2rem;}

  /* Bottom nav — sits in normal document flow at the true end of the
     page (like a footer): not visible on load, reached by scrolling
     down, and it scrolls away with the rest of the content rather
     than staying pinned to the viewport. Flush with the very bottom
     edge of the page — no trailing gap. */
  #bottom-nav{
    position:static;left:auto;bottom:auto;
    flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:.6rem;
  }
  .nav-tab{margin-bottom:0;padding-bottom:0;}

  /* ── INNER SCREENS: grid → stacked flow ── */
  #inner-screen.active,#trois-inner.active{
    display:flex;flex-direction:column;height:auto;min-height:100vh;
  }
  #tj-inner-wrap{padding:2rem 6% 3rem;max-width:100%;}

  /* La Chose Royale inner pages: the sidebar links become the same
     parallelogram tabs as the home page (same colour they use on
     desktop for these pages), sitting at the end of the page content
     just like the home page's tabs — not pinned to the viewport. */
  #inner-content{overflow-y:visible;padding:2rem 6% 3rem;}
  #inner-sidebar{
    position:static;
    border:none;
    flex-direction:row;flex-wrap:wrap;align-items:flex-end;
    justify-content:center;
    gap:.5rem .6rem;
    padding:1.5rem 1rem 0;
  }
  #inner-sidebar .s-nav,#inner-sidebar .s-contact{
    position:static;flex-shrink:0;
    width:64px;height:196px;
    margin:0;padding:0;
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    color:#262626;
    font-size:.78rem;letter-spacing:.28em;
    writing-mode:vertical-rl;transform:rotate(180deg);
  }
  #inner-sidebar .s-nav::before,#inner-sidebar .s-contact::before{
    background:#efdcab;
    transform:skewX(-4deg) skewY(-2deg);
  }
  #inner-sidebar .s-nav:hover::before,#inner-sidebar .s-contact:hover::before{
    background:#f7e9c4;transform:skewX(-4deg) skewY(-2deg);
  }
  #inner-sidebar .s-nav.on{color:#262626;}
  #inner-sidebar .s-nav.on::before{background:#c9b165;}
  #inner-sidebar .s-back{
    order:-1;flex-basis:100%;width:100%;
    writing-mode:horizontal-tb;transform:none;
    text-align:right;
    font-size:.58rem;letter-spacing:.12em;
    margin:0 0 2rem;
  }
  /* Trois Jambes inner pages keep the wrapping top-nav treatment
     (unchanged — this request only concerns La Chose Royale) */
  #tj-sidebar{
    border-left:none;border-bottom:.5px solid rgba(184,154,56,.13);
    flex-direction:row;flex-wrap:wrap;
    justify-content:center;align-items:center;
    padding:7rem 1rem 1rem;gap:.4rem;
  }
  #tj-sidebar .s-nav,#tj-sidebar .s-contact{
    width:auto;height:auto;margin:.2rem;padding:.5rem .95rem;
  }
  /* The active-page dot is positioned via a desktop-tuned right:-1.3rem
     offset, meant for a vertical right-aligned column. In this wrapped
     horizontal row that fixed offset lands on whatever happens to sit
     next to it instead of the item itself — center it under the pill's
     own label instead, so it always reads as belonging to that pill. */
  #tj-sidebar .s-nav::after{
    right:auto;left:50%;top:auto;bottom:.14rem;
    transform:translateX(-50%);
  }

  /* JS-cloned back-to-home logos on the inner pages — same inline-style
     pattern as #home-logo, so they also need !important here */
  #inner-logo{
    position:absolute!important;top:14px!important;right:14px!important;
    width:56px!important;height:56px!important;z-index:20!important;
  }
  #tj-inner-logo{
    position:absolute!important;top:14px!important;right:14px!important;
    width:auto!important;height:44px!important;z-index:20!important;
  }
  #inner-lang,.tj-lang{top:78px;right:14px;font-size:.68rem;gap:.4rem;z-index:30;}

  /* ── TROIS JAMBES HOME ── */
  #tj-home-wrap{padding:8rem 6% 3rem;}
  #tj-squares{flex-wrap:wrap;gap:.9rem;}

  /* ── content blocks: single column, comfortable margins ── */
  .sg{grid-template-columns:1fr;}
  .cal-rooms{grid-template-columns:1fr;gap:2.4rem;}
  .i-ttl,.tj-ttl{font-size:1.9rem;}
  .i-body,.tj-body{max-width:100%;}

  /* ── popup / lightbox: a bit less padding so content fits ── */
  .pbox{padding:1.5rem;width:92%;}
}

@media (max-width:520px){
  #home-title{font-size:1.5rem;}
  #home-lang{top:74px;right:12px;font-size:.62rem;gap:.32rem;}
  #home-logo{width:48px!important;height:48px!important;top:12px!important;right:12px!important;}
  #home-screen{padding:6rem 6% 0;}
  #bottom-nav{gap:.4rem;}
  .nav-tab,
  #inner-sidebar .s-nav,#inner-sidebar .s-contact{
    width:52px;height:168px;margin-bottom:0;padding-bottom:0;
  }
  .nav-tab span{font-size:.68rem;letter-spacing:.2em;}
  #inner-sidebar .s-nav,#inner-sidebar .s-contact{font-size:.68rem;letter-spacing:.2em;}

  .soon-event{flex-wrap:wrap;row-gap:.2rem;}
  .soon-type{margin-left:0;flex-basis:100%;padding-left:calc(42px + 34px + .5rem);}

  .i-ttl,.tj-ttl{font-size:1.55rem;}
  .sc-name{font-size:1.35rem;}

  /* reservation form: single column on phones */
  .rform-cols{grid-template-columns:1fr;}
  .rform-full{grid-column:1;}

  /* activities list: date stacks above the title instead of a side column */
  .ai{grid-template-columns:1fr;gap:.3rem;}
  .ai-dt{margin-bottom:.15rem;}

  /* newsletter: input and button stack instead of sitting side by side */
  .nl-row{flex-direction:column;align-items:stretch;}
  .nl-btn{width:100%;}

  .pbox{padding:1.2rem;}
  .p-img{max-height:220px;}
  .p-ttl{font-size:1.4rem;}

  #tj-home-wrap{padding:6.5rem 6% 2.5rem;}
  .tj-btn-tab{padding:.6rem .9rem;}
}