/* V83: a shared reading layout for all fourteen guides. */
:root {
  --muted: #a0b1be;
  --muted2: #899cae;
  --cyan-dim: #49b9c5;
}
html {
  scroll-padding-top: 20px;
}
body {
  font-size: 16px;
  line-height: 1.65;
}
.wrap {
  max-width: 1180px;
}
.bar {
  margin-bottom: 16px;
}
.bartitle {
  font-size: 14px;
  line-height: 1.5;
}
.eyebrow,
.kicker,
.calc-head {
  font-size: 13px;
  letter-spacing: 0.035em;
  text-transform: none;
}
.langtoggle a {
  font-size: 14px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.hero {
  gap: 22px;
  margin: 24px 0;
}
.guide-hero-simple {
  display: block;
  max-width: 84ch;
}
h1 {
  font-size: clamp(25px, 4vw, 38px);
  line-height: 1.2;
  max-width: 32ch;
}
.lede {
  font-size: 18px;
  line-height: 1.6;
  max-width: 75ch;
  margin-bottom: 16px;
}
p {
  font-size: 16px;
  line-height: 1.7;
}
h2 {
  font-size: 22px;
  line-height: 1.35;
  margin: 0 0 14px;
}
/* Normal block flow: even column-count:1 retains a fragmentation context in WebKit. */
.content-cols {
  display: block;
  columns: auto;
  column-count: auto;
  column-width: auto;
  -webkit-columns: auto;
  max-width: 84ch;
  margin: 0 auto;
}
.content-cols details,
.content-cols p {
  break-inside: auto;
  -webkit-column-break-inside: auto;
}
.guide-section {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
.guide-nav a {
  font-size: 14px;
  padding: 5px 0;
  text-decoration: none;
}
.guide-nav a:last-child {
  margin-left: auto;
}
.guide-essentials {
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 12px;
  background: rgba(46, 230, 246, 0.035);
  margin: 24px 0;
}
.guide-essentials h2 {
  font-size: 19px;
  margin: 0 0 10px;
}
.guide-essentials ul {
  padding-left: 21px;
  margin: 0;
  max-width: 90ch;
}
.guide-essentials li {
  font-size: 16px;
  padding: 4px 0;
}
.cta {
  font-family: var(--sans);
  font-size: 16px;
  min-height: 44px;
  padding: 13px 18px;
  margin: 18px 0;
}
.cta small {
  font-size: 13px;
  line-height: 1.5;
}
details {
  border-color: var(--line);
  padding: 0 14px;
  border-radius: 10px;
}
summary {
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--cyan);
  flex: none;
}
details[open] > summary::after {
  content: "−";
}
details p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--txt);
  margin: 2px 0 16px;
}
.guide-preview {
  margin-top: 18px;
}
.guide-preview .calc {
  border: 0;
  background: none;
  padding: 4px 0 16px;
}
.guide-intro-detail {
  border: 0;
  margin: 0;
  padding: 0;
}
.guide-intro-detail summary {
  justify-content: flex-start;
  color: var(--muted);
  font-size: 14px;
  padding: 5px 0;
}
.guide-depth {
  margin: 16px 0;
}
.calc-line .k,
.preview-field .l {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
.calc-line p {
  font-size: 15px;
  line-height: 1.6;
}
.calc-tag {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}
.preview-field .v {
  font-size: 16px;
}
.related {
  max-width: 84ch;
  margin: 28px auto;
}
.related a {
  font-size: 16px;
}
.related a span {
  font-size: 13px;
  color: var(--muted);
}
.foot {
  font-size: 13px;
  color: var(--muted);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.guide-visual {
  box-shadow: none;
}
.guide-visual figcaption {
  font-size: 13px;
}
.gv-kicker,
.gv-badge,
.gv-node-label,
.gv-note,
.gv-not-scale,
.gv-purchase-label,
.gv-same-sum,
.gv-ratio span {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
.gv-title {
  font-size: 18px;
  line-height: 1.4;
  font-family: var(--sans);
}
.gv-badge {
  padding: 6px 10px;
}
.gv-node-value {
  font-size: 18px;
}
.gv-layer span {
  font-size: 14px;
  line-height: 1.45;
}
.gv-nested {
  height: 270px;
}
.gv-layer-m3 {
  padding-right: 150px;
  border-color: rgba(46, 230, 246, 0.58);
  background: rgba(46, 230, 246, 0.055);
}
.gv-layer-m2 {
  inset: 72px 8% 14px;
  border-color: rgba(177, 140, 255, 0.58);
  background: rgba(177, 140, 255, 0.08);
}
.gv-layer-m1 {
  inset: 144px 18% 28px;
  border-color: rgba(245, 177, 61, 0.58);
  background: rgba(245, 177, 61, 0.1);
}
.gv-layer-m3 strong {
  color: var(--cyan);
}
.gv-layer-m2 strong {
  color: var(--violet);
}
.gv-layer-m1 strong {
  color: var(--amber);
}
.gv-nested-equation {
  font-size: 13px;
  color: var(--muted);
  top: 16px;
}
.gv-supply-side strong,
.gv-public-card strong,
.gv-wage-result strong {
  font-size: 15px;
  line-height: 1.5;
}
.gv-supply-side small,
.gv-public-card small,
.gv-wage-result span,
.gv-wage-row span,
.gv-loan-end,
.gv-tax-out,
.gv-rate-strip {
  font-size: 13px;
  line-height: 1.5;
}
.gv-public {
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
}
.gv-payment-bar {
  height: auto;
  min-height: 44px;
}
.gv-payment-part {
  font-size: 12px;
  line-height: 1.4;
  padding: 8px;
}
.gv-supply-side,
.gv-public-card,
.gv-wage-result {
  min-width: 0;
}
.gv-wages {
  grid-template-columns: 1fr;
}
.gv-wages > .gv-arrow {
  display: none;
}
.gv-wage-inputs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gv-wage-row {
  grid-template-columns: 1fr;
  text-align: center;
}
.gv-wage-result {
  min-height: 100px;
}
a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
@media (max-width: 680px) {
  body {
    padding: 12px;
  }
  .bar {
    gap: 10px;
    padding: 12px;
  }
  .brand-logo {
    width: 36px;
    height: 36px;
  }
  .bartitle {
    font-size: 12px;
  }
  .langtoggle a {
    padding: 6px 10px;
  }
  .hero {
    display: block;
    margin: 20px 0;
  }
  .lede {
    font-size: 16px;
  }
  .guide-nav {
    gap: 5px 16px;
  }
  .guide-nav a:last-child {
    margin-left: 0;
  }
  .guide-essentials {
    padding: 16px;
  }
  .guide-essentials li {
    font-size: 15px;
  }
  .guide-section {
    padding: 22px 0;
  }
  .guide-section h2 {
    font-size: 20px;
  }
  .gv-head {
    flex-wrap: wrap;
  }
  .gv-badge {
    display: inline-block;
  }
  .gv-title {
    font-size: 17px;
  }
  .guide-visual {
    padding: 12px;
  }
  .guide-visual-stage {
    padding: 10px;
  }
  .gv-nested {
    height: 310px;
  }
  .gv-layer {
    gap: 8px;
    padding: 12px;
  }
  .gv-layer-m3 {
    padding-top: 44px;
  }
  .gv-layer-m2 {
    inset: 110px 5% 12px;
  }
  .gv-layer-m1 {
    inset: 205px 10% 24px;
  }
  .gv-nested-equation {
    top: 14px;
    right: 12px;
    font-size: 12px;
  }
  .gv-layer span {
    font-size: 13px;
  }
  .gv-layer strong {
    font-size: 18px;
  }
  .gv-public {
    grid-template-columns: 1fr;
  }
  .gv-ratio b {
    font-size: 26px;
  }
  .gv-ratio {
    flex-direction: row;
    gap: 10px;
  }
  .gv-public-card {
    padding: 14px;
  }
  .gv-rate-strip {
    flex-wrap: wrap;
  }
  .gv-tax {
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  }
  .gv-tax > .gv-arrow {
    transform: none;
    height: auto;
    font-size: 0;
  }
  .gv-tax > .gv-arrow::after {
    content: "↓";
    font-size: 22px;
  }
  .gv-loan-line {
    grid-template-columns: 80px minmax(30px, 1fr) 80px;
  }
  .gv-wage-inputs {
    grid-template-columns: 1fr;
  }
  .gv-wage-row {
    grid-template-columns: 30px 1fr;
    text-align: left;
  }
  input,
  select {
    font-size: 16px !important;
    min-height: 44px;
  }
}
@media (max-width: 390px) {
  .gv-supply-compare {
    grid-template-columns: 1fr;
  }
  .gv-supply-icon {
    font-size: 36px;
  }
  .gv-vs {
    min-height: 24px;
  }
  .gv-tax-split {
    grid-template-columns: 1fr;
  }
  .gv-purchasing {
    grid-template-columns: 1fr 24px 1fr;
  }
  .gv-public-symbol {
    font-size: 25px;
  }
  .bar {
    flex-wrap: wrap;
  }
  .langtoggle {
    margin-left: auto;
  }
}

/* Explicitly remove closed disclosure contents from layout, including diagrams. */
details:not([open]) > :not(summary) {
  display: none !important;
}

/* Centrage optique des libelles (V87.9), meme regle que clarity.css sur l'accueil : text-box
   rogne la ligne a la hauteur des capitales et a la ligne de base, les marges sont recalculees
   en unite cap. Les capitales tombent au centre de leur cadre quelle que soit la police (SF Mono
   sur iPhone et iPad, une autre ailleurs). Sans text-box, les marges symetriques s'appliquent. */
@supports (text-box: trim-both cap alphabetic) {
  .langtoggle a {
    display: inline-block;
    min-height: 0;
    padding-top: calc((40px - 1cap) / 2);
    padding-bottom: calc((40px - 1cap) / 2);
    text-box: trim-both cap alphabetic;
  }
  .gv-badge,
  .gv-same-sum,
  .gv-tax-out {
    padding-top: calc(var(--cv-pad) + (1.5em - 1cap) / 2);
    padding-bottom: calc(var(--cv-pad) + (1.5em - 1cap) / 2);
    text-box: trim-both cap alphabetic;
  }
  .gv-badge {
    --cv-pad: 6px;
  }
  .gv-same-sum {
    --cv-pad: 5px;
  }
  .gv-tax-out {
    --cv-pad: 9px;
  }
  summary {
    display: block;
    position: relative;
    padding-top: calc(12px + (1.5em - 1cap) / 2);
    padding-bottom: calc(12px + (1.5em - 1cap) / 2);
    padding-right: 28px;
    text-box: trim-both cap alphabetic;
  }
  summary::after {
    position: absolute;
    right: 0;
    top: 50%;
    line-height: 1;
    transform: translateY(-50%);
    text-box: trim-both cap alphabetic;
  }
  /* Le petit volet d'introduction garde son + juste apres le texte. */
  .guide-intro-detail summary {
    padding-top: calc(5px + (1.5em - 1cap) / 2);
    padding-bottom: calc(5px + (1.5em - 1cap) / 2);
    padding-right: 0;
  }
  .guide-intro-detail summary::after {
    position: static;
    display: inline-block;
    margin-left: 16px;
    transform: none;
  }
}