/* SAMBOX Studio — page layer.
   Consumes the Broadsheet tokens and components from broadsheet.css, which must
   be linked first. Every value here comes from a token; the raw numbers that
   remain are the design's own fluid clamps and optical sizes, as authored.

   The system's rules this page keeps: no boxes, no cards, no dividers between
   sections — hierarchy is the serif scale and whitespace. The one exception is
   deliberate press furniture: the thick/thin rule pairs around the hero dateline
   and the legal-notice heading. */

/* — base — */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

a:hover { color: var(--color-accent-600); }

/* — page rhythm — */

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

/* Anchored sections clear the sticky header. --header-h is published by
   main.js from the header's measured height (it wraps to two rows on narrow
   viewports); the fallback covers the no-JS case at desktop width. */
.section,
#top {
  scroll-margin-top: calc(var(--header-h, 76px) + var(--space-4));
}
.section { padding-bottom: clamp(56px, 10vh, 120px); }

/* The literal fallbacks above and below are the header's measured height at
   each layout — one row, then two once the anchors drop. They only apply if
   main.js has not run; with it, --header-h is the live measurement. */
@media (max-width: 780px) {
  .section,
  #top { scroll-margin-top: calc(var(--header-h, 108px) + var(--space-4)); }
}

.kicker {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 13px;
  line-height: 1.12;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.section__title {
  font-size: clamp(28px, 4vw, 44px);
  max-width: 22ch;
  margin: 0 0 var(--space-8);
}

/* Body copy in the secondary voice — capability, method and FAQ blocks. */
.body-muted {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — press furniture: the thick/thin rule pair — */

.rail {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.rail__bar {
  flex: 1 1 auto;
  background: var(--color-text);
}
.rail__bar--thick { height: 6px; }
.rail__bar--thin { height: 1px; }
.rail__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  white-space: nowrap;
}

/* — sticky header — */

.site-header {
  position: sticky;
  top: 0;
  z-index: 15;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
}

.site-nav {
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, var(--space-6));
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-3) clamp(20px, 5vw, 64px);
}

.site-nav .brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-right: auto;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
}
.site-nav .brand em {
  font-style: italic;
  font-weight: 400;
  font-size: 0.6em;
  color: var(--color-accent-700);
}
.site-nav .brand:hover { color: var(--color-text); }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, var(--space-6));
}
.site-nav__links a {
  font-size: 14px;
  text-decoration: none;
  color: var(--color-text);
}
.site-nav__links a:hover { color: var(--color-accent-600); }

.lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lang .lang__item {
  padding: 2px 4px;
  font-size: 12px;
  text-decoration: none;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.lang .lang__item:hover { color: var(--color-accent-600); }
.lang .lang__item[aria-current='true'] { color: var(--color-accent-700); }
.lang__sep { opacity: 0.35; }

.site-nav .btn-primary { color: #fff; }

/* The mobile header treatment the handoff left to the implementation.
   Below this width the row cannot hold identity, anchors, the language switch
   and the CTA at once. Letting all four wrap freely gives a three-row, 158px
   sticky bar — a fifth of a phone screen, permanently. So: the anchors take
   their own row, and the CTA is dropped. It is the one redundant element of
   the four — it points at #produit, which the "Produit" anchor beside it
   already reaches — and losing it costs less than losing the navigation. */
@media (max-width: 780px) {
  .site-nav__links {
    order: 3;
    flex-basis: 100%;
    gap: var(--space-4);
    padding-top: var(--space-1);
  }
  .site-nav .btn-primary { display: none; }
}

/* — hero — */

.hero {
  padding: clamp(48px, 10vh, 110px) 0 clamp(56px, 10vh, 120px);
  max-width: 920px;
}
.hero__rail { margin-bottom: var(--space-6); }
.hero__title {
  font-size: clamp(44px, 8vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 20ch;
}
.hero__title em {
  font-style: italic;
  color: var(--color-accent-700);
}
.hero__lede {
  font-size: clamp(18px, 2.2vw, 23px);
  line-height: 1.45;
  max-width: 52ch;
  margin: var(--space-6) 0 0;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  margin: var(--space-8) 0 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* — capabilities — */

.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8) clamp(30px, 6vw, 80px);
}
.capability .kicker { margin: 0 0 var(--space-2); }
.capability__title {
  font-size: 22px;
  margin: 0 0 var(--space-2);
}

/* — product — */

.product__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.product__name {
  font-size: clamp(48px, 10vw, 124px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  margin: 0;
}
/* The page's single use of the second accent. */
.product__status {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-2);
}
.product__baseline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  margin: var(--space-4) 0 var(--space-8);
}
.product__copy {
  max-width: 68ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.product__copy p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
}
.product__cta { margin-top: var(--space-6); }

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-6) var(--space-8);
  margin: var(--space-8) 0 0;
}
.specs dt,
.legal dt {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0 0 var(--space-1);
}
.specs dd {
  margin: 0;
  font-size: 16px;
}

/* — method — */

.method {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.method__item {
  display: grid;
  grid-template-columns: minmax(90px, 110px) 1fr;
  gap: var(--space-4);
}
.method__step {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  padding-top: 8px;
}
.method__title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(20px, 2.4vw, 26px);
  display: block;
  margin-bottom: var(--space-2);
}

/* The step label and its text stop fitting side by side; stack them and drop
   the optical padding that aligned the label to the title's baseline. */
@media (max-width: 560px) {
  .method__item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .method__step { padding-top: 0; }
}

/* — FAQ — */

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8) clamp(30px, 6vw, 80px);
  max-width: 960px;
}
.faq__question {
  font-size: 20px;
  margin: 0 0 var(--space-2);
}

/* — contact — */

.contact__email {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  word-break: break-word;
}
.contact__email a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 4px solid var(--color-accent);
}
.contact__email a:hover { color: var(--color-accent-600); }

/* — legal notice — */

.legal {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 72px) clamp(20px, 5vw, 64px) clamp(48px, 8vh, 88px);
  scroll-margin-top: calc(var(--header-h, 76px) + var(--space-4));
}
.legal__rail { margin-bottom: var(--space-8); }
.legal__rail .rail__bar--thick { height: 3px; }
.legal__title {
  font-size: clamp(18px, 2.2vw, 24px);
  margin: 0;
  white-space: nowrap;
}
.legal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6) clamp(30px, 6vw, 72px);
  font-size: 15px;
  line-height: 1.65;
}
.legal__col { margin: 0; }
.legal dd { margin: 0 0 var(--space-4); }
.legal dd:last-child { margin-bottom: 0; }
.legal__colophon {
  margin: var(--space-8) 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}