/* ==========================================================================
   Pied Carré — Swiss one-pager
   Reference artboards: desktop 1512×982, mobile 393
   Type scale: fluid via vw (22px @ 393, 57px @ 1512)
   Spacing grid: 8px unit
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --font-display: "neue-haas-grotesk-display", sans-serif;
  --font-text:    "neue-haas-grotesk-text", sans-serif;

  /* Type sizes — fluid: 22px @ 393px mobile, 57px @ 1512px desktop */
  --copy-ref-width-mob:  393;
  --copy-size-at-mob:    22;
  --copy-ref-width:      1512;
  --copy-size-at-ref:    57;
  --footer-size-desktop: 20px;
  --footer-size-mobile:  18px;
  --footer-lh-mobile:    28px;

  /* Spacing (from Figma annotations) */
  --info-gap:          24px;   /* desktop: between info sections */
  --info-gap-mobile:   28px;   /* mobile: between info sections */
  --links-col-gap:     32px;   /* desktop: between two link columns */
  --lang-gap-desktop:  16px;   /* desktop: gap between lang buttons */
  --lang-offset-mob:   16px;   /* mobile: EN offset from FR */

  /* Layout */
  --logo-size-desktop: 354px;
  --left-pad:          29px;   /* desktop left column inner padding */
  --left-pad-mobile:   31px;
  --right-pad:         30px;   /* right edge padding (~2% of 1512) */
  --info-bottom:       27px;   /* desktop: info bottom gap */
  --info-bottom-mob:   26px;   /* mobile: info bottom gap */

  /* Colors */
  --color-ink:      #000;
  --color-bg:       #fff;
  --color-inactive: rgb(0 0 0 / 0.24);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-weight: 400;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Mobile layout (default — 393px reference)
   Content flows top to bottom: logo → copy → info footer
   -------------------------------------------------------------------------- */

/* Logo wrapper — mobile
   JS applies transform: translateY() scale() only; no position change. */
.logo {
  position: relative;
  background: var(--color-bg);
  will-change: transform;
  transform-origin: top left;
  -webkit-user-select: none;
  user-select: none;
}

.logo__img--desktop {
  display: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.logo__img--mobile {
  display: block;
  /* Width: full viewport minus left inset on both sides.
     Mobile comp: logo x=27.489, so left+right inset = 27.489×2 ≈ 54.978px */
  width: calc(100% - 54.978px);
  height: auto;
  margin-left: 27.489px;
  /* Mobile comp: logo frame y=7 from iPhone frame top */
  margin-top: 7px;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Spacer div injected by JS — holds logo's layout height while logo is fixed */
.logo__spacer {
  display: block;
}

/* Scrollable copy region — full width on mobile */
.page__right {
  padding: 0 var(--right-pad) 0 var(--left-pad-mobile);
  /* JS adds margin-top on mobile to account for scaled logo height gap */
}

/* Body copy — fluid mobile size: 22px at 393px */
.copy {
  font-family: var(--font-text);
  font-size: calc(var(--copy-size-at-mob) / var(--copy-ref-width-mob) * 100vw);
  font-weight: 400;
  line-height: normal;
  color: var(--color-ink);
}

.copy p {
  margin: 0;
}

/* Break only at ­ in markup — no automatic hyphenation */
.copy {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Info footer — flows after copy on mobile */
.info {
  display: flex;
  flex-direction: column;
  gap: var(--info-gap-mobile);
  padding: 112px var(--right-pad) var(--info-bottom-mob) var(--left-pad-mobile);
}

/* Language toggle */
.info__lang {
  display: flex;
  font-family: var(--font-text);
  font-size: var(--footer-size-mobile);
  line-height: normal;
  white-space: nowrap;
}

/* Other language (the one you can switch to): full black */
.lang-btn--other {
  color: var(--color-ink);
}

/* Current language: dimmed */
.lang-btn--current {
  color: var(--color-inactive);
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}

.lang-btn--current:hover {
  text-decoration: none;
}

/* Mobile: offset second lang button via margin */
.info__lang .lang-btn + .lang-btn {
  margin-left: var(--lang-offset-mob);
}

/* Link columns */
.info__links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--info-gap-mobile) var(--links-col-gap);
  font-family: var(--font-text);
  font-size: var(--footer-size-mobile);
  font-weight: 400;
  white-space: nowrap;
}

.info__links-col {
  display: flex;
  flex-direction: column;
}

.info__links-col + .info__links-col {
  margin-left: 0;
}

.info__links-col a,
.info__links-col .info__link-plain {
  display: block;
  line-height: var(--footer-lh-mobile);
  color: var(--color-ink);
}

.info__links-col .info__link-plain {
  text-decoration: none;
}

/* Address — shrink hit area to text lines only (not full .info column width) */
.info__address {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-text);
  font-size: var(--footer-size-mobile);
  font-weight: 400;
  line-height: normal;
  color: var(--color-ink);
  text-decoration: none;
}

.info__address > span {
  display: block;
}

/* --------------------------------------------------------------------------
   Newsletter overlay
   -------------------------------------------------------------------------- */

/* Mobile-first: full viewport fixed overlay */
.newsletter {
  position: fixed;
  inset: 0;
  z-index: 20;
  /* shown/hidden via [hidden] — JS removes the attribute */
}

/* Invisible full-cover backdrop; clicks on it close the overlay */
.newsletter__backdrop {
  position: absolute;
  inset: 0;
}

/* Panel: white, full-screen on mobile */
.newsletter__panel {
  position: relative;
  background: var(--color-bg);
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 26px var(--right-pad) 40px var(--left-pad-mobile);
  display: flex;
  flex-direction: column;
}

/* Close × — top right, text-weight, no decoration */
.newsletter__close {
  position: absolute;
  top: 24px;
  right: var(--right-pad);
  font-family: var(--font-text);
  font-size: var(--footer-size-mobile);
  line-height: 1;
  color: var(--color-ink);
  cursor: pointer;
  /* Enlarge tap target without changing visual size */
  padding: 8px;
  margin: -8px;
}

/* Title — same scale as body copy (.copy) */
.newsletter__title {
  font-family: var(--font-text);
  font-size: calc(var(--copy-size-at-mob) / var(--copy-ref-width-mob) * 100vw);
  font-weight: 400;
  line-height: normal;
  margin-top: 0;
  margin-bottom: 48px;
}

/* "* indicates required" hint — below member checkbox */
.newsletter__required {
  font-family: var(--font-text);
  font-size: var(--footer-size-mobile);
  font-weight: 400;
  line-height: normal;
  color: var(--color-inactive);
  margin-top: 8px;
  margin-bottom: 0;
}

.newsletter__asterisk {
  color: inherit;
}

/* Each field row */
.newsletter__field {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.newsletter__field label {
  font-family: var(--font-text);
  font-size: var(--footer-size-mobile);
  font-weight: 400;
  line-height: normal;
  margin-bottom: 4px;
  color: var(--color-ink);
}

/* Minimal text inputs — bottom border only */
.newsletter__field input[type="email"],
.newsletter__field input[type="text"] {
  font-family: var(--font-text);
  font-size: var(--footer-size-mobile);
  font-weight: 400;
  line-height: normal;
  color: var(--color-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-ink);
  border-radius: 0;
  outline: none;
  padding: 4px 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.newsletter__field input[type="email"]::placeholder,
.newsletter__field input[type="text"]::placeholder {
  color: var(--color-inactive);
}

.newsletter__field input[type="email"]:focus,
.newsletter__field input[type="text"]:focus {
  border-bottom-color: var(--color-ink);
}

/* Checkbox row — inline */
.newsletter__field--check {
  flex-direction: row;
  align-items: baseline;
  gap: 0;
}

.newsletter__field--check label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 0;
  cursor: pointer;
}

.newsletter__field--check input[type="checkbox"] {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--color-ink);
  cursor: pointer;
}

/* When required email is missing, temporarily de-emphasize optional fields */
.newsletter[data-email-required-missing] .newsletter__field--optional {
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

/* Response messages */
.newsletter__response {
  font-family: var(--font-text);
  font-size: var(--footer-size-mobile);
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}

#mce-responses {
  margin-top: 16px;
}

/* Submit button — plain text, underline on hover */
.newsletter__submit {
  font-family: var(--font-text);
  font-size: var(--footer-size-mobile);
  font-weight: 400;
  line-height: normal;
  color: var(--color-ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  margin-top: 40px;
  align-self: flex-start;
}


/* --------------------------------------------------------------------------
   Desktop layout (≥1024px wide and landscape — width > height)
   Square or portrait at desktop width uses mobile layout + logo scale.
   - Body scroll locked; only .page__right scrolls
   - .logo: position:fixed top-left
   - .info: position:fixed bottom-left
   - .page__right: margin-left:50vw, overflow-y:auto
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (orientation: landscape) {

  body {
    overflow: hidden;
    height: 100vh;
  }

  .page {
    height: 100vh;
  }

  /* Logo: fixed 354×354 square at top-left of viewport */
  .logo {
    position: fixed !important;
    top: 0;
    left: 0;
    width: var(--logo-size-desktop) !important;
    height: var(--logo-size-desktop);
    background: transparent;
    z-index: 2;
    /* Rotation pivot at center; override mobile top-left origin */
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.25s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .logo {
      transition: none;
    }
  }

  .logo__img--desktop {
    display: block;
    width: var(--logo-size-desktop);
    height: var(--logo-size-desktop);
  }

  .logo__img--mobile {
    display: none !important;
  }

  /* Spacer not needed on desktop */
  .logo__spacer {
    display: none !important;
  }

  /* Right column: scrollable pane fixed to the right half */
  .page__right {
    position: fixed;
    top: 0;
    left: 50vw;
    right: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Desktop padding: no left pad (text starts at 50vw); right matches comp ~30px */
    padding: 0 var(--right-pad) 0 0;
    margin-top: 0 !important;  /* reset any JS mobile margin */
  }

  /* Body copy on desktop: 57px at 1512px wide, scales with viewport */
  .copy {
    font-family: var(--font-display);
    font-size: calc(var(--copy-size-at-ref) / var(--copy-ref-width) * 100vw);
    font-weight: 500;
    line-height: normal;
    padding-top: 23px;
    /* Bottom padding computed by JS — last-line baseline meets H2T 3B2 at max scroll */
  }

  /* Manual highlight — <span class="hl">…</span> */
  .copy .hl {
    color: var(--color-bg);
    background-color: var(--color-ink);
    padding: 0.02em 0.08em 0.06em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  /* User text selection — body copy + footer (no stroke/shadow) */
  .copy::selection,
  .copy *::selection,
  .info::selection,
  .info *::selection {
    background-color: var(--color-ink);
    color: var(--color-bg);
  }

  .copy::-moz-selection,
  .copy *::-moz-selection,
  .info::-moz-selection,
  .info *::-moz-selection {
    background-color: var(--color-ink);
    color: var(--color-bg);
  }

  /* Info block: fixed to bottom-left of viewport */
  .info {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 50vw;
    gap: var(--info-gap);
    padding: 0 0 var(--info-bottom) var(--left-pad);
    z-index: 2;
    background: var(--color-bg);
  }

  /* Desktop: lang toggle gap */
  .info__lang {
    font-size: var(--footer-size-desktop);
  }

  .info__lang .lang-btn + .lang-btn {
    margin-left: var(--lang-gap-desktop);
  }

  /* Desktop: link columns use gap, not margin-left */
  .info__links {
    font-size: var(--footer-size-desktop);
    gap: var(--links-col-gap);
  }

  .info__links-col + .info__links-col {
    margin-left: 0;
  }

  .info__links-col a,
  .info__links-col .info__link-plain {
    line-height: normal;
  }

  /* Address */
  .info__address {
    font-size: var(--footer-size-desktop);
  }

  /*
   * Compact left column — short landscape viewports.
   * Keep clean gutters/margins and reflow footer to:
   *   row 1: language
   *   row 2: links | social | address
   * Only logo and footer type scale modestly to avoid overlap.
   */
  @media (max-height: 650px) {
    .logo {
      --logo-size-compact: clamp(84px, calc(100vh - 156px), 354px);
      width: var(--logo-size-compact) !important;
      height: var(--logo-size-compact);
      /*
       * Emulate scale pivot at (32px, 32px) in the 354px reference square.
       * As size shrinks, move box by 32 * (1 - size/354) on both axes.
       */
      left: calc((1 - (var(--logo-size-compact) / 354px)) * 32px);
      top: calc((1 - (var(--logo-size-compact) / 354px)) * 32px);
    }

    .logo__img--desktop {
      width: 100%;
      height: 100%;
    }

    .info {
      --compact-footer-size: clamp(16px, calc(0.024 * 100vh), 20px);
      --compact-row-gap: clamp(14px, 2.2vh, 24px);
      --compact-col-gap: clamp(24px, 3vw, 40px);

      display: grid;
      grid-template-columns: max-content max-content max-content;
      grid-template-rows: auto auto;
      column-gap: var(--compact-col-gap);
      row-gap: var(--compact-row-gap);
      align-items: start;
      align-content: end;
      padding: 0 var(--right-pad) var(--info-bottom) var(--left-pad);
    }

    .info__lang {
      grid-column: 1 / -1;
      grid-row: 1;
      font-size: var(--compact-footer-size);
    }

    .info__lang .lang-btn + .lang-btn {
      margin-left: clamp(12px, 1.4vw, 16px);
    }

    .info__links {
      display: contents;
      font-size: var(--compact-footer-size);
    }

    .info__links-col:first-child {
      grid-column: 1;
      grid-row: 2;
    }

    .info__links-col:last-child {
      grid-column: 2;
      grid-row: 2;
    }

    .info__address {
      grid-column: 3;
      grid-row: 2;
      font-size: var(--compact-footer-size);
    }
  }

  /* Newsletter overlay — desktop: covers .page__right column only.
     .page__right is already position:fixed, which establishes a containing
     block for absolutely-positioned children — no change needed. */
  .newsletter {
    position: absolute;
    inset: 0;
    z-index: 5;
  }

  .newsletter__panel {
    padding: 23px var(--right-pad) 40px 0;
  }

  .newsletter__close {
    top: 23px;
    right: var(--right-pad);
    font-size: var(--footer-size-desktop);
  }

  .newsletter__title {
    font-family: var(--font-display);
    font-size: calc(var(--copy-size-at-ref) / var(--copy-ref-width) * 100vw);
    font-weight: 500;
    margin-bottom: 64px;
  }

  .newsletter__required,
  .newsletter__field label,
  .newsletter__field input[type="email"],
  .newsletter__field input[type="text"],
  .newsletter__response,
  .newsletter__submit {
    font-size: var(--footer-size-desktop);
  }

  button:not(.newsletter__close):hover,
  .info a:hover,
  .newsletter a:hover {
    text-decoration: underline;
  }

  .newsletter__close:hover {
    text-decoration: none;
  }

}

/* --------------------------------------------------------------------------
   Focus styles
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  body {
    overflow: visible !important;
    height: auto !important;
  }
  .logo,
  .info {
    position: static !important;
  }
  .page__right {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    left: 0 !important;
  }
}