/* ==========================================================================
   GUIVONIZ — Base, typographie, layout
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface-page-canvas);
  color: var(--color-forest-depths);
  font-family: var(--font-seed-sans);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: var(--font-weight-regular);
  font-feature-settings: "ss05" on, "cv05" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--color-lime-pulse); color: var(--color-forest-depths); }

:focus-visible {
  outline: 2px solid var(--color-forest-depths);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}
.sec-dark :focus-visible, .on-dark :focus-visible { outline-color: var(--color-snow-white); }

/* ---------- Titres : la signature « whisper headline » ---------- */
h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: var(--font-weight-w350);
  text-wrap: balance;
}
.t-display   { font-size: var(--text-display);    line-height: var(--leading-display);    letter-spacing: var(--tracking-display);    font-weight: var(--font-weight-w350); }
.t-heading-lg{ font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); font-weight: var(--font-weight-w350); }
.t-heading   { font-size: var(--text-heading);    line-height: 1.08;                      letter-spacing: -0.36px;                    font-weight: var(--font-weight-w350); }
.t-heading-sm{ font-size: var(--text-heading-sm); line-height: 1.2;                       letter-spacing: -0.32px;                    font-weight: var(--font-weight-w350); }
.t-subheading{ font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); font-weight: var(--font-weight-w350); }
.t-body      { font-size: var(--text-body);       line-height: 1.55;                      letter-spacing: var(--tracking-body); }
.t-body-sm   { font-size: var(--text-body-sm);    line-height: var(--leading-body-sm); }
.t-caption   { font-size: var(--text-caption);    line-height: var(--leading-caption); }
.t-light     { font-weight: var(--font-weight-light); }

p { margin: 0 0 var(--spacing-16); }
p:last-child { margin-bottom: 0; }

.mono {
  font-family: var(--font-seed-sans-mono);
  font-size: var(--text-label);
  line-height: 1.5;
  letter-spacing: 0.015em;
  font-weight: var(--font-weight-regular);
}
.eyebrow {
  font-family: var(--font-seed-sans-mono);
  font-size: var(--text-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: var(--font-weight-regular);
  color: var(--color-pewter);
  display: block;
}
.sec-dark .eyebrow, .on-dark .eyebrow { color: rgba(252, 252, 247, 0.62); }
.muted { color: var(--color-pewter); }
.sec-dark .muted, .on-dark .muted { color: rgba(252, 252, 247, 0.74); }
.lime { color: var(--color-lime-pulse); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.wrap-narrow { max-width: 760px; }
.wrap-mid { max-width: 940px; }

.sec {
  padding-block: var(--spacing-96);
  position: relative;
}
.sec-tight { padding-block: var(--spacing-64); }
.sec-light { background: var(--surface-page-canvas); }
.sec-stone { background: var(--surface-card-surface); }
.sec-dark  { background: var(--surface-dark-section); color: var(--color-snow-white); }
.sec-dark h1, .sec-dark h2, .sec-dark h3 { color: var(--color-snow-white); }

@media (max-width: 860px) {
  .sec { padding-block: var(--spacing-64); }
  .sec-tight { padding-block: var(--spacing-48); }
}

.stack-8  > * + * { margin-top: var(--spacing-8); }
.stack-16 > * + * { margin-top: var(--spacing-16); }
.stack-24 > * + * { margin-top: var(--spacing-24); }
.stack-32 > * + * { margin-top: var(--spacing-32); }
.stack-48 > * + * { margin-top: var(--spacing-48); }

.row { display: flex; align-items: center; gap: var(--spacing-8); flex-wrap: wrap; }
.row-16 { gap: var(--spacing-16); }
.row-24 { gap: var(--spacing-24); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); flex-wrap: wrap; }

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-16); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-16); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-24); }
.grid-asym { display: grid; grid-template-columns: 40% 1fr; gap: var(--spacing-48); align-items: center; }
/* Un enfant de grille a min-width:auto par défaut : son contenu le plus large
   — un badge en nowrap, un mot long — élargit la piste au-delà du conteneur
   et déborde la page. min-width:0 rend la colonne libre de rétrécir. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-asym > *, .grid-asym-rev > * { min-width: 0; }
.grid-asym-rev { grid-template-columns: 1fr 40%; }

@media (max-width: 1040px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .grid-asym, .grid-asym-rev { grid-template-columns: 1fr; gap: var(--spacing-32); }
}
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

.hr {
  height: 1px;
  background: rgba(28, 58, 19, 0.14);
  border: 0;
  margin: 0;
}
.sec-dark .hr, .on-dark .hr { background: rgba(252, 252, 247, 0.18); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--spacing-16); top: -60px; z-index: 200;
  background: var(--color-forest-depths); color: var(--color-snow-white);
  padding: 10px 18px; border-radius: var(--radius-full); font-size: var(--text-caption);
  transition: top var(--dur-fast) var(--ease-organic);
}
.skip-link:focus { top: var(--spacing-16); }