/*
 * DoYouTax site styles (tickets 0003, 0103 and 0105, docs/design/systeme.md).
 * Hand-written on the variables of tokens.css; no framework, no build step.
 * Sections: base, layout, header and footer, typography, components, utilities.
 * The CSP forbids inline styles: every presentation rule lives here.
 *
 * Second execution of the art direction (ticket 0237, sub-lot B1): the socle of
 * direction D, the free design chosen by Antoine on 2026-10-14. The palette, the
 * families and the shapes come from the block `:root.site` of tokens.css; the shared
 * components below (base, header and footer, typography, buttons, cards, notices,
 * statuses, fields, boxes, sheet) take the forms of direction D; the compositions of the
 * families of screens follow in sub-lots B2 to B5.
 */

/* Base ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* An anchor is not hidden by the sticky header (rule 20 (b)). */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

@media (min-width: 48rem) {
  html {
    scroll-padding-top: calc(var(--header-height-wide) + var(--space-4));
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--color-ink);
  background: var(--color-page);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--color-link);
  text-decoration-thickness: 2px;
}

/* Focus: always visible, never removed (docs/12-design-ux.md, accessibility). */
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -10rem;
  z-index: 30;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-link);
  font-weight: var(--font-weight-strong);
  border: var(--border-width) solid var(--color-link);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Layout ---------------------------------------------------------------- */

/* Direction D (ticket 0237, rule 20 (a)): pages of 75 rem, the gutter of D (16 pixels
   on a phone, 4 per cent of the width, 40 pixels at most). */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-main {
  flex: 1 0 auto;
  padding-block: var(--space-6) var(--space-7);
}

.prose {
  max-width: var(--measure);
}

.stack > * + * {
  margin-top: var(--space-4);
}

.section {
  margin-top: var(--space-7);
}

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* Header, footer and brand (ticket 0104) ------------------------------- */

/* Direction D (ticket 0237, sub-lot B1, rule 20 (b) and (f)): the header sticks to the
   top of the screen, the page seen through it (Papier at 82 per cent, blur of 14 pixels),
   a rule under it, which the comfort script static/js/site-motion.js hides while the page
   is at its top (without script, the rule stays); the footer in Nuit, four columns. The
   wordmark of direction D inline (templates/brand/wordmark.html, drawn by
   scripts/build_marque.py), coloured by the variables. Protection zone of docs/12: on
   each side of the logo, free space equal to the height of the logo box. Wordmark of
   6rem (96 px) on small screens and 7rem (112 px) beyond 40rem, never under 96 px: its
   height is 18 or 21 px, and the paddings, gaps and centred 44 px boxes below leave at
   least that much on every side (tests/browser/test_site_header.py). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-background);
  -webkit-backdrop-filter: var(--header-blur);
  backdrop-filter: var(--header-blur);
  color: var(--color-ink);
  border-bottom: var(--border-width) solid var(--color-line);
}

.site-header--top {
  border-bottom-color: transparent;
}

.site-footer {
  background: var(--color-band);
  color: var(--color-band-ink);
}

/* Compact header, under 56.25rem (900 pixels, the switch of direction D; ticket 0183,
   docs/12 "Mobile" and charter rule 9): one row of 60 px under 48rem (64 px at most), of
   72 px from 48rem, with the logo, the link "Mon espace" and the button "Menu"; the list
   of the menu, once opened, is a panel under the row, in the flow (rule 17 (b): it pushes
   the content down, never covers it). The menu is a native `details` element, closed at
   each load, without any script. The button is taken out of the flow (`position:
   absolute`, in the row of the logo) so that the list, in the same element, can fall on
   the full width under it. */
.site-header__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  /* The rule under the header is taken from the bottom padding: the row keeps its 60
     pixels, and the first screen of the home page its bound (ticket 0189). */
  padding-block: var(--space-2) calc(var(--space-2) - var(--border-width));
  /* The margin of the page on both sides (the container, so that the logo is in line with
     the breadcrumb). */
  padding-inline: var(--gutter);
}

@media (min-width: 48rem) {
  .site-header__inner {
    padding-block: calc((var(--header-height-wide) - var(--target-size) - var(--border-width)) / 2);
  }
}

.brand,
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  margin: 0;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: 7rem;
  min-width: 96px; /* docs/12: never under 96 px, whatever the base font size */
  height: auto;
}

@media (min-width: 40rem) {
  .brand-logo {
    width: 8.5rem;
  }
}

/* The wordmark of direction D: "DoYou" in the ink, "Tax" and its point in the Visa on the
   page; on the Nuit of the footer, "DoYou" in the text of the band, "Tax" and its point
   in the Visa clair. */
.brand-logo--wordmark {
  width: 6rem;
}

@media (min-width: 40rem) {
  .brand-logo--wordmark {
    width: 7rem;
  }
}

.brand-logo__word {
  fill: var(--color-ink);
}

.brand-logo__tax,
.brand-logo__point {
  fill: var(--color-brand);
}

.site-footer .brand-logo__word {
  fill: var(--color-brand-ink-on-band);
}

.site-footer .brand-logo__tax,
.site-footer .brand-logo__point {
  fill: var(--color-brand-on-band);
}

/* Seal (templates/brand/seal.html), on a light background: frame and letters in Visa. */
.brand-seal {
  display: block;
  width: 1.5rem;
  height: auto;
}

.brand-seal__frame,
.brand-seal__letters {
  fill: var(--color-brand);
}

/* Focus on the band of the footer, in the colour of the focus on the band. */
.site-footer :focus-visible {
  outline-color: var(--color-focus-on-band);
}

.site-nav li,
.site-footer li,
.breadcrumb li {
  margin: 0;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  font-size: var(--font-size-sm);
}

/* Entries of the header (direction D): text on the page, a pill of the muted background
   at the hover and on the current page, which also keeps its underline (docs/12, rule 5:
   the current entry is not told by a colour alone). */
.site-nav a {
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-ink-soft);
  font-weight: var(--font-weight-medium);
}

.site-nav a,
.site-header__space {
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: var(--color-surface-muted);
  color: var(--color-ink);
}

.site-nav a[aria-current="page"],
.site-header__space[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* The link "Mon espace" of the row of the compact header, at the right of the logo, left
   of the button "Menu" (4.75rem wide) and of the space that separates them; and its
   entry in the wide header: a pill on a card (direction D). */
.site-header__space,
.site-nav .site-nav__space a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
}

.site-header__space {
  margin-left: auto;
  margin-right: calc(4.75rem + var(--space-3));
}

.site-header__space:hover,
.site-nav .site-nav__space a:hover {
  border-color: var(--color-ink);
  background: var(--color-surface);
}

/* The navigation is the second row of the header: empty while the menu is closed. */
.site-nav {
  flex: 1 0 100%;
}

.site-nav summary {
  position: absolute;
  top: var(--space-2);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 4.75rem;
  min-height: var(--target-size);
  /* A control on the page: its border at the 3:1 of a field (docs/12, "Couleurs"). */
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  list-style: none;
  cursor: pointer;
}

@media (min-width: 48rem) {
  .site-nav summary {
    top: calc((var(--header-height-wide) - var(--target-size) - var(--border-width)) / 2);
  }
}

.site-nav summary::-webkit-details-marker {
  display: none;
}

.site-nav details[open] > summary {
  border-color: var(--color-ink);
}

/* Icon of the button (docs/12, "Icônes d'interface"; templates/core/_icon.html, name
   "menu", ticket 0189): outline in the colour of the text; 20 pixels on a grid of 24 and a
   stroke of 1.9, drawn at 1.58 pixel (1.5 to 2 pixels, rule 1). */
.site-nav .icon--menu {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.9;
}

/* The panel of the menu, opened: the surface, the corner and the shadow of the panel of
   direction D, in the flow under the row (rule 17 (b)). */
.site-nav ul {
  display: flex;
  flex-direction: column;
  margin: var(--space-2) 0 var(--space-2);
  padding: var(--space-2);
  list-style: none;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-box);
  box-shadow: var(--shadow-raised);
}

.site-nav ul a {
  display: flex;
  padding-inline: var(--space-4);
  border-radius: var(--radius);
  color: var(--color-ink);
}

/* The client space has its own link in the row of the compact header. */
.site-nav .site-nav__space {
  display: none;
}

/* Wide header (ticket 0183; switch at 900 pixels as direction D, rule 20 (b)): the list
   is shown on one row, without the button. `::details-content` lets the list of the
   closed `details` be displayed; a browser without it keeps the compact header at every
   width, and loses nothing. */
@media (min-width: 56.25rem) {
  @supports selector(::details-content) {
    .site-header__inner {
      flex-wrap: nowrap;
      gap: var(--space-4);
    }

    .site-header__space,
    .site-nav summary {
      display: none;
    }

    .site-nav {
      flex: 0 1 auto;
    }

    .site-nav details::details-content {
      content-visibility: visible;
    }

    .site-nav ul {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: 0 var(--space-1);
      margin: 0;
      padding: 0;
      background: none;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .site-nav ul a {
      display: inline-flex;
      padding-inline: var(--space-3);
      border-radius: var(--radius-pill);
      color: var(--color-ink-soft);
    }

    .site-nav ul a:hover,
    .site-nav ul a[aria-current="page"] {
      color: var(--color-ink);
    }

    .site-nav .site-nav__space {
      display: list-item;
      margin-left: var(--space-3);
    }

    .site-nav .site-nav__space a {
      color: var(--color-ink);
    }
  }
}

/* Footer of direction D (rule 20 (f)): the column of the brand (the logo alone, until the
   text of presentation is validated), then « Service », « Ressources » and « Légal », and
   a bottom line under a rule: the seniority notice and the copyright. */
.site-footer {
  flex-shrink: 0;
  padding-block: var(--space-8) var(--space-6);
  color: var(--color-band-ink-muted);
}

/* The protection zone of the logo (its height, 18 pixels) holds on the left of the
   footer: 24 pixels at least, where the gutter is 16. */
.site-footer > .container {
  padding-inline: max(var(--gutter), var(--space-5));
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6);
}

.site-footer__nav {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

@media (min-width: 53.75rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 3fr);
  }

  .site-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.site-footer__heading {
  margin: 0 0 var(--space-2);
  color: var(--color-band-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  color: var(--color-band-ink-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a[aria-current="page"] {
  color: var(--color-band-ink);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Text of presentation under the logotype (ticket 0253), as the free design sets it: 18 pixels
   under the logotype, 30 characters wide at most, the muted text of the band. */
.site-footer__about {
  max-width: 30em;
  margin: var(--space-3) 0 0;
  color: var(--color-band-ink-muted);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* Seniority notice decided by Antoine (ticket 0123) and copyright, on the bottom line. */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-band-rule);
}

.site-footer__notice,
.site-footer__copyright {
  margin: 0;
  color: var(--color-band-ink-muted);
  font-size: var(--font-size-sm);
}

/* Typography ------------------------------------------------------------ */
/* Three voices (docs/12, "Parti pris"): the content reads like a deed, in the serif of
   the titles (Newsreader, direction D); the interface in the sans (Geist); what belongs
   to the machine (references, dates of check, statuses, eyebrows, state of a form) in the
   monospace (Geist Mono). Titles in weight 500, the screen title in 400, tracking closed
   (direction D). */

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-title);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--font-size-lg);
  margin-top: var(--space-6);
}

h3 {
  font-size: var(--font-size-md);
  margin-top: var(--space-5);
}

h4 {
  font-size: var(--font-size-base);
}

@media (min-width: 40rem) {
  h1 {
    font-size: var(--font-size-2xl);
  }
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--space-4);
}

ul,
ol {
  padding-left: var(--space-5);
}

li + li {
  margin-top: var(--space-1);
}

.lead {
  font-size: var(--font-size-md);
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.note {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

/* Eyebrow (surtitre): monospace capitals, widened tracking, one line, led by a short
   rule (direction D: 12 pixels in the free design, carried to the floor of 14). */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 1.375rem;
  border-top: var(--border-width) solid currentColor;
}

.numeric {
  font-variant-numeric: tabular-nums lining-nums;
}

code {
  font-family: var(--font-mono);
  /* Smaller than the surrounding text, never below the floor of 14 px (docs/12). */
  font-size: max(0.875em, var(--font-size-xs));
}

/* Buttons --------------------------------------------------------------- */
/* docs/12, rule 1: one main action per screen, plain in the Visa; secondary actions
   bordered or as a link. Target of 44 px. Direction D: a pill, the main button set on the
   page by its own shadow, the bordered button on a card with the strong rule. */

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--target-size);
  padding: var(--space-2) var(--space-5);
  border: var(--border-width) solid var(--color-action);
  border-radius: var(--radius-pill);
  background: var(--color-action);
  box-shadow: var(--shadow-action);
  color: var(--color-ink-inverse);
  font: inherit;
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-tight);
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  /* A label longer than the button breaks rather than leaving it (Geist is wider than
     the family it replaces; 360 pixels without horizontal scrolling). */
  overflow-wrap: anywhere;
  cursor: pointer;
}

.button:hover,
button:hover {
  background: var(--color-action-strong);
  border-color: var(--color-action-strong);
  color: var(--color-ink-inverse);
  text-decoration: none;
}

.button--secondary,
button.button--secondary {
  background: var(--color-surface);
  border-color: var(--color-line-strong);
  box-shadow: none;
  color: var(--color-accent);
}

.button--secondary:hover,
button.button--secondary:hover {
  background: var(--color-surface);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-strong);
}

button.button--link,
.button--link {
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-link);
  font-weight: var(--font-weight-regular);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

button.button--link:hover,
.button--link:hover {
  background: none;
  color: var(--color-link);
  text-decoration-thickness: 2px;
}

.button[aria-disabled="true"],
button:disabled {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  box-shadow: none;
  color: var(--color-ink-muted);
  cursor: not-allowed;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin: var(--space-6) 0 var(--space-4);
}

/* Cards ------------------------------------------------------------------ */
/* Direction D: a card is a white surface with a hairline and a large corner. */

.card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-card);
}

.card > :last-child {
  margin-bottom: 0;
}

.card h2,
.card h3 {
  margin-top: 0;
}

/* Notices --------------------------------------------------------------- */
/* Ticket 0105. Information: Nuit rule on the muted background. Attention: Encre frame on
   Feuille, no colour of its own (docs/12, rule 4). Error: Visa frame, thicker, title in
   the Visa (rule 2). Success: Encre on Feuille, a rule, no colour of its own (rules 3
   and 4). Each kind differs by its form and its words, not by its colour alone. */

.notice {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-box);
}

.notice > :last-child {
  margin-bottom: 0;
}

.notice__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-strong);
}

.notice--success {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
}

.notice__title {
  letter-spacing: -0.005em;
}

.notice--warning {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-ink);
  border-left-width: 4px;
}

.notice--error {
  background: var(--color-surface);
  border: 2px solid var(--color-attention);
  border-left-width: 6px;
}

.notice--error .notice__title {
  color: var(--color-attention);
}

/* Waiting indicator (ticket 0178, components/waiting.html, docs/12 "Parti pris": the only
   animation admitted, on the waiting screens only; it is not a decoration). A wheel: a
   circle in the Filet, an arc in the Ardoise, one turn in two seconds; still under a
   preference for reduced motion, the text alone carrying the information. The phase of
   the rotation at the time elapsed is a class set by the server (a negative delay in
   twentieths of a turn), so that a refresh does not start it from zero: the content
   security policy refuses an inline style. Then, in the zone of the status, the time
   elapsed in the machine voice and, past the threshold, the fixed message under a rule. */
.waiting {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
}

.waiting__text > :last-child {
  margin-bottom: 0;
}

.waiting__wheel {
  display: block;
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  border: 3px solid var(--color-line);
  border-top-color: var(--color-ink-muted);
  border-radius: 50%;
}

.waiting__elapsed {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.waiting__long {
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-line);
}

/* A piece being read (dossiers/_pieces.html): the wheel at the size of the line. */
.waiting__wheel--piece {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border-width: 2px;
  vertical-align: -0.125rem;
}

@keyframes waiting-turn {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .waiting__wheel {
    animation: waiting-turn 2s linear infinite;
  }

  .waiting__wheel--1 {
    animation-delay: -0.1s;
  }
  .waiting__wheel--2 {
    animation-delay: -0.2s;
  }
  .waiting__wheel--3 {
    animation-delay: -0.3s;
  }
  .waiting__wheel--4 {
    animation-delay: -0.4s;
  }
  .waiting__wheel--5 {
    animation-delay: -0.5s;
  }
  .waiting__wheel--6 {
    animation-delay: -0.6s;
  }
  .waiting__wheel--7 {
    animation-delay: -0.7s;
  }
  .waiting__wheel--8 {
    animation-delay: -0.8s;
  }
  .waiting__wheel--9 {
    animation-delay: -0.9s;
  }
  .waiting__wheel--10 {
    animation-delay: -1.0s;
  }
  .waiting__wheel--11 {
    animation-delay: -1.1s;
  }
  .waiting__wheel--12 {
    animation-delay: -1.2s;
  }
  .waiting__wheel--13 {
    animation-delay: -1.3s;
  }
  .waiting__wheel--14 {
    animation-delay: -1.4s;
  }
  .waiting__wheel--15 {
    animation-delay: -1.5s;
  }
  .waiting__wheel--16 {
    animation-delay: -1.6s;
  }
  .waiting__wheel--17 {
    animation-delay: -1.7s;
  }
  .waiting__wheel--18 {
    animation-delay: -1.8s;
  }
  .waiting__wheel--19 {
    animation-delay: -1.9s;
  }
}

/* Limits of the low tier ("ce que ce document n'est pas"): shown, not hidden in the
   terms (docs/12-design-ux.md); components/limit_notice.html, parameters unchanged. */
.limit-notice {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line-strong);
  border-top: 3px solid var(--color-ink);
  border-radius: var(--radius-box);
}

.limit-notice__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-strong);
}

.limit-notice > :last-child {
  margin-bottom: 0;
}

/* Deadline banner (docs/12, rule 7): the deadline of the client only, on the Visa pâle;
   under the critical threshold, on the Visa, white text. Sticky while the tunnel
   scrolls; a named region (components/deadline.html, parameters unchanged). */
.deadline {
  position: sticky;
  /* Right below the sticky header, never behind it (rule 17 (b) of ticket 0237). */
  top: var(--header-height);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-attention-soft);
  border: var(--border-width) solid var(--color-attention);
  border-left-width: 6px;
  border-radius: var(--radius-box);
  color: var(--color-ink);
}

@media (min-width: 48rem) {
  .deadline {
    top: var(--header-height-wide);
  }
}

.deadline__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-attention);
}

.deadline__value {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: lining-nums;
  line-height: var(--line-height-tight);
}

.deadline__detail {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--font-size-sm);
}

.deadline--critical {
  background: var(--color-attention);
  color: var(--color-ink-inverse);
}

.deadline--critical .deadline__label {
  color: var(--color-ink-inverse);
}

/* Statuses (docs/12, rule 8, closed list; {% status %} of apps/core/templatetags/
   components.py): "vérifié le JJ/MM/AAAA" in the Contrôle on the Contrôle pâle, the only
   use of that colour; "à confirmer par un avocat" in the Visa on the Visa pâle; states of
   the journey in the Ardoise, framed by a rule. Monospace, no radius, always with words. */
.status {
  display: inline-block;
  padding: 0 var(--space-3);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  /* A long label wraps inside a narrow cell rather than widening the page. */
  max-width: 100%;
}

.status--verified {
  color: var(--color-verified);
  background: var(--color-verified-soft);
}

.status--to-confirm {
  color: var(--color-attention);
  background: var(--color-attention-soft);
}

/* The classes of ticket 0003 keep their names and become states of the journey: a piece
   readable, partly readable or unreadable is a state, not a verification (ticket 0105). */
.status--state,
.status--ok,
.status--warning,
.status--error {
  color: var(--color-ink-muted);
  background: var(--color-surface);
  border-color: var(--color-line);
}

/* Reference line: the reference on the left, its status on the right, in monospace. */
.ref-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ref-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-line);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.ref-lines > .ref-line + .ref-line {
  margin-top: 0;
}

.ref-line__ref {
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

/* Document extract: a sheet laid on the page, the only shadow of the site (docs/12);
   header in monospace, body in Spectral, reference lines below. */
.doc-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-sheet);
  box-shadow: var(--shadow-sheet);
}

.doc-sheet > * {
  margin: 0;
}

.doc-sheet__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-line);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.doc-sheet__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
  line-height: 1.3;
}

.doc-sheet__body {
  font-family: var(--font-serif);
  line-height: 1.55;
}

/* Row of proofs and list of the catalogue. */
.proofs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0 var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.proofs > li,
.proofs > li + li {
  margin: 0;
  padding: var(--space-4) 0;
  border-top: var(--border-width) solid var(--color-line);
}

.proof__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

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

.catalogue-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0 var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalogue-list > li,
.catalogue-list > li + li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--color-line);
}

.catalogue-list__name {
  font-weight: var(--font-weight-strong);
}

.catalogue-list__text {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

/* Price box and order summary: price in Spectral with the mention "HT", then the lines
   (delay, format, review by a lawyer) and the action. */
.price-box,
.order-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 24rem;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-card);
}

.price-box > *,
.order-summary > * {
  margin: 0;
}

.price-box__price {
  font-family: var(--font-serif);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}

.facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--color-line);
}

.facts dt {
  color: var(--color-ink-muted);
}

.facts dd {
  margin: 0;
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}

.price-box .button {
  width: 100%;
}

/* Forms ----------------------------------------------------------------- */

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

.question legend h1 {
  margin-bottom: var(--space-5);
}

/* Progress of a questionnaire: a state of the form, in monospace. */
.progress {
  margin-bottom: var(--space-3);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.choices {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-box);
}

/* The chosen answer: a thicker border instead of a shadow (one shadow only, docs/12). */
.choice:has(input:checked) {
  padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px);
  border-color: var(--color-accent);
  border-width: 2px;
  background: var(--color-accent-soft);
}

.choice input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  accent-color: var(--color-accent);
}

.choice label {
  flex: 1;
  cursor: pointer;
}

.choice--inline {
  padding: 0;
  background: none;
  border: 0;
}

.choice--inline:has(input:checked) {
  padding: 0;
  background: none;
}

/* Bordered checkbox: a box of 20 px at least, a label that fills the frame and is
   clickable everywhere, an error message tied to the box (aria-describedby). */
.check {
  position: relative;
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius);
}

.check input[type="checkbox"] {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--color-ink);
  cursor: pointer;
}

/* The label of a box of the screen of the final price carries no class (ticket 0110):
   the tests of ticket 0087 read it as written; `.check > label` is the same label. */
.check__label,
.check > label {
  display: block;
  min-height: var(--target-size);
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 1.25rem + var(--space-3));
  line-height: 1.5;
  cursor: pointer;
}

.check .error {
  margin: 0;
  padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 1.25rem + var(--space-3));
}

/* Hint of a box (version of the general terms, ticket 0087), aligned on its label. */
.check .hint {
  margin: calc(-1 * var(--space-2)) 0 0;
  padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 1.25rem + var(--space-3));
}

.check--error {
  border: 2px solid var(--color-attention);
  border-left-width: 4px;
}

.field {
  margin: 0 0 var(--space-5);
  max-width: var(--measure);
}

.field > label,
.field__label {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-strong);
}

.hint {
  display: block;
  margin: 0 0 var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: var(--target-size);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
  color: var(--color-ink-muted);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="tel"]:hover,
select:hover,
textarea:hover {
  border-color: var(--color-ink-muted);
}

input[type="number"],
.input--short {
  max-width: 12rem;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

/* A field in error: the Visa, a thicker border, no second red (docs/12, rule 2). */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"],
.field--error input,
.field--error select,
.field--error textarea {
  padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
  border-color: var(--color-attention);
  border-width: 2px;
}

.field--error {
  padding-left: var(--space-4);
  border-left: 4px solid var(--color-attention);
}

/* The line of the small link of the description (ticket 0177, rule 1 ter, decision of
   Antoine of 2026-10-10): under the field, the small link « Ce qu'il faut indiquer » at
   the left, on its line of 44 pixels, and at the right the place where the script puts
   the bordered button « Dicter », of the same height. The place is set over the top
   right corner of the line, which the link leaves empty: it takes no room, so that the
   form is as high with the button as without it, with or without script, and the
   `details` keeps the width of the field for its panel, which opens under the line, under
   the button as under the link. The order of the keyboard is that of the document: the
   field, the small link, then the button. The line is a container: where the button no
   longer stands beside the link, it goes under it (below), whatever the width of the
   window and the column in which the form is set. */
.field__foot {
  position: relative;
  container: field-foot / inline-size;
}

.field__foot-slot {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
}

/* The focus indicator of the small link of that line (exception of docs/12, « Formes »,
   question Q84 (a)): drawn on the edge of its box, inside it, as that of the button, so
   that it does not cover the bottom of the field right above the line. The box is
   widened by the room of the indicator and of its space (3 + 2 pixels), taken back at the
   left by a negative margin so that the text keeps its place on the edge of the field; at
   the right, the same room keeps the text 5 pixels from the button. */
.field__foot .more__summary {
  margin-left: calc(-1 * (var(--focus-width) + var(--focus-offset)));
  padding: 0 calc(var(--focus-width) + var(--focus-offset));
}

.field__foot .more__summary:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
}

/* Where the line is too narrow for the link and the button side by side (the width of the
   line itself, not the one of the window: 15.5 rem for the button in the state « Arrêter »,
   the widest, 15 rem at rest), the button goes under the line, in the flow, at the right,
   5 pixels under it; the line of the link is unchanged, and so is the form without the
   button. Thresholds of ticket 0232 (button of 86 pixels at rest and 96 pixels in the state
   « Arrêter », against 108 and 118): the link, with the room of its focus indicator, is
   155.19 pixels wide, the line needs 155.19 + 86 - 5 = 236.19 pixels at rest and
   155.19 + 96 - 5 = 246.19 pixels listening (the 5 pixels of the room of the link taken
   once), the thresholds stand at 240 and 248 pixels, within 6 pixels above (before: 16.25
   and 17 rem for 258.19 and 268.19 pixels). */
@container field-foot (max-width: 15.5rem) {
  .field__foot-slot:has(.dictation-button--on) {
    position: static;
    justify-content: flex-end;
  }

  .field__foot-slot:has(.dictation-button--on):not(:empty) {
    margin-top: calc(var(--focus-width) + var(--focus-offset));
  }
}

@container field-foot (max-width: 15rem) {
  .field__foot-slot {
    position: static;
    justify-content: flex-end;
  }

  .field__foot-slot:not(:empty) {
    margin-top: calc(var(--focus-width) + var(--focus-offset));
  }
}

/* The focus indicator of the button, on that line, drawn on the edge of the visible button
   (its pseudo-element, below), inside it (3 pixels in Encre over the border of 1): it meets
   neither the field right above the line nor the small link at its left nor the panel under
   it, and adds no height (rule 1 ter (5)). Since ticket 0232 it hugs the 32 pixels of the
   visible button, with the air of 10 pixels above it, and no longer the box of 44 pixels,
   whose edge touched the field (review of the pull request n° 240, point m1). */
.field__foot-slot .dictation-button:focus-visible {
  outline-offset: calc(-1 * var(--focus-width));
}

.field__foot-slot .dictation-button:focus-visible::before {
  outline-offset: calc(-1 * var(--focus-width));
}

/* Dictation and counter of a field of free text (ticket 0177), inserted by
   static/js/description-field.js only: in the container under the field, in the flow,
   the counter, then the notice, written at the first press of the button (rule 1 bis,
   question Q70 (a)); nothing overlaps. Where a field has no line of small link with a
   place for the button (the free texts after the payment), the bordered button comes
   first in the container. Without script the container is empty and takes no room.
   Before any typing and any press, it holds only the empty counter, with or without the
   speech recognition: no margin then, so that it takes no room and changes no spacing
   (the counter, a live region, stays in the page). */
.dictation-slot {
  max-width: var(--measure);
  margin: calc(-1 * var(--space-3)) 0 var(--space-5);
}

.dictation-slot:empty {
  display: none;
}

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

.dictation-slot > * {
  margin: 0 0 var(--space-2);
}

.dictation-slot > :last-child {
  margin-bottom: 0;
}

/* The button « Dicter », reduced and set apart from the field (ticket 0232, rule 1,
   decision of Antoine of 2026-10-13: « Réduire le bouton dictée et ne pas qu'il soit si
   collé au champ texte »). Its box stays the target of 44 pixels (docs/12, « Formes »,
   `min-height` of `button`) and holds a visible button of 32 pixels (2 rem): the border,
   the fill and the label. The box is transparent above, over 10 pixels (the air between
   the field and the visible button, 8 at least) and below, over 2 pixels; the visible
   button is the pseudo-element, drawn between the two, with the label and the microphone
   in its middle. The label is at the first degree of the scale (14 pixels, the floor),
   the microphone is of 16 pixels. The 12 transparent pixels draw nothing, the focus
   indicator included: it is the outline of the visible button (exception of docs/12,
   « Formes », Q84 (a): inside the visible button on the line of the small link, 2 pixels
   outside it elsewhere); the outline of the box itself stays, transparent, so that a mode
   of forced colours still draws it. */
.dictation-button {
  position: relative;
  isolation: isolate;
  gap: var(--space-2);
  padding: 0.625rem var(--space-3) 0.125rem;
  border: 0;
  font-size: var(--font-size-xs);
  line-height: 1;
}

button.button--secondary.dictation-button,
button.button--secondary.dictation-button:hover {
  background: transparent;
}

.dictation-button::before {
  position: absolute;
  inset: 0.625rem 0 0.125rem;
  z-index: -1;
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  content: "";
}

.dictation-button:hover::before {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.dictation-button:focus-visible {
  outline-color: transparent;
}

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

/* The microphone, 16 pixels, against the 24 of `.icon`, declared later in the sheet
   (ticket 0176); the stroke, the colour and the ends are those of `.icon`. */
.icon.dictation-button__icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* The counter outside the bounds: the Visa; the bounds are written in the hint of the
   field and the number in the counter, the colour is never alone. */
.description-counter--out {
  color: var(--color-attention);
}

/* Empty while nothing is typed: no room, the live region kept. */
.description-counter:empty {
  margin: 0;
}

/* ".errors" is the error class of the account templates (ticket 0004). */
.error,
.errors {
  margin: 0 0 var(--space-2);
  color: var(--color-attention);
  font-weight: var(--font-weight-strong);
}

.errors {
  display: block;
}

.field-group {
  margin: 0 0 var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-radius: 0;
}

.field-group legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.field-group legend + * {
  clear: both;
}

.field-group > .field:last-child {
  margin-bottom: 0;
}

.error-summary {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--color-attention);
  border-radius: 0;
  background: var(--color-surface);
}

.error-summary h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-md);
  color: var(--color-attention);
}

.error-summary ul {
  margin: 0;
}

.error-summary a {
  color: var(--color-attention);
  font-weight: var(--font-weight-strong);
}

/* State of the automatic save: a state of the form, in monospace. */
.save-status {
  margin: var(--space-2) 0 0;
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

/* File upload (dépôt de pièces). The native field is the zone of deposit (ticket 0263,
   lot A, rule 7, Q207 (a)): the browser accepts a file dropped on it, with no script. It
   is a dashed frame in the Ardoise (the Encre pâle of the ticket) on the Papier, 4 rem
   high at least so that a finger finds it, 6 rem from 48 rem; its focus is drawn like
   that of the other controls, and the zone it is in follows it. */
.upload {
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
}

.upload__examples {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
}

.upload input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 4rem;
  margin: var(--space-2) 0 0;
  /* The button of the field, 44 pixels, centred in the height of the zone. */
  padding: calc((4rem - var(--target-size) - 4px) / 2) var(--space-4);
  background: var(--color-page);
  border: 2px dashed var(--color-ink-muted);
  border-radius: var(--radius);
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
}

@media (min-width: 48rem) {
  .upload input[type="file"] {
    min-height: 6rem;
    padding-block: calc((6rem - var(--target-size) - 4px) / 2);
  }
}

.upload input[type="file"]:focus-within {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.upload input[type="file"]::file-selector-button {
  min-height: var(--target-size);
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-accent);
  font: inherit;
  font-weight: var(--font-weight-strong);
  cursor: pointer;
}

/* The invitation under the zone and the message of the size, written by the comfort script
   beside it: close to the zone, in the width of the column. */
.upload__invitation,
.upload .error {
  margin: var(--space-2) 0 var(--space-4);
}

/* The section of the pieces is the target of the redirection that follows a deposit or a
   removal: the header, sticky, leaves its title and the message in view (ticket 0263, lot
   A, rule 8). The room left above the title is the `scroll-padding-top` of `html` (the
   header and one space unit) plus this margin. Where the banner of the deadline is shown,
   sticky under the header, the margin leaves it room too: its height, 106 pixels at 1 280,
   130 pixels at 768, 228 pixels at 375, is not known to a style sheet; the margin adds to
   the two rules above 11 rem under 48 rem and 4 rem from it, so that the title stays
   below the banner (tests at 375, 768 and 1 280 pixels). */
#pieces {
  scroll-margin-top: var(--header-height);
}

body:has(.deadline) #pieces {
  scroll-margin-top: calc(var(--header-height) + 11rem);
}

@media (min-width: 48rem) {
  #pieces {
    scroll-margin-top: var(--header-height-wide);
  }

  body:has(.deadline) #pieces {
    scroll-margin-top: calc(var(--header-height-wide) + 4rem);
  }
}

.upload__files {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.upload__file {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--color-line);
}

.upload__file + .upload__file {
  margin-top: 0;
}

.upload__name {
  font-weight: var(--font-weight-strong);
  overflow-wrap: anywhere;
}

.upload__meta {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.upload__feedback {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--font-size-sm);
}

/* Tables ---------------------------------------------------------------- */
/* Headers in monospace capitals; a wide table scrolls in its frame (.table-scroll, a
   named region reachable from the keyboard) or stacks row by row (.price-table); the
   page never scrolls sideways (docs/12, "Mobile"). */

.table-scroll {
  max-width: 100%;
  margin: 0 0 var(--space-5);
  overflow-x: auto;
}

.table-ruled {
  width: 100%;
  margin: 0 0 var(--space-5);
  border-collapse: collapse;
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums lining-nums;
}

.table-ruled--wide {
  min-width: 44rem;
  margin-bottom: 0;
}

.table-ruled caption,
.price-table caption {
  padding-bottom: var(--space-3);
  text-align: left;
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

.table-ruled th,
.table-ruled td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.table-ruled thead th,
.price-table thead th {
  background: var(--color-surface-muted);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Price table: a table on wide screens, stacked rows below 40rem. */
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
}

.price-table th,
.price-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.price-table .price {
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  white-space: nowrap;
}

.price-table thead .price {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

@media (max-width: 39.99rem) {
  .price-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .price-table tr,
  .price-table th,
  .price-table td {
    display: block;
  }

  .price-table tr {
    padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--color-line);
  }

  .price-table th,
  .price-table td {
    padding: var(--space-1) var(--space-4);
    border: 0;
  }

  .price-table .price {
    text-align: left;
  }

  .price-table td[data-label]::before {
    content: attr(data-label) " : ";
    color: var(--color-ink-muted);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
  }
}

/* FAQ: native disclosure widgets, keyboard operable without script. */
.faq {
  max-width: var(--measure);
  border-top: var(--border-width) solid var(--color-line);
}

.faq details {
  border-bottom: var(--border-width) solid var(--color-line);
}

.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-weight: var(--font-weight-strong);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--color-accent);
  font-size: var(--font-size-md);
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq summary:hover {
  color: var(--color-accent);
}

.faq__answer {
  padding: 0 0 var(--space-4);
}

.faq__answer > :last-child {
  margin-bottom: 0;
}

/* Breadcrumb. */
.breadcrumb {
  margin-bottom: var(--space-5);
  font-size: var(--font-size-sm);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  padding: 0 var(--space-2);
  color: var(--color-ink-muted);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-ink-muted);
}

/* Pages ------------------------------------------------------------------ */

.hero {
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-line);
}

.hero .lead {
  max-width: var(--measure);
}

/* Product pages (ticket 0108, docs/12-design-ux.md, "Règle des prix" and "Mobile"): the
   limits of the document in front of its price, in the same screen. Two columns from
   820 px; below, one column, the price box following the block of the limits. */
.product__first {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 51.25rem) {
  .product__first {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--space-6);
  }
}

.product__text .lead,
.product__deposit {
  max-width: var(--measure);
}

.product__text > :last-child {
  margin-bottom: 0;
}

.product__deposit {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
}

.product__deposit > p {
  margin: 0;
}

.product__deposit-title {
  font-weight: var(--font-weight-strong);
}

.product__offer .price-box {
  max-width: none;
}

.product__offer .notice {
  margin: 0;
}

.product__price-aside {
  margin: var(--space-3) 0 0;
}

/* Lines of a price box whose value is a sentence: the title above its value. */
.facts--stacked > div {
  flex-direction: column;
  gap: var(--space-1);
}

.facts--stacked dd {
  font-weight: var(--font-weight-regular);
  text-align: left;
}

.price-box__prices dd {
  white-space: nowrap;
}

/* Catalogue (ticket 0108): ruled list, the name and the lead of each document on the
   left, its price excluding VAT on the right; one column under 40 rem. */
.catalogue-list--priced {
  grid-template-columns: minmax(0, 1fr);
}

.catalogue-list--priced > li,
.catalogue-list--priced > li + li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-5);
  row-gap: var(--space-1);
  align-items: baseline;
  padding: var(--space-4) 0;
}

.catalogue-list--priced .catalogue-list__name,
.catalogue-list--priced .catalogue-list__text {
  grid-column: 1;
  max-width: var(--measure);
}

.catalogue-list__price {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  white-space: nowrap;
}

.catalogue-list__incl {
  grid-column: 2;
  grid-row: 2;
  max-width: 15rem;
  text-align: right;
  justify-self: end;
}

.catalogue-list__price--none {
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
}

.catalogue-list--priced > .catalogue-list__level {
  padding-left: var(--space-5);
}

@media (max-width: 40rem) {
  .catalogue-list--priced > li,
  .catalogue-list--priced > li + li {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalogue-list__price {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }

  .catalogue-list__incl {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }
}

.result-summary {
  display: grid;
  gap: var(--space-2);
}

.result-summary dt {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.result-summary dd {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-strong);
}

.placeholder {
  padding: var(--space-4);
  border: var(--border-width) dashed var(--color-border);
  color: var(--color-ink-muted);
}

.secondary {
  margin-top: var(--space-6);
}

/* The main landmark receives focus from the skip link only; it is not a control. */
.site-main:focus {
  outline: none;
}

/* Editorial content (tickets 0020 and 0114): pillars, articles, glossary, their indexes,
   archives and author pages. The page annotated (docs/12, "Parti pris"): the text reads
   like a deed, in Spectral, within the measure of 40 rem; the signature in Hanken
   Grotesk, the dates in IBM Plex Mono; the references on reference lines, their status
   "Vérifié le JJ/MM/AAAA" the only use of the Contrôle on the page. Composition and
   classes only: no text of a page depends on these rules. The pages of templates/content/
   carry .content-annotated (pillar, article, glossary entry) or .content-index; no rule
   reads .content-page, which the product pages carried until ticket 0108 (now
   .product): they keep their width and their voices. -------------------------------- */

.content-annotated,
.content-index {
  max-width: var(--measure);
}

/* Header: eyebrow, title, lead in Spectral, signature, dates in monospace. */
.content-header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-line);
}

.content-header h1 {
  margin-bottom: var(--space-3);
}

.content-header .lead {
  margin: var(--space-4) 0 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  line-height: 1.5;
}

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

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

/* Signature, date of update and seniority notice of a presentation page (page
   "Méthode", ticket 0109), in one block under the direct answer. */
.signature {
  margin-top: var(--space-4);
}

.signature > * {
  margin: 0;
}

.signature > * + * {
  margin-top: var(--space-1);
}

/* Answer first (decision of Antoine of 2026-10-06, "réponse d'abord"): the header holds
   the eyebrow, the title and the lead; the direct answer follows, then the signature and
   the dates, closed by a rule. */
.content-annotated > .content-header {
  margin-bottom: var(--space-5);
  padding-bottom: 0;
  border-bottom: 0;
}

.content-signature {
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-line);
}

.content-signature > .byline:first-child {
  margin-top: 0;
}

.byline + .byline {
  margin-top: var(--space-1);
}

.byline a {
  font-weight: var(--font-weight-medium);
}

/* Dates of a content page: the machine voice, never under the floor of 14 px. */
.byline time,
.content-annotated .note time,
.content-index .note time {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

/* Direct answer first (docs/10, "GEO"): a box laid on the page, its title as an eyebrow,
   its text in Spectral. No radius for boxes (docs/12, "Formes"). */
.direct-answer {
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-left: 3px solid var(--color-accent);
  border-radius: 0;
  font-family: var(--font-serif);
}

.direct-answer h2 {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.06em;
  line-height: var(--line-height-base);
  text-transform: uppercase;
}

.direct-answer > :last-child {
  margin-bottom: 0;
}

.direct-answer .note {
  font-family: var(--font-sans);
}

/* Definitions: the term in Spectral, its English equivalent in italic, the definition in
   Spectral. */
.definitions dt {
  margin-top: var(--space-3);
  font-weight: var(--font-weight-strong);
}

.definitions dd {
  margin: var(--space-1) 0 0;
}

.content-annotated .definitions dl {
  margin: 0;
}

.content-annotated .definitions dt,
.content-index .definitions dt {
  margin-top: var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.content-annotated .definitions dt [lang],
.content-index .definitions dt [lang] {
  color: var(--color-ink-muted);
  font-style: italic;
  font-weight: var(--font-weight-regular);
}

.content-annotated .definitions dd,
.content-index .definitions dd {
  font-family: var(--font-serif);
}

/* Sanitised body of the pillars and articles (apps/content/sanitize.py): headings, lists,
   quotations, tables, images and figures of the historical site, in Spectral. A table
   keeps the width of the column and wraps its cells: the page never scrolls sideways
   (docs/12, "Mobile"). */
.content-body {
  margin-top: var(--space-6);
  font-family: var(--font-serif);
}

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

.content-body h3 {
  margin-top: var(--space-6);
}

.content-body h4 {
  margin-top: var(--space-5);
  font-weight: var(--font-weight-strong);
}

.content-body > :first-child,
.content-body > section:first-child > :first-child {
  margin-top: 0;
}

.content-body li::marker {
  color: var(--color-ink-muted);
}

.content-body blockquote {
  margin: var(--space-5) 0;
  padding: 0 0 0 var(--space-5);
  border-left: 2px solid var(--color-line);
  font-style: italic;
}

.content-body blockquote > :last-child {
  margin-bottom: 0;
}

.content-body figure {
  margin: var(--space-5) 0;
}

.content-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--space-5) 0;
}

.content-body figure img {
  margin: 0;
}

.content-body figcaption {
  margin-top: var(--space-2);
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
}

.content-body hr {
  margin: var(--space-6) 0;
  border: 0;
  border-top: var(--border-width) solid var(--color-line);
}

.content-body table {
  width: 100%;
  margin: var(--space-5) 0;
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums lining-nums;
}

.content-body caption {
  padding-bottom: var(--space-3);
  text-align: left;
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.content-body th,
.content-body td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.content-body thead th {
  background: var(--color-surface-muted);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.content-body tbody th {
  font-weight: var(--font-weight-strong);
}

/* A table of four columns or more is framed by the filter `framed_tables`
   (apps/content/templatetags/content_body.py), without any change of its text; on a
   narrow screen the frame scrolls rather than splitting the words letter by letter, the
   table keeping its display and its semantics; the page itself never scrolls sideways.
   Chromium reaches a scrolling frame without focusable content from the keyboard
   (tested); Firefox is said to do so as well, untested here. */
.table-frame {
  margin: var(--space-5) 0;
}

.table-frame > table {
  margin: 0;
}

@media (max-width: 39.99rem) {
  .content-body th,
  .content-body td {
    padding-inline: var(--space-2);
  }

  .table-frame {
    max-width: 100%;
    overflow-x: auto;
  }

  .table-frame > table {
    width: auto;
    min-width: 100%;
    table-layout: auto;
  }

  .table-frame :is(th, td) {
    min-width: 7rem;
    overflow-wrap: normal;
  }
}

/* Figures drawn by the code (ticket 0124, apps/content/figures.py, docs/design/systeme.md,
   "Figures"): a piece of the file, not an infographic. The title in Spectral above the
   frame; the drawing on a sheet framed by a rule, at its natural size (one unit of its
   viewBox is one pixel, so that no text of it falls under 14 px), scrolling in its frame
   on a narrow screen; the caption, the date of the data and the references below, the
   last two in monospace. Inside the SVG, every colour and every font come from the
   classes below, which read the variables of tokens.css only: labels in Hanken
   Grotesk, dates, amounts and references in IBM Plex Mono, rules of 1 pixel, no shadow,
   no gradient, the Visa for a deadline only (docs/12, rule 2), with its square and its
   word. The sizes of the texts are those the layout of the module computes with
   (--font-size-sm, 15 px; --font-size-xs, 14 px; checked by the tests). */
.figure-drawn {
  margin: var(--space-6) 0;
}

.figure-drawn__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
}

.figure-drawn__frame {
  max-width: 100%;
  overflow-x: auto;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
}

.figure-drawn__frame--table {
  padding: 0;
  background: none;
  border: 0;
}

.figure-drawn__frame > svg {
  display: block;
  max-width: none;
  height: auto;
}

/* A calendar and a tree are drawn twice, wide and narrow (apps/content/figures.py,
   `Layout`): the wide drawing in the reading column, the narrow one below 42.5 rem,
   where the wide one would not hold in its frame. */
.figure-drawn__frame--dual > .figure-svg--etroit {
  display: none;
}

@media (max-width: 42.49rem) {
  .figure-drawn__frame:not(.figure-drawn__frame--table) {
    padding: var(--space-2);
  }

  .figure-drawn__frame--dual > .figure-svg--large {
    display: none;
  }

  .figure-drawn__frame--dual > .figure-svg--etroit {
    display: block;
  }
}

.figure-drawn__caption,
.content-body .figure-drawn__caption {
  margin-top: var(--space-3);
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
}

.figure-drawn__legend {
  margin: 0;
}

/* A citation never breaks, neither at a space nor at a hyphen ("CGI, art. 1729-0 A"). */
.figure-drawn__citation {
  white-space: nowrap;
}

.figure-drawn__meta {
  margin: var(--space-1) 0 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.figure-svg text {
  fill: var(--color-ink);
  /* The families of the documents (ticket 0237, sub-lot B1): the texts of a figure are
     measured with their TTF subsets (apps/content/figures.py). */
  font-family: var(--font-drawn-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.figure-svg .figure-svg__strong {
  font-weight: var(--font-weight-strong);
}

.figure-svg .figure-svg__answer {
  font-weight: var(--font-weight-medium);
}

.figure-svg .figure-svg__mono {
  font-family: var(--font-drawn-mono);
  font-size: var(--font-size-xs);
}

.figure-svg .figure-svg__muted {
  fill: var(--color-ink-muted);
}

.figure-svg .figure-svg__deadline {
  fill: var(--color-attention);
}

.figure-svg__line,
.figure-svg__rail {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1px;
}

.figure-svg__rule {
  stroke: var(--color-line);
  stroke-width: 1px;
}

.figure-svg__flow {
  stroke-dasharray: 6 4;
}

.figure-svg__mark,
.figure-svg__bar,
.figure-svg__arrow {
  fill: var(--color-ink);
}

.figure-svg__mark-open {
  fill: var(--color-surface);
  stroke: var(--color-ink);
  stroke-width: 1px;
}

.figure-svg__mark-deadline {
  fill: var(--color-attention);
}

.figure-svg__box {
  fill: var(--color-surface);
  stroke: var(--color-ink);
  stroke-width: 1px;
}

.figure-svg__box-outcome {
  fill: var(--color-surface-muted);
  stroke: var(--color-ink);
  stroke-width: 1px;
}

.figure-svg__ground {
  fill: var(--color-surface);
}

/* Tables of thresholds and scales: the table of the content body (ticket 0114), headers
   with their scope, amounts and rates in monospace with tabular figures. */
.figure-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums lining-nums;
}

.figure-table th,
.figure-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.figure-table thead th {
  background: var(--color-surface-muted);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.figure-table tbody th {
  font-weight: var(--font-weight-strong);
}

.figure-table__ref {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

/* In the body of a page, the table takes the widths its cells ask for and never cuts a
   word: the amounts are kept on one line by the module, the citations too. */
.content-body .figure-table {
  margin: 0;
  table-layout: auto;
}

.content-body .figure-table :is(th, td) {
  overflow-wrap: normal;
  hyphens: manual;
}

/* On a narrow screen the rows stack, each value after the heading of its column, as the
   price table (ticket 0105): nothing is cut, nothing scrolls. */
@media (max-width: 39.99rem) {
  .figure-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .figure-table tr,
  .figure-table th,
  .figure-table td {
    display: block;
  }

  .figure-table tr {
    padding: var(--space-3) 0;
    border-bottom: var(--border-width) solid var(--color-line);
  }

  .figure-table th,
  .figure-table td {
    padding: var(--space-1) var(--space-3);
    border: 0;
  }

  .figure-table td[data-label]::before {
    display: block;
    content: attr(data-label);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* Questions of a content page: the question and its answer in Spectral. */
.content-annotated .faq summary {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-medium);
}

.content-annotated .faq__answer {
  font-family: var(--font-serif);
}

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

/* Related pages and lists of the indexes: the title of a page in Spectral. */
.content-list {
  padding-left: 0;
  list-style: none;
}

.content-list li + li {
  margin-top: var(--space-4);
}

.content-list p {
  margin: var(--space-1) 0 0;
}

.content-annotated .content-list > li > a,
.content-annotated .content-related > p > a,
.content-index .content-list > li > a {
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.content-index .content-list li + li {
  margin-top: 0;
}

.content-index .content-list > li {
  padding: var(--space-4) 0;
  border-top: var(--border-width) solid var(--color-line);
}

.content-index .content-list > li > p:not(.note) {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

/* References: reference lines of ticket 0105, the citation on the left, its status on
   the right (docs/12, rule 8). */
.content-references .ref-lines {
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-line);
}

.content-references .ref-line__ref {
  color: var(--color-link);
}

/* One position of the status per width (review of ticket 0114): on the right from
   40 rem, the citation wrapping before it; below the citation under 40 rem. */
.content-references .ref-line {
  flex-wrap: nowrap;
}

.content-references .ref-line__ref {
  flex: 1 1 auto;
  min-width: 0;
}

.content-references .ref-line .status {
  flex: none;
  white-space: nowrap;
}

@media (max-width: 39.99rem) {
  .content-references .ref-line {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Pages of the indexes, archives and authors. */
.content-index h1 {
  margin-bottom: var(--space-4);
}

.content-index .lead {
  font-family: var(--font-serif);
}

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

/* Legal pages (ticket 0114): body in Spectral, articles numbered by their text, each
   opened by a rule. Applied by step C of ticket 0072, which wraps the text of the three
   legal pages in `.legal-text` (also shown on /_design/ with a fictitious text). The numbers
   are those of the text: no counter is generated here. */
.legal-text {
  max-width: var(--measure);
  font-family: var(--font-serif);
}

.legal-text h1 {
  margin-bottom: var(--space-4);
}

.legal-text h2 {
  margin-top: var(--space-7);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-line);
  font-size: var(--font-size-md);
}

.legal-text h3 {
  margin-top: var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-strong);
}

.legal-text .note {
  font-family: var(--font-sans);
}

/* Error pages (404, 500, refusal of the protection against cross-site request forgery):
   what happened, then the way back to the home page and to the free journey. */
.error-page {
  max-width: var(--measure);
  padding-block: var(--space-5) var(--space-6);
}

.error-page h1 {
  margin-bottom: var(--space-4);
}

/* Trap field of the entry form of the free journey (ticket 0034): out of sight, out of
   the accessibility tree and of the tab order; only automated fillers reach it. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Procedure to obtain the file of the guide P2 (ticket 0014): numbered steps, and neutral
   schemes of a web page drawn with boxes and grey bars, one link set off by the accent.
   They reproduce no site: no capture, no logo, no graphic charter. */
.steps {
  max-width: var(--measure);
  padding-left: var(--space-5);
}

.steps > li + li {
  margin-top: var(--space-6);
}

.schema {
  max-width: var(--measure);
  margin: var(--space-4) 0 var(--space-5);
}

.schema__page {
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
}

.schema__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-line);
}

.schema__body {
  padding: var(--space-3) 0;
}

.schema__bar {
  display: block;
  height: var(--space-2);
  margin: var(--space-2) 0;
  background: var(--color-line);
  border-radius: var(--radius);
}

.schema__bar--short {
  width: 40%;
}

.schema__header .schema__bar {
  flex: 0 0 25%;
  margin: 0;
}

.schema__link {
  color: var(--color-ink-muted);
}

.schema__link--highlight {
  padding: var(--space-1) var(--space-2);
  color: var(--color-accent);
  font-weight: var(--font-weight-strong);
  background: var(--color-accent-soft);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
}

.schema__footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-muted);
  border-radius: var(--radius);
}

.schema__heading {
  margin: 0 0 var(--space-2);
  font-weight: var(--font-weight-strong);
}

.schema__column ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: var(--color-ink-muted);
}

.schema__column li.schema__link--highlight {
  margin-left: calc(-1 * var(--space-2));
}

.schema__new-window {
  font-weight: normal;
}

/* Home page (tickets 0107 and 0176, docs/12-design-ux.md: "Conversion", "Règle des prix",
   "Icônes d'interface", "Mobile"; maquette A retained by Antoine on 2026-10-09). The
   first screen is a band in Nuit that extends the header, separated from it by a rule:
   the promise on the left, the entry form on the right on a sheet; one column under
   820 px, the form after the guarantees, the lead and the help of the form left out.
   Below: the row of figures, the steps, the example sheet (the only shadow of the page)
   and its marks, the cards of the documents, the reminder. */
.site-main--home {
  padding-block: 0;
}

.home-band {
  background: var(--color-band);
  color: var(--color-band-ink);
  border-top: var(--border-width) solid var(--color-band-rule);
}

/* On a phone (ticket 0189, rule 1): the gap between the promise and the form and the top
   margin of the band two notches down the scale, 24 to 12 and 16 to 8 pixels
   (condensation (3), then one notch more by arbitration Q68 (a)). */
.home-band__inner {
  display: grid;
  gap: var(--space-3);
  align-items: start;
  padding-block: var(--space-2) var(--space-6);
}

/* From 820 px (ticket 0203, decision of Antoine of 2026-10-10 and of 2026-10-13): the form
   is the wide column, so that the field of the description is wide (475 px at 1 024 px of
   container, against 361), the promise the narrow one, in the proportion 5 to 7 (Q69 (a);
   retained by Antoine on the captures, the title of level 1, degree 8, on six lines). */
@media (min-width: 51.25rem) {
  .home-band__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-7);
    padding-block: var(--space-7);
  }
}

.home-band__title {
  margin: 0 0 var(--space-2);
  color: var(--color-band-ink);
  font-size: var(--font-size-xl);
  line-height: 1.12;
}

/* The words in italics take the accent of the word "Tax" of the logo on the band (Visa
   clair; request of Antoine of 2026-10-09): a large text, measured at 3 on Nuit. */
.home-band__title em {
  color: var(--color-brand-on-band);
  font-style: italic;
}

@media (min-width: 51.25rem) {
  .home-band__title {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-2xl);
  }
}

@media (min-width: 64rem) {
  .home-band__title {
    font-size: var(--font-size-3xl);
    line-height: 1.08;
  }
}

.home-band__lead {
  display: none;
  max-width: 34rem;
  margin: 0 0 var(--space-5);
  color: var(--color-band-ink);
  font-size: var(--font-size-md);
  line-height: 1.5;
}

@media (min-width: 51.25rem) {
  .home-band__lead {
    display: block;
  }
}

.home-guarantees {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-guarantees > li,
.home-guarantees > li + li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: 0;
  color: var(--color-band-ink);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

@media (min-width: 51.25rem) {
  .home-guarantees {
    gap: var(--space-3);
  }

  .home-guarantees > li,
  .home-guarantees > li + li {
    font-size: var(--font-size-base);
  }
}

.home-guarantees strong {
  font-weight: var(--font-weight-strong);
}

/* Check of the guarantees: 16 pixels on a phone (ticket 0189), the stroke kept at 1.5
   pixel at least once scaled (2.6 on a grid of 24 inside the 14 pixels left by the ring). */
.home-guarantees .icon {
  width: 1rem;
  height: 1rem;
  margin-top: 3px;
  padding: 0;
  border: var(--border-width) solid var(--color-band-ink-muted);
  stroke-width: 2.6;
}

@media (min-width: 51.25rem) {
  .home-guarantees .icon {
    width: 1.375rem;
    height: 1.375rem;
    margin-top: 1px;
    padding: 2px;
    stroke-width: 2.2;
  }
}

/* The form of the first screen, on a sheet: the shared partial of the entry form. */
.home-form {
  padding: var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  border: var(--border-width) solid var(--color-line);
}

@media (min-width: 51.25rem) {
  .home-form {
    padding: var(--space-6);
  }
}

.home-form__title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-md);
}

@media (min-width: 51.25rem) {
  .home-form__title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-lg);
  }
}

.home-form__help {
  display: none;
  margin: 0 0 var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

@media (min-width: 51.25rem) {
  .home-form__help {
    display: block;
  }
}

.home-form textarea {
  height: 6rem;
  min-height: 6rem;
}

@media (min-width: 51.25rem) {
  .home-band__promise {
    padding-top: var(--space-5);
  }

  /* Ticket 0232, rule 3 (i), decision of Antoine of 2026-10-13 (« un champs plus grand »):
     10 rem from 820 pixels (about seven lines), against 7 rem; the button of the form
     stays under 784 pixels at 1 280 by 800 and in the screen at 1 440 by 900 (tests). Under
     820 pixels the field stays at 6 rem: the bound of 828 pixels of ticket 0189 holds. */
  .home-form textarea {
    height: 10rem;
  }
}

.home-form .hint,
.home-form .note,
.home-form .choice label {
  font-size: var(--font-size-xs);
}

.home-form .actions button {
  width: 100%;
}

/* The card of the form, short (request of Antoine of 2026-10-09): tighter fields, the
   notes behind their small links. */
.home-form .field {
  margin-bottom: var(--space-2);
}

/* The container of the dictation (ticket 0177) under the description, once filled:
   the tight spacing of the fields of the card, without the negative margin of the
   container, which would bring its content over the small link of the hint and the
   button « Dicter » beside it, or over its panel once open (WCAG 2.2, focus not
   obscured). Empty, it keeps no margin. */
.home-form .dictation-slot:has(> :not(:empty)) {
  margin: 0 0 var(--space-2);
}

/* On a phone (ticket 0189, condensation (5) of rule 1, arbitration Q68 (a)): the field
   of the description ends on its small link, whose box of 44 pixels already spaces it
   from the address. */
.home-form .field:has(> .more, > .field__foot) {
  margin-bottom: 0;
}

@media (min-width: 51.25rem) {
  .home-form .field:has(> .more, > .field__foot) {
    margin-bottom: var(--space-2);
  }
}

.home-form .actions {
  margin: var(--space-2) 0 0;
}

@media (min-width: 51.25rem) {
  .home-form .actions {
    margin-top: var(--space-3);
  }
}

/* Small links of the entry form (ticket 0176): a native `details`, no script; the
   panel opens in the flow, framed by a rule, and what follows moves down, so that no
   control is ever covered (WCAG 2.2, focus not obscured); it closes from its link. The
   sign of the link is decorative: its text alternative is empty, the state open or
   closed being exposed by the element itself. */
.more__summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  color: var(--color-link);
  font-size: var(--font-size-xs);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
  list-style: none;
}

.more__summary::-webkit-details-marker {
  display: none;
}

.more__summary::after {
  display: inline-block;
  /* The signs "+" and "-" of Geist differ in width: the box of the sign is fixed, so that
     the small link keeps its width open and closed (ticket 0237, sub-lot B1). */
  width: 0.6em;
  margin-left: 0.3em;
  text-align: center;
  content: "+" / "";
}

.more[open] > .more__summary::after {
  content: "\2212" / "";
}

.more__panel {
  margin: 0 0 var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-ink);
}

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

/* A sentence that ends on a small link (first level of the notice on the data) stands
   right above it. */
.note:has(+ .more) {
  margin-bottom: 0;
}

/* What stands under the button of the card, compacted (ticket 0232, rule 4, decision of
   Antoine of 2026-10-13: « compacter le reste des informations sous le formulaire »), in
   the order validated by ticket 0189 (rule 1 (1)): the line of reassurance (ACC-19) with its
   icon, the small link of the notes on the address (a panel in the flow), the first level of
   the information on the data (T1 bis), the small link « Vos données » (a panel in the
   flow), the link to the legal notice. No text is removed, shortened nor moved in the
   document, none is under 14 pixels, no target is under 44 pixels. Closed list of means:
   (a) the first degree of the scale (14 pixels, the floor) and a line height of 1.45;
   (b) an icon of 16 pixels; (c) the vertical margins between these elements at the first
   step of the scale or nothing where the 44 pixels of a small link already space it;
   (d) from 820 pixels, the small link of the notes and the link to the legal notice on a
   line, 24 pixels apart, each in its box of 44 pixels; (e) the box of 44 pixels of a small
   link may cover the margin of a neighbour, never its rectangle nor its focus indicator. */
.home-form__reassure {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: var(--space-1) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

.home-form__reassure .icon {
  width: 1rem;
  height: 1rem;
  margin-top: 2px;
  color: var(--color-ink);
}

.home-form > .note {
  margin: 0;
  line-height: 1.45;
}

/* The link to the legal notice, alone in its paragraph: a small link in its box of 44
   pixels, as the two others. */
.home-form > .note:last-child a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
}

/* The same fine print on the entry screen `/demande/`, which shares the partial of the form
   (ticket 0232, rule 4, last sentence): the first level of the information on the data, its
   small link and the link to the legal notice, at the first degree, at the line height of
   1.45, the link in its box of 44 pixels. */
.entry-fine .note {
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

.entry-fine > .note:last-child a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
}

/* From 820 pixels, the small link of the notes on the address (fourth from the end) and
   the link to the legal notice (the last) stand on one line, the second after the first at
   24 pixels, in the document order unchanged: the card is a grid of one column, the notes
   narrow (the width of their link, the panel opening at most 14 rem wide) and the legal
   notice in the second column of the same row (dense placement); every other child spans
   the whole width. A panel of the notes opened takes the whole width back (one column, the
   link to the legal notice at the end, in its place in the document). */
@media (min-width: 51.25rem) {
  .home-form {
    display: grid;
    grid-template-columns: fit-content(14rem) minmax(0, 1fr);
    grid-auto-flow: row dense;
    column-gap: var(--space-5);
    align-content: start;
  }

  .home-form > * {
    grid-column: 1 / -1;
  }

  .home-form > details.more:nth-last-child(4) {
    grid-column: 1;
  }

  .home-form > .note:last-child {
    grid-column: 2;
  }

  .home-form:has(> details.more:nth-last-child(4)[open]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-form:has(> details.more:nth-last-child(4)[open]) > .note:last-child {
    grid-column: 1;
  }
}

/* Interface icons (docs/12, "Icônes d'interface"): stroke only, in the colour of the
   text they stand beside. */
.icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Row of figures, under the band: four columns from 820 px, two by two below. */
.home-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-5);
  margin: 0;
  padding: var(--space-4) 0;
  list-style: none;
  border-bottom: var(--border-width) solid var(--color-line);
}

@media (min-width: 51.25rem) {
  .home-figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.home-figures > li,
.home-figures > li + li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--space-2) 0;
}

.home-figures__value {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
}

.home-figures__label {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

/* Sections under the band. */
.home-section {
  padding-block: var(--space-7);
}

.home-section + .home-section {
  border-top: var(--border-width) solid var(--color-line);
}

.home-section__head {
  max-width: 44rem;
  margin-bottom: var(--space-5);
}

.home-section__head h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xl);
}

@media (min-width: 40rem) {
  .home-section__head h2 {
    font-size: var(--font-size-2xl);
  }
}

.home-section__head p {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
  line-height: 1.5;
}

/* Steps. */
.home-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-steps > li,
.home-steps > li + li {
  margin: 0;
}

.home-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
}

.home-step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The number comes first, at the left, in the box with the rule in Encre; the icon follows
   it, at the right, without a box (ticket 0232, rule 2, decision of Antoine of 2026-10-13:
   « il faut inverser les icones et les chiffres 1. 2. et 3. car là c'est d'abord l'icone
   puis le chiffre, ce qui n'a pas beaucoup de sens »). The order is that of the document;
   the number is hidden from assistive technologies, the step is named by its title. */
.home-step__number {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: var(--border-width) solid var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

.home-step__icon {
  display: flex;
}

.home-step__icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.home-step h3 {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-md);
}

.home-step p {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.home-lawyer {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-left: 4px solid var(--color-accent);
}

.home-lawyer p {
  margin: 0;
}

.home-lawyer strong {
  font-weight: var(--font-weight-strong);
}

/* Example sheet and its marks: the marks on the left, the sheet on the right from
   820 px; below, the marks before the sheet. */
.home-proof__layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 51.25rem) {
  .home-proof__layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-7);
  }
}

.home-proof__marks {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-proof__marks > li,
.home-proof__marks > li + li {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  margin: 0;
}

.home-pin {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--color-band);
  color: var(--color-band-ink);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.home-proof__figure {
  margin: 0;
}

.home-proof__figure figcaption {
  margin-top: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

.doc-sheet--page {
  display: block;
  max-width: none;
}

.home-sheet {
  position: relative;
  padding: var(--space-4);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

@media (min-width: 51.25rem) {
  .home-sheet {
    padding: var(--space-5) var(--space-6);
  }
}

.home-sheet > * + * {
  margin-top: var(--space-3);
}

.home-sheet__marks {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.home-sheet__marks .brand-seal {
  width: 2.25rem;
}

.home-sheet__marks .brand-logo {
  width: 7rem;
}

.home-sheet .brand-logo__word {
  fill: var(--color-ink);
}

.home-sheet .brand-logo__tax {
  fill: var(--color-brand);
}

.home-sheet__product {
  color: var(--color-ink-muted);
}

.home-sheet__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
  margin-bottom: 0;
}

.home-sheet__meta dt {
  color: var(--color-ink-muted);
}

.home-sheet__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
}

.home-sheet__mention {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-top: 3px solid var(--color-ink);
  font-weight: var(--font-weight-medium);
}

.home-sheet__section {
  margin-bottom: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.home-sheet__marked {
  position: relative;
  padding-right: var(--space-6);
}

.home-sheet__pin {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.home-sheet__deadline {
  padding: var(--space-3) var(--space-7) var(--space-3) var(--space-4);
  background: var(--color-attention-soft);
  border: var(--border-width) solid var(--color-attention);
  border-left-width: 4px;
}

.home-sheet__deadline .home-sheet__pin {
  right: var(--space-2);
}

.home-sheet__deadline-label {
  margin: 0;
  color: var(--color-attention);
  font-family: var(--font-mono);
}

.home-sheet__deadline-value {
  margin: 2px 0 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.home-sheet__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}

.home-sheet__table th,
.home-sheet__table td {
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--border-width) solid var(--color-line);
  text-align: left;
}

.home-sheet__table th:last-child,
.home-sheet__table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.home-sheet__table thead th {
  background: var(--color-surface-muted);
  font-weight: var(--font-weight-strong);
}

.home-sheet__table tfoot td {
  border-bottom: 0;
  font-weight: var(--font-weight-strong);
}

/* Extract of the annex: one reference by line, its nature, then the status of its check
   in monospace, the wording of the printed annex. */
.home-sheet__references {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-sheet__references > li,
.home-sheet__references > li + li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin: 0;
  padding: var(--space-1) 0;
  border-top: var(--border-width) solid var(--color-line);
}

.home-sheet__reference {
  font-weight: var(--font-weight-medium);
}

.home-sheet__status {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
}

.home-sheet__questions {
  margin: 0;
  padding-left: var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
}

/* Blocks of the sheets of the documents (ticket 0181): head mention of the document,
   heading of a block, paragraphs, entries of a table of contents without bullets (the
   consecutive blocks of a table of contents read as one list), calendar whose first
   column is the date. */
.home-sheet__notice {
  padding: var(--space-2) var(--space-7) var(--space-2) var(--space-3);
  background: var(--color-surface-muted);
  border-left: 3px solid var(--color-ink);
}

.home-sheet__notice p {
  margin: 0;
}

.home-sheet__notice .home-sheet__pin {
  right: var(--space-2);
}

.home-sheet__heading {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-strong);
}

.home-sheet__text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
}

.home-sheet__toc {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-sheet__toc > li,
.home-sheet__toc > li + li {
  margin: 0;
  padding: var(--space-1) 0;
  border-bottom: var(--border-width) dotted var(--color-line);
}

.home-sheet > .home-sheet__block--toc + .home-sheet__block--toc {
  margin-top: 0;
}

.home-sheet__table--calendar th:first-child,
.home-sheet__table--calendar td:first-child {
  white-space: nowrap;
}

.home-sheet__table--calendar th:last-child,
.home-sheet__table--calendar td:last-child {
  text-align: left;
  white-space: normal;
}

/* The sheet of a product page stands under the example in text, wider than its measure. */
.product__sheet {
  margin-top: var(--space-5);
}

/* The stamp of the example, in the Visa of the seal, over the sheet. */
.home-sheet__stamp {
  position: absolute;
  top: var(--space-5);
  right: var(--space-4);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: 3px double var(--color-brand);
  background: var(--color-surface);
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-9deg);
}

.home-sheet__stamp small {
  display: block;
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
}

/* Cards of the documents: information, one link each (docs/12, "Conversion"). */
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-cards > li,
.home-cards > li + li {
  margin: 0;
}

.home-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
}

.home-card > * {
  margin: 0;
}

.home-card__situation {
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.home-card__name {
  font-size: var(--font-size-md);
  line-height: 1.25;
}

.home-card__line,
.home-card__note {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.home-card__line {
  flex: 1;
}

.home-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-line);
}

.home-card__price {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}

.home-card__priced {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 15rem;
}

.home-card__link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* The reminder at the foot of the page. */
.home-final {
  background: var(--color-surface);
  border-block: var(--border-width) solid var(--color-line);
}

.home-final__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-7);
}

.home-final h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
}

.home-final p {
  margin: 0;
  color: var(--color-ink-muted);
}

/* The reminder closing a page whose content sits in the container (ticket 0184: the
   catalogue, "Méthode", "Revue par un avocat"): set apart from the content, flush with
   the footer, the padding under the main being taken back. */
.site-main:not(.site-main--home) > .home-final {
  margin-block: var(--space-7) calc(-1 * var(--space-7));
}

.home-final__action .icon {
  width: 1.25rem;
  height: 1.25rem;
}


/* Journey (ticket 0110): the screens from the description of the request to the payment
   (`templates/intake/`, `templates/payments/`) and the page of the link of the Alphard
   channel (`templates/handoff/resume_*.html`). Composition and classes only: no text,
   no field, no hidden value and no action of a form depends on these rules
   (tests/test_journey_screens.py). One main action per screen; the secondary actions
   are bordered buttons or links, set apart by a rule. -------------------------------- */

.journey {
  max-width: var(--measure);
}

.journey > h1 {
  margin-bottom: var(--space-4);
}

.journey .secondary {
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-line);
}

.journey .secondary > :last-child,
.journey .secondary form > :last-child {
  margin-bottom: 0;
}

/* The text sent by the client or by the firm, quoted: a rule on the left, the voice of
   the service (a data, not a text of the site). */
.journey blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 2px solid var(--color-line);
}

/* A form of the journey laid on a sheet: entry form, targeting questions, form of the
   link of the Alphard channel. */
.journey-form {
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
}

@media (min-width: 40rem) {
  .journey-form {
    padding: var(--space-5);
  }
}

.journey-form .actions:last-child {
  margin-bottom: 0;
}

/* Overview: the sections of the overview separated by rules, the document proposed in a
   price box, the other documents in a ruled list. */
.overview > .section {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-line);
}

.overview > .section > h2 {
  margin-top: 0;
}

/* The document proposed: price excluding VAT with the mention "HT", delay, limits and
   order in one block (docs/12, "Règle des prix"). The price keeps the text of the
   catalogue, amount and mention in one string. */
.overview > .offer {
  max-width: none;
  padding: var(--space-5) var(--space-4);
  border-top: 4px solid var(--color-ink);
}

@media (min-width: 40rem) {
  .overview > .offer {
    padding: var(--space-5);
  }
}

.offer__header > :last-child {
  margin-bottom: 0;
}

.offer__title {
  margin: 0 0 var(--space-3);
}

.offer__terms {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.offer__terms > * {
  margin: 0;
}

.offer__price,
.offer__line,
.offer__limits {
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-line);
}

.offer__price dt {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.offer__price dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: var(--line-height-tight);
}

.offer__line > p {
  margin: 0;
}

.offer__limits h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-strong);
}

.offer__limits > :last-child {
  margin-bottom: 0;
}

.offer .actions {
  margin: var(--space-2) 0 0;
}

@media (max-width: 39.99rem) {
  .offer .actions button {
    width: 100%;
  }
}

/* The other documents of the catalogue: a ruled list, name and paragraph on the left,
   price and choice on the right from 40 rem, under them below. */
.offer-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-list > li,
.offer-list > li + li {
  display: grid;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: var(--space-4) 0;
  border-top: var(--border-width) solid var(--color-line);
}

.offer-list > li > * {
  margin: 0;
}

.offer-list__text {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.offer-list__price {
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .offer-list > li,
  .offer-list > li + li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .offer-list > li > * {
    grid-column: 1;
  }

  .offer-list > li > .offer-list__price {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .offer-list > li > form {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: start;
    justify-self: end;
  }
}

/* Screen of the final price (docs/12, "Mobile"; maquette, section 7): the three amounts
   and the order on the left, the summary of the order on the right from 820 px; one
   column below, in the order of the page. The two boxes of the acts are bordered boxes
   (`.check`), unchecked when shown; the button is never disabled. */
.checkout {
  display: grid;
  gap: var(--space-5) var(--space-7);
}

.checkout > * {
  min-width: 0;
}

.checkout__price > :last-child {
  margin-bottom: 0;
}

.checkout__price .price-table {
  margin-bottom: var(--space-3);
}

/* The amount including VAT, last row of the table: the total, set off by a rule of ink. */
.price-table .price-table__total th,
.price-table .price-table__total td {
  border-top: 2px solid var(--color-ink);
  font-weight: var(--font-weight-strong);
}

.checkout__summary {
  max-width: none;
  align-self: start;
}

.checkout__summary .facts > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.checkout__summary .facts dd {
  overflow-wrap: anywhere;
}

/* Below 40 rem the rows of the price table stack: the rule of the total goes to its row. */
@media (max-width: 39.99rem) {
  .price-table .price-table__total {
    border-top: 2px solid var(--color-ink);
  }

  .price-table .price-table__total th,
  .price-table .price-table__total td {
    border-top: 0;
  }
}

.checkout__order .check {
  max-width: none;
}

.checkout__order .actions {
  margin-top: var(--space-5);
}

@media (max-width: 39.99rem) {
  .checkout__order .actions button {
    width: 100%;
  }
}

@media (min-width: 51.25rem) {
  .checkout {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    grid-template-areas:
      "price summary"
      "order summary";
    align-items: start;
  }

  .checkout__price {
    grid-area: price;
  }

  .checkout__summary {
    grid-area: summary;
  }

  .checkout__order {
    grid-area: order;
  }
}

/* Order screen (ticket 0173, docs/12 "Mobile"; maquette, section 7), compact (request of
   Antoine of 2026-10-09: every field filled in at a glance, without scrolling). From
   820 px, in a container of 80 rem: the form on the left, the price box at the top of the
   margin on the right, the boxes of the acts and the button at once under it; the whole
   screen holds on 1366 by 900 pixels. Below 820 px, one column: the group of the status
   and the country, the price box, the names, the folded groups of the professional, the
   boxes of the acts and the button, the note of the payment after it (first review of
   the pull request, m3). Pairs of fields side by side (status and country from 30 rem,
   name and first name always); long hints folded under their field (`.field__more`); the
   groups of the professional folded in a native `details` (`.order__pro`). The wrappers
   of the fields and of the box are `display: contents`, so that the groups and the two
   parts of the box are placed by one grid; the box holds no control, the order of the
   keyboard stays the order of the page. */
.container--wide {
  max-width: 80rem;
}

.journey--order {
  max-width: none;
}

.journey--order > h1 {
  margin-bottom: var(--space-2);
}

.journey--order > .lead,
.journey--order > .error-summary,
.journey--order > .messages {
  max-width: var(--measure);
}

.journey--order > .lead {
  max-width: 56rem;
  margin-bottom: var(--space-4);
}

.order__intro--wide {
  display: none;
}

.order {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-6);
}

.order__fields,
.order__aside {
  display: contents;
}

.order .field-group {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
}

.order .field-group legend {
  margin-bottom: var(--space-2);
}

/* The question of the status is a field among the others: its legend is set as a label,
   not as the title of a group. */
.order .field-group .field > .field__label {
  float: none;
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: var(--font-weight-strong);
  line-height: inherit;
}

.order .field {
  position: relative;
  max-width: none;
  margin-bottom: var(--space-3);
}

.order .field-group .field:last-child,
.order__pair:last-child .field {
  margin-bottom: 0;
}

.order .hint {
  margin-bottom: var(--space-1);
}

.order .choices {
  gap: var(--space-2);
}

.order .choice {
  padding: var(--space-2) var(--space-3);
}

.order .choice:has(input:checked) {
  padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
}

.order__pair {
  display: grid;
  gap: 0 var(--space-4);
}

.order__pair--always {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* The summary of a folded hint may wrap under a label on a narrow column: the two
     controls stay on one line. */
  align-items: end;
}

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

/* A long hint folded under its field: the summary in the size of the hints, in the flow,
   on the line of the label when it fits and under it when the column is too narrow
   (flex with wrapping; the label and the summary are placed first by `order`, the other
   parts of the field take a full line). Once unfolded, the whole `details` goes under
   the field, hint included. Under the choices of a question (the status), a fieldset,
   the summary stays under the choices. */
.field__more {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.field__more > summary {
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.field__more > summary::-webkit-details-marker {
  display: none;
}

div.field:has(> .field__more) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-3);
}

div.field:has(> .field__more) > * {
  order: 2;
  flex: 0 0 100%;
  min-width: 0;
}

div.field:has(> .field__more) > label {
  order: 0;
  flex: 1 1 auto;
}

div.field:has(> .field__more) > .field__more {
  order: 1;
  flex: 0 0 auto;
}

div.field:has(> .field__more) > .field__more[open] {
  order: 3;
  flex: 0 0 100%;
}

fieldset.field > .field__more {
  margin-top: var(--space-1);
}

.field__more .hint {
  margin: var(--space-1) 0 0;
}

/* The groups of the professional, folded until they are needed. */
.order__pro {
  margin: 0 0 var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
}

.order__pro > summary {
  min-height: var(--target-size);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

.order__pro[open] > summary {
  border-bottom: var(--border-width) solid var(--color-line);
}

.order__pro > .field-group {
  margin: 0;
  border: 0;
}

.order__pro > .field-group + .field-group {
  padding-top: 0;
}

/* Fields of the status chosen (ticket 0187): the script of comfort sets the class
   `status-groups` on the form and keeps the status in `data-status`; the group of
   the other status, or both before the choice, leaves the flow. Without the script the
   class is absent and both groups stay visible under their title. */
.status-groups:not([data-status="individual"]) [data-status-group="individual"],
.status-groups:not([data-status="professional"]) [data-status-group="professional"],
.status-groups [data-status-group][hidden] {
  display: none;
}

.order__you {
  order: 1;
}

.order__box {
  order: 2;
  max-width: none;
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  gap: var(--space-2);
}

.order__box .eyebrow {
  margin-bottom: 0;
}

.order__more {
  order: 3;
}

.order__acts {
  order: 4;
  margin: 0 0 var(--space-6);
}

.order__you,
.order__more,
.order__box,
.order__acts {
  min-width: 0;
}

.order__amounts dd {
  white-space: nowrap;
}

.order__total dt,
.order__total dd {
  color: var(--color-ink);
  font-weight: var(--font-weight-strong);
}

.order__total dd {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  line-height: 1.1;
}

.order__acts .check {
  max-width: none;
  margin-bottom: var(--space-3);
}

.order__acts .actions {
  margin: var(--space-4) 0 var(--space-3);
}

.order__acts > :last-child {
  margin-bottom: 0;
}

@media (max-width: 39.99rem) {
  .order__acts .actions button {
    width: 100%;
  }

  .order .field-group,
  .order__box {
    padding: var(--space-3);
  }

  .order .field-group,
  .order__box,
  .order__pro {
    margin-bottom: var(--space-3);
  }

  .order .choice,
  .order .choice:has(input:checked) {
    padding-block: var(--space-1);
  }

  .order .field-group legend {
    font-size: var(--font-size-base, 1rem);
  }

  .order__acts .check > label {
    padding-block: var(--space-3);
  }

  .order__acts .check input[type="checkbox"] {
    top: var(--space-3);
  }

  /* The name of the document is the one the client chose on the overview; on a
     telephone the box keeps the amounts and the explanation of the case. */
  .order__box .eyebrow {
    display: none;
  }

  .order__box .facts > div {
    padding-top: var(--space-1);
  }

  .order__pro > summary {
    padding-block: var(--space-2);
  }

  .order .field {
    margin-bottom: var(--space-2);
  }

  .order .field-group legend,
  .order .choices {
    margin-bottom: var(--space-1);
  }

  .order .choices {
    gap: var(--space-1);
  }

  .order__acts .check {
    margin-bottom: var(--space-2);
  }

  .order__acts .actions {
    margin-top: var(--space-3);
  }

  .order__box {
    gap: var(--space-1);
  }

  .order__total dd {
    font-size: var(--font-size-lg);
  }

  .order__acts .check .hint {
    padding-bottom: var(--space-3);
  }
}

/* Two columns: the group of the status spans the first two rows, so that the box takes
   the first row alone and the boxes of the acts follow it at once in the second; the
   other groups take the next rows of the first column. */
@media (min-width: 51.25rem) {
  .order__intro--wide {
    display: inline;
  }

  .order__intro--narrow {
    display: none;
  }

  .order {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: start;
  }

  .order__you {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .order__box {
    grid-column: 2;
    grid-row: 1;
  }

  .order__acts {
    grid-column: 2;
    grid-row: 2 / span 4;
  }

  .order__more {
    grid-column: 1;
  }
}

/* After the payment (ticket 0111): the screens of the paid dossier, the deposit of
   pieces, the end screen, the quote request, the client space, the login and the
   declaration of withdrawal, in the column of the journey of ticket 0110. Composition and
   classes only: no text, no field, no hidden value and no action of a form depends on
   these rules (tests/test_after_payment_screens.py). ------------------------------ */

/* Identifiers and dates in figures, in the machine voice (filter `machine` of
   apps/core/templatetags/components.py); never under the floor of 14 px. */
.machine {
  font-family: var(--font-mono);
  font-size: max(0.875em, var(--font-size-xs));
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* A word longer than the column (an address, the name of a file, an identifier) goes to
   the line instead of widening the page at 360 pixels; a button shrinks to the column. */
.journey {
  overflow-wrap: break-word;
}

.journey .button,
.journey button {
  max-width: 100%;
}

/* A screen of the dossier in several steps (complement, questionnaire, proposition de
   rectification, guide, dossier): each step after the first set apart by a rule. */
.journey--dossier > .section,
.journey--dossier > .steps,
.journey--dossier > .upload-step {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-line);
}

.journey--dossier > .section > h2:first-child {
  margin-top: 0;
}

.journey--dossier > .section > .prose:first-of-type,
.journey--dossier .journey-form fieldset.section > legend h3 {
  margin-top: 0;
}

.journey--dossier .journey-form {
  margin-top: var(--space-4);
}

.journey-form fieldset.section {
  margin-top: var(--space-5);
}

.journey-form fieldset.section:first-of-type {
  margin-top: 0;
}

.journey--dossier .save-status {
  margin-top: 0;
}

/* The deposit of pieces in the column: the sheet takes the width of the column; the
   name of a file never widens the page (docs/12, "Mobile"). */
.journey .upload {
  max-width: none;
}

.upload__refresh {
  margin: var(--space-3) 0 0;
}

/* End screen of a delivered document (docs/02, "après paiement"): the document on a
   sheet (its generation, its limits, the passages to be confirmed by a lawyer, the
   download), then what follows: one main action, the download, in a plain button; the
   quote request in a bordered button (rule 1 of docs/12 kept, decision of 2026-10-07,
   evening): both of the same width, that of the column up to 26 rem. */
.delivered {
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-top: 4px solid var(--color-ink);
}

@media (min-width: 40rem) {
  .delivered {
    padding: var(--space-5);
  }
}

.delivered > :first-child {
  margin-top: 0;
}

.delivered .notice,
.delivered .limit-notice {
  margin: 0 0 var(--space-4);
}

.delivered .notice--success {
  padding: 0;
  background: none;
  border: 0;
}

/* Ticket 0238, rule 7: the sheet is the only box of the end screen. The limits of the
   document and the note on the passages to confirm are written on the sheet, without a
   background nor a frame of their own: a mark in the margin, in the Encre; same texts,
   same order, same roles. */
.delivered .limit-notice,
.delivered .notice--warning {
  padding: 0 0 0 var(--space-4);
  background: none;
  border: 0;
  border-left: 4px solid var(--color-ink);
}

.delivered__download {
  margin: var(--space-5) 0 0;
}

.end-screen .button {
  display: flex;
  width: 100%;
  max-width: 26rem;
}

.end-screen > .section {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-line);
}

.end-screen > .section > h2:first-child {
  margin-top: 0;
}

/* Quote request: the commitment of the firm, then the form on a sheet. */
.commitment {
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-line);
}

.commitment > :last-child {
  margin-bottom: 0;
}

/* Lines of a record (the order and the declaration of withdrawal): the label in the
   Ardoise, the value under it below 40 rem, on its right above. */
.record {
  margin: 0 0 var(--space-5);
  padding: 0;
}

.record > div {
  display: grid;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-2) 0;
  border-top: var(--border-width) solid var(--color-line);
}

.record > div:last-child {
  border-bottom: var(--border-width) solid var(--color-line);
}

.record dt {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.record dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 40rem) {
  .record > div {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  }
}

/* Client space (ticket 0238: the sheet of the page is static/css/pages/espace.css).
   Block "À faire" at the head of the space (ticket 0165): the situations one under the
   other, the label then its button; the first button is the full one (the oldest
   situation), the others are bordered (rule 1 of docs/12). The buttons are links of 44 px
   at least, as wide as the text on a telephone. */
.space-todo {
  margin-top: var(--space-5);
}

.space-todo > h2 {
  margin-top: 0;
}

.space-todo__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.space-todo__list > li {
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--color-line);
}

.space-todo__list p {
  margin: 0;
  overflow-wrap: anywhere;
}

.space-todo__action {
  margin-top: var(--space-3);
}

@media (max-width: 39.99rem) {
  .space-todo__action .button {
    width: 100%;
  }
}

/* The function of withdrawal (ticket 0089, rule 4, wording of 2026-10-07, evening):
   while the right subsists, a link of the size of the running text, in the Encre,
   underlined, a target of 44 px, under the download of the line of the document and in the
   panel "Commandes"; once the right is lost, in the panel "Commandes" only, the same words in the Ardoise, outside any link: no
   underline, no target, nothing that answers a click (a state of the journey, rule 4 of
   docs/12). */
.withdrawal {
  margin: var(--space-3) 0 var(--space-4);
}

.withdrawal-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
}

.withdrawal-off {
  color: var(--color-ink-muted);
  cursor: default;
}

/* Surfaces of direction D (ticket 0237, sub-lot B1): a form of the journey, a group of
   fields and the end screen of a document are cards with the large corner; a panel opened
   in the flow takes the corner of a notice. */
.journey-form,
.field-group {
  border-radius: var(--radius-card);
}

.delivered,
.more__panel {
  border-radius: var(--radius-box);
}

/* Never a box on a background inside another one (rule 11 (iii) of ticket 0237,
   tests/browser/test_design_execution.py): a frame of a choice or of a box to check, a
   panel opened in the flow and a notice set on a surface keep their rule and take the
   surface they stand on; the headers of a table, on the surface of the table, keep their
   machine voice and their rule; the order block of the overview (ticket 0175, lot C), in
   the box of the document proposed, keeps its rules on the surface of the box. */
.choice,
.choice:has(input:checked),
.check,
.more__panel,
:is(.delivered, .price-box, .order-summary, .card, .journey-form, .field-group) .notice,
:is(.delivered, .price-box, .order-summary, .card, .journey-form, .field-group) .limit-notice,
.table-ruled thead th,
.price-table thead th,
.price-box .field-group,
.price-box .price-box {
  background: none;
}

/* Movements of state of direction D (ticket 0237, sub-lot B1), a closed list held by
   apps/core/tests/test_design_components.py: at the hover of a control, its colours
   change in --motion-hover, once; declared on the hover only, so that no other change of
   state is delayed; nothing moves under prefers-reduced-motion: reduce. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal:not(.reveal--in) {
    opacity: 0;
  }

  .reveal-ready .reveal {
    transition: opacity var(--motion-reveal) var(--ease-state);
  }

  .button:hover,
  button:hover,
  .site-nav a:hover {
    transition:
      background-color var(--motion-hover) var(--ease-state),
      border-color var(--motion-hover) var(--ease-state),
      color var(--motion-hover) var(--ease-state),
      transform var(--motion-hover) var(--ease-state);
  }

  /* The lift of a button at its hover, 1 pixel as direction D (`.btn:hover`), back at the
     press; not the links dressed as buttons, the dictation button (its air above and below
     is measured) nor a button that cannot be pressed. */
  .button:not(.button--link):not(.dictation-button):not([aria-disabled="true"]):hover,
  button:not(.button--link):not(.dictation-button):not(:disabled):hover {
    transform: translateY(-1px);
  }

  .button:not(.button--link):not(.dictation-button):not([aria-disabled="true"]):active,
  button:not(.button--link):not(.dictation-button):not(:disabled):active {
    transform: none;
  }
}

/* Print (ticket 0237, correction before the tag): the fade hides the blocks the screen has not
   reached yet, and a printed page must show them all; same selector as the hiding rule, whose
   specificity is higher than `.reveal-ready .reveal`; no transition, so that no block is
   printed at mid-fade. Outside the block of the preference for motion, so that it holds
   under both preferences. */
@media print {
  .reveal-ready .reveal:not(.reveal--in),
  .reveal-ready .reveal {
    opacity: 1;
    transition: none;
  }
}

/* 0243 lot A: the line of the dates under the lead of a pillar or an article ("Publié le
   …", "Publié le … ; mis à jour le …"); the dates keep the monospace of `.note time`. */
.content-header .content-dates {
  margin-top: var(--space-3);
}

/* 0175 lot C */
/* Block of the order in the box of the document proposed on the overview (ticket 0175,
   lot C, templates/intake/_overview_order.html). From 820 px, the box of the document widens
   to the container and takes two columns, the document (header, price, delay, limits)
   on the left and the block of the order in the margin column on the right; the other
   sections of the overview keep the measure. Below 820 px, the block follows the limits.
   Inside the block, the fields and the price box of the order screen in one column (the
   status above the country), in the order of the order screen on a telephone (status
   and country, price box, names, groups of the professional, boxes of the acts and the
   button). */
@media (min-width: 51.25rem) {
  .overview:has(> .offer > .offer__order) {
    max-width: none;
  }

  .overview:has(> .offer > .offer__order) > :not(.offer) {
    max-width: var(--measure);
  }

  .overview > .offer:has(> .offer__order) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr;
    gap: var(--space-4) var(--space-6);
    align-items: start;
  }

  .offer > .offer__header,
  .offer > .offer__terms {
    grid-column: 1;
  }

  .offer > .offer__order {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

.offer__order > .note {
  margin: 0 0 var(--space-3);
}

.offer__order .order,
.offer__order .order__pair:not(.order__pair--always) {
  grid-template-columns: minmax(0, 1fr);
}

.offer__order .order__you,
.offer__order .order__box,
.offer__order .order__acts,
.offer__order .order__more {
  grid-column: auto;
  grid-row: auto;
}