/*
 * 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.
 */

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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;
}

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

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

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: 10;
  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 ---------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

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

.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) ------------------------------- */

/* Both bands in Nuit, with the logo inline (templates/brand/logo.html, drawn by
   scripts/build_brand.py), coloured by the variables. Protection zone of docs/12: on
   each side of the logo, free space equal to the height of the capital "D", that is the
   height of the logo box. Logo of 7rem (112 px) on small screens and 8.5rem (136 px)
   beyond 40rem, never under 96 px: its height is 19 or 23 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,
.site-footer {
  background: var(--color-band);
  color: var(--color-band-ink);
}

.site-header__inner,
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-5);
}

/* Compact header, the default (ticket 0183, docs/12 "Mobile" and charter rule 9): one row
   of 60 px, 64 px at most, with the logo, the link "Mon espace" and the button "Menu"; the
   list of the menu, once opened, is a second row that pushes the content down. Under
   48rem, and wherever the browser lacks `::details-content` (see "Wide header"), 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;
  gap: 0;
  padding-block: var(--space-2);
  /* Left: the margin of the page (the container, so that the logo is in line with the
     breadcrumb): 16 px under 40rem, 24 px from 40rem. Right: 20 px (the button "Menu"). */
  padding-inline: var(--space-4) calc(var(--space-4) + var(--space-1));
}

@media (min-width: 40rem) {
  .site-header__inner {
    padding-inline-start: var(--space-5);
  }
}

.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;
  }
}

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

.brand-logo__tax {
  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 bands, and on the skip link that appears over the header: white. */
.site-header :focus-visible,
.site-footer :focus-visible,
.skip-link:focus-visible {
  outline-color: var(--color-focus-on-band);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.site-nav a,
.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);
}

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

.site-nav a:hover,
.site-nav a[aria-current="page"],
.site-header__space:hover,
.site-header__space[aria-current="page"] {
  color: var(--color-band-ink);
  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. */
.site-header__space {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  margin-left: auto;
  margin-right: calc(4.75rem + var(--space-3));
  color: var(--color-band-ink);
  font-size: var(--font-size-sm);
}

/* 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: calc(var(--space-4) + var(--space-1));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 4.75rem;
  min-height: var(--target-size);
  border: var(--border-width) solid var(--color-band-ink-muted);
  border-radius: var(--radius);
  color: var(--color-band-ink);
  font-size: var(--font-size-sm);
  list-style: none;
  cursor: pointer;
}

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

.site-nav details[open] > summary {
  border-color: var(--color-band-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;
}

.site-nav ul {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-2) 0 var(--space-3);
  list-style: none;
  border-top: var(--border-width) solid var(--color-band-ink-muted);
}

/* 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): from 48rem 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: 48rem) {
  @supports selector(::details-content) {
    .site-header__inner {
      flex-wrap: nowrap;
      gap: var(--space-4) var(--space-6);
      padding-block: var(--space-4);
      padding-inline: var(--space-5);
    }

    .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;
      gap: 0 var(--space-4);
      padding: 0;
      border-top: 0;
    }

    .site-nav .site-nav__space {
      display: list-item;
    }
  }
}

@media (min-width: 64rem) {
  @supports selector(::details-content) {
    .site-nav ul {
      column-gap: var(--space-5);
    }
  }
}

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

.site-footer {
  flex-shrink: 0;
}

.site-footer__inner {
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-6);
}

/* Seniority notice decided by Antoine (ticket 0123), on its own line under the
   navigation of the footer (ticket 0109). */
.site-footer__notice {
  flex-basis: 100%;
  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 Spectral; the
   interface in Hanken Grotesk; what belongs to the machine (references, dates of check,
   statuses, eyebrows, state of a form) in IBM Plex Mono. Titles in weight 500. */

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

h1 {
  font-size: var(--font-size-xl);
}

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.5;
}

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

/* Eyebrow (surtitre): monospace capitals, widened tracking, one line. */
.eyebrow {
  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.06em;
  text-transform: uppercase;
}

.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. Radius of 2 px, target of 44 px. */

.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);
  background: var(--color-action);
  color: var(--color-ink-inverse);
  font: inherit;
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  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-accent);
  color: var(--color-accent);
}

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

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

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);
  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 ------------------------------------------------------------------ */
/* No radius for cards, boxes and statuses (docs/12, "Formes"). */

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

.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: 0;
}

.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--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-border);
  border-top: 4px solid var(--color-ink);
  border-radius: 0;
}

.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;
  top: 0;
  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: 0;
  color: var(--color-ink);
}

.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-2);
  border: var(--border-width) solid transparent;
  border-radius: 0;
  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);
  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-4);
  max-width: 24rem;
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
}

.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;
}

.price-box__tax {
  margin-left: var(--space-1);
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

/* Indicative amount including tax of an individual resident in France (ticket 0164):
   a secondary line under a price excluding tax, in the same block, tabular figures. */
.price-incl {
  margin: 0;
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.4;
}

/* In the price box, the line sits against the price it qualifies. */
.price-box__price + .price-incl {
  margin-top: calc(var(--space-2) * -1);
}

/* The range of the levels of the guide, under the price box (it would not hold in one
   screen of 1 280 by 800 pixels inside it). */
.product__incl-aside {
  margin: var(--space-2) 0 0;
}

.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);
}

/* 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);
}

.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="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: 17 rem for the button in the state « Arrêter »,
   the widest, 16.25 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. */
@container field-foot (max-width: 17rem) {
  .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: 16.25rem) {
  .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 button,
   inside its box (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)). */
.field__foot-slot .dictation-button:focus-visible {
  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;
}

.dictation-button {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* The microphone keeps its 20 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: 1.25rem;
  height: 1.25rem;
}

/* 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). */
.upload {
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 2px dashed var(--color-border);
  border-radius: 0;
}

.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%;
  padding: var(--space-2) 0;
  font: inherit;
}

.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;
}

.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);
  font-family: var(--font-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-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);
  }

  .home-form textarea {
    height: 7rem;
  }
}

.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 {
  margin-left: 0.3em;
  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;
}

.home-form__reassure {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: var(--space-3) 0 var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

.home-form__reassure .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-ink);
}

/* 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;
}

.home-step__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: var(--border-width) solid var(--color-ink);
}

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

.home-step__number {
  font-family: var(--font-serif);
  font-size: var(--font-size-2xl);
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.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__price dd.price-incl {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

.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;
}

.offer-list__price .price-incl {
  display: block;
  max-width: 15rem;
  margin-top: var(--space-1);
  white-space: normal;
}

@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;
}

.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: one ruled list per section; on each line the title, then its date and
   its state; the date of the purge and the detail on their own line; the quote request
   in a bordered button, the function of withdrawal under it (rules below). */
.space__account {
  color: var(--color-ink-muted);
}

/* 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%;
  }
}

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

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

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

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

.space-list > li + li {
  margin-top: 0;
}

.space-list p {
  margin: 0;
}

.space-item__head {
  overflow-wrap: anywhere;
}

.space-item__meta,
.space-item__line {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.space-list .space-item__line {
  margin-top: var(--space-1);
}

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

/* 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, right under the quote request; once the right is lost,
   in the section "orders" 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);
}

.space-list .withdrawal {
  margin: var(--space-2) 0 0;
}

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

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

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