/* Aplomb — the landing page. Loaded by that page only (the public shell it sits in is in
   app.css, beside the office and field shells).
   Layout and type only: every colour, size, radius and duration comes from tokens.css.
   Breakpoints match app.css: 600px phone, 1024px wide. */

/* ------------------------------------------------------------------------- */
/* Landing page                                                               */
/* ------------------------------------------------------------------------- */

.landing { color: var(--beton-700); }
.landing h1, .landing h2, .landing h3 { color: var(--nuit); }
.landing h1 { font: 600 var(--fs-h1)/var(--lh-h1) var(--font-display); max-width: 18ch; }
.landing h2 { font: 500 var(--fs-h2)/var(--lh-h2) var(--font-display); max-width: 26ch; }
.landing h3 { font: 600 var(--fs-h3)/var(--lh-h3) var(--font-ui); }
.landing p { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 68ch; }

.landing__inner {
  max-width: var(--content-max); margin-inline: auto;
  padding: var(--sp-12) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-6);
}
.landing__intro { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--beton-500); }
.landing__note { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--beton-500); }

/* The one inked band of the page: the problem. The office shell has no such band, so it reads
   as a pause rather than as decoration. It inverts with the theme, like every --encre fill. */
.landing__section--ink { background: var(--nuit); }
.landing__section--ink h2, .landing__section--ink h3 { color: var(--sur-foret); }
.landing__section--ink p { color: var(--foret-100); }
.landing__section--ink .landing__intro { color: var(--foret-100); }
.landing__section--tint { background: var(--surface); border-block: var(--hairline); }

/* Hero */
.landing__hero {
  max-width: var(--content-max); margin-inline: auto;
  padding: var(--sp-12) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-8);
}
.landing__hero-text { display: flex; flex-direction: column; gap: var(--sp-4); }
.landing__lede { font-size: var(--fs-h3); line-height: var(--lh-h3); }

/* The problem: six cards on the dark band */
.landing__pains {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  list-style: none; padding: 0; margin: 0;
}
.pain { display: flex; flex-direction: column; gap: var(--sp-2); }
.pain p { font-size: var(--fs-small); line-height: var(--lh-small); }

/* One moment of the day: the words, then the screen */
.feature {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding-top: var(--sp-8); border-top: var(--hairline);
}
.feature__text { display: flex; flex-direction: column; gap: var(--sp-2); }


/* Le classeur / Aplomb */
.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-small); }
.compare th, .compare td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; }
.compare tbody th { width: 20%; }
.compare__before { width: 32%; }
.compare thead th { background: var(--sable-200); color: var(--nuit); font-weight: 600; }
.compare tbody tr + tr { border-top: var(--hairline); }
.compare tbody th { color: var(--nuit); font-weight: 600; }
.compare__before { color: var(--beton-500); }
.compare__after { color: var(--beton-700); }

/* Who sees what */
.landing__roles {
  display: grid; gap: var(--sp-4); margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.landing__role { display: flex; flex-direction: column; gap: var(--sp-1); }
.landing__role dt { font-weight: 600; color: var(--nuit); }
.landing__role dd {
  margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--beton-500);
}

@media (min-width: 1024px) {
  .landing h1 { font-size: var(--fs-kpi); line-height: var(--lh-kpi); }
  .landing__inner, .landing__hero { padding-inline: var(--sp-6); }
  .landing__hero { display: grid; grid-template-columns: 6fr 5fr; align-items: center; gap: var(--sp-12); }
  .landing__pains { grid-template-columns: repeat(3, 1fr); }
  .landing__roles { grid-template-columns: repeat(4, 1fr); }
  .feature { display: grid; grid-template-columns: 2fr 3fr; align-items: center; gap: var(--sp-8); }
  /* Alternate the side the screen sits on, so six sections do not read as one list.
     nth-of-type counts the divs only, so the heading and the intro above do not shift it. */
  .feature:nth-of-type(even) .feature__text { order: 2; }
}

/* ------------------------------------------------------------------------- */
/* Where the landing page makes room for the people who do the work          */
/* ------------------------------------------------------------------------- */

/* The team, beside who sees what. */
.landing__roles-split { display: grid; gap: var(--sp-8); align-items: start; }
.landing__roles-photo { max-width: 28rem; }

/* The closing section: words on one side, the picture on the other. Never text over a drawing —
   the stand-in's figures are light, and white on them measured 1.64:1. */
.landing__final { display: grid; gap: var(--sp-8); align-items: center; }
.landing__final-texte { display: flex; flex-direction: column; gap: var(--sp-6); }
.landing__final-photo { max-width: 32rem; }

@media (min-width: 1024px) {
  .landing__roles-split { grid-template-columns: 3fr 2fr; }
  .landing__final { grid-template-columns: 3fr 2fr; }
}

/* The hero photograph, beside the words. */
.landing__hero-photo { width: 100%; }

/* One scene per section of « Ce qu'Aplomb change ». */
.feature__photo { width: 100%; }