/* Nota page kit (brand guidelines section 8.8). Reusable keyword tiles,
count-aware grids, step rails, facts and figures. Load after token sources.
Heights follow content. Only native controls react to the pointer. */

/* --- Glyph: reuse an existing 24-unit stroke drawing ------------------- */
.kit-glyph {
  --kit-glyph-stroke: 1.9;
  inline-size: var(--kit-glyph-size, var(--space-14));
  block-size: var(--kit-glyph-size, var(--space-14));
  flex: none;
  stroke-width: var(--kit-glyph-stroke);
}

/* --- Kit grid: its column count divides its item count ------------------ */
.kit-grid {
  --kit-cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--kit-cols), minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .kit-grid:has(> :nth-child(2 of :not([hidden])):nth-last-child(1 of :not([hidden]))),
  .kit-grid:has(> :nth-child(4 of :not([hidden])):nth-last-child(1 of :not([hidden]))),
  .kit-grid:has(> :nth-child(6 of :not([hidden])):nth-last-child(1 of :not([hidden]))),
  .kit-grid:has(> :nth-child(8 of :not([hidden])):nth-last-child(1 of :not([hidden]))) { --kit-cols: 2; }
}
@media (min-width: 768px) {
  .kit-grid:has(> :nth-child(3 of :not([hidden])):nth-last-child(1 of :not([hidden]))) { --kit-cols: 3; }
}
@media (min-width: 1100px) {
  .kit-grid:has(> :nth-child(4 of :not([hidden])):nth-last-child(1 of :not([hidden]))),
  .kit-grid:has(> :nth-child(8 of :not([hidden])):nth-last-child(1 of :not([hidden]))) { --kit-cols: 4; }
  .kit-grid:has(> :nth-child(6 of :not([hidden])):nth-last-child(1 of :not([hidden]))) { --kit-cols: 3; }
}
@media (min-width: 1600px) {
  .kit-grid:has(> :nth-child(6 of :not([hidden])):nth-last-child(1 of :not([hidden]))) { --kit-cols: 6; }
}

.kit-grid > [hidden] { display: none; }

/* Intrinsic action/form rails: long identifiers wrap before their commands. */
.kit-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); min-inline-size: 0; }
.kit-action-row > code { flex: 1 1 calc(var(--control-height) * 4); min-inline-size: 0; overflow-wrap: anywhere; }
.kit-action-row > :is(button, a) { flex: none; min-block-size: var(--control-height); white-space: normal; }
.kit-form { inline-size: 100%; max-inline-size: calc(var(--control-height) * 16); min-inline-size: 0; }
.kit-detail-band { display: grid; align-items: start; gap: var(--gap); margin-block: var(--section-gap); }
.kit-detail-band > [data-kw-details] { grid-column: 1 / -1; }
.kit-detail-band > .note { margin: 0; }
.kit-enhanced-entry:not([data-kw-armed]) { display: none; }
@media (min-width: 768px) { .kit-detail-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Keyword tile -------------------------------------------------------- */
.kw-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  min-inline-size: 0;
  margin: 0;
  padding: var(--space-8);
  border: calc(var(--space-1) / 2) solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: start;
  text-decoration: none;
}
.kw-tile > .kit-glyph:first-child { grid-column: 1; grid-row: 1 / span 2; color: var(--ink); }
.kw-tile:not(:has(> .kit-glyph:first-child)) > :is(.kw-tile-key, .kw-tile-line, .kw-tile-actions, .help) { grid-column: 1 / -1; }
.kw-tile-key {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-h3);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.kw-tile-line {
  grid-column: 2;
  margin: 0;
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.kw-tile-line > strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.kw-tile > .help { grid-column: 2; margin: 0; }
.kw-tile-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-4); }
.kw-tile:has(> .kw-tile-more) { grid-template-columns: auto minmax(0, 1fr) auto; }
.kw-tile > .kw-tile-more { --kit-glyph-size: var(--space-10); grid-column: 3; grid-row: 1; align-self: center; color: var(--ink-muted); }
/* A service tile or figure carries its service mark (data, §2.8 item 5). */
:is(.kw-tile, .kit-figure)[data-svc='refinancement'] { --svc-mark: var(--svc-refinancement-mark, var(--svc-refinancement)); }
:is(.kw-tile, .kit-figure)[data-svc='financement'] { --svc-mark: var(--svc-financement-mark, var(--svc-financement)); }
:is(.kw-tile, .kit-figure)[data-svc='pret-particuliers'] { --svc-mark: var(--svc-pret-particuliers-mark, var(--svc-pret-particuliers)); }
:is(.kw-tile, .kit-figure)[data-svc='testament'] { --svc-mark: var(--svc-testament-mark, var(--svc-testament)); }
:is(.kw-tile, .kit-figure)[data-svc='procuration'] { --svc-mark: var(--svc-procuration-mark, var(--svc-procuration)); }
:is(.kw-tile, .kit-figure)[data-svc='mandat-protection'] { --svc-mark: var(--svc-mandat-protection-mark, var(--svc-mandat-protection)); }
:is(.kw-tile, .kit-figure)[data-svc] > .kit-glyph:first-child { color: var(--svc-mark, var(--ink)); }
/* Only a control reacts: a button or link tile (and a stat that opens). */
:is(button, a):is(.kw-tile, .stat-tile) {
  min-block-size: var(--control-height);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-ui), border-color var(--motion-fast) var(--ease-ui);
}
button:is(.kw-tile, .stat-tile) { inline-size: 100%; appearance: none; }
:is(button:not(:disabled), a):is(.kw-tile, .stat-tile):is(:hover, :focus-visible) { background: var(--action-tint); border-color: var(--action-ink); }
:is(button:not(:disabled), a).kw-tile:is(:hover, :focus-visible) > :is(.kit-glyph:first-child, .kw-tile-more) { color: var(--action-ink); }
:is(button, a):is(.kw-tile, .stat-tile):focus-visible { outline: var(--space-1) solid var(--ring); outline-offset: var(--space-2); }
button:is(.kw-tile, .stat-tile):disabled { cursor: default; }
/* The written detail a tile opens. Hidden only once the dialog can show it. */
.kw-details[hidden] { display: none; }
.kw-detail + .kw-detail { margin-block-start: var(--space-8); }
@media (prefers-reduced-motion: reduce) {
  :is(button, a):is(.kw-tile, .stat-tile) { transition: none; }
}
@media (forced-colors: active) {
  .kw-tile, .stat-tile { border-color: currentColor; }
}

/* --- Step rail: 3 or 4 steps, number in an outlined square --------------- */
.step-rail {
  --step-cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--step-cols), minmax(0, 1fr));
  gap: var(--space-8) var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-rail-item {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr);
  align-content: start;
  column-gap: var(--space-6);
  row-gap: var(--space-1);
  min-inline-size: 0;
}
.step-rail-item:has(> .kit-glyph) { grid-template-columns: var(--space-16) minmax(0, 1fr) auto; }
.step-rail-n {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  inline-size: var(--space-16);
  block-size: var(--space-16);
  border: var(--space-1) solid var(--action-ink);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-h4);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.step-rail-key {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-h3);
  line-height: var(--type-h3-lh);
  letter-spacing: var(--type-h3-ls);
  color: var(--ink);
}
.step-rail-item > .stat-v { grid-column: 2; }
.step-rail-line { grid-column: 2; margin: 0; font-size: var(--type-body); line-height: var(--type-body-lh); color: var(--ink-muted); }
.step-rail-item > .kit-glyph { grid-column: 3; grid-row: 1 / span 2; --kit-glyph-size: var(--space-16); color: var(--ink-muted); }
/* Ladder (one column): a drawn connector from marker to marker. */
.step-rail-item:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: calc((var(--space-16) - var(--space-1)) / 2);
  inset-block-start: calc(var(--space-16) + var(--space-2));
  inset-block-end: calc(var(--space-2) - var(--space-8));
  inline-size: var(--space-1);
  background: var(--border-strong);
}
/* Card variant (04-partner keeps its accent cards). */
.step-rail--cards > .step-rail-item {
  padding: var(--space-8);
  border: calc(var(--space-1) / 2) solid var(--border);
  border-radius: var(--radius);
}
.step-rail--cards > .step-rail-item::after { content: none; }
@media (min-width: 600px) {
  .step-rail:has(> :nth-child(4 of :not([hidden])):nth-last-child(1 of :not([hidden]))) { --step-cols: 2; }
  .step-rail:has(> :nth-child(4 of :not([hidden])):nth-last-child(1 of :not([hidden]))) > .step-rail-item::after { content: none; }
}
@media (min-width: 768px) {
  .step-rail:has(> :nth-child(3 of :not([hidden])):nth-last-child(1 of :not([hidden]))) { --step-cols: 3; }
  .step-rail:has(> :nth-child(3 of :not([hidden])):nth-last-child(1 of :not([hidden]))) > .step-rail-item::after { content: none; }
}
@media (min-width: 1100px) {
  .step-rail:has(> :nth-child(4 of :not([hidden])):nth-last-child(1 of :not([hidden]))) { --step-cols: 4; }
}

/* --- Stat: a real number, a short label, an optional note --------------- */
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
  margin: 0;
  padding: var(--space-8);
  border: calc(var(--space-1) / 2) solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-align: start;
  font: inherit;
}
.stat-tile > :is(dt, dd) { margin: 0; }
.stat-k { margin: 0; font-size: var(--type-h4); line-height: var(--type-h4-lh); font-weight: 600; color: var(--ink); }
.stat-v {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--type-h2);
  line-height: var(--type-h2-lh);
  letter-spacing: var(--type-h2-ls);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.stat-sub { margin: 0; font-size: var(--type-h4); line-height: var(--type-h4-lh); color: var(--ink-muted); }

/* --- Figure: the product itself or a brand asset, never stock or invented - */
.kit-figure { display: grid; gap: var(--space-6); align-content: start; min-inline-size: 0; margin: 0; }
.kit-figure > :is(img, video, canvas, svg:not(.kit-glyph)) { display: block; max-inline-size: 100%; block-size: auto; }
.kit-figure > figcaption { margin: 0; max-inline-size: 80ch; font-size: var(--type-h4); line-height: var(--type-h4-lh); color: var(--ink-muted); }
.kit-figure--glyph > .kit-glyph { --kit-glyph-size: calc(var(--space-16) * 2); --kit-glyph-stroke: 1; color: var(--ink); }
.kit-figure--stage { padding: var(--space-12); border-radius: var(--radius-lg); background: var(--brand-canvas-gradient); color: var(--brand-canvas-ink); }
.kit-figure--stage > figcaption { color: var(--brand-canvas-muted); }
/* A figure drawn from parts may take its row partner's height (07's room). */
.kit-figure--fill { align-self: stretch; contain: size; }
/* --- On a night stage: one scope remaps the theme tokens the kit reads. --- */
.kit-on-canvas { --ink: var(--brand-canvas-ink); --ink-muted: var(--brand-canvas-muted); --border: var(--brand-canvas-border); --surface: transparent; }

/* Legal article index: complete rows, native buttons, unchanged source text. */
.legal-list.is-indexed[hidden], .read-more-steps[hidden] { display: none; }
.legal-panel:has(> .legal-index) { margin-block: var(--section-gap); padding: 0; border: 0; box-shadow: none; background: transparent; }
.legal-index { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.legal-index > li { display: flex; grid-column: span 12; min-inline-size: 0; }
.legal-index-item { display: flex; align-items: center; gap: var(--space-6); inline-size: 100%; min-block-size: var(--control-height); padding: var(--space-5) var(--space-7); border: calc(var(--space-1) / 2) solid var(--border); border-radius: var(--radius); background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: var(--type-body); line-height: var(--type-body-lh); font-weight: 600; text-align: start; cursor: pointer; }
.legal-index-title { flex: 1; padding-inline-start: 3ch; text-indent: -3ch; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.legal-index-item::after { content: ''; flex: none; inline-size: var(--space-3); block-size: var(--space-3); border-inline-end: var(--space-1) solid currentColor; border-block-start: var(--space-1) solid currentColor; transform: rotate(45deg); }
.legal-index-item:hover { background: var(--action-tint); border-color: var(--border-strong); color: var(--action-ink); }
.legal-index-item:focus-visible { outline: var(--space-1) solid var(--ring); outline-offset: var(--space-2); }
#read-more-dialog .legal-item-body { padding: 0; margin-block-start: var(--space-6); max-inline-size: 68ch; font-size: var(--type-lead); line-height: var(--type-lead-lh); color: var(--ink); }
.read-more-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); margin-block-start: var(--space-12); padding-block-start: var(--space-8); border-block-start: calc(var(--space-1) / 2) solid var(--border); }
.read-more-pos { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.legal-overview > .cards.legal-summary-grid { gap: var(--gap); grid-template-columns: repeat(var(--kit-cols), minmax(0, 1fr)); }
.legal-summary-tile > .kw-tile-key, .legal-summary-tile > .kw-tile-line { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .legal-index > li { grid-column: span 6; }
  .legal-index > li:nth-child(2n + 1):last-child { grid-column: span 12; }
}
@media (min-width: 1280px) {
  .legal-index > li { grid-column: span 4; }
  .legal-index > li:nth-child(2n + 1):last-child { grid-column: span 4; }
  .legal-index > li:nth-child(3n + 1):last-child { grid-column: span 12; }
  .legal-index > li:nth-child(3n + 1):nth-last-child(2), .legal-index > li:nth-child(3n + 1):nth-last-child(2) + li { grid-column: span 6; }
}
@media (min-width: 1800px) {
  .legal-index > li, .legal-index > li:nth-child(2n + 1):last-child, .legal-index > li:nth-child(3n + 1):last-child, .legal-index > li:nth-child(3n + 1):nth-last-child(2), .legal-index > li:nth-child(3n + 1):nth-last-child(2) + li { grid-column: span 3; }
  .legal-index > li:nth-child(4n + 1):last-child { grid-column: span 12; }
  .legal-index > li:nth-child(4n + 1):nth-last-child(2), .legal-index > li:nth-child(4n + 1):nth-last-child(2) + li { grid-column: span 6; }
  .legal-index > li:nth-child(4n + 1):nth-last-child(3), .legal-index > li:nth-child(4n + 1):nth-last-child(3) ~ li { grid-column: span 4; }
}
@media (max-width: 519.98px) {
  .read-more-pos { flex-basis: 100%; order: -1; text-align: center; }
  .read-more-steps > .btn { flex: 1 1 calc(var(--control-height) * 3); min-inline-size: 0; white-space: normal; }
}