/* V83 · shared reading hierarchy. Monetary colours match the charts and guides. */
:root {
  /* Marge laterale des onglets, relue par la piste pour degager le fondu (voir app.css). */
  --tab-pad-x: 14px;
  --muted: #a0b1be;
  --muted2: #899cae;
  --cyan-dim: #49b9c5;
  --money-m3: #2ee6f6;
  --money-m2: #b18cff;
  --money-m1: #f5b13d;
  --price-index: #ff6bb3;
}
[hidden] {
  display: none !important;
}
body {
  font-size: 16px;
  line-height: 1.6;
}
.eyebrow {
  font-size: 14px;
  letter-spacing: 0.035em;
  text-transform: none;
  font-weight: 600;
  margin: 0;
}
.brand .eyebrow {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.calc-sub,
.note,
.calc-note,
.ref-desc,
.btc-story,
.basket-note,
.svc-intro,
.svc-section-sub {
  font-size: 14px;
  line-height: 1.6;
}
.calc-sub,
.note,
.calc-note,
.ref-desc {
  overflow-wrap: anywhere;
}
.calc-grid label,
.share-fields label,
#lblYourWage,
.life-inputs label,
.scale-controls label {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}
.calc-grid label .lbltxt,
.share-fields label .lbltxt {
  min-height: 0;
}
.calc-head {
  gap: 6px;
  margin-bottom: 12px;
}
.seg button {
  font-size: 13px;
  min-height: 40px;
  padding: 8px 12px;
  letter-spacing: 0;
}
.seg.lang button,
.seg.cur button {
  min-height: 38px;
}
.controls .lab,
.calc-ref > .lab {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none;
}
.refresh,
.tabbtn,
.hook-btn,
.sc-btn {
  min-height: 40px;
  font-size: 14px;
  letter-spacing: 0.015em;
}
.tabbtn {
  padding: 10px var(--tab-pad-x);
}
.status {
  font-size: 12px;
}
.view-intro {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px 6px;
}
.view-intro h2 {
  font-size: clamp(20px, 2.5vw, 25px);
  line-height: 1.25;
  margin: 0 0 4px;
  color: #eef9fb;
}
.view-intro p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  max-width: 78ch;
}
.guide-shortcut {
  flex-shrink: 0;
  color: var(--cyan);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 230, 246, 0.35);
  padding: 6px 0;
}
.guide-shortcut:hover {
  text-decoration: underline;
}
.ux-fold {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.015);
}
.ux-fold > summary,
.note-fold > summary,
.result-details > summary {
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  padding: 11px 0;
  color: var(--txt);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ux-fold > summary::-webkit-details-marker {
  display: none;
}
.ux-fold > summary::after {
  content: "+";
  color: var(--cyan);
  font-family: var(--mono);
  flex: none;
}
.ux-fold[open] > summary::after {
  content: "−";
}
.ux-fold > summary:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
.ux-fold[open] {
  padding-bottom: 12px;
}
.ux-fold > p,
.ux-fold > .note,
.ux-fold > .foot {
  margin: 2px 0 8px;
}
.ux-fold .calc-head {
  margin: 0;
}
.ux-fold .calc-head h2 {
  font-size: 14px;
}
.ux-note {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0;
  line-height: 1.55;
}
.ux-context {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0;
}
.ux-estimate {
  display: inline-block;
  color: var(--amber);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.counter > .ux-estimate,
.sc-hero > .ux-estimate,
.hook > .ux-estimate {
  margin-top: 10px;
}
.card .tag {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--txt);
}
.card .desc {
  font-size: 14px;
  min-height: 0;
  color: var(--muted);
  line-height: 1.5;
}
.card .deltas {
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
}
.card .deltas .d span {
  font-size: 12px;
  letter-spacing: 0;
}
.card .spark {
  position: static;
  display: block;
  max-width: 100%;
  margin: 12px 0 0 auto;
  opacity: 0.7;
}
.card .ux-fold {
  font-size: 13px;
}
.card .ux-fold > summary {
  font-size: 13px;
}
.card .val .u {
  font-size: 14px;
}
.ux-chart-heading {
  padding: 4px 4px 8px;
}
.ux-chart-heading h2 {
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 5px;
}
.ux-chart-heading p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.ux-chart-legend {
  display: flex;
  gap: 9px 18px;
  flex-wrap: wrap;
  padding: 4px 4px 12px;
  font-size: 14px;
}
.ux-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ux-chart-legend i {
  display: inline-block;
  width: 18px;
  height: 3px;
  background: var(--series-colour);
  border-radius: 3px;
}
.ux-insight {
  margin: 10px 4px;
  padding: 12px 14px;
  background: rgba(46, 230, 246, 0.04);
  border-left: 3px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--txt);
}
.inflation-compact {
  border: 0;
  background: transparent;
  padding: 0 4px 12px;
  margin-top: 0;
}
.inflation-compact .calc-head {
  margin: 0 0 5px;
}
.inflation-compact .calc-head h2 {
  display: none;
}
.inflation-compact .calc-sub {
  font-size: 13px;
}
.inflation-compact .share-fields {
  margin-top: 4px !important;
  max-width: 480px;
  grid-template-columns: 1fr;
}
.inflation-compact .note:empty {
  display: none;
}
.ref-desc {
  padding: 10px 12px;
}
.ref-desc .ux-fold {
  border: 0;
  background: none;
  margin: 4px 0 0;
  padding: 0;
}
.ref-desc .ux-fold > summary {
  padding: 4px 0;
  font-size: 13px;
}
.gauge-labels,
.gauge-note,
.gauge-year-val {
  font-size: 13px;
}
.counter .note,
.minic-note {
  font-size: 13px;
}
.counter .lab,
.minic-lab {
  font-size: 14px;
  letter-spacing: 0.035em;
}
.counter .rate,
.minic-rate {
  font-size: 14px;
  line-height: 1.6;
}
.counter > .ux-fold {
  text-align: left;
}
.counter .gauge {
  margin-top: 10px;
}
.sc-cards .t,
.sc-cards .f,
#viewSince .sc-lhead,
#viewSince .sc-lrow {
  font-size: 14px;
  letter-spacing: 0;
}
#viewSince .sc-lines .k {
  font-size: 14px;
  letter-spacing: 0;
}
#viewSince .sc-lines .k i {
  font-size: 13px;
}
#viewSince .sc-lab,
#viewSince .sc-hint {
  font-size: 14px;
}
.btc-compare-col .lab,
.btc-compare-col .note {
  font-size: 14px;
}
.btc-compare-num {
  font-size: clamp(18px, 2.2vw, 28px);
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.halving-table .ht-row {
  font-size: 14px;
}
.halving-table .ht-head {
  font-size: 13px;
}
.halving-bars .halving-bar-label {
  font-size: 13px;
}
.basket-row {
  font-size: 14px;
  gap: 12px;
  align-items: flex-start;
}
.basket-row .bk {
  max-width: 65%;
}
.basket-row .bv {
  white-space: normal;
  flex-shrink: 0;
}
.basket-observed {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 3px;
}
.basket-benchmarks {
  font-size: 12px;
  color: var(--muted);
  margin: 14px 0 3px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.basket-slider-val,
.scale-sub,
.scale-note,
.scale-kicker,
.scale-rung-label,
.scale-rung-time {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
}
.scale-title {
  font-size: 16px;
  letter-spacing: 0.015em;
}
.scale-badge {
  font-size: 12px;
  letter-spacing: 0;
  max-width: 100%;
  height: auto;
  min-height: 28px;
  white-space: normal;
}
.scale-head {
  flex-wrap: wrap;
  gap: 8px;
}
.scale-phrase {
  font-size: 15px;
}
.scale-rung {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
}
.scale-track {
  grid-column: 1/-1;
  grid-row: 2;
}
.scale-rung-label small {
  white-space: normal;
  overflow: visible;
  font-size: 12px;
}
.scale-rung-time {
  text-align: right;
  white-space: normal;
  max-width: 170px;
}
.scale-everysecond {
  font-size: 15px;
  line-height: 1.6;
  margin: 12px 0 0;
  color: var(--txt);
}
.debt-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.debt-toolbar label {
  flex: 1;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.debt-toolbar select {
  background: var(--panel2);
  color: var(--txt);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 46px 10px 12px;
  font: inherit;
  min-height: 44px;
  width: 100%;
}
.debt-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.debt-panels.is-comparing {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.debt-panel {
  min-width: 0;
}
.debt-panel h3 {
  font-size: 19px;
  margin: 10px 0;
  color: var(--txt);
}
.debt-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.debt-metrics > .counter,
.debt-metrics > .calc,
.debt-metrics > .btc-compare-col {
  margin: 0;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-align: left;
}
.debt-metrics .num {
  font-size: clamp(17px, 6cqw, 32px);
  margin: 12px 0;
}
.debt-metrics .btc-compare-num {
  font-size: clamp(17px, 2.3vw, 28px);
}
.debt-metrics .calc-head {
  margin-bottom: 10px;
}
.debt-metrics .ux-fold {
  margin-top: 8px;
}
.debt-panel .ux-ratio-note {
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0 0;
  color: var(--txt);
}
.debt-metrics > .ux-ratio-card .val {
  font-size: 34px !important;
}
.debt-panel .ux-status-method {
  font-size: 13px;
}
.debt-panel > .ux-fold {
  margin-top: 12px;
}
.debt-panel.is-loading > :not(h3):not(.debt-loading) {
  visibility: hidden;
}
.debt-comparison-detail {
  grid-template-columns: 1fr;
  margin: 12px 0;
}
.debt-comparison-detail .ux-fold {
  margin: 0;
}
.debt-comparison-detail .btc-compare-col {
  padding: 10px 0;
  border: 0;
  background: none;
}
#btcSupplyEstimate {
  grid-column: 1/-1;
}
.debt-panels.is-comparing .debt-metrics {
  grid-template-columns: minmax(0, 1fr);
}
.fiscal-warn-text {
  font-size: 14px;
}
.fiscal-warn-title {
  font-size: 14px;
  letter-spacing: 0;
}
.fiscal-warn .ux-fold {
  background: transparent;
}
.fiscal-context-help {
  font-size: 14px;
  border-left: 3px solid var(--amber);
  padding: 8px 12px;
  margin: 12px 0;
  line-height: 1.6;
}
.fiscal-report-fold .fiscal-report-form {
  margin-top: 12px;
}
.svc-provider h3 {
  font-size: 15px;
}
.svc-provider p,
.svc-meta,
.svc-reason,
.svc-section-sub,
.svc-manual span,
.svc-manual em {
  font-size: 13px;
}
.svc-state,
.svc-live-pill {
  font-size: 12px;
  letter-spacing: 0;
  white-space: normal;
}
.svc-card-head {
  align-items: flex-start;
  gap: 8px;
}
.svc-state {
  flex-shrink: 0;
}
.svc-manual strong {
  font-size: 14px;
}
.svc-manual {
  min-width: 0;
}
.svc-topline {
  flex-wrap: wrap;
}
.svc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--muted);
  padding: 10px 0;
}
.svc-legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  background: var(--state-colour);
}
.hook-title {
  max-width: 30ch !important;
}
.hook-clab {
  font-size: 13px;
  letter-spacing: 0;
}
.hook-sub {
  font-size: 16px;
}
.accbody {
  font-size: 15px;
  line-height: 1.65;
  max-width: 90ch;
}
.accbody p {
  margin: 12px 0;
}
.about-list summary {
  font-size: 15px;
}
.foot {
  font-size: 13px;
  line-height: 1.6;
}
.records .rec .k {
  font-size: 13px;
  letter-spacing: 0;
}
.records .rec .d {
  font-size: 13px;
}
@media (max-width: 900px) {
  .debt-panels.is-comparing {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  body {
    padding: 12px;
  }
  .view-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding-top: 16px;
  }
  .view-intro p {
    font-size: 14px;
  }
  .grid {
    gap: 10px;
  }
  .card {
    padding: 14px;
  }
  .card .desc {
    min-height: 0;
  }
  .card .val,
  .card.hero .val {
    font-size: 30px;
  }
  .card .spark {
    display: inline-block;
    vertical-align: middle;
    margin-top: 8px;
  }
  .debt-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
  .debt-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .debt-metrics .num {
    font-size: clamp(16px, 7.5cqw, 32px);
  }
  .debt-metrics .btc-compare-num {
    font-size: 22px;
  }
  .calc-grid,
  .share-fields {
    gap: 12px;
  }
  .calc-grid input,
  .share-fields input,
  .share-fields select,
  .life-inputs input,
  .life-inputs select,
  .scale-controls input,
  .scale-controls select {
    font-size: 16px;
    min-height: 44px;
  }
  .scale-head {
    align-items: flex-start;
  }
  .scale-hero {
    font-size: 32px;
  }
  .scale-rung-time {
    max-width: 140px;
  }
  .svc-card-head {
    flex-wrap: wrap;
  }
  .svc-provider {
    min-width: 0;
  }
  .svc-provider h3 {
    overflow-wrap: anywhere;
  }
  .svc-state {
    margin-left: auto;
  }
  .ux-chart-legend {
    gap: 8px 12px;
  }
  .gauge-labels {
    flex-wrap: wrap;
    gap: 8px;
  }
  .sc-cards {
    grid-template-columns: 1fr !important;
  }
  .btc-compare {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 390px) {
  .calc-grid {
    grid-template-columns: 1fr;
  }
  .bar {
    /* Meme regle que dans app.css : le bandeau a deux etages reprend six pixels en bas. */
    padding: 12px 12px 6px;
  }
  /* Pastilles a 9 px du bas (3 + 6) : on les avance de 3 px pour 9 px du bord gauche aussi,
     et la fenetre du texte deborde de la marge droite de 12 px. */
  .status-mark {
    margin-left: -3px;
  }
  .status-scroll {
    margin-right: -12px;
  }
  .brand-logo {
    width: 46px;
    height: 46px;
  }
  .basket-row {
    flex-wrap: wrap;
  }
  .basket-row .bk {
    max-width: 100%;
  }
  .basket-row .bv {
    margin-left: auto;
  }
  .scale-rung {
    grid-template-columns: minmax(0, 1fr);
  }
  .scale-rung-time {
    text-align: left;
    max-width: 100%;
  }
  .scale-track {
    grid-row: auto;
  }
}

/* Bordered result summaries need their own inset; ux-fold already has parent padding. */
.result-details > summary {
  padding: 11px 38px 11px 14px;
}
.note-fold > summary {
  padding-right: 28px;
}

/* Explicit time direction for everyday comparisons. */
.basket-period {
  margin: 20px 0 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(46, 230, 246, 0.03);
}
.basket-period label {
  display: block;
  font-size: 14px;
  color: var(--ink);
}
.basket-period .basket-slider {
  width: 100%;
  margin: 16px 0 10px;
}
.basket-period .basket-slider-val {
  margin: 0;
  text-align: center;
  color: var(--muted);
}
.basket-period .basket-slider-val b {
  color: var(--cyan);
}
.basket-verdict {
  border-left: 3px solid var(--cyan);
  padding: 4px 16px;
  margin-top: 18px;
}
.basket-verdict p {
  margin: 8px 0;
  line-height: 1.6;
}

/* Closed calculation explanations must not retain space for their diagrams. */
details:not([open]) > :not(summary) {
  display: none !important;
}

/* One compact row, two independent explanations; the selected panel uses the full width.
   The frame clips its children: the highlighted toggle keeps square corners and the frame's
   own radius shapes it, so no gap appears against the divider or the open panel below. */
.result-help {
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.01);
  min-width: 0;
  overflow: hidden;
}
.result-help-controls {
  display: flex;
  align-items: stretch;
}
.result-help-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 11px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--txt);
  font: 14px/1.5 var(--mono);
  text-align: left;
  cursor: pointer;
}
.result-help-toggle + .result-help-toggle {
  border-left: 1px solid var(--line-soft);
}
.result-help-toggle::after {
  content: "+";
  flex: none;
  color: var(--cyan);
  font-weight: 700;
}
.result-help-toggle[aria-expanded="true"] {
  color: var(--cyan);
  background: rgba(46, 230, 246, 0.04);
}
.result-help-toggle[aria-expanded="true"]::after {
  content: "−";
}
.result-help-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -2px;
}
.result-help-short {
  display: none;
}
.result-help-body > .money-cake {
  margin: 4px 0;
  border: 0;
  background: transparent;
  padding: 4px;
}
@media (max-width: 600px) {
  .result-help-long {
    display: none;
  }
  .result-help-short {
    display: inline;
  }
  .result-help-toggle {
    font: 12px/1.5 var(--sans);
    min-height: 44px;
    padding: 11px 10px;
    gap: 5px;
  }
}

/* Centrage optique des libelles (V87.9). Chaque police place sa ligne de base a sa facon :
   SF Mono sur iPhone et iPad pose ses capitales un peu sous le centre de la ligne, d'autres un
   peu au-dessus. Les pixels de compensation ne valaient que pour une police. text-box rogne la
   ligne a la hauteur des capitales et a la ligne de base : centrer cette boite centre les
   capitales, quelle que soit la police. Les marges sont recalculees en unite cap pour que
   chaque cadre garde exactement sa hauteur, sur une ligne comme sur deux.
   Sans text-box (Firefox), les marges symetriques s'appliquent seules. */
@supports (text-box: trim-both cap alphabetic) {
  /* Boutons a hauteur minimale : le navigateur centre deja leur contenu, la rognure suffit. */
  .seg button,
  .refresh,
  #viewSince .sc-btn {
    text-box: trim-both cap alphabetic;
  }
  /* Accroche de l'onglet À propos : deux boutons et un lien, 41 px tous les trois. */
  .hook-btn {
    padding-top: calc((41px - 2px - 1cap) / 2);
    padding-bottom: calc((41px - 2px - 1cap) / 2);
    text-box: trim-both cap alphabetic;
  }
  .future-helper-toggle {
    line-height: 1.2;
    padding-top: calc(11px + (1.2em - 1cap) / 2);
    padding-bottom: calc(11px + (1.2em - 1cap) / 2);
    text-box: trim-both cap alphabetic;
  }
  /* Pastilles et badges : cadre de 28 px. */
  .scale-badge {
    display: inline-block;
    height: auto;
    min-height: 0;
    line-height: 1.3;
    text-align: center;
    padding-top: calc((28px - 2px - 1cap) / 2);
    padding-bottom: calc((28px - 2px - 1cap) / 2);
    text-box: trim-both cap alphabetic;
  }
  .svc-state {
    padding-top: calc((28px - 2px - 1cap) / 2);
    padding-bottom: calc((28px - 2px - 1cap) / 2);
    text-box: trim-both cap alphabetic;
  }
  .svc-manual em {
    display: inline-block;
    padding-top: calc((28px - 2px - 1cap) / 2);
    padding-bottom: calc((28px - 2px - 1cap) / 2);
    text-box: trim-both cap alphabetic;
  }
  /* La pastille garde sa hauteur fixe et centre le point et le texte : seul le texte est rogne. */
  #serviceLiveText {
    text-box: trim-both cap alphabetic;
  }
  /* Pictogrammes en case carree (symboles, drapeaux, aliments). */
  .svc-summary-icon,
  .svc-provider-icon,
  .basket-icon {
    display: block;
    height: auto;
    line-height: 1;
    text-align: center;
    text-box: trim-both cap alphabetic;
  }
  .svc-summary-icon {
    padding-top: calc((42px - 2px - 1cap) / 2);
    padding-bottom: calc((42px - 2px - 1cap) / 2);
  }
  .svc-provider-icon {
    padding-top: calc((36px - 2px - 1cap) / 2);
    padding-bottom: calc((36px - 2px - 1cap) / 2);
  }
  .basket-icon {
    padding-top: calc((38px - 2px - 1cap) / 2);
    padding-bottom: calc((38px - 2px - 1cap) / 2);
  }
  /* Bouton de signalement : peut passer sur deux lignes, le navigateur centre son contenu. */
  .about-actions > .about-bug-btn {
    display: block;
    line-height: 1.3;
    padding-top: calc(6px + (1.3em - 1cap) / 2);
    padding-bottom: calc(6px + (1.3em - 1cap) / 2);
    text-box: trim-both cap alphabetic;
  }
  /* Lien 𝕏 : il est etire a la hauteur du bouton voisin quand celui-ci passe sur deux lignes.
     Il reste flexible pour centrer son texte, que porte un span rogne. */
  .about-x-link > span {
    line-height: 1.3;
    text-box: trim-both cap alphabetic;
  }
  /* Volets repliables : la ligne de titre devient un bloc, le + passe en position absolue et
     se centre sur la meme boite de capitales que le titre. */
  .ux-fold > summary,
  .note-fold > summary,
  .result-details > summary {
    display: block;
    position: relative;
    line-height: 1.5;
    padding-top: calc(11px + (1.5em - 1cap) / 2);
    padding-bottom: calc(11px + (1.5em - 1cap) / 2);
    text-box: trim-both cap alphabetic;
  }
  .ux-fold > summary {
    padding-right: 24px;
  }
  .ref-desc .ux-fold > summary {
    padding-top: calc(4px + (1.5em - 1cap) / 2);
    padding-bottom: calc(4px + (1.5em - 1cap) / 2);
  }
  .ux-fold > summary::after,
  .note-fold > summary::after,
  .result-details > summary::after {
    position: absolute;
    top: 50%;
    bottom: auto;
    display: block;
    line-height: 1;
    transform: translateY(-50%);
    text-box: trim-both cap alphabetic;
  }
  .ux-fold > summary::after {
    right: 0;
  }
  /* Volet « C'est quoi, le Bitcoin ? » : le titre est un h2 dans une colonne flexible. */
  details.calc-fold > summary > h2 {
    line-height: 1.6;
    margin-top: calc((1.6em - 1cap) / 2);
    margin-bottom: calc((1.6em - 1cap) / 2);
    text-box: trim-both cap alphabetic;
  }
}