/* ==========================================================================
   CreditLibre — design system

   Palette propre au site : vert printemps lumineux sur encre vert profond.
   On reprend une grammaire éprouvée — grands aplats clairs, ancre très
   sombre, typographies larges, cartes arrondies, boutons pilule — mais
   pas la teinte : le vert #74e69a est à 153° de teinte, là où celui de
   Wise est un citron vert à 135°. Écart perceptuel OKLab : 5,7 — au-dessus
   du seuil où deux teintes se confondent, mais c'est la limite basse.

   Contrastes vérifiés : vert #74e69a sur encre #0f2c1c = 9,7:1 ;
   encre sur aplat vert clair = 16,8:1 ; blanc sur encre = 15,0:1.

   Aucune dépendance externe : pas de CDN, pas de webfont distante.
   ========================================================================== */

/* --- 1. Jetons de design -------------------------------------------------- */
:root {
  --accent:        #74e69a;  /* vert printemps : boutons, pastilles, logo */
  --accent-hover:  #5dd484;
  --accent-soft:   #e3f8ea;  /* grands aplats de section */
  --accent-softer: #f2fcf5;
  --ink-deep:      #0f2c1c;  /* encre vert profond : bandeaux, titres, pied de page */
  --ink-deep-soft: #17402a;
  --ink:           #0d140e;
  --muted:         #47564c;
  --muted-light:   #637266;
  --muted-on-dark: #bccdbf;  /* texte secondaire sur l'encre sombre */
  --line:          #e1e9e0;
  --line-strong:   #c9d4c7;
  --surface:       #ffffff;
  --surface-alt:   #f5f9f3;
  --sand:          #fbfdf9;
  --danger:        #a8200d;
  --danger-soft:   #fdecea;
  --warn:          #8a5a00;
  --warn-soft:     #fff6e0;
  --info-soft:     #eef3ff;
  --blue:          #22407a;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 44, 28, .06), 0 2px 8px rgba(15, 44, 28, .04);
  --shadow-md: 0 2px 6px rgba(15, 44, 28, .06), 0 12px 32px rgba(15, 44, 28, .08);
  --shadow-lg: 0 8px 24px rgba(15, 44, 28, .10), 0 24px 64px rgba(15, 44, 28, .10);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-num: "Inter", ui-monospace, "SF Mono", "Segoe UI", Roboto, sans-serif;

  --maxw: 1180px;
  --gutter: 24px;
  --header-h: 72px;
}

/* --- 2. Réinitialisation -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

/* L'attribut hidden doit l'emporter sur tout display: flex/grid/inline-flex. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

a { color: var(--ink-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink-deep);
}

h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.2; }
h4 { font-size: 1.05rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--ink-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- 3. Mise en page ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 760px; }
.container--mid    { max-width: 940px; }

.section       { padding-block: clamp(48px, 7vw, 96px); }
.section--tight{ padding-block: clamp(32px, 4vw, 56px); }
.section--alt  { background: var(--surface-alt); }
.section--tint { background: var(--accent-soft); }
.section--dark { background: var(--ink-deep); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a { color: var(--accent); }

/* Texte secondaire sur fond sombre.
   --muted (#47564c) est calibré pour le blanc : posé sur l'encre sombre il
   tombe à 1,9:1 et devient illisible. Tout contexte sombre doit donc
   neutraliser les classes utilitaires qui l'appliquent. */
.section--dark .muted,  .section--dark .small,  .section--dark .xsmall,
.section--dark .feature p, .section--dark .rows__label,
.section--dark .kpi__label, .section--dark .kpi__sub,
.card--dark .muted,     .card--dark .small,     .card--dark .xsmall,
.card--dark .feature p, .card--dark .rows__label,
.result-head .muted,    .result-head .small,    .result-head .xsmall,
.site-footer .muted,    .site-footer .small,    .site-footer .xsmall,
.chart-tip .muted {
  color: var(--muted-on-dark);
}

/* Les filets de séparation doivent eux aussi s'éclaircir. */
.section--dark .rows__item,
.card--dark .rows__item { border-bottom-color: rgba(255, 255, 255, .16); }

.stack > * + * { margin-top: var(--stack-gap, 16px); }
.stack--lg { --stack-gap: 28px; }
.stack--sm { --stack-gap: 8px; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cluster--between { justify-content: space-between; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--muted);
  line-height: 1.5;
}
.section--dark .lead { color: rgba(255,255,255,.82); }

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.section--dark .eyebrow { color: var(--accent); }

.muted { color: var(--muted); }
.small { font-size: .9rem; }
.xsmall { font-size: .8rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* --- 4. En-tête ----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.03em;
  color: var(--ink-deep);
  text-decoration: none;
  flex: 0 0 auto;
}
.brand__mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--accent);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.brand__mark svg { width: 18px; height: 18px; }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__link {
  display: inline-block;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-size: .97rem;
  font-weight: 500;
  color: var(--ink-deep);
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover { background: var(--accent-soft); }
.nav__link[aria-current="page"] { background: var(--accent-soft); font-weight: 600; }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
}

/* --- 5. Boutons ----------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--ink-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--btn-hover, var(--accent-hover)); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn--dark  { --btn-bg: var(--ink-deep); --btn-fg: #fff; --btn-hover: var(--ink-deep-soft); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink-deep); --btn-hover: var(--accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn--sm { padding: 9px 16px; font-size: .9rem; }
.btn--lg { padding: 16px 30px; font-size: 1.08rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --- 6. Cartes ------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}
.card--flat   { box-shadow: none; }
.card--raised { border-color: transparent; box-shadow: var(--shadow-md); }
.card--tint   { background: var(--accent-soft); border-color: transparent; }
.card--dark   { background: var(--ink-deep); color: #fff; border-color: transparent; }
.card--dark h2, .card--dark h3, .card--dark h4 { color: #fff; }
.card--pad-sm { padding: 20px; }
.card--pad-lg { padding: clamp(24px, 4vw, 44px); }

/* --- 7. Badges et pastilles ---------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--ink-deep);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
}
.pill--outline { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); color: #fff; }
.pill--accent { background: var(--accent); }
.pill svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* --- 8. Formulaires ------------------------------------------------------- */
.field { display: block; margin-bottom: 18px; }
.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-deep);
  margin-bottom: 7px;
}
.field__hint { font-size: .82rem; font-weight: 400; color: var(--muted-light); }
.field__help { font-size: .82rem; color: var(--muted-light); margin-top: 6px; }

.input-wrap { position: relative; display: block; }
.input,
.select {
  width: 100%;
  padding: 13px 15px;
  font-size: 1.02rem;
  font-family: var(--font);
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color .14s ease, box-shadow .14s ease;
  appearance: none;
}
.input:hover, .select:hover { border-color: var(--muted-light); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--ink-deep);
  box-shadow: 0 0 0 3px rgba(93, 212, 132, .6);
}
.input--num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 44px; }
.input-wrap__unit {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: .95rem;
  color: var(--muted-light);
  pointer-events: none;
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b4860' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 18px;
  padding-right: 42px;
}

/* Curseur (range) */
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  margin: 2px 0 0;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--ink-deep) var(--fill, 0%), var(--line) var(--fill, 0%));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--ink-deep);
  box-shadow: var(--shadow-sm);
}
.range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--line); }
.range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--ink-deep); }
.range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--ink-deep);
}
.range-scale {
  display: flex; justify-content: space-between;
  font-size: .76rem; color: var(--muted-light); margin-top: 2px;
}

/* Contrôle segmenté */
.seg {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  width: 100%;
}
.seg__btn {
  flex: 1 1 0;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: .92rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}
.seg__btn:hover { color: var(--ink-deep); }
.seg__btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink-deep);
  box-shadow: var(--shadow-sm);
}
.seg--chips { background: transparent; border: 0; padding: 0; gap: 8px; flex-wrap: wrap; }
.seg--chips .seg__btn {
  flex: 0 0 auto;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.seg--chips .seg__btn[aria-pressed="true"] {
  background: var(--ink-deep); color: #fff; box-shadow: none;
}

/* Interrupteur */
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: .95rem; font-weight: 500; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 46px; height: 27px; flex: 0 0 auto;
  background: var(--line-strong);
  border-radius: 999px;
  position: relative;
  transition: background-color .16s ease;
}
.switch__track::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease;
}
.switch input:checked + .switch__track { background: var(--ink-deep); }
.switch input:checked + .switch__track::after { transform: translateX(19px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px rgba(159,232,112,.6); }

/* Groupe repliable */
.disclosure { border-top: 1px solid var(--line); }
.disclosure__btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 0;
  background: none; border: 0;
  font-size: 1rem; font-weight: 650;
  color: var(--ink-deep);
  text-align: left;
  cursor: pointer;
}
.disclosure__btn::after {
  content: "";
  width: 20px; height: 20px; flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2c1c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .18s ease;
}
.disclosure__btn[aria-expanded="true"]::after { transform: rotate(180deg); }
.disclosure__panel { padding-bottom: 20px; }
.disclosure__panel[hidden] { display: none; }

/* --- 9. Chiffres clés ---------------------------------------------------- */
.kpi { display: block; }
.kpi__label {
  font-size: .86rem; font-weight: 600; letter-spacing: .01em;
  color: var(--muted); margin-bottom: 4px;
}
.kpi__value {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  color: var(--ink-deep);
  font-variant-numeric: tabular-nums;
}
.kpi__unit { font-size: .5em; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.kpi__sub { font-size: .86rem; color: var(--muted); margin-top: 4px; }
.kpi--hero .kpi__value { font-size: clamp(2.6rem, 6vw, 3.9rem); }
.kpi--inverse .kpi__label { color: rgba(255,255,255,.72); }
.kpi--inverse .kpi__value { color: #fff; }
.kpi--inverse .kpi__sub { color: rgba(255,255,255,.72); }

/* --- 10. Listes de lignes (détails chiffrés) ----------------------------- */
.rows { margin: 0; padding: 0; list-style: none; }
.rows__item {
  display: flex; align-items: baseline; gap: 12px;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: .97rem;
}
.rows__item:last-child { border-bottom: 0; }
.rows__item--total {
  font-weight: 700; font-size: 1.06rem; color: var(--ink-deep);
  border-top: 2px solid var(--ink-deep); border-bottom: 0; margin-top: 4px; padding-top: 14px;
}
.rows__item--sub { padding-left: 16px; color: var(--muted); font-size: .9rem; }
.rows__label { color: var(--muted); }
.rows__item--total .rows__label { color: var(--ink-deep); }
.rows__value { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

/* --- 11. Tableaux -------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: 11px 14px; text-align: right; white-space: nowrap; }
.table th {
  position: sticky; top: 0;
  background: var(--surface-alt);
  font-weight: 650; font-size: .82rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--line);
}
.table th:first-child, .table td:first-child { text-align: left; }
.table td { border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--accent-softer); }
.table tr.is-year-start td { border-top: 1.5px solid var(--line-strong); }
.table__sticky-max { max-height: 460px; overflow-y: auto; display: block; }

/* --- 12. Messages -------------------------------------------------------- */
.notice {
  display: flex; gap: 12px;
  padding: 15px 18px;
  border-radius: var(--r-md);
  background: var(--info-soft);
  font-size: .93rem;
  line-height: 1.45;
}
.notice__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.notice--warn   { background: var(--warn-soft);   color: #4a3300; }
.notice--danger { background: var(--danger-soft); color: #6b1708; }
.notice--tint   { background: var(--accent-soft);  color: var(--ink-deep); }
.notice p { margin: 0; }
.notice p + p { margin-top: .5em; }

/* --- 13. Graphiques ------------------------------------------------------ */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.legend__swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }

.donut__hole-label { font-size: .8rem; fill: var(--muted); }
.donut__hole-value { font-size: 1.25rem; font-weight: 700; fill: var(--ink-deep); }

/* --- 14. Simulateur : agencement ---------------------------------------- */
.sim { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
.sim__panel { position: sticky; top: calc(var(--header-h) + 20px); }

.result-head {
  background: var(--ink-deep);
  color: #fff;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 28px 28px 24px;
}
.result-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 24px 28px 28px;
}

.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--ink-deep);
  color: #fff;
  box-shadow: 0 -4px 20px rgba(0,0,0,.18);
}
.mobile-bar__label { font-size: .76rem; color: rgba(255,255,255,.75); }
.mobile-bar__value { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* --- 15. Hero ------------------------------------------------------------ */
.hero { background: var(--accent-soft); padding-block: clamp(48px, 7vw, 92px); position: relative; overflow: hidden; }
.hero__inner { display: grid; gap: 40px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
.hero h1 { margin-bottom: 18px; }
.hero__badges { margin-top: 26px; gap: 10px; }
.hero__art { position: relative; }
.hero__blob {
  position: absolute; inset: -12% -18% auto auto;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: var(--accent); opacity: .45; filter: blur(8px); z-index: 0;
}

/* --- 16. Blocs éditoriaux ----------------------------------------------- */
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--accent);
  display: grid; place-items: center;
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.12rem; margin-bottom: 6px; }
.feature p { font-size: .96rem; color: var(--muted); margin: 0; }

.prose { max-width: 70ch; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .95rem; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-weight: 650; background: var(--surface-alt); }

/* Les tableaux rédactionnels n'ont pas de conteneur .table-wrap autour d'eux.
   Sous environ 400 px, leur largeur minimale dépasse la colonne de texte : ils
   défilent alors seuls, au lieu de faire déborder la page entière. */
.prose-table { overflow-x: auto; margin: 1.2em 0; }
.prose-table > table { margin: 0; }
.prose code {
  background: var(--surface-alt); padding: .15em .4em; border-radius: 5px;
  font-size: .9em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.prose blockquote {
  margin: 1.4em 0; padding: 14px 20px;
  border-left: 4px solid var(--accent);
  background: var(--accent-softer);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.formula {
  background: var(--ink-deep); color: var(--accent-soft);
  padding: 18px 22px; border-radius: var(--r-md);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .95rem; overflow-x: auto;
}

/* --- 17. Pied de page --------------------------------------------------- */
.site-footer { background: var(--ink-deep); color: rgba(255,255,255,.78); padding-block: 56px 32px; margin-top: 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 9px; font-size: .94rem; }
.footer__bottom {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .84rem; line-height: 1.6;
}

/* --- 18. Divers --------------------------------------------------------- */
.copy-link { display: flex; gap: 8px; align-items: center; }
.copy-link input {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 14px; font-size: .88rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface-alt); color: var(--muted);
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-deep); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.is-loading { opacity: .55; transition: opacity .15s ease; }
.tabnum { font-variant-numeric: tabular-nums; }

/* --- 19. Responsive ----------------------------------------------------- */
@media (max-width: 1000px) {
  .sim { grid-template-columns: minmax(0, 1fr); }
  .sim__panel { position: static; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__art { display: none; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Les cinq entrées de menu ne tiennent plus en une ligne sous ~1040 px :
   on bascule sur le menu déroulant avant que la barre ne déborde. */
@media (max-width: 1040px) {
  .nav {
    display: none;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 12px var(--gutter) 20px;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 13px 14px; border-radius: var(--r-sm); }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { position: relative; }
}

@media (max-width: 860px) {
  :root { --gutter: 18px; }
  /* minmax(0, 1fr) et non 1fr : le minimum d'une piste 1fr est son contenu
     minimal, donc une carte au contenu large élargit la grille au-delà de
     l'écran. C'est ce qui faisait déborder la page sur mobile. */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .mobile-bar { display: flex; }
  body.has-mobile-bar { padding-bottom: 88px; }
  .card { padding: 20px; }
  .result-head, .result-body { padding-inline: 20px; }
}

@media (max-width: 560px) {
  /* Les libellés longs ne doivent pas forcer un défilement horizontal. */
  .seg { flex-wrap: wrap; }
  .seg__btn { white-space: normal; flex: 1 1 100%; }
  .seg--chips .seg__btn { flex: 0 1 auto; }
  .kpi--hero .kpi__value { font-size: clamp(2.1rem, 11vw, 3rem); }
  .rows__item { flex-wrap: wrap; }
  .rows__value { margin-left: auto; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .table th, .table td { padding: 9px 10px; font-size: .86rem; }
  .hero__badges .pill { font-size: .82rem; }
}

@media print {
  .site-header, .site-footer, .mobile-bar, .no-print { display: none !important; }
  body { font-size: 12px; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --- 20. Jetons de graphique --------------------------------------------
   Thème catégoriel validé (contrôle des six critères : bande de clarté,
   plancher de chroma, séparation daltonisme toutes paires, plancher vision
   normale, contraste sur le fond). Trois teintes catégorielles au maximum,
   plus un neutre pour le capital, qui n'est pas un coût.
   Ces teintes ne suivent délibérément pas la couleur de marque : une donnée
   se lit pour ce qu'elle est, pas pour l'identité du site. Seuls les gris
   neutres sont accordés à l'encre vert profond.
   Le capital restant dû est tracé seul, sur son propre graphique : jamais
   deux axes verticaux sur une même figure.
   ------------------------------------------------------------------------ */
:root {
  --chart-surface:   #ffffff;
  --chart-grid:      #e5ebe3;
  --chart-axis:      #c5cfc3;
  --chart-ink:       #0d140e;
  --chart-ink-2:     #47564c;
  --chart-muted:     #869383;

  --series-1:        #2a78d6;  /* intérêts         */
  --series-2:        #eb6834;  /* assurance        */
  --series-3:        #1baf7a;  /* frais            */
  --series-neutral:  #c8cdc5;  /* capital emprunté */
}

.chart-figure { margin: 0; }
.chart-figure figcaption {
  font-size: .86rem; color: var(--chart-ink-2); margin-top: 10px; line-height: 1.45;
}
.chart-tip {
  position: absolute;
  z-index: 70;
  pointer-events: none;
  background: var(--ink-deep);
  color: #fff;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: .84rem;
  line-height: 1.45;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -112%);
  transition: opacity .1s ease;
}
.chart-tip.is-visible { opacity: 1; }
.chart-tip__key { color: var(--accent); font-weight: 600; }
.chart-tip b { font-variant-numeric: tabular-nums; }
.chart-host { position: relative; }
.chart-value { font-variant-numeric: tabular-nums; }