/*
 * Home page on direction D (ticket 0237, sub-lot B2-a, rules 14 to 24).
 *
 * The page reproduces the free design of Antoine (docs/design/direction-2026-10/d/index.html
 * and styles.css): composition, grids, surfaces, corners, light and grid paper behind the
 * form, the stage of the sheet, the tiers in Nuit, the cards, the block of the reminder. It
 * departs from it only for the four reasons of rule 14: the minimums of docs/12 kept by
 * Antoine (14 pixels for every text, contrast of 4.5 for a text and 3 for a border of a
 * field, a bordered button or a focus indicator, targets of 44 pixels, 360 pixels without
 * horizontal scrolling, no resource from a third party, no script required, a colour written
 * in tokens.css only), the texts (rule 18), the closed list of rule 17, a datum that the site
 * does not hold (the element is left out).
 *
 * Loaded by templates/core/home.html only (rule 22), after tokens.css and site.css. Every
 * colour is a role of tokens.css or a mix of roles; the shadows are the tokens of the closed
 * list or a ring of the closed list of apps/core/tests/test_page_sheets.py; the movements are
 * the closed list of rule 20 (e), declared under prefers-reduced-motion: no-preference only.
 * The names `lp-*` are those of this page; the rules that restyle the partials shared with
 * other pages (the example sheet, the reminder) are scoped by `.site-main--home`, so that the
 * other pages keep their own until their sub-lot.
 */

/* Hero ------------------------------------------------------------------ */

.lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(3.5rem, 8vw, 6.5rem);
}

/* The warm light behind the form. */
.lp-hero::before {
  position: absolute;
  top: -16.25rem;
  right: -13.75rem;
  z-index: -1;
  width: 56.25rem;
  height: 56.25rem;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, color-mix(in srgb, var(--color-brand-on-band) 50%, var(--color-surface-muted)) 55%, transparent),
    transparent
  );
  content: "";
}

/* Grid paper, very discreet, masked towards the corner. */
.lp-hero::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--color-ink) 4.5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-ink) 4.5%, transparent) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(
    ellipse 80% 70% at 30% 20%,
    var(--color-ink) 20%,
    transparent 75%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 80% 70% at 30% 20%,
    var(--color-ink) 20%,
    transparent 75%
  );
  content: "";
}

.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 60rem) {
  .lp-hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  }
}

.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  padding: 0.375rem 0.875rem 0.375rem 0.375rem;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: var(--font-size-xs);
}

.lp-pill b {
  color: var(--color-ink);
  font-weight: var(--font-weight-strong);
}

.lp-pill__dot {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-surface);
}

.lp-pill__dot .icon {
  width: 0.8125rem;
  height: 0.8125rem;
}

.lp-title {
  margin: 1.75rem 0 0;
  font-size: calc(1.04 * clamp(2.5rem, 5vw, 4.125rem));
  font-weight: var(--font-weight-regular);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}

/* The words set off in the titles take the Visa (italic of the free design). */
.lp-title em,
.lp-head h2 em,
.site-main--home .home-final h2 em {
  font-style: italic;
}

.lp-title em,
.lp-head h2 em {
  color: var(--color-brand);
}

.lp-title em {
  white-space: nowrap;
}

.lp-lead {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  line-height: 1.55;
}

.lp-promise__lead {
  max-width: 34em;
  margin-top: 1.625rem;
}

/* Under 560 pixels the free design sets the lead at 17 pixels (its last responsive block). */
@media (max-width: 35rem) {
  .lp-promise__lead {
    font-size: 1.0625rem;
  }
}

.lp-guarantees {
  display: grid;
  gap: 0.875rem;
  margin: 2.125rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-guarantees > li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.875rem;
  align-items: start;
  margin: 0;
  color: var(--color-ink-soft);
}

.lp-guarantees strong {
  color: var(--color-ink);
  font-weight: var(--font-weight-strong);
}

.lp-guarantees__icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: var(--border-width) solid var(--color-line);
  border-radius: 0.5625rem;
  background: var(--color-surface);
  color: var(--color-brand);
}

.lp-guarantees__icon .icon {
  width: 0.9375rem;
  height: 0.9375rem;
  stroke-width: 2.2;
}

.lp-guarantees > li > span:last-child {
  padding-top: 1px;
}

.lp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.75rem;
  align-items: center;
  margin-top: 2.375rem;
  padding-top: 1.375rem;
  border-top: var(--border-width) solid var(--color-line);
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

.lp-trust span {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.lp-trust .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-ink-soft);
}

/* The free design hides the line of trust under 560 pixels. */
@media (max-width: 35rem) {
  .lp-trust {
    display: none;
  }
}

/* The card of the form --------------------------------------------------- */

.lp-intake {
  position: relative;
  padding: clamp(1.375rem, 3vw, 2.25rem);
  border: var(--border-width) solid color-mix(in srgb, var(--color-ink) 8%, transparent);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.lp-intake__head {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.lp-intake__title {
  margin: 0;
  font-size: clamp(1.625rem, 2.6vw, 2rem);
}

.lp-intake__tag {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-intake__help {
  margin: 0.5rem 0 0;
  color: var(--color-ink-muted);
  font-size: 0.96875rem;
}

.lp-intake .field {
  max-width: none;
  margin: 1.375rem 0 0;
}

.lp-intake .field > label {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin: 0 0 0.5rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
}

.lp-intake .field > label small {
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

.lp-intake textarea,
.lp-intake input[type="email"] {
  padding: 0.875rem 1rem;
  border-color: var(--color-border);
  border-radius: 0.75rem;
  background: var(--color-page);
  font-size: 1rem;
}

.lp-intake textarea {
  height: 10.5rem;
  min-height: 10.5rem;
  line-height: 1.55;
}

.lp-intake input[type="email"] {
  min-height: 3.125rem;
}

.lp-intake textarea:hover,
.lp-intake input[type="email"]:hover {
  border-color: var(--color-ink-muted);
}

.lp-intake textarea:focus,
.lp-intake input[type="email"]:focus {
  border-color: var(--color-ink);
  background: var(--color-surface);
}

/* The tools of the field: the button « Dicter » at the left, the counter at the right. A grid of
   a fixed first column, so that the counter has the same room with the button, without it and
   without script (the card is as high in the three cases, ticket 0177, rule 1 ter (2)); under
   40 rem the counter goes under the button, on its own line, which takes no room while the
   counter is empty. */
.lp-intake .field__tools {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0 0.75rem;
  align-items: center;
  /* The row keeps the height of the button « Dicter » with or without it. */
  min-height: var(--target-size);
  margin-top: 0.25rem;
}

@media (max-width: 39.9375rem) {
  .lp-intake .field__tools {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .lp-intake .field__foot-slot {
    min-height: var(--target-size);
  }
}

.lp-intake .field__foot-slot {
  position: static;
  display: flex;
}

.lp-intake .dictation-slot {
  max-width: none;
  margin: 0;
  text-align: right;
}

@media (max-width: 39.9375rem) {
  .lp-intake .dictation-slot {
    text-align: left;
  }
}

.lp-intake .dictation-slot:has(> :not(:empty)) {
  margin-top: 0.25rem;
}

.lp-intake .dictation-slot:not(:has(> :not(:empty))) {
  margin: 0;
}

.lp-intake .dictation-slot > * {
  margin: 0;
}

.lp-intake .dictation-slot > .dictation-notice {
  text-align: left;
}

.lp-intake .dictation-button {
  padding: 0.375rem 0.75rem;
}

.lp-intake .dictation-button::before {
  inset: 0.375rem 0;
  border-color: var(--color-border);
}

.lp-intake .dictation-button .icon {
  color: var(--color-brand);
}

.lp-intake .description-counter {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

/* The topics: chips that pose an example of description (rendered by the script of the
   field); the box of 44 pixels holds a visible chip of 32. */
.lp-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  margin-top: 0.25rem;
}

button.button--secondary.lp-topic {
  position: relative;
  isolation: isolate;
  min-height: 2.75rem;
  padding: 0.375rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--color-ink-soft);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
}

button.button--secondary.lp-topic::before {
  position: absolute;
  inset: 0.375rem 0;
  z-index: -1;
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  content: "";
}

button.button--secondary.lp-topic:hover {
  background: transparent;
  color: var(--color-brand);
}

button.button--secondary.lp-topic:hover::before {
  border-style: solid;
  border-color: var(--color-brand);
  background: var(--color-attention-soft);
}

button.button--secondary.lp-topic:focus-visible {
  outline-color: transparent;
}

button.button--secondary.lp-topic:focus-visible::before {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

/* The consent: the box of the free design (22 pixels, ink when checked). */
.lp-intake .choice {
  gap: 0.75rem;
  align-items: flex-start;
  min-height: var(--target-size);
  color: var(--color-ink-soft);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.lp-intake .choice input {
  appearance: none;
  display: grid;
  flex: none;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.0625rem 0 0;
  border: 1.5px solid var(--color-border);
  border-radius: 0.4375rem;
  background: var(--color-surface);
  cursor: pointer;
}

.lp-intake .choice input::after {
  width: 0.625rem;
  height: 0.375rem;
  border-bottom: 2px solid var(--color-surface);
  border-left: 2px solid var(--color-surface);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  content: "";
}

.lp-intake .choice input:checked {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

.lp-intake .choice input:checked::after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

.lp-intake .actions {
  display: block;
  margin: 1.375rem 0 0;
}

.lp-intake .actions button {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.875rem 1.75rem;
  gap: 0.625rem;
  font-size: var(--font-size-base);
}

.lp-intake .actions button .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.lp-reassure {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin: 0.875rem 0 0;
  color: var(--color-ink-soft);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

.lp-reassure .icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 1px;
  color: var(--color-verified);
}

.lp-fine {
  /* The width of the card decides the fold of the row below (container query). */
  container: lp-fine / inline-size;
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: var(--border-width) dashed var(--color-line-strong);
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.lp-fine > p {
  margin: 0;
}

/* The three small links and the link to the legal notice are the four children of one row
   (ticket 0269): one style, one box of 44 px, one interval between neighbours (written once,
   --space-2), none between two lines. The row folds between whole elements. An open panel
   takes the whole line, under its link, in the flow: the links before it stay where they
   are, the ones after it follow the panel. Below 640 px, and where the card is too narrow
   for the three small links on one line (under 26.75 rem, 428 px: 412 px of links and two intervals of 8 px), one
   element per line, at the left, the boxes touching. */
.lp-fine__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  align-items: flex-start;
}

.lp-fine__row > * {
  margin: 0;
}

.lp-fine details {
  margin: 0;
}

.lp-fine details[open] {
  width: 100%;
}

.lp-fine .more__summary,
.lp-fine__legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  color: var(--color-ink-soft);
  font-size: var(--font-size-xs);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.lp-fine__legal a:hover {
  color: var(--color-ink-soft);
  text-decoration-thickness: 1px;
}

.lp-fine .more__panel {
  margin: 0 0 0.5rem;
  border-color: var(--color-line);
  color: var(--color-ink-soft);
}

.lp-fine .more__panel .hint,
.lp-fine .more__panel .note {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
}

.lp-fine .more__panel > :last-child {
  margin-bottom: 0;
}

@media (max-width: 39.9375rem) {
  .lp-fine__row {
    flex-direction: column;
  }
}

@container lp-fine (width < 26.75rem) {
  .lp-fine__row {
    flex-direction: column;
  }
}

/* The figures --------------------------------------------------------------- */

.lp-figures {
  border-block: var(--border-width) solid var(--color-line);
  background: var(--color-surface);
}

.lp-figures__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 53.75rem) {
  .lp-figures__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.lp-figures__list > li {
  display: block;
  margin: 0;
  padding: 1.75rem 1.5rem 1.875rem;
  border-left: var(--border-width) solid var(--color-line);
}

.lp-figures__list > li:nth-child(odd) {
  padding-left: 0;
  border-left: 0;
}

.lp-figures__list > li:nth-child(-n + 2) {
  border-bottom: var(--border-width) solid var(--color-line);
}

@media (min-width: 53.75rem) {
  .lp-figures__list > li:nth-child(odd) {
    padding-left: 1.5rem;
    border-left: var(--border-width) solid var(--color-line);
  }

  .lp-figures__list > li:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .lp-figures__list > li:nth-child(-n + 2) {
    border-bottom: 0;
  }
}

.lp-figures__value {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
}

.lp-figures__unit,
.lp-figures__pre {
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
}

.lp-figures__label {
  display: block;
  max-width: 18em;
  margin-top: 0.625rem;
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.lp-registry {
  margin: 0;
  padding: 0 0 1.25rem;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

/* Sections --------------------------------------------------------------- */

.lp-section {
  padding-block: clamp(4.5rem, 10vw, 8rem);
}

.lp-section--tint {
  background: var(--color-surface-muted);
}

.lp-head {
  display: grid;
  gap: 1.125rem;
  max-width: 47.5rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}

.lp-head h2,
.lp-proof__head h2 {
  margin: 0;
  font-size: clamp(2.125rem, 4.4vw, 3.5rem);
  line-height: 1.08;
}

.lp-head .eyebrow {
  margin: 0;
}

.lp-head .eyebrow + h2 {
  margin-top: 1.125rem;
}

.lp-head--split {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  max-width: none;
}

@media (min-width: 56.25rem) {
  .lp-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3rem;
  }
}

/* The steps ---------------------------------------------------------------- */

.lp-steps {
  display: grid;
  gap: 1.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 53.75rem) {
  .lp-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.375rem;
  }
}

.lp-step {
  position: relative;
  margin: 0;
  padding: 1.75rem 1.75rem 1.875rem;
  overflow: hidden;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.lp-step__num {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  color: var(--color-line);
  font-family: var(--font-serif);
  font-size: 5.5rem;
  font-weight: var(--font-weight-regular);
  line-height: 0.8;
  letter-spacing: -0.05em;
}

.lp-step__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: var(--border-width) solid var(--color-line);
  border-radius: 0.875rem;
  background: var(--color-page);
  color: var(--color-ink);
}

.lp-step__icon .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.lp-step:first-child .lp-step__icon {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-surface);
}

.lp-step h3 {
  position: relative;
  margin: 1.75rem 0 0;
  font-size: 1.5rem;
}

.lp-step p {
  position: relative;
  margin: 0.625rem 0 0;
  color: var(--color-ink-muted);
}

.lp-step__tag {
  position: relative;
  display: inline-block;
  margin-top: 1.125rem;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-verified-soft);
  color: var(--color-verified);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-step__tag--neutral {
  background: var(--color-surface-muted);
  color: var(--color-ink-soft);
}

/* The example sheet, its marks and the checks ------------------------------------- */

.lp-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.lp-proof .home-proof__layout {
  display: contents;
}

.lp-proof__head h2 {
  margin-bottom: 1.125rem;
}

/* Surtitle of the section of the sheet, and the word set off of its title (the free design:
   `eyebrow--brand`, the italic of the title in the Visa). */
.lp-proof__head .eyebrow {
  margin: 0 0 1.125rem;
  color: var(--color-brand);
}

.lp-proof__head h2 em {
  color: var(--color-brand);
  font-style: italic;
}

.lp-marks {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-main--home .lp-marks > li,
.site-main--home .lp-marks > li + li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin: 0;
  padding: 1.125rem;
  border-radius: var(--radius-box);
  cursor: default;
}

.lp-marks > li:hover,
.lp-marks > li.is-active {
  background: var(--color-surface);
  box-shadow: var(--shadow-sheet);
}

.lp-marks > li > span:last-child {
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

/* The mark of the free design: a title, then a text (rule 25 of ticket 0237, ticket 0253). */
.lp-marks h3 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--font-weight-strong);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.lp-marks p {
  margin: 0.25rem 0 0;
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.site-main--home .lp-marks .home-pin {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  box-shadow: 0 0 0 4px var(--color-surface-muted);
  color: var(--color-surface);
}

.site-main--home .lp-marks > li.is-active .home-pin {
  background: var(--color-brand);
}

.lp-controls {
  display: grid;
  gap: 0.875rem;
  margin: 1.5rem 0 0;
  padding: 1.5rem 1.125rem 0;
  border-top: var(--border-width) solid var(--color-line-strong);
  list-style: none;
}

.lp-controls > li {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.lp-controls .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.25rem;
  color: var(--color-ink);
}

.site-main--home .home-proof__figure {
  margin: 0;
}

.site-main--home .home-proof__figure figcaption {
  margin-top: 1.375rem;
  padding-left: 0.75rem;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

@media (min-width: 61.25rem) {
  .lp-proof {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    gap: 0 4.5rem;
  }

  .lp-proof__head,
  .lp-marks,
  .lp-controls {
    grid-column: 1;
  }

  .site-main--home .home-proof__figure {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

/* Two sheets laid behind the sheet. */
.lp-stage {
  position: relative;
  padding: 1.125rem 0.625rem 0.625rem;
}

.lp-stage::before,
.lp-stage::after {
  position: absolute;
  inset: 1.875rem 1.625rem -0.375rem 1.875rem;
  border: var(--border-width) solid var(--color-line);
  border-radius: 0.375rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-sheet);
  transform: rotate(2.2deg);
  content: "";
}

.lp-stage::after {
  inset: 1.5rem 1.125rem 0 1.125rem;
  transform: rotate(-1.4deg);
}

.site-main--home .home-sheet {
  z-index: 1;
  padding: clamp(1.375rem, 3.4vw, 2.75rem) clamp(1.25rem, 3.4vw, 2.75rem)
    clamp(1.625rem, 3.4vw, 2.5rem);
  border: var(--border-width) solid color-mix(in srgb, var(--color-ink) 8%, transparent);
  border-radius: var(--radius-sheet);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.site-main--home .home-sheet > * + * {
  margin-top: 1.125rem;
}

.site-main--home .home-sheet__product {
  margin-top: 0.375rem;
}

.site-main--home .home-sheet__meta {
  gap: 0.25rem 1.75rem;
  color: var(--color-ink-muted);
}

.site-main--home .home-sheet__mention {
  padding: 0.75rem 0.875rem;
  border-color: var(--color-line-strong);
  border-top-color: var(--color-ink);
  color: var(--color-ink-soft);
  font-weight: var(--font-weight-regular);
}

.site-main--home .home-sheet__section {
  margin-top: 1.375rem;
  font-size: 1.0625rem;
  letter-spacing: var(--tracking-title);
}

.site-main--home .home-sheet__marked {
  border-radius: 0.5rem;
}

.site-main--home .home-sheet__marked.is-active {
  background: color-mix(in srgb, var(--color-attention-soft) 35%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--color-brand-on-band) 50%, var(--color-surface-muted)) 35%, transparent);
}

.site-main--home .home-sheet__pin {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-pill);
}

.site-main--home .home-sheet__marked.is-active .home-sheet__pin {
  background: var(--color-brand);
}

.site-main--home .home-sheet__deadline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.875rem;
  align-items: center;
  padding: 0.875rem 3rem 0.875rem 1rem;
  border: var(--border-width) solid var(--color-line);
  border-left-width: var(--border-width);
  border-radius: 0.625rem;
  background: var(--color-attention-soft);
}

.site-main--home .home-sheet__days {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding-top: 0.25rem;
  border-radius: 0.75rem;
  background: var(--color-brand);
  color: var(--color-surface);
  font-family: var(--font-serif);
  font-size: 1.625rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.site-main--home .home-sheet__days small {
  display: block;
  margin-top: -0.375rem;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  line-height: 1;
}

.site-main--home .home-sheet__deadline-label {
  font-size: var(--font-size-xs);
}

.site-main--home .home-sheet__deadline-value {
  margin-top: 0.125rem;
  font-size: 1rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.35;
}

.site-main--home .home-sheet__table thead th {
  padding: 0.5rem 0;
  border-bottom: var(--border-width) solid var(--color-line-strong);
  background: none;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-main--home .home-sheet__table td {
  padding: 0.5625rem 0;
}

.site-main--home .home-sheet__table tfoot td {
  padding-top: 0.6875rem;
}

.site-main--home .home-sheet__references > li {
  justify-content: space-between;
  padding: 0.5rem 0;
}

.site-main--home .home-sheet__status {
  color: var(--color-verified);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.site-main--home .home-sheet__questions li::marker {
  color: var(--color-brand);
}

.site-main--home .home-sheet__stamp {
  top: 0.25rem;
  right: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 2px solid var(--color-brand);
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  color: var(--color-brand);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-strong);
  letter-spacing: 0.14em;
  line-height: 1.35;
  mix-blend-mode: multiply;
  transform: rotate(8deg);
}

.site-main--home .home-sheet__stamp small {
  font-size: var(--font-size-xs);
  letter-spacing: 0.14em;
}

/* The two tiers, in Nuit ------------------------------------------------------ */

.lp-night {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-band);
  color: var(--color-band-ink);
}

.lp-night::before {
  position: absolute;
  bottom: -25rem;
  left: -18.75rem;
  z-index: -1;
  width: 62.5rem;
  height: 43.75rem;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-brand) 35%, transparent),
    transparent
  );
  content: "";
}

.lp-night h2,
.lp-night h3 {
  color: var(--color-band-ink);
}

.lp-night h2 em,
.lp-night h3 em {
  color: var(--color-brand-on-band);
}

/* The surtitle and the lead of the section of the tiers, on the Nuit. */
.lp-night .eyebrow,
.lp-night .lp-lead {
  color: var(--color-band-ink-muted);
}

.lp-night .lp-head h2 em {
  color: var(--color-brand-on-band);
}

.lp-tiers {
  display: grid;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

@media (min-width: 56.25rem) {
  .lp-tiers {
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }

  .lp-tier--low {
    margin-top: 4rem;
  }
}

/* Minimal step of the stair (decision of Antoine of 2026-10-15, a rule outside the free design):
   from 900 px up to 1199 px, where the content of the two tiers differs by 10 to 33 px only, the
   second tier takes 48 px more between its parts, so that its top stays 48 px above the top of
   the first (the bottoms stay aligned); from 1200 px the difference is 62 px by itself. */
@media (min-width: 56.25rem) and (max-width: 74.9375rem) {
  .lp-tier--high .lp-tier__price {
    margin-top: 1.875rem;
  }

  .lp-tier.lp-tier--high ul {
    margin-top: 2.25rem;
  }

  .lp-tier--high .lp-tier__foot {
    margin-top: 2.5rem;
  }
}

/* Ticket 0242, lot B: the third line of the second tier says « Le montant payé » (no longer
   « Le montant hors taxe payé ») and may hold on one line where it took two; from 900 px it
   keeps the height of two lines, so that the step of the stair stays that of the decision of
   2026-10-15 (48 px at least, about 62 px from 1 200 px). */
@media (min-width: 56.25rem) {
  .lp-tier--high li:last-child {
    min-height: calc(2em * var(--line-height-base));
  }
}

.lp-tier {
  position: relative;
  padding: 1.875rem;
  border: var(--border-width) solid var(--color-band-rule);
  border-radius: var(--radius-card);
  background: var(--color-band-raised);
}

.lp-tier--high {
  border-color: color-mix(in srgb, var(--color-brand-on-band) 30%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-band-raised) 94%, var(--color-band-ink-muted)),
    var(--color-band-raised)
  );
}

.lp-tier__level {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;

  /* The label wraps before the step of the stair drawn in the corner (the free design lets
     the two meet on a phone). */
  max-width: calc(100% - 5.25rem);
  color: var(--color-band-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.lp-tier__level i {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 99px;
  background: var(--color-band-ink-muted);
}

.lp-tier--high .lp-tier__level i {
  background: var(--color-brand-on-band);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-brand-on-band) 18%, transparent);
}

.lp-tier h3 {
  margin: 1.125rem 0 0;
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
}

.lp-tier__price {
  margin: 0.875rem 0 0;
  color: var(--color-band-ink);
  font-family: var(--font-serif);
  font-size: 1.375rem;
}

.lp-tier ul {
  display: grid;
  gap: 0.625rem;
  margin: 1.25rem 0 0;
  padding: 0;
  color: var(--color-band-ink-muted);
  font-size: 1rem;
  list-style: none;
}

.lp-tier li {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
}

.lp-tier li .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1875rem;
  color: var(--color-band-ink);
}

.lp-tier__foot {
  margin: 1.5rem 0 0;
  padding-top: 1.125rem;
  border-top: var(--border-width) solid var(--color-band-rule);
  color: var(--color-band-ink-muted);
  font-size: var(--font-size-xs);
}

/* The optional link of the second tier (the product pages, ticket 0256), under its foot. */
.lp-tier__more {
  margin: 1.125rem 0 0;
}

.lp-tier__link {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: var(--target-size);
  color: var(--color-band-ink);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.lp-tier__link .icon {
  width: 1rem;
  height: 1rem;
}

.lp-tier__stair {
  position: absolute;
  top: 1.875rem;
  right: 1.875rem;
  width: 4rem;
  height: 2.5rem;
  color: color-mix(in srgb, var(--color-band-ink) 18%, transparent);
}

.lp-tier--high .lp-tier__stair {
  color: var(--color-brand-on-band);
}

.lp-tier__stair .icon {
  width: 100%;
  height: 100%;
  stroke-width: 2;
}

/* The cards of the documents ------------------------------------------------- */

.lp-cards {
  display: grid;
  gap: 1.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 45rem) {
  .lp-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 67.5rem) {
  .lp-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lp-cards > li {
  margin: 0;
}

.lp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.625rem 1.625rem 1.375rem;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.lp-card__top {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}

.lp-card__icon {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  border: var(--border-width) solid var(--color-line);
  border-radius: 0.75rem;
  background: var(--color-page);
}

.lp-card__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.lp-badge {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  padding: 0.375rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-ink-soft);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.lp-card__situation {
  margin: 1.375rem 0 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

.lp-card__name {
  margin: 0.375rem 0 0;
  font-size: 1.5rem;
  line-height: 1.15;
}

.lp-card__line {
  margin: 0.75rem 0 0;
  color: var(--color-ink-soft);
  line-height: 1.55;
}

.lp-card__note {
  margin: 0.75rem 0 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

.lp-card__foot {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1.375rem;
}

.lp-card__price {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.875rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}

.lp-card__go {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
}

.lp-card__go .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.lp-card__cover {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
}

/* The link to the catalogue under the cards (the free design's arrow link). */
.lp-more {
  margin: 1.75rem 0 0;
}

.lp-link-arrow {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  min-height: var(--target-size);
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--color-line-strong);
  text-underline-offset: 0.45em;
}

.lp-link-arrow:hover {
  text-decoration-color: var(--color-brand);
}

.lp-link-arrow .icon {
  width: 1rem;
  height: 1rem;
}

/* The reminder ------------------------------------------------------------------ */

.site-main--home .home-final {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(4.5rem, 10vw, 8rem);
  border: 0;
  background: none;
}

.site-main--home .home-final__inner {
  position: relative;
  display: grid;
  gap: 1.75rem;
  align-items: center;
  max-width: none;
  margin: 0;
  padding: clamp(2.25rem, 6vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.75rem;
  background: var(--color-brand);
  color: var(--color-surface);
}

@media (min-width: 56.25rem) {
  .site-main--home .home-final__inner {
    grid-template-columns: 1.3fr auto;
  }
}

.site-main--home .home-final__inner::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      37.5rem 18.75rem at 90% 0%,
      color-mix(in srgb, var(--color-brand-on-band) 35%, transparent),
      transparent 70%
    ),
    radial-gradient(
      31.25rem 25rem at 0% 120%,
      color-mix(in srgb, var(--color-band) 45%, transparent),
      transparent 70%
    );
  content: "";
}

.site-main--home .home-final__inner::after {
  position: absolute;
  right: -2.5rem;
  bottom: -2.5rem;
  z-index: -1;
  width: 22.5rem;
  height: 13.75rem;
  background: url("../../img/home-motif.4fe3a4e14d9a.svg") no-repeat right bottom / contain;
  content: "";
}

.site-main--home .home-final h2 {
  margin: 0;
  color: var(--color-surface);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
}

.site-main--home .home-final h2 em {
  color: color-mix(in srgb, var(--color-surface) 60%, var(--color-brand-on-band));
}

.site-main--home .home-final p {
  margin: 0.875rem 0 0;
  color: color-mix(in srgb, var(--color-surface) 82%, transparent);
  font-size: 1.125rem;
}

.site-main--home .home-final__action {
  min-height: 3.5rem;
  padding: 0.875rem 1.75rem;
  border-color: var(--color-surface);
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-brand);
  font-size: var(--font-size-base);
}

.site-main--home .home-final__action:hover {
  border-color: var(--color-surface);
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-brand-on-band));
  color: var(--color-brand);
}

.site-main--home .home-final__action .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* The ring of the focus on the Visa plane of the reminder: the default ring is the Visa itself
   (1:1); the Visa clair of the band reaches 3.33:1 against it (rule 14 (i), 3:1 at least). */
.site-main--home .home-final :focus-visible {
  outline-color: var(--color-focus-on-band);
}

/* Movements of state (rule 20 (e)), a closed list held by apps/core/tests/test_page_sheets.py:
   nothing under prefers-reduced-motion: reduce. */
@media (prefers-reduced-motion: no-preference) {
  .lp-step,
  .lp-card {
    transition:
      transform 300ms var(--ease-state),
      box-shadow 300ms var(--ease-state),
      border-color 300ms var(--ease-state);
  }

  .lp-step:hover {
    box-shadow: var(--shadow-sheet);
    transform: translateY(-3px);
  }

  .lp-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-raised);
    transform: translateY(-4px);
  }

  .lp-card__go {
    transition:
      background-color 250ms var(--ease-state),
      border-color 250ms var(--ease-state),
      color 250ms var(--ease-state);
  }

  .lp-card:hover .lp-card__go {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-surface);
  }

  .lp-marks > li,
  .site-main--home .home-sheet__marked,
  .site-main--home .lp-marks .home-pin {
    transition:
      background-color 250ms var(--ease-state),
      box-shadow 250ms var(--ease-state);
  }

  button.button--secondary.lp-topic::before {
    transition:
      background-color var(--motion-hover) var(--ease-state),
      border-color var(--motion-hover) var(--ease-state);
  }

  .lp-intake .actions button .icon,
  .site-main--home .home-final__action .icon {
    transition: transform 250ms var(--ease-state);
  }

  .lp-intake .actions button:hover .icon,
  .site-main--home .home-final__action:hover .icon {
    transform: translateX(3px);
  }
}