/*
 * Content and legal pages (ticket 0237, sub-lot B5, rules 10, 11 and 22): the style of the
 * pillars, the articles, the glossary, their indexes, the archives, the author page and the
 * three legal pages, loaded by their templates alone, after tokens.css and site.css. The free
 * design of direction D (docs/design/direction-2026-10/d/) has no content page: they take its
 * language, as "Méthode" does (sub-lot B2-d): the head of a page (`.page-head`: breadcrumb at
 * the chevron, eyebrow in the Visa, title at the size of D), the rows ruled in Encre of its
 * catalogue (`.catalogue`, `.row`) for the indexes, the title in the margin and the text beside
 * it for the articles of a legal page, the radius of its boxes. The sobriety of their own stays
 * (docs/12, "Charte de conversion": no commercial action on a legal page): no fade, no hover
 * movement, no shadow, no gradient.
 *
 * The reading column keeps the measure of 40 rem (docs/12, ticket 0114). From 1 100 pixels, on
 * a pillar and an article, the block "Pour votre situation" takes the margin column of ticket
 * 0186 (rule 3, Q43 (a)): sticky under the header in its own column, never over the reading
 * column, at rest beside the end of the references; below 1 100 pixels it stays in the flow, at
 * its place (after "Pour aller plus loin" or "Articles sur ce thème", before the references).
 * Composition and classes only: the order of the document, and so of its text and of the
 * keyboard, does not change.
 *
 * Every colour is a variable of tokens.css; nothing is written here. The figures drawn by the
 * code keep their rules (docs/12, "Figures"); they take the palette of direction D through the
 * variables of tokens.css, and the radius of its boxes for their frame.
 */

/* Breadcrumb of direction D: the steps parted by a chevron, the links without underline ----- */

.breadcrumb {
  margin: 0 0 var(--space-5);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
}

.breadcrumb a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* The chevron, a small angle drawn by two borders (no image, no character). */
.breadcrumb li + li::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin: 0 var(--space-3) 0 var(--space-2);
  padding: 0;
  border-top: var(--border-width) solid currentColor;
  border-right: var(--border-width) solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
}

/* Head of the page (D: `.page-head`), over the whole width of the container ---------------- */

.content-annotated,
.content-index,
.legal-text {
  max-width: none;
}

.content-annotated > .content-header,
.content-index > .content-header {
  margin: 0;
  padding: var(--space-3) 0 var(--space-6);
  border-bottom: 0;
}

.content-header .eyebrow {
  margin-bottom: var(--space-4);
  color: var(--color-brand);
}

/* The title of a page: the voice of the acts, light, at the size of D
   (D: 1.04 times clamp(40px, 5.4vw, 64px), its display scale). */
.content-header h1,
.legal-text > h1 {
  max-width: 22em;
  margin: 0;
  font-size: calc(1.04 * clamp(2.5rem, 5.4vw, 4rem));
  font-weight: var(--font-weight-regular);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.content-header .lead,
.content-index > .content-header > p:not(.note) {
  max-width: 40em;
  margin: var(--space-5) 0 0;
  color: var(--color-ink-soft);
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  line-height: 1.55;
}

.content-header > .note {
  margin: var(--space-4) 0 0;
}

/* The dates of a page, the metadata of the sheet of D (`.sheet__meta`): a line set off by a
   rule under the lead. */
.content-header > .content-dates {
  max-width: 50rem;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-line);
}

/* The annotated page: the reading column and, from 1 100 pixels, the margin column -------- */

.content-annotated > :not(.content-header) {
  max-width: var(--measure);
  margin-top: 0;
  margin-bottom: 0;
}

.content-annotated > :not(.content-header) + * {
  margin-top: var(--space-6);
}

.content-annotated > .content-signature {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.content-annotated > .content-signature > .byline,
.content-annotated > .content-signature > .byline + .byline {
  margin: 0;
}

.content-annotated > :is(.section, .content-related, .content-product, .content-references) {
  margin-top: var(--space-7);
}

/* The direct answer (and the definition of a glossary entry): a box of D on the Feuille, its
   radius, ruled on the left in Encre as the quotation of D (`.quote`; the Visa stays for the
   action, docs/12, rule 2), its title an eyebrow of D with its rule. */
.content-annotated > .direct-answer {
  padding: var(--space-5) var(--space-6);
  border: var(--border-width) solid var(--color-line);
  border-left: 3px solid var(--color-ink);
  border-radius: 0 var(--radius-box) var(--radius-box) 0;
}

@media (max-width: 39.99rem) {
  .content-annotated > .direct-answer {
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  }
}

.content-annotated > .direct-answer h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  letter-spacing: 0.12em;
}

.content-annotated > .direct-answer h2::before {
  content: "";
  flex: none;
  width: 1.375rem;
  border-top: var(--border-width) solid currentColor;
}

/* Titles of the sections of the page and of the body: the voice of the acts, the degree of the
   sections of D's inner pages (`.ov-section h2`, "Méthode"), tracking closed. */
.content-annotated > :is(.section, .content-related, .content-references, .definitions) > h2,
.content-annotated .content-body h2 {
  font-size: clamp(1.625rem, 2.4vw, 2rem);
  font-weight: var(--font-weight-regular);
  line-height: 1.15;
  letter-spacing: var(--tracking-title);
}

.content-annotated .content-body h3 {
  font-size: 1.375rem;
}

.content-annotated .content-body h2 {
  margin-top: var(--space-7);
}

/* The block "Pour votre situation", a card of D (its border and radius, from site.css). */
.content-annotated > .content-product h2 {
  font-size: var(--font-size-lg);
}

@media (min-width: 68.75rem) {
  .content-annotated {
    display: grid;
    grid-template-columns: var(--measure) minmax(17rem, 22rem);
    justify-content: space-between;
    align-items: start;
    column-gap: var(--space-7);
  }

  .content-annotated > * {
    grid-column: 1;
    min-width: 0;
  }

  .content-annotated > .content-header {
    grid-column: 1 / -1;
  }

  /* In the margin column, from the end of the head of the page to the end of the references:
     the rows of the reading column are twelve at the most; the rows left empty have no
     height. Sticky under the header (72 pixels from 768 pixels), within its own area. */
  .content-annotated > .content-product {
    grid-column: 2;
    grid-row: 2 / span 12;
    position: sticky;
    top: calc(var(--header-height-wide) + var(--space-5));
    max-width: none;
    margin-top: 0;
  }
}

/* Indexes, archives and author page: the rows of the catalogue of D ---------------------- */

.content-index > .content-list,
.content-index > .definitions {
  margin: 0;
  padding: 0;
  border-top: var(--border-width) solid var(--color-ink);
}

.content-index .content-list > li,
.content-index .content-list > li + li {
  margin: 0;
  padding: var(--space-5) 0;
  border-top: 0;
  border-bottom: var(--border-width) solid var(--color-line);
}

.content-index .content-list > li > a {
  font-size: var(--font-size-md);
  line-height: 1.3;
}

.content-index > .content-list > li > p:not(.note) {
  max-width: 40em;
  margin: var(--space-2) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--font-size-base);
}

.content-index .content-list > li > .note {
  margin: var(--space-2) 0 0;
}

.content-index > .content-list + p,
.content-index > .content-list + .actions,
.content-index > p + .actions {
  margin-top: var(--space-6);
}

.content-index > .note {
  margin: 0 0 var(--space-6);
}

/* The sections of the archives and of the author page: the year (or the title) in the margin,
   the list beside it, as the sections of "Méthode". */
.content-index > .section {
  margin: 0;
  padding: var(--space-6) 0 0;
  border-top: var(--border-width) solid var(--color-ink);
}

.content-index > .section + .section {
  margin-top: var(--space-6);
}

.content-index > .section > h2 {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.625rem, 2.4vw, 2rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-title);
}

.content-index > .section > .content-list {
  margin: 0;
}

.content-index > .section > .content-list > li:first-child {
  padding-top: 0;
}

.content-index > .section > .content-list > li:last-child {
  border-bottom: 0;
}

/* The glossary: each term and its definition on a row. */
.content-index > .definitions > dt {
  margin: 0;
  padding: var(--space-5) 0 0;
  border-top: var(--border-width) solid var(--color-line);
}

.content-index > .definitions > dt:first-child {
  border-top: 0;
}

.content-index > .definitions > dt > a {
  font-size: var(--font-size-md);
}

.content-index > .definitions > dd {
  margin: var(--space-2) 0 0;
  padding: 0 0 var(--space-5);
  color: var(--color-ink-soft);
}

@media (min-width: 53.75rem) {
  .content-index > .content-list > li,
  .content-index > .section,
  .content-index > .definitions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    column-gap: var(--space-7);
    align-items: start;
  }

  .content-index > .content-list > li > p:not(.note) {
    margin-top: 0;
  }

  .content-index > .definitions > dt,
  .content-index > .definitions > dd {
    margin: 0;
    padding: var(--space-5) 0;
    border-top: var(--border-width) solid var(--color-line);
  }

  .content-index > .definitions > :is(dt, dd):nth-child(-n + 2) {
    border-top: 0;
  }

  .content-index > .section > h2 {
    margin: 0;
  }
}

/* Legal pages: the articles in sections of D, the title in the margin, the text beside it in
   the measure; one column below 900 pixels. No commercial action, no eyebrow, no text added. */
.legal-text > .note {
  max-width: 50rem;
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-line);
}

.legal-text > h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
}

.legal-text > :not(h1, h2, .note) {
  max-width: var(--measure);
}

@media (min-width: 56.25rem) {
  .legal-text {
    display: grid;
    grid-template-columns: minmax(12rem, 22rem) minmax(0, var(--measure));
    column-gap: var(--space-7);
    align-items: start;
  }

  .legal-text > * {
    grid-column: 2;
    min-width: 0;
    margin-top: 0;
  }

  .legal-text > :is(h1, .note) {
    grid-column: 1 / -1;
  }

  .legal-text > h2 {
    grid-column: 1;
  }

  /* The title of an article and its first paragraph open the article on one rule. */
  .legal-text > h2,
  .legal-text > h2 + * {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: var(--border-width) solid var(--color-line);
  }

  .legal-text > h2 {
    margin-bottom: 0;
  }
}

/* Figures drawn by the code: rules of docs/12 unchanged; the radius of the boxes of D. ------ */

.figure-drawn__frame {
  border-radius: var(--radius);
}