/* ============================================================
   P1 — shared header menu (hamburger + full-screen overlay)
   Injected by nav.js so every page stays in sync.
   ============================================================ */

/* fallback for pages whose stylesheet doesn't lay the header nav out */
header nav{display:flex;align-items:center;gap:.9rem}

/* nav.js injects BOTH the hamburger and a set of inline links on every
   page; which one is shown is a width question. The phone gets the
   hamburger, so the inline links are off by default and desktop.css
   turns them on. Without this they render as a run of raw links across
   the header and push the logo off-screen. */
.navlinks{display:none}

/* ---- hamburger button, sits to the right of the header CTA ---- */
.navtoggle{
  -webkit-appearance:none;appearance:none;
  background:transparent;border:0;padding:.5rem .15rem .5rem .55rem;
  cursor:pointer;line-height:0;color:inherit;
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:2.1rem;height:2.1rem;
}
.navtoggle span{
  display:block;width:21px;height:2px;border-radius:2px;
  background:var(--slate, #262019);
  transition:transform .28s ease, opacity .2s ease;
}
/* morph to an X while open */
body.menu-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .navtoggle span:nth-child(2){opacity:0}
body.menu-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (prefers-reduced-motion: reduce){
  .navtoggle span{transition:none}
}

/* keep the header (logo + toggle) above the overlay */
body.menu-open{overflow:hidden}
body.menu-open header{z-index:50}
/* the page's own CTA button gets out of the way while the menu is open */
body.menu-open header nav .btn,
body.menu-open header nav a.join{opacity:0;pointer-events:none}

/* ---- overlay ---- */
.navmenu{
  position:fixed;inset:0;z-index:30;
  background:var(--porcelain, #F6F1E7);
  padding:calc(var(--navtop, 56px) + 1.6rem) 1.4rem 2rem;
  overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity .28s ease, visibility .28s;
}
.navmenu.open{opacity:1;visibility:visible}
@media (prefers-reduced-motion: reduce){
  .navmenu{transition:none}
}
.navmenu .inner{max-width:36rem;margin:0 auto}
.navmenu .eyebrow{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold, #A8813E);font-weight:600;display:block;margin-bottom:1.1rem;
}
.navmenu a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--hair, #DFD6C4);
  font-size:26px;font-weight:300;letter-spacing:-.015em;
  color:var(--slate, #262019);
}
.navmenu a .note{
  font-size:12px;font-weight:400;letter-spacing:0;color:var(--soft, #6E6455);
  text-align:right;flex:0 0 auto;max-width:11rem;
}
.navmenu a.current{font-weight:700}
.navmenu a.current::after{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gold, #A8813E);align-self:center;flex:0 0 auto;
}
.navmenu a.current .note{display:none}
.navmenu .minor{
  font-size:16px;font-weight:600;border-bottom:0;padding-top:1.4rem;
  color:var(--soft, #6E6455);
}
.navmenu .foot{
  margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--hair, #DFD6C4);
  font-size:12px;color:var(--soft, #6E6455);
}
.navmenu .foot a{
  display:inline;font-size:12px;padding:0;border:0;color:var(--gold, #A8813E);
}

/* ---- brand mark ---- */
.mark{display:inline-flex;align-items:center;gap:.5rem}
.mark span{margin-left:0}
.mark .logomark{height:20px;width:auto;display:block}
/* the monogram carries the header on its own; the full name lives in the footer */
header .mark span{display:none}
.bmark .logomark{height:18px;width:auto;display:inline-block;vertical-align:-1px;margin-right:.15rem}
footer .logomark{height:26px;width:auto;margin:0 auto .6rem}


/* ---------- EN / FR switcher ----------
   Injected by shared/i18n.js in three places: beside the desktop header
   links, inside the mobile overlay, and in every footer. One rule set, so
   the pair reads the same wherever it lands. */
.langsw{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:11px;letter-spacing:.12em;font-weight:700;
}
.langsw a{color:var(--soft);text-decoration:none}
.langsw a:hover,.langsw a:focus-visible{color:var(--gold)}
.langsw .on{color:var(--slate)}
.langsw .sep{color:var(--hair)}

/* In the bar: the same two-option pill the plan cards use for One / Two
   treatments, shrunk to header scale. The site already says "a binary
   choice looks like this", so the switcher borrows it rather than
   introducing a third visual language for the same idea. */
.langsw.in-bar{
  display:inline-flex;align-items:center;gap:0;
  border:1px solid var(--hair);border-radius:99px;padding:3px;
  line-height:1;
}
.langsw.in-bar .sep{display:none}
/* Sized to the hamburger (34px) and the Join button (36px) rather than to
   the type. At the smallest that looked right the tappable half was 30x19,
   which is a miss on a phone, and the language switcher has no business
   being a harder target than everything else in the bar. */
.langsw.in-bar a,
.langsw.in-bar .on{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:26px;min-width:30px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;
  padding:.3rem .55rem;border-radius:99px;
}
.langsw.in-bar .on{background:var(--green);color:var(--porcelain)}
.langsw.in-bar a{color:var(--soft)}
.langsw.in-bar a:hover,.langsw.in-bar a:focus-visible{color:var(--slate)}

/* Over the hero the bar goes transparent and everything in it turns
   porcelain, so the green fill would sink into the photograph. The active
   half inverts instead. */
body.over-hero .langsw.in-bar{border-color:rgba(246,241,231,.34)}
body.over-hero .langsw.in-bar .on{background:var(--porcelain);color:var(--slate)}
body.over-hero .langsw.in-bar a{color:rgba(246,241,231,.72)}
body.over-hero .langsw.in-bar a:hover{color:var(--porcelain)}

/* In the overlay it sits under the eyebrow, on the dark panel. */
.navmenu .langsw{margin:.15rem 0 .9rem}
.navmenu .langsw a{color:rgba(246,241,231,.62)}
.navmenu .langsw a:hover{color:var(--gold)}
.navmenu .langsw .on{color:#F6F1E7}
.navmenu .langsw .sep{color:rgba(246,241,231,.3)}

/* In the footer it replaces the old "site en français à venir" line. */
.langline{margin-top:.15rem}