/*
 * Product pages (ticket 0237, sub-lot B2-d, rules 21 and 22): the style of these pages alone,
 * loaded by templates/products/detail.html after tokens.css and site.css. The free design of
 * direction D (docs/design/direction-2026-10/d/) has no product page: it takes its language,
 * that of the head of a page (`.page-head`), of the card of the order of the preview
 * (`.order__card`: the head on the Nuit, the body on the card, one plain button), of the
 * numbered sections (`.ov-section`), of the panels `details.more`, of the Nuit plane of the
 * tiers (`.night`, `.tier`) and of the scene of the example sheet (`.sheet-stage`).
 *
 * Every colour is a variable of tokens.css (nothing is written here). No movement and no
 * gradient: the closed lists of apps/core/tests/test_design_components.py stay those of
 * site.css; the halo of the head of the card and of the tier (radial gradients of the free
 * design) is therefore not drawn, the Nuit being flat. The fade of the sections at their
 * arrival is the class `.reveal` of site.css (rule 20 (e)), set by the comfort script,
 * never required. The markup of the price box and of the block of the limits is that of
 * ticket 0108, which docs/12 ("Règle des prix") and its tests read; the limits of the
 * document are no block of the first screen: since ticket 0275 (lot A) one folded panel at the
 * foot of the page holds them (`.product__scope`).
 */

/* Head of the page (direction D, `.page-head`) -------------------------------------------- */

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

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

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

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

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

.eyebrow--brand {
  color: var(--color-brand);
}

.product__first {
  gap: var(--space-5) var(--space-7);
}

.product__text .eyebrow {
  margin-bottom: var(--space-3);
}

/* The title: the voice of the acts, light, the tracking closed, its last word in italic and
   in the Visa, at the size of D (`.page-head h1`, 1.04 times 40 to 64 pixels: 41.6 to 66.56),
   that of "Méthode" and of "Revue par un avocat" (ticket 0256, lot A; the degree smaller that
   ticket 0237 gave it is withdrawn, the bound of the first screen being amended instead). */
.product__text h1 {
  margin: 0;
  font-size: clamp(2.6rem, 5.62vw, 4.16rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.product__text h1 em {
  color: var(--color-brand);
  font-style: italic;
}

.product__text .lead {
  margin: var(--space-4) 0 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
}

/* What the client provides: a quiet note under the lead, set off by a rule. */
.product__deposit {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-line-strong);
  color: var(--color-ink-soft);
}

.product__deposit-title {
  color: var(--color-ink);
}

/* What the document brings: the commercial arguments of the head (ticket 0268, lot B), under the
   lead and what the client provides, in the list with checks of the contents of the document
   (`.product__checks`), at the size of the body, the title in the weight of that of the deposit. */
.product__benefits {
  margin: var(--space-4) 0 0;
}

.product__benefits-title {
  margin: 0;
  color: var(--color-ink);
  font-weight: var(--font-weight-strong);
}

.product__benefits .product__checks {
  max-width: var(--measure);
  margin: var(--space-1) 0 0;
  color: var(--color-ink-soft);
}

/* The price box, the card of the order (D: `.order__card`): the head on the Nuit carries
   the price excluding tax with its mention and the amount including tax; the body, the note
   of the price, the lines and the one plain button of the page. */
.product .price-box {
  display: block;
  padding: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.price-box__head {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
  background: var(--color-band);
  color: var(--color-band-ink);
}

.price-box__head > * {
  margin: 0;
}

.price-box__head .eyebrow {
  margin-bottom: var(--space-1);
  color: var(--color-band-ink-muted);
}

.product .price-box__price {
  color: var(--color-band-ink);
  font-size: clamp(2.25rem, 3.4vw, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.03em;
}

/* The levels of the guide: one line each, a rule of the Nuit between them. */
.product .price-box__prices {
  gap: 0;
  color: var(--color-band-ink);
}

.product .price-box__prices > div {
  padding-block: 0.125rem;
  border-top-color: var(--color-band-rule);
}

.product .price-box__prices dt {
  color: var(--color-band-ink-muted);
}

.product .price-box__prices dd {
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-weight: 400;
}

.price-box__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-4);
}

.price-box__body > * {
  margin: 0;
}

.product .price-box__body .facts {
  gap: var(--space-2);
}

.product .price-box__body .facts > div {
  padding-top: var(--space-2);
  border-top-color: var(--color-line);
}

.product .price-box .button {
  min-height: 3.25rem;
  font-size: var(--font-size-md);
}

/* The entry form in the card of a page that can be ordered (ticket 0180, lot A, Q361 (a)): the
   card of the home page (static/css/components/entry-card.css) set in the card of the price,
   under the line of the delay, on the same Papier and the same rule: no second border, no
   second shadow, no second radius. The format and the review by a lawyer follow the card,
   in its column, in the lines of the card (`.product__facts`). */
.product .price-box .lp-intake {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 0;
  border-top: var(--border-width) solid var(--color-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.product .product__facts {
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding-inline: var(--space-5);
}

.product .product__facts > div {
  padding-top: var(--space-2);
  border-top-color: var(--color-line);
}

.product__price-aside {
  padding-inline: var(--space-2);
}

/* A document in preparation: its notice takes the place of the card. */
.product .notice {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

/* Sections (D: `.ov-section`): a rule above, the title in the margin and the text beside it
   from 900 pixels; one column below. */
.product__section {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-6) 0;
  border-top: var(--border-width) solid var(--color-line);
}

.product__first + .product__section {
  margin-top: var(--space-7);
}

@media (min-width: 56.25rem) {
  .product__section {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-7);
    padding: var(--space-7) 0;
  }
}

.product__section h2 {
  margin: 0;
  font-size: clamp(1.625rem, 2.4vw, 2rem);
  font-weight: 450;
  line-height: 1.15;
  text-wrap: balance;
}

.product__body {
  max-width: 42rem;
  min-width: 0;
  color: var(--color-ink-soft);
}

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

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

.product__body h3 {
  color: var(--color-ink);
}

/* The contents of the document: a check drawn by two borders leads each line (D:
   `.checklist`). */
.product__checks {
  padding-left: 0;
  list-style: none;
}

.product__checks li,
.product__checks li + li {
  position: relative;
  margin: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
}

.product__checks li::before {
  content: "";
  position: absolute;
  top: calc(var(--space-2) + 0.5em);
  left: var(--space-1);
  width: 0.7em;
  height: 0.4em;
  border-bottom: 2px solid var(--color-ink);
  border-left: 2px solid var(--color-ink);
  transform: rotate(-45deg);
}

/* The request of the example, in the voice of the acts (D: `.quote`). */
.product__body blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-ink);
  border-radius: 0 var(--radius-box) var(--radius-box) 0;
  background: var(--color-surface);
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-style: italic;
  line-height: 1.55;
}

.product__body blockquote p {
  margin: 0;
}

/* Link with an arrow (D: `.link-arrow`), a target of 44 pixels. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--target-size);
  border-bottom: var(--border-width) solid var(--color-line-strong);
  color: var(--color-ink);
  font-weight: var(--font-weight-strong);
  text-decoration: none;
}

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

/* The example sheet in its scene (D: `.sheet-stage`): two sheets set askew behind it, under
   the whole width of the section; clipped to the scene, nothing moves. */
.product__section--example .product__sheet {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-4) var(--space-3) var(--space-4);
  overflow-x: clip;
}

.product__sheet .home-sheet::before,
.product__sheet .home-sheet::after {
  content: "";
  position: absolute;
  z-index: -1;
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-sheet);
  background: var(--color-surface);
}

.product__sheet .home-sheet::before {
  inset: var(--space-3) calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-3);
  transform: rotate(1.4deg);
}

.product__sheet .home-sheet::after {
  inset: var(--space-2) calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-2);
  transform: rotate(-1deg);
}

/* The two tiers on the Nuit plane of the free design (`.night`), from edge to edge of the page
   (ticket 0256, lot B). The head is that of the section of the tiers of the home page; the two
   cards are the component `components/tiers.html`, whose rules are those of
   static/css/pages/home.css, set here because this sheet is the one the product page loads (the
   duplication of the two sheets is folded by lot C of ticket 0237). The stair keeps its minimal
   step of 48 px from 900 px (decision of Antoine of 2026-10-15). */
.product__tiers {
  margin-top: var(--space-7);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  background: var(--color-band);
  color: var(--color-band-ink);
}

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

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

.product__tiers-head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.product__tiers-head h2 {
  margin: 0;
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-weight: 450;
}

.product__tiers .eyebrow,
.product__tiers-lead {
  color: var(--color-band-ink-muted);
}

.product__tiers-lead {
  max-width: 34rem;
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.55;
}

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

/* The text of a page that carries a fact of its own document (the study), under the tiers. */
.product__tier-note {
  max-width: 52rem;
  margin: var(--space-5) 0 0;
  color: var(--color-band-ink-muted);
  font-size: var(--font-size-md);
  line-height: 1.55;
}

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

@media (min-width: 56.25rem) {
  /* Step of the stair on the product pages (decision of Antoine, 2026-10-21, Q422 (b), « Q422 b »):
     the bottoms of the cards are free, the first tier has the height of its content (no void in
     the card) and starts 56 px under the top of the second (the home page: 62 px, bottoms
     aligned), the 48 px minimum kept. */
  .lp-tiers {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* The questions, panels `details.more` (D): the question on a ruled line with its sign, the
   answer in a panel of the page's colour. */
.product .faq {
  max-width: none;
  border-top: var(--border-width) solid var(--color-ink);
}

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

.product .faq summary {
  align-items: center;
  min-height: var(--target-size);
  padding: var(--space-3) 0;
  color: var(--color-ink);
  font-weight: var(--font-weight-medium);
}

.product .faq summary::after {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: var(--font-size-xs);
}

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

.product .faq__answer {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-box);
  background: var(--color-page);
  color: var(--color-ink-soft);
}

/* The closing, the final block of the free design (`.final`): a plane in the Visa, the line
   of the free overview and the one plain button, which leads to the same target as the
   button of the price box. */
.product__closing {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin: var(--space-7) 0 0;
  padding: clamp(var(--space-6), 6vw, 4.5rem);
  border-radius: var(--radius-card);
  background: var(--color-action);
  color: var(--color-ink-inverse);
}

@media (min-width: 56.25rem) {
  .product__closing {
    grid-template-columns: minmax(0, 1.3fr) auto;
  }
}

.product__closing .note {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
  color: var(--color-ink-inverse);
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.3;
}

.product__closing .actions {
  margin: 0;
}

@media (min-width: 56.25rem) {
  .product__closing .actions {
    grid-row: 1;
    grid-column: 2;
  }
}

.product__closing .button,
.product__closing .button:hover {
  border-color: var(--color-surface);
  background: var(--color-surface);
  box-shadow: none;
  color: var(--color-action-strong);
}

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

/* The scope of the document ("Périmètre du document"), one folded panel at the foot of the page,
   after the questions and before the closing (ticket 0275, lot A; decision of Antoine of
   2026-10-15, night, Q251 (a), Q252 (a)): the mention of the low tier, the limits of the page and
   the link to the review by a lawyer, word for word, closed by default. Never put forward nor on
   the plane of an argument: no icon, no box, no colour of alert, the size of degree 2
   (`--font-size-sm`, 15 pixels), one degree under the body (degree 3), the summary a target of
   44 pixels; a native `details`, no script. */
.product__scope {
  max-width: 42rem;
  margin: 0;
  border-top: var(--border-width) solid var(--color-line);
  border-bottom: var(--border-width) solid var(--color-line);
}

.product__scope summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--target-size);
  color: var(--color-ink-soft);
  font-size: var(--font-size-sm);
  cursor: pointer;
  list-style: none;
}

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

/* The sign "+", then "-" once open, drawn as text with an empty alternative for readers. */
.product__scope summary::after {
  flex-shrink: 0;
  width: 1em;
  text-align: center;
  content: "+" / "";
}

.product__scope[open] > summary::after {
  content: "\2212" / "";
}

.product__scope summary:hover {
  color: var(--color-ink);
}

.product__scope-body {
  padding: 0 0 var(--space-4);
  color: var(--color-ink-soft);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.product__scope-body > * {
  margin: 0 0 var(--space-2);
}

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

.product__scope-body ul {
  padding-left: var(--space-5);
}

.product__scope-body a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  font-weight: var(--font-weight-medium);
}