@font-face {
  font-family: 'Archivo';
  src: url(fonts/archivo-latin.woff2) format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url(fonts/instrument-serif-latin.woff2) format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url(fonts/instrument-serif-italic-latin.woff2) format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url(fonts/geist-mono-latin.woff2) format('woff2');
  font-weight: 400 600; font-display: swap;
}

/* Papier chaud, encre prune et braise : clair et lumineux, les billets sont de l'or sur du papier. */
:root {
  --paper: #faf5fb;
  --paper-2: #f1e9f7;
  --ink: #2e1245;
  --ink-2: #574a69;
  --muted: #776a86;
  --trait: rgb(46 18 69 / 0.14);
  --trait-2: rgb(46 18 69 / 0.07);
  /* violet LFI #7B13D6 et rose #FF0059, adoucis */
  --braise: #9333ea;
  --braise-vive: #c084fc;
  --braise-foncé: #6b21a8;
  --braise-faint: rgb(147 51 234 / 0.12);
  --braise-sombre: #581c87;
  --rose: #ec4899;
  --rose-foncé: #be185d;
  --bleu: #4f46e5;
  --bleu-foncé: #3730a3;
  --dette: #e5484d;
  --dette-sombre: #9f1239;
  --verre: rgb(255 255 255 / 0.68);
  --voile: rgb(250 245 251 / 0.85);
  --shadow: 0 2px 4px rgb(80 40 110 / 0.06), 0 14px 36px rgb(80 40 110 / 0.13);
  --glow: 0 0 34px rgb(236 72 153 / 0.4);
  --serif: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif;
  --sans: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --gutter: 124px;
  --rpad: 24px;
  color-scheme: light;
}
@media (max-width: 760px) { :root { --gutter: 64px; --rpad: 10px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper-2); }
body { margin: 0; color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: #fbcfe8; color: var(--ink); }

/* fond : papier chaud avec des lavis de ciel et de pêche */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(65% 50% at 88% -5%, rgb(236 72 153 / 0.14), transparent 70%),
    radial-gradient(60% 45% at 0% 0%, rgb(147 51 234 / 0.16), transparent 70%),
    radial-gradient(120% 90% at 50% 115%, #f3e9f8 0%, var(--paper) 55%, #f7f0fa 100%);
}
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); }
}

/* la silhouette de la France, posée au centre du fond comme dans la vidéo originale */
.map-bg {
  position: fixed; inset: 0; z-index: -1; display: grid; place-items: center; pointer-events: none;
}
.map-bg svg { width: min(92vw, 1100px); height: auto; aspect-ratio: 1040 / 640; fill: #eee3f6; opacity: 0.85; }

/* repères de paysage du graphique principal : illustrations 2D dont le sommet
   passe au milieu de l'écran quand la pile de billets atteint leur hauteur (positionnées par app.js) */
.sky { position: fixed; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.sky svg { position: absolute; top: -9999px; opacity: 0; max-width: none; height: auto; filter: drop-shadow(0 10px 24px rgb(70 60 90 / 0.18)); }
.sky-eiffel { left: 3vw; width: min(41.25vh, 80vw); width: min(41.25svh, 80vw); aspect-ratio: 736 / 1920; color: #8b5cf6; }
.sky-montblanc { left: 50%; translate: -50% 0; width: max(120vw, 160vh); width: max(120vw, 160svh); aspect-ratio: 505 / 490; color: #b3a1e8; }
.sky-plane { left: 0; width: clamp(260px, 40vw, 600px); aspect-ratio: 393 / 409; color: #7c3aed; }

a { color: var(--braise-foncé); text-decoration-color: rgb(107 33 168 / 0.4); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { font-family: var(--sans); font-weight: 800; line-height: 1.1; margin: 0 0 0.4em; letter-spacing: -0.01em; }
b { font-weight: 700; }

.title-stack { line-height: 0.9; letter-spacing: -0.02em; }
.title-stack > span { display: block; overflow: hidden; padding: 0.04em 0 0.1em; margin: -0.04em 0 -0.1em; }
.title-stack > span > i { display: block; font-style: inherit; animation: rise 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.title-stack .t1 { font-family: var(--serif); font-weight: 400; font-size: 0.82em; color: var(--ink-2); letter-spacing: -0.01em; }
.title-stack .t2 {
  font-weight: 900; font-stretch: 118%; text-transform: uppercase; font-size: 0.98em;
  color: var(--ink);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .title-stack .t2 {
    background: linear-gradient(180deg, var(--ink) 25%, var(--braise-foncé) 150%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.title-stack .t3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.06em; color: var(--rose-foncé); }
.title-stack .in { font: italic 400 0.36em/1.2 var(--serif); color: var(--muted); padding-left: 0.1em; }
.title-stack .sub {
  font: 500 0.2em/1.2 var(--mono); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-2); margin-top: 1.2em;
}
.title-stack > span:nth-child(2) > i { animation-delay: .08s; }
.title-stack > span:nth-child(3) > i { animation-delay: .16s; }
.title-stack > span:nth-child(4) > i { animation-delay: .24s; }
.title-stack > span:nth-child(5) > i { animation-delay: .32s; }
.title-stack > span:nth-child(6) > i { animation-delay: .5s; }
@keyframes rise { from { transform: translateY(110%); } }

.visually-hidden, .visually-hidden-focusable:not(:focus) {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
#climb-text:focus-within {
  position: relative !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  max-width: 880px; margin: 24px auto; padding: 20px 24px; background: #fff; border: 1px solid var(--trait);
  border-radius: 18px; box-shadow: var(--shadow); z-index: 6;
}
.visually-hidden-focusable:focus { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--braise-foncé); }

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 999px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* verre dépoli clair, bord lumineux en dégradé */
.glass, .hud, .topbar > *, .btn.ghost, .card-work, .card-palier, .spire-card, .keep-going, .shares, .debt-note, .card-stack .text, .you-pin .tag, .pov .pov-text, .one-mark-card {
  background: var(--verre);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow);
}
.hud::after, .topbar > *::after, .card-work::after, .card-palier::after, .spire-card::after, .keep-going::after, .shares::after, .btn.ghost::after, .one-mark-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0) 38% 62%, rgb(120 90 40 / 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 20px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, var(--braise-vive), var(--braise)); color: #fff;
  font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; box-shadow: 0 8px 22px rgb(147 51 234 / 0.35);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, filter .3s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 30px rgb(147 51 234 / 0.45); }
.btn:active { transform: scale(0.97); }
.btn.ghost { background: var(--verre); color: var(--ink-2); box-shadow: var(--shadow); }
.btn.ghost:hover { filter: none; background: #fff; }
:focus-visible, .btn:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible {
  outline: 2px solid var(--bleu); outline-offset: 3px;
}

/* Barre du haut */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px;
}
.topbar > * { position: relative; pointer-events: auto; border-radius: 999px; padding: 9px 16px; }
.topbar .logo { display: inline-flex; align-items: baseline; gap: 1px; text-decoration: none; color: var(--ink); }
.topbar .logo .t1 { font: italic 400 20px/1 var(--serif); color: var(--braise-foncé); }
.topbar .logo .t2 { font: 900 14px/1 var(--sans); font-stretch: 120%; text-transform: uppercase; letter-spacing: 0.04em; }
.topbar nav { display: flex; gap: 14px; }
.topbar nav a { color: var(--ink-2); text-decoration: none; font: 500 11px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.topbar nav a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ */
/* Le graphique                                                         */
/* ------------------------------------------------------------------ */
.climb-page.is-loading main { visibility: hidden; }

.graph { position: relative; overflow: clip; }

.tick { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--trait); }
.tick.minor { border-top-style: dashed; border-top-color: var(--trait-2); }
.tick.division { border-top: 1px dashed rgb(217 111 43 / 0.55); }
.tick > .label {
  position: absolute; left: 8px; bottom: 2px; width: calc(var(--gutter) - 14px);
  font: 500 11px/16px var(--mono); letter-spacing: 0.04em; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: right; padding-right: 4px;
}
.tick:not(.minor) > .label { color: var(--ink-2); }
.tick.division > .label { color: var(--braise-foncé); font-weight: 600; }
.tick > .label .short { display: none; }
.tick.under-summit > .label, .tick.under-summit > .division-note { visibility: hidden; }
.tick > .division-note {
  position: absolute; left: var(--gutter); top: 6px; margin-left: 12px;
  font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgb(168 78 21 / 0.8);
}
.tick.log { border-top-style: dotted; border-top-color: rgb(74 108 247 / 0.5); }
.tick.log > .label { color: var(--bleu-foncé); }
@media (max-width: 760px) {
  .tick > .label { font-size: 10px; }
  .tick > .label .full { display: none; }
  .tick > .label .short { display: inline; }
}

/* grands chiffres de section, en filigrane, collants pendant chaque million */
.division-block { position: absolute; left: var(--gutter); right: var(--rpad); pointer-events: none; }
.numeral {
  position: sticky; top: 3vh; top: 3svh;
  font: italic 400 min(118vh, 92vw)/0.78 var(--serif);
  font-size: min(118svh, 92vw);
  letter-spacing: -0.04em; text-align: right; padding-right: 9%;
  color: transparent; -webkit-text-stroke: 1px rgb(43 36 64 / 0.14);
  user-select: none;
}

.bars, .negbars {
  position: absolute; left: var(--gutter); right: var(--rpad);
  display: grid; grid-template-columns: repeat(100, 1fr); column-gap: 2px; align-items: end;
}
.negbars { align-items: start; pointer-events: none; }
@media (max-width: 760px) { .bars, .negbars { column-gap: 1px; } }
.bar {
  /* liasses de billets, une liasse = 10 000 € : de l'or en barre sur le papier */
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.5), transparent 45%, rgb(120 60 10 / 0.16)),
    repeating-linear-gradient(to top, var(--braise-vive) 0 calc(var(--brick) - 1.5px), var(--braise-sombre) calc(var(--brick) - 1.5px) var(--brick));
  min-height: 1px; border-radius: 1px 1px 0 0;
}
.bar.top1 {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.65), transparent 50%, rgb(190 24 93 / 0.08)),
    repeating-linear-gradient(to top, #f9a8d4 0 calc(var(--brick) - 1.5px), var(--rose) calc(var(--brick) - 1.5px) var(--brick));
  box-shadow: 0 0 24px rgb(236 72 153 / 0.55);
}
.negbars .bar {
  background: repeating-linear-gradient(to bottom, var(--dette) 0 calc(var(--brick) - 1.5px), var(--dette-sombre) calc(var(--brick) - 1.5px) var(--brick));
  min-height: 0; border-radius: 0 0 1px 1px; box-shadow: 0 0 14px rgb(224 52 74 / 0.4);
}

.vgrid {
  position: absolute; left: var(--gutter); right: var(--rpad); top: 0;
  background: repeating-linear-gradient(to right, var(--trait-2) 0 1px, transparent 1px 10%);
  border-right: 1px solid var(--trait-2); pointer-events: none;
}
.people {
  position: absolute; left: var(--gutter); right: var(--rpad); height: 22px;
  display: grid; grid-template-columns: repeat(100, 1fr); column-gap: 1px;
}
.people i { display: block; -webkit-mask: var(--person) center bottom / contain no-repeat; mask: var(--person) center bottom / contain no-repeat; }
.one-pct {
  position: absolute; bottom: 25px; width: 2em; text-align: center; transform: translateX(-50%);
  left: calc(var(--gutter) + (100% - var(--gutter) - var(--rpad)) * 0.995);
  font: 600 9px/1 var(--mono); color: var(--braise-foncé); pointer-events: none;
}
.baseline { position: absolute; left: var(--gutter); right: var(--rpad); height: 0; border-top: 1px solid var(--ink-2); }
.pct-axis { position: absolute; left: var(--gutter); right: var(--rpad); font: 500 10.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.pct-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.pct-axis span:last-child { transform: translateX(-100%); }
@media (max-width: 760px) { .pct-axis span.odd { display: none; } }

.class-label {
  position: absolute; transform: translate(-100%, 50%); padding: 4px 18px 4px 8px;
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap; pointer-events: none; z-index: 1;
  background: linear-gradient(to right, var(--voile) calc(100% - 14px), transparent 0);
  border-radius: 4px;
}
.class-label::after { content: ''; position: absolute; right: 2px; top: 50%; width: 12px; border-top: 1px solid var(--muted); }
.class-label::before { content: ''; position: absolute; right: 2px; top: 50%; height: var(--lift, 0px); border-right: 1px solid var(--muted); }
.class-label.debt-tag { transform: translate(0, 50%); margin-left: 34px; padding: 4px 8px 4px 18px; color: var(--dette);
  background: linear-gradient(to left, var(--voile) calc(100% - 14px), transparent 0); }
.class-label.debt-tag::after { left: 2px; right: auto; border-top-color: var(--dette); }

.marker {
  position: absolute; transform: translateY(50%);
  font: 600 13px/1.25 var(--sans); color: var(--ink);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.marker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 4px rgb(236 72 153 / 0.25); flex: none; }
.marker.flag {
  right: calc(var(--rpad) + (100% - var(--gutter) - var(--rpad)) * var(--fromRight) + 6px);
  background: #fff; color: var(--ink); padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); z-index: 3;
}
.marker.flag .dot { background: var(--braise); box-shadow: none; }
.marker.flag::after { content: '→'; color: var(--rose-foncé); }
/* téléphones : le drapeau passe à droite de sa barre, faute de place à gauche */
@media (max-width: 760px) {
  /* posé au-dessus de son trait pour ne pas couvrir la légende du seuil de pauvreté */
  .marker.flag { font-size: 11px; padding: 4px 8px; gap: 4px; transform: none; }
  /* « Les plus aisés » et les notes de pile doublonnent les cartes de centile posées dessus */
  .class-label.c0, .class-label.c2, .tick > .division-note { display: none; }
}

.milestone {
  position: absolute; left: var(--gutter); margin-left: 12px; transform: translateY(-100%);
  padding: 2px 8px 5px 0; font: italic 400 19px/1.25 var(--serif); color: var(--ink-2);
  max-width: min(520px, calc(100% - var(--gutter) - 80px));
  background: linear-gradient(to right, var(--voile) 70%, transparent); border-radius: 4px; z-index: 1;
}
.milestone strong { font: 800 1.05em/1 var(--sans); font-style: normal; color: var(--rose-foncé); letter-spacing: -0.02em; }
@media (max-width: 760px) {
  .milestone { font-size: 16px; max-width: calc(100% - var(--gutter) - var(--rpad) - 24px); padding: 2px 6px; }
}

/* le haut du graphique : ligne de braise et carte « vous êtes arrivé » */
.one-mark {
  position: absolute; left: var(--gutter); right: var(--rpad); height: 0; z-index: 3;
  border-top: 2px solid var(--rose); box-shadow: 0 0 16px 1px rgb(236 72 153 / 0.6); pointer-events: none;
}
.one-mark-card {
  position: relative; border-radius: 22px; padding: 22px 28px 24px; text-align: center; color: var(--ink);
  border: 1px solid rgb(147 51 234 / 0.35);
}
.one-mark-card::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px;
  transform: translateX(-50%) rotate(45deg); background: #fff;
  border-right: 1px solid rgb(147 51 234 / 0.35); border-bottom: 1px solid rgb(147 51 234 / 0.35);
}
.one-mark-card .kicker { display: block; font: 500 11px/1.3 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.one-mark-card .big { display: block; font: 900 clamp(30px, 4.6vw, 52px)/0.95 var(--sans); font-stretch: 118%; text-transform: uppercase; letter-spacing: -0.02em; margin-top: 10px; }
.one-mark-card .amount {
  display: block; font: 800 clamp(26px, 3.4vw, 40px)/1.1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 6px;
  color: var(--rose-foncé); text-shadow: 0 0 30px rgb(236 72 153 / 0.35);
}
.one-mark-card .next { display: block; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 10px; color: var(--muted); }
.one-mark-card p { margin: 14px auto 0; max-width: 34ch; font: 400 19px/1.3 var(--serif); color: var(--ink-2); }
.one-mark-card p b { font-family: var(--sans); font-size: 0.85em; color: var(--ink); }

.card-poor {
  position: relative; border-radius: 18px; padding: 18px 20px; color: var(--ink);
  background: #fff; border: 1px solid rgb(229 72 77 / 0.45); border-left: 5px solid var(--dette);
  box-shadow: var(--shadow), 0 0 30px rgb(229 72 77 / 0.15);
}
.card-poor h3 { font: 800 21px/1.2 var(--sans); color: var(--dette-sombre); margin: 0; letter-spacing: -0.01em; }
.card-poor strong { color: var(--dette-sombre); }
.card-poor .src { color: var(--muted); }

/* Cartes de la montée */
.ann {
  position: absolute; transform: translateY(50%);
  width: min(400px, calc(100% - var(--gutter) - var(--rpad) - 48px));
  font-size: 15px; line-height: 1.5; z-index: 8; /* au-dessus de la bulle du pointeur */
}
.ann.left { left: calc(var(--gutter) + 16px); }
.ann.mid { left: calc(var(--gutter) + (100% - var(--gutter)) * 0.38); }
.ann.pct {
  right: calc(var(--rpad) + (100% - var(--gutter) - var(--rpad)) * var(--fromRight) + 18px);
  width: min(380px, calc(100% - var(--gutter) - 64px));
}
.ann p { margin: 0.4em 0 0; }
.ann .src { font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 10px; color: var(--muted); }
.ann .src a { color: inherit; }
.ann .src a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .ann.mid { left: calc(var(--gutter) + 8px); }
  .ann.left { left: calc(var(--gutter) + 8px); }
  .ann { width: calc(100% - var(--gutter) - var(--rpad) - 16px); font-size: 15px; line-height: 1.5; }
  .ann p { margin-top: 0.5em; }
  .ann .src { margin-top: 8px; }
}

/* étiquette de classement posée sur chaque carte */
.ann .tag {
  display: inline-block; font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; margin-bottom: 10px;
  background: var(--braise-faint); color: var(--braise-foncé); box-shadow: inset 0 0 0 1px rgb(147 51 234 / 0.4);
}
.ann .tag.is-poverty { background: var(--dette); color: #fff; box-shadow: none; }

.card-work {
  position: relative; border-radius: 18px; padding: 18px 20px; color: var(--ink-2);
}
.card-work h3 { font: italic 400 24px/1.1 var(--serif); color: var(--ink); margin: 0; display: flex; align-items: center; gap: 8px; }
.card-work .no { position: absolute; right: 16px; top: 16px; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--braise-foncé); }
@media (max-width: 760px) {
  .ann .tag { font-size: 10.5px; margin-bottom: 10px; }
  .card-work, .card-note, .card-pct { padding: 16px 18px 18px; }
  .card-work .no { display: none; }
  .card-pct .amount { font-size: 26px; }
  .card-pct::after { display: none; }
}

.card-note, .card-pct {
  position: relative; border-radius: 18px; padding: 18px 20px; color: var(--ink);
  background: linear-gradient(135deg, #f3e8ff, #fbd9ec 55%, #f9c6e0);
  box-shadow: 0 16px 44px rgb(147 51 234 / 0.22), 0 0 40px rgb(236 72 153 / 0.2);
}
.card-note h3 { font: italic 400 26px/1.1 var(--serif); margin: 0; }
.card-note .src, .card-pct .src { color: rgb(43 36 64 / 0.65); }
.card-pct h3 { font: 500 11px/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; margin: 0; color: var(--braise-foncé); }
.card-pct h3 sup { font-size: 0.8em; }
.card-pct .amount { font: 900 34px/1 var(--sans); font-stretch: 110%; margin-top: 6px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.card-pct::after {
  content: ''; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  border: 10px solid transparent; border-left: 14px solid var(--rose); border-right: 0;
}

.card-stack { display: flex; gap: 14px; align-items: flex-start; }
.card-stack .icon {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3e8ff, var(--braise-vive) 60%, var(--braise));
  box-shadow: 0 0 26px rgb(192 132 252 / 0.55); display: grid; place-items: center; font-size: 26px;
}
.card-stack .text { position: relative; border-radius: 16px; padding: 12px 16px 14px; margin-top: -4px; }
.card-stack .kicker { font: 500 10.5px/1.3 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }
.card-stack .headline { font: 800 24px/1.1 var(--sans); letter-spacing: -0.02em; color: var(--braise-foncé); margin: 4px 0 6px; }
.card-stack .title { font: italic 400 21px/1.2 var(--serif); color: var(--ink); }
.card-stack p { font-size: 14px; color: var(--ink-2); }
@media (max-width: 760px) {
  .card-stack .icon { width: 40px; height: 40px; font-size: 20px; }
  .card-stack .text { padding: 12px 14px 14px; margin-top: 0; }
  .card-stack p { font-size: 15px; }
}

/* La spire : au-delà du 0,1 %, un fil d'or qui monte jusqu'à la première fortune */
.spire {
  position: absolute; right: calc(var(--rpad) + (100% - var(--gutter) - var(--rpad)) * 0.005);
  width: 4px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(to top, var(--braise), var(--braise-vive) 55%, var(--rose));
  box-shadow: 0 0 12px 2px rgb(192 132 252 / 0.7), 0 0 40px 6px rgb(236 72 153 / 0.3);
}
.spire-tip {
  position: absolute; right: calc(var(--rpad) + (100% - var(--gutter) - var(--rpad)) * 0.005);
  width: 18px; height: 18px; margin-right: -7px; border-radius: 50%;
  background: #fff; border: 3px solid var(--rose); box-shadow: var(--glow);
  transform: translateY(50%); pointer-events: none; z-index: 4;
}
.spire-tip::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--rose);
  animation: ping 2.4s cubic-bezier(.2, .7, .3, 1) infinite;
}

.spire-mark {
  position: absolute; right: calc(var(--rpad) + (100% - var(--gutter) - var(--rpad)) * var(--fromRight, 1) + 26px);
  transform: translateY(50%); z-index: 8; max-width: 420px;
}
.spire-mark::after {
  content: ''; position: absolute; right: -20px; top: 50%; width: 14px;
  border-top: 1px dashed var(--braise);
}
.spire-icon { display: none; font-size: 26px; line-height: 1; }
.spire-card {
  position: relative; border-radius: 18px; padding: 16px 18px; font-size: 14px; color: var(--ink-2);
  border: 1px solid rgb(245 154 62 / 0.45);
}
.spire-card .k { font: 500 10.5px/1.3 var(--mono); color: var(--braise-foncé); text-transform: uppercase; letter-spacing: 0.12em; }
.spire-card h3 { font: italic 400 24px/1.1 var(--serif); color: var(--ink); margin: 6px 0 6px; }
.spire-card p { margin: 0; }
.spire-card .src { font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 8px; color: var(--muted); }
.spire-card .src a { color: inherit; }
.spire-card.top {
  background: linear-gradient(135deg, #f3e8ff, #fbd9ec 55%, #f9c6e0); color: rgb(46 18 69 / 0.85);
  border-color: var(--braise); box-shadow: 0 16px 44px rgb(147 51 234 / 0.28), 0 0 50px rgb(236 72 153 / 0.3);
}
.spire-card.top h3, .spire-card.top .k, .spire-card.top a, .spire-card.top .src { color: var(--ink); }
@media (max-width: 760px) {
  .spire { right: calc(var(--rpad) + 4px); }
  .spire-mark { right: calc(var(--rpad) + 20px); max-width: none; left: calc(var(--gutter) + 8px); }
  .spire-mark::after { display: none; }
  .spire-card { padding: 14px 16px 16px; font-size: 15px; line-height: 1.5; }
  .spire-card h3 { font-size: 22px; margin: 4px 0 6px; }
  .spire-mark.icon-only .spire-card { display: none; }
  .spire-mark.icon-only .spire-icon { display: block; text-align: right; padding-right: 26px; }
}

/* palier du 1 % : la carte posée sur sa ligne, au-dessus de la colonne qui continue */
.one-pct-line {
  position: absolute; left: var(--gutter); right: var(--rpad); z-index: 8; /* au-dessus de la bulle du pointeur */
  display: flex; justify-content: center; pointer-events: none;
}
.one-pct-card { display: flex; flex-direction: column; align-items: center; padding: 14px 26px 16px; pointer-events: auto; }
.one-pct-card .big { font-size: clamp(20px, 2.6vw, 30px); margin-top: 6px; }
.one-pct-card .amount { font-size: clamp(18px, 2.2vw, 26px); }
@media (max-width: 760px) { .one-pct-card { padding: 10px 14px 12px; } }

/* le jalon du 0,1 % annonce la rupture d'échelle */
.spire-mark.break .spire-card { box-shadow: var(--shadow), 0 0 0 1px rgb(74 108 247 / 0.6), 0 0 34px rgb(74 108 247 / 0.25); }
.spire-mark.break .spire-card .k { color: var(--bleu-foncé); }

/* paliers : héritage, taxe Zucman, rachat d'un média */
.palier-line {
  position: absolute; left: var(--gutter); right: var(--rpad); height: 0; z-index: 1;
  border-top: 1px solid var(--bleu); box-shadow: 0 0 14px 1px rgb(74 108 247 / 0.55); pointer-events: none;
}
.ann.palier { transform: none; }
.ann.palier.left { left: calc(var(--gutter) + 16px); }
.ann.palier.right { left: auto; right: calc(var(--rpad) + 40px); }
.card-palier {
  position: relative; border-radius: 18px; padding: 16px 18px; font-size: 14px; color: var(--ink-2);
  background: linear-gradient(160deg, rgb(74 108 247 / 0.12), transparent 55%), var(--verre);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgb(74 108 247 / 0.4);
}
.card-palier .k { font: 500 10.5px/1.3 var(--mono); color: var(--bleu-foncé); text-transform: uppercase; letter-spacing: 0.14em; }
.card-palier h3 { font: italic 400 25px/1.1 var(--serif); color: var(--ink); margin: 6px 0 6px; }
.card-palier .ratio { font: 800 15px/1.25 var(--sans); color: var(--braise-foncé); margin-bottom: 6px; }
.card-palier p { margin: 0; }
.card-palier .src { font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 8px; color: var(--muted); }
.card-palier .src a { color: inherit; }
@media (max-width: 760px) {
  .ann.palier.right { left: calc(var(--gutter) + 8px); right: auto; }
  .ann.palier.left { left: calc(var(--gutter) + 8px); }
  .card-palier { padding: 14px 16px 16px; font-size: 15px; line-height: 1.5; }
  .card-palier h3 { font-size: 22px; margin: 4px 0 6px; }
}

/* étiquette « seuil de pauvreté » : une ligne en travers du graphique + sa légende */
.pov {
  position: absolute; left: var(--gutter); right: var(--rpad); height: 0; z-index: 1;
  border-top: 1px dashed var(--dette); box-shadow: 0 0 12px 1px rgb(224 52 74 / 0.45); transform: translateY(-50%);
}
.pov .pov-chip {
  position: absolute; left: 12px; top: 0; transform: translateY(-50%);
  background: var(--dette); color: #fff; border-radius: 999px; padding: 6px 12px;
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 22px rgb(224 52 74 / 0.45);
}
.pov .pov-text {
  position: absolute; left: 12px; bottom: 12px; max-width: min(600px, calc(100% - 24px));
  background: var(--voile); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 12px; padding: 8px 12px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2);
  box-shadow: var(--shadow);
}
.pov .pov-text strong { color: var(--dette); }
.pov .pov-text .src { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; color: var(--muted); }
.pov .pov-text .src a { color: inherit; }
@media (max-width: 760px) {
  .pov .pov-text { padding: 7px 10px; left: 6px; bottom: 8px; max-width: calc(100% - 12px); }
  .pov .pov-chip { left: 6px; }
}

/* volée d'oiseaux au-dessus du 1 % : on est « aussi haut » (comme dans la vidéo) */
.flock { position: absolute; left: var(--gutter); right: 0; height: 260px; pointer-events: none; z-index: 1; }
.flight { position: absolute; left: 0; top: var(--y, 0); width: 100%; animation: fly var(--dur, 12s) linear var(--delay, 0s) infinite paused; }
.flock.flying .flight, .flock.flying .bird .wings { animation-play-state: running; }
.bird { display: block; width: calc(30px * var(--s, 1)); height: auto; color: #8a7ba8; opacity: calc(0.35 + var(--s, 1) * 0.35); }
.bird .wings { transform-box: view-box; transform-origin: 22px 12px; animation: flap var(--flap, 0.45s) ease-in-out infinite alternate paused; }
@keyframes fly { from { transform: translateX(103%); } to { transform: translateX(-10%) translateY(var(--rise, -40px)); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-0.35); } }
@media (max-width: 760px) { .bird { width: calc(22px * var(--s, 1)); } }

/* les cartes émergent du fond en entrant dans l'écran */
@supports (animation-timeline: view()) {
  .card-work, .card-note, .card-poor, .card-pct, .card-stack, .card-palier, .spire-card, .milestone {
    animation: surface linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}
/* pas de déplacement : spreadCards() mesure les cartes avec getBoundingClientRect() */
@keyframes surface { from { opacity: 0; filter: blur(8px); } }

/* HUD */
.hud {
  position: fixed; left: 16px; bottom: 16px; z-index: 25;
  border-radius: 20px; padding: 14px 18px; min-width: 260px;
  font-variant-numeric: tabular-nums; transition: opacity 0.5s;
}
.hud .row.lead { font: 400 22px/1.15 var(--serif); color: var(--ink-2); margin-bottom: 4px; }
.hud .row.lead b { font: 800 0.86em/1 var(--sans); letter-spacing: -0.02em; color: var(--braise-foncé); }
.hud .row { font-size: 13px; color: var(--ink-2); }
.hud .row b { color: var(--ink); }
.hud .row.you b { color: var(--rose-foncé); }
.hud .hint { font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.hud .hint.made-it { background: linear-gradient(135deg, var(--rose), var(--braise)); color: #fff; padding: 7px 11px; border-radius: 999px; box-shadow: 0 6px 18px rgb(236 72 153 / 0.4); }
.hud .progress { position: relative; height: 3px; background: var(--trait); border-radius: 2px; margin-top: 10px; }
.hud .progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--braise), var(--rose)); box-shadow: 0 0 10px var(--braise-vive); border-radius: 2px; transition: width .3s; }
.at-summit .hud, .at-start .hud { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .hud { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); min-width: 0; padding: 10px 14px 12px; }
  .hud .row { font-size: 12px; }
  .hud .row.lead { font-size: 19px; margin: 0; }
  .hud .hint { margin-top: 4px; }
  .hud .hint.made-it { padding: 4px 9px; }
  .hud .progress { margin-top: 6px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .hud { left: max(8px, env(safe-area-inset-left)); right: auto; bottom: 8px; width: 300px; padding: 8px 12px 10px; }
  .hud .row.lead { font-size: 16px; }
  .hud .row:not(.lead), .hud .hint { display: none; }
  .topbar { padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .summit { padding-top: 64px; }
}

/* Indicateur « vous êtes ici » : un repère sur la courbe, au milieu de l'écran */
.pointer {
  position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 6; pointer-events: none;
  transform: translate(var(--x, -999px), var(--y, -999px));
}
.pointer-inner { opacity: 0; transition: opacity 0.4s ease; }
.pointer.on .pointer-inner { opacity: 1; }
.pointer .readout-wrap {
  position: absolute; right: 4px; bottom: -0.6em;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.pointer .readout {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 800 clamp(16px, 1.8vw, 24px)/1 var(--sans); letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums; background: var(--voile); border-radius: 999px; padding: 6px 10px 6px 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow), 0 0 0 1px var(--trait);
}
.pointer .tri { color: var(--rose-foncé); font-size: 0.7em; }
.pointer .readout-label { font: 500 11px/1.2 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose-foncé); display: none; }
.pointer.at-top .readout-label, .pointer.in-spire .readout-label { display: block; }

/* Bas de page */
.start { position: relative; z-index: 5; padding: 4px 16px 64px; }
.start::before {
  content: ''; position: absolute; inset: 120px 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgb(251 247 239 / 0.8) 240px);
}
.start-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 6px var(--rpad) 28px var(--gutter); }
.debt-note {
  position: relative; margin: 0; max-width: 560px; font-size: 13px; line-height: 1.5; color: var(--ink-2);
  border-radius: 16px; padding: 12px 16px; border-left: 2px solid var(--dette);
}
.debt-note .k { display: block; font: 500 10.5px/1.3 var(--mono); color: var(--dette); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 4px; }
.debt-note b { color: var(--ink); }
.debt-note .src { font: 500 10px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 6px; color: var(--muted); }
.debt-note .src a { color: inherit; }
@media (max-width: 760px) {
  .start-top { flex-direction: column-reverse; gap: 20px; margin: 16px 0 28px; }
  .debt-note { font-size: 14px; line-height: 1.5; padding: 14px 16px; }
}
.start-inner { max-width: 1120px; margin: 0 auto; display: grid; gap: 28px 56px; grid-template-columns: auto 1fr; align-items: start; }
.start h1 { font-size: clamp(44px, 7vw, 104px); margin: 0; }
.start-copy { max-width: 34em; padding-top: 0.6em; }
.start .lede { font: 400 clamp(20px, 1.8vw, 25px)/1.32 var(--serif); color: var(--ink-2); max-width: 30em; margin: 0 0 14px; }
.start .lede b { font: 700 0.82em/1 var(--sans); color: var(--braise-foncé); }
.lede-credit { font: 500 10.5px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.lede-credit a { color: var(--ink-2); }
@media (max-width: 760px) {
  .start { padding-left: 20px; padding-right: 20px; }
  .start-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .start h1 { font-size: clamp(32px, 11.5vw, 46px); }
  .start .lede { font-size: 19px; margin-bottom: 14px; }
  .start-actions { margin-top: 22px; }
  .find-me .help { font-size: 13px; line-height: 1.5; }
}

.scroll-cue {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 8px;
  font: 500 11px/1 var(--mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.2em;
}
.start-top .scroll-cue { margin-top: 0; flex: none; }
.cue-arrow {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font: 400 18px/1 var(--sans); color: #fff; background: linear-gradient(135deg, #f472b6, var(--rose));
  box-shadow: 0 0 0 0 rgb(236 72 153 / 0.5); animation: jab-up 1.6s ease-in-out infinite;
}
@keyframes jab-up {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgb(236 72 153 / 0.45); }
  50% { transform: translateY(-6px); box-shadow: 0 0 0 10px rgb(236 72 153 / 0); }
}
#back-up { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }

.start-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 32px; margin-top: 26px; }
.find-row {
  display: flex; gap: 6px; padding: 6px; border-radius: 999px;
  background: rgb(255 255 255 / 0.8); box-shadow: 0 0 0 1px var(--trait), 0 10px 30px rgb(80 40 110 / 0.12);
  transition: box-shadow .3s;
}
.find-row:focus-within { box-shadow: 0 0 0 2px var(--braise-vive), 0 0 30px rgb(192 132 252 / 0.45); }
.find-row input {
  font: 500 16px/1.2 var(--sans); padding: 9px 4px 9px 14px; width: 14em; max-width: 100%;
  border: 0; background: transparent; color: var(--ink);
}
.find-row input::placeholder { color: var(--muted); }
.find-row input:focus-visible { outline: none; }
.find-me .help { font-size: 12.5px; color: var(--muted); margin-top: 10px; max-width: 32em; padding-left: 14px; }
.find-status { font: 500 12px/1.4 var(--mono); color: var(--braise-foncé); margin-top: 6px; padding-left: 14px; }
.find-status:empty { display: none; }
@media (max-width: 760px) { .find-row input { width: auto; flex: 1; min-width: 0; } }

/* l'épingle du visiteur */
.you-pin { position: absolute; z-index: 6; width: 24px; height: 32px; transform: translateX(-50%); pointer-events: none; }
.you-pin svg { display: block; width: 24px; height: 32px; filter: drop-shadow(0 2px 6px rgb(236 72 153 / 0.5)); }
.you-pin .ring {
  position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; border: 1px solid var(--rose); animation: ping 1.6s ease-out infinite;
}
@keyframes ping { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.8); opacity: 0; } }
.you-pin .tag {
  position: absolute; bottom: 40px; left: -12px; white-space: nowrap;
  border-radius: 14px; padding: 8px 12px; border: 1px solid rgb(236 72 153 / 0.45);
  font: 500 13px/1.4 var(--sans); color: var(--ink-2);
}
.you-pin .tag b { color: var(--rose-foncé); }
.you-pin.tag-left .tag { left: auto; right: -12px; }
@media (max-width: 760px) { .you-pin .tag { font-size: 12px; white-space: normal; width: max-content; max-width: 62vw; } }

.start .explain {
  grid-column: 1 / -1; margin-top: 40px;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px 40px; align-items: center;
}
@media (max-width: 900px) { .start .explain { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .start .explain { margin-top: 8px; gap: 24px; }
  .shares-text { font-size: 19px; }
  .s-row { grid-template-columns: 76px 1fr; }
  .source-note { font-size: 13px; line-height: 1.55; }
  .sources ol { padding-left: 18px; }
  .sources li { margin-bottom: 10px; line-height: 1.5; }
}
.shares { position: relative; border-radius: 22px; padding: 22px 24px; }
.shares h2 { font: italic 400 32px/1 var(--serif); margin-bottom: 6px; }
.shares .sub { font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.s-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; margin: 10px 0; }
.s-row .lbl { font: 500 10.5px/1.15 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.s-row.pop .lbl { color: var(--ink-2); }
.s-row.wealth .lbl { color: var(--braise-foncé); }
.s-bar { display: flex; gap: 2px; height: 32px; border-radius: 8px; overflow: hidden; }
.s-bar span { display: grid; place-items: center; color: #fff; font: 600 11px/1 var(--mono); white-space: nowrap; overflow: hidden; min-width: 0; text-shadow: 0 1px 3px rgb(0 0 0 / 0.4); }
.s-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12px; color: var(--ink-2); margin-top: 14px; }
.s-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.shares-text { font: 400 clamp(20px, 1.7vw, 24px)/1.35 var(--serif); color: var(--ink-2); }
.shares-text b { font: 800 1.15em/1 var(--sans); letter-spacing: -0.03em; color: var(--braise-foncé); }

.source-note { font-size: 12.5px; line-height: 1.6; color: var(--muted); grid-column: 1 / -1; margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--trait); }
.sources { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); }
.sources h2 { font: italic 400 32px/1 var(--serif); color: var(--ink); margin-bottom: 16px; }
.sources ol { padding-left: 22px; margin: 0; columns: 2 320px; column-gap: 40px; }
.sources li { margin-bottom: 8px; break-inside: avoid; }
.sources li::marker { font: 500 11px var(--mono); color: var(--muted); }
.sources a { color: var(--ink-2); }
.sources a:hover { color: var(--braise-foncé); }
.back-up {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  margin-top: 24px; padding: 48px 0 8px; border-top: 1px solid var(--trait); text-align: center;
}
.back-up p { margin: 0; font: italic 400 clamp(26px, 3vw, 40px)/1.1 var(--serif); color: var(--ink); max-width: 20ch; }
@media (max-width: 760px) { .start { padding-bottom: 120px; } }

/* Sommet (haut de page), posé par-dessus le haut du graphique */
.summit { position: relative; z-index: 7; padding: 96px 16px 32px; }
.summit-inner { max-width: 1040px; margin: 0 auto; }
@media (min-width: 761px) { .summit { padding-right: 250px; } }
@media (min-width: 1200px) { .summit { padding-left: calc(var(--gutter) + 8px); } }
.summit-stack { max-width: 580px; margin: 0 auto 40px; display: flex; flex-direction: column; gap: 16px; }
.summit-mark { padding: 30px 30px 32px; }
.summit-mark .big { font-size: clamp(36px, 6vw, 68px); }
.summit-mark .amount { font-size: clamp(30px, 4.4vw, 52px); }
.keep-going {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px;
  border-radius: 22px; padding: 20px 22px;
}
.keep-going h2 { font: italic 400 28px/1.05 var(--serif); margin: 0 0 6px; }
.keep-going p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.keep-going p b { color: var(--ink); }
.summit-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.summit .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; margin: 20px 0 20px; font: 500 11px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.summit .stats b { color: var(--braise-foncé); }
@media (max-width: 760px) {
  .summit { padding: 80px 20px 32px; }
  .summit-stack { margin-bottom: 64px; gap: 20px; }
  .keep-going { padding: 18px 20px 20px; }
  .keep-going p { line-height: 1.55; }
  .keep-going .btn { width: 100%; }
  .summit-actions .btn { flex: 1 1 100%; }
  .summit .stats { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
}

.welcome {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto; overscroll-behavior: contain;
  display: grid; place-items: center; padding: 32px 22px;
  background: radial-gradient(80% 60% at 50% 0%, #f3e8ff, var(--paper) 70%);
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.welcome[hidden] { display: none; }
.welcome.leaving { opacity: 0; visibility: hidden; }
.welcoming { overflow: hidden; }
.welcoming .hud, .welcoming .pointer, .welcoming .topbar { visibility: hidden; }
.welcome-inner { max-width: 34em; text-align: center; }
.welcome-kicker { font: 600 14px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--braise-foncé); margin: 0 0 16px; }
.welcome-title { font: 900 clamp(34px, 6vw, 60px)/1.05 var(--sans); font-stretch: 105%; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 24px; }
.welcome-title em { display: block; font: italic 400 1.1em/1.05 var(--serif); color: var(--rose-foncé); letter-spacing: 0; }
.welcome-text p { font: 400 clamp(19px, 2vw, 22px)/1.5 var(--sans); color: var(--ink); margin: 0 0 16px; }
.welcome-text b { color: var(--braise-foncé); }
.welcome-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 30px; }
.welcome-go { font: 700 18px/1 var(--sans); letter-spacing: 0.02em; text-transform: none; padding: 18px 30px; min-width: min(100%, 320px); }
.welcome-skip { font: 500 17px/1.4 var(--sans); color: var(--ink-2); }

@media (max-width: 760px) {
  body { font-size: 18px; }
  .ann, .card-palier, .spire-card, .card-stack p { font-size: 17px; line-height: 1.5; }
  .ann .src, .card-palier .src, .spire-card .src, .pov .pov-text .src, .debt-note .src {
    font: 500 13px/1.45 var(--sans); letter-spacing: 0; text-transform: none;
  }
  .ann .tag, .card-palier .k, .spire-card .k, .card-stack .kicker, .debt-note .k, .one-mark-card .kicker, .one-mark-card .next, .card-pct h3 {
    font: 700 13px/1.35 var(--sans); letter-spacing: 0.04em;
  }
  .card-work h3, .card-note h3, .card-palier h3, .spire-card h3 { font-size: 25px; }
  .card-poor h3 { font-size: 21px; }
  .pov .pov-chip { font: 700 12px/1 var(--sans); letter-spacing: 0.04em; padding: 5px 10px; }
  .pov .pov-text { font-size: 15px; line-height: 1.45; }
  .debt-note { font-size: 16px; }
  .class-label { font: 700 12px/1 var(--sans); letter-spacing: 0.04em; }
  .tick > .label { font: 600 12px/16px var(--sans); letter-spacing: 0; }
  .pct-axis { font: 600 12px/1 var(--sans); }
  .marker.flag { font-size: 13px; }
  .milestone { font-size: 18px; }
  .hud .row { font-size: 15px; }
  .hud .row.lead { font-size: 21px; }
  .hud .hint { font: 600 13px/1.4 var(--sans); letter-spacing: 0.02em; }
  .start .lede { font: 400 19px/1.5 var(--sans); color: var(--ink); }
  .lede-credit { font: 500 14px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
  .find-me .help { font-size: 16px; }
  .find-status { font: 600 15px/1.4 var(--sans); }
  .find-row input { font-size: 18px; }
  .btn { font: 700 15px/1.1 var(--sans); letter-spacing: 0.02em; text-transform: none; }
  .scroll-cue { font: 700 14px/1 var(--sans); letter-spacing: 0.06em; }
  .shares .sub, .s-row .lbl, .s-legend { font: 600 14px/1.3 var(--sans); letter-spacing: 0; }
  .s-bar span { font: 700 13px/1 var(--sans); }
  .shares-text { font: 400 19px/1.5 var(--sans); color: var(--ink); }
  .source-note { font-size: 15px; }
  .sources { font-size: 15px; }
  .keep-going p { font-size: 17px; }
  .summit .stats { font: 600 14px/1.5 var(--sans); letter-spacing: 0.02em; text-transform: none; }
  .one-mark-card p { font: 400 18px/1.45 var(--sans); }
  .topbar nav a { font: 700 14px/1.4 var(--sans); letter-spacing: 0.04em; }
  .pointer .readout { font-size: 18px; }
  .pointer .readout-label { font: 700 13px/1.2 var(--sans); letter-spacing: 0.04em; }
  .you-pin .tag { font-size: 15px; }
}

/* téléphones : le grain animé plein écran et les flous de 16 px font saccader le défilement sur iOS */
@media (max-width: 760px) {
  body::after { animation: none; inset: 0; }
  .glass, .hud, .topbar > *, .btn.ghost, .card-work, .card-palier, .spire-card, .keep-going, .shares, .debt-note, .card-stack .text, .you-pin .tag, .pov .pov-text, .one-mark-card {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :root { --verre: rgb(255 255 255 / 0.88); }
  .card-palier { background: linear-gradient(160deg, rgb(74 108 247 / 0.12), transparent 55%), var(--verre); }
  .pointer .readout { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(250 245 251 / 0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .welcome { transition: none; }
  body::after, .cue-arrow, .you-pin .ring, .spire-tip::after, .title-stack > span > i { animation: none; }
  .card-work, .card-note, .card-poor, .card-pct, .card-stack, .card-palier, .spire-card, .milestone { animation: none; }
  .pointer-inner, .btn, .hud .progress span { transition: none; }
  .flight { animation: none; transform: translateX(var(--x, 20%)); }
  .bird .wings { animation: none; }
}

/* téléphones : cibles tactiles de 44 px */
@media (max-width: 760px) {
  .btn, .find-row input { min-height: 44px; }
  .find-me { flex: 1 1 100%; min-width: 0; }
  .topbar nav a { display: inline-block; padding: 14px 16px; margin: -14px -16px; }
}