/* Relume layouts (owner, 2026-10-03: "our entire site").
   Structure from the Relume library, rebuilt in our own palette and type: copy and markup are
   unchanged, only the arrangement. Phones keep the single column; from 768px the long
   one-column lists become Relume grids (layout611: numbered two-column; layout620: three
   columns with rules), which took the home page from about 22,700px to a fraction of that.
   Loaded after brand.css on every page. */

@media (min-width: 768px) {
  /* Section header, Relume style: a tagline over the heading, both left-aligned. The label was
     a vertical rail marker; as a tagline it says what the section is before you read it. */
  .movement > .movement-label {
    position: static;
    float: none;
    writing-mode: horizontal-tb;
    height: auto;
    margin: 0 0 var(--space-3);
    font-size: 0.62rem;
    color: var(--accent);
  }
  .movement > .lead { max-width: 22ch; margin-bottom: var(--space-4); }
  .movement > .body { max-width: 62ch; }

  /* Numbered lists become a grid of cells, each under its own rule. */
  .movement .tenets,
  .movement .works.stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4.5rem);
    margin-top: var(--space-6);
  }
  .movement .tenets li,
  .movement .tenets li:last-child,
  .movement .works.stack li {
    position: relative;   /* the deck no longer stacks: every cell is visible at once */
    top: auto;
    gap: var(--space-4);
    padding: var(--space-5) 0 var(--space-6);
    border-bottom: 0;
    border-top: 1px solid var(--rule);
    background: transparent;
  }
  .movement .tenets .body,
  .movement .works .body { max-width: none; }
  .movement .tenets h2,
  .movement .works h2 { font-size: clamp(1.25rem, 1.9vw, 1.7rem); }

  /* Five or more items read as a services grid: three columns (layout620). */
  .movement .works.stack:has(> li:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .movement .works.stack:has(> li:nth-child(5)) li { flex-direction: column; gap: var(--space-2); }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .movement .works.stack:has(> li:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Seven questions in two columns would leave one alone; a question list stays two columns
   and the last cell spans both, so the grid ends square. */
@media (min-width: 768px) {
  #questions .works.stack { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #questions .works.stack li { flex-direction: row; }
  #questions .works.stack > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  /* Exactly three items: three columns, number over heading (layout620), no orphan cell. */
  .movement .tenets:has(> li:nth-child(3)):not(:has(> li:nth-child(4))),
  .movement .works.stack:has(> li:nth-child(3)):not(:has(> li:nth-child(4))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .movement .tenets:has(> li:nth-child(3)):not(:has(> li:nth-child(4))) li,
  .movement .works.stack:has(> li:nth-child(3)):not(:has(> li:nth-child(4))) li {
    flex-direction: column;
    gap: var(--space-2);
  }

  /* The three steps: numbered columns side by side (layout611), each under its rule. */
  .movement .method {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4.5rem);
  }
  .movement .method li,
  .movement .method li:last-child {
    flex-direction: column;
    gap: var(--space-3);
    border-bottom: 0;
    border-top: 1px solid var(--rule);
  }
  .movement .method .body { max-width: none; }
}

/* Price pages (marketing, services-et-prix, diagnostic pages): the reading column stays 760px
   for prose, but the price cards break out to a three-column pricing grid (Relume pricing23),
   centred on the column, so seven offers sit in three rows instead of four narrow ones. */
@media (min-width: 1100px) {
  .legal-body > .pricing-grid {
    width: min(1120px, calc(100vw - 2 * var(--pad)));
    margin-left: 50%;
    transform: translateX(-50%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  /* Seven offers in threes leave one alone: it takes the whole last row instead of sitting
     beside an empty slab. */
  .legal-body > .pricing-grid > .pricing-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .legal-body > .pricing-grid > .pricing-card:last-child:nth-child(3n + 1) .pricing-desc { max-width: 62ch; }
}