/* finances-france-data — récit « Les finances, en clair » (templates/recit.php)
 *
 * Même identité que le thème expli et que le récit climat : fond bleu encre,
 * une seule famille (Archivo) jouée sur sa chasse, couleur réservée aux données. */

:root {
	--fond: #0e1b2c;
	--fond-2: #132439;
	--fond-3: #1a2e48;
	--trame: #233650;
	--texte: #e8eef5;
	--texte-2: #a9b8cc;
	--texte-3: #71849e;
	--deficit: #f4a261;   /* déficit hors intérêts */
	--interets: #e76f51;  /* intérêts de la dette */
	--excedent: #3fc1a4;  /* excédent, et couleur du dossier */
	--depenses: #f28db2;  /* retraites : dépenses */
	--ressources: #7da7f7;/* retraites : ressources */

	--f: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--large: 125;
	--etroit: 72;

	--gouttiere: clamp(16px, 4vw, 56px);
	--bp-md: 768px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }

body {
	margin: 0; background: var(--fond); color: var(--texte);
	font: 400 clamp(16px, 1.05vw, 18px)/1.6 var(--f); font-variation-settings: "wdth" 100;
	-webkit-font-smoothing: antialiased; overflow-x: hidden;
}
strong { font-weight: 700; }
a { color: inherit; text-underline-offset: .18em; }

/* ── Barre du haut ─────────────────────────────────────────────── */
.topbar {
	position: fixed; inset: 0 0 auto; z-index: 50;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 4px;
	padding: 14px var(--gouttiere) 10px; pointer-events: none;
	background: linear-gradient(rgba(14, 27, 44, .9), rgba(14, 27, 44, 0));
}
.topbar a { pointer-events: auto; color: var(--texte); text-decoration: none; }
.topbar__logo { font-size: 21px; font-weight: 800; font-variation-settings: "wdth" var(--large); letter-spacing: -.03em; }
.topbar__logo span { font-weight: 300; }
.topbar__nav { display: none; gap: 20px; font-size: 15px; font-weight: 500; font-variation-settings: "wdth" var(--etroit); }
.topbar__nav a { color: var(--texte-2); }
.topbar__nav a.is-active, .topbar__nav a:hover { color: var(--texte); }
.topbar__fil { flex-basis: 100%; order: 3; }
.topbar__fil ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 14px; font-variation-settings: "wdth" var(--etroit); }
.topbar__fil li { color: var(--texte-2); }
.topbar__fil li + li::before { content: "/"; margin: 0 8px; color: var(--texte-3); }
.topbar__fil a { color: inherit; }
.topbar__fil a:hover, .topbar__fil [aria-current] { color: var(--texte); }
.topbar__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--trame); }
.topbar__progress span { display: block; height: 100%; width: 100%; background: var(--texte); transform-origin: 0 50%; transform: scaleX(0); }
@media (min-width: 768px) { .topbar__nav { display: flex; } }
.admin-bar .topbar { top: 32px; }
@media (max-width: 782px) { .admin-bar .topbar { top: 46px; } }

/* ── Chapitres ────────────────────────────────────────────────── */
.chapter { position: relative; }
.stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--fond); }
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.chapter__head {
	position: absolute; z-index: 3; left: var(--gouttiere); top: clamp(96px, 15vh, 150px);
	max-width: min(30rem, calc(100% - 2 * var(--gouttiere)));
}
.chapter__head h2 {
	margin: 0 0 14px; font-size: clamp(36px, 5vw, 76px); line-height: .95; font-weight: 900;
	font-variation-settings: "wdth" var(--large); letter-spacing: -.035em;
}
.chapter__head p { margin: 0; color: var(--texte-2); }
.chapter__head--static { position: relative; left: auto; top: auto; max-width: 40rem; }
.numero { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 600; font-variation-settings: "wdth" var(--etroit); color: var(--texte-3); }

.source {
	position: absolute; z-index: 3; left: var(--gouttiere); bottom: 16px; margin: 0; max-width: calc(100% - 2 * var(--gouttiere));
	font-size: 14px; font-variation-settings: "wdth" var(--etroit); color: var(--texte-3);
}
.source a { color: var(--texte-2); }
a.more { display: inline-block; margin-top: 12px; color: var(--texte); }

/* ── Infobulle ────────────────────────────────────────────────── */
.bulle {
	position: fixed; z-index: 60; pointer-events: none; padding: 7px 10px; border-radius: 4px;
	background: var(--texte); color: var(--fond); font-size: 14px; line-height: 1.3; font-variation-settings: "wdth" var(--etroit); white-space: nowrap;
	transform: translate(-50%, calc(-100% - 14px));
}
.bulle b { font-weight: 800; font-variation-settings: "wdth" 100; }
.bulle[hidden] { display: none; }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gouttiere); pointer-events: none; }
.hero__title {
	margin: 0; font-size: clamp(60px, 12vw, 210px); line-height: .82; font-weight: 900;
	font-variation-settings: "wdth" var(--large); letter-spacing: -.05em; text-shadow: 0 4px 60px rgba(14, 27, 44, .55);
}
.hero__lede { margin: 28px 0 0; max-width: 32ch; font-size: clamp(18px, 1.5vw, 23px); text-shadow: 0 2px 20px rgba(14, 27, 44, .7); }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; width: 2px; height: 54px; background: rgba(232, 238, 245, .25); overflow: hidden; }
.scroll-cue span { position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--texte); animation: cue 1.8s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes cue { to { top: 100%; } }

/* ── Lectures numériques ──────────────────────────────────────── */
.readout {
	position: absolute; z-index: 3; right: var(--gouttiere); bottom: clamp(52px, 9vh, 100px);
	display: flex; flex-direction: column; align-items: flex-end; text-align: right; pointer-events: none;
	text-shadow: 0 2px 30px rgba(14, 27, 44, .8);
}
.readout__year { font-size: clamp(64px, 12vw, 200px); line-height: .8; font-weight: 900; font-variation-settings: "wdth" var(--large); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.readout__value { margin-top: 10px; font-size: clamp(24px, 2.8vw, 42px); line-height: 1; font-weight: 700; font-variation-settings: "wdth" var(--etroit); font-variant-numeric: tabular-nums; }
.readout__label { margin-top: 8px; font-size: 15px; line-height: 1.3; font-variation-settings: "wdth" var(--etroit); color: var(--texte-2); }
.readout--stripes { opacity: 0; }
.readout--spiral .readout__year { font-size: clamp(56px, 9vw, 150px); }
.readout--spiral .readout__month { color: var(--texte); }

/* Les légendes du premier chapitre : du texte posé sur la scène, sans encadré. */
.caption-stack { position: absolute; z-index: 3; left: var(--gouttiere); bottom: clamp(56px, 10vh, 110px); width: min(26rem, 58vw); pointer-events: none; }
.caption {
	position: absolute; left: 0; bottom: 0; margin: 0;
	font-size: clamp(19px, 1.6vw, 25px); line-height: 1.3; font-weight: 500;
	text-shadow: 0 1px 2px rgba(14, 27, 44, .9), 0 0 30px rgba(14, 27, 44, .9);
	opacity: 0; transform: translateY(20px);
}

.legend-rings { position: absolute; z-index: 3; right: var(--gouttiere); top: clamp(96px, 15vh, 150px); margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 2; font-variation-settings: "wdth" var(--etroit); color: var(--texte-2); }
.ring { display: inline-block; width: 22px; height: 3px; margin-right: 10px; vertical-align: middle; }
.ring--15 { background: var(--deficit); }
.ring--20 { background: var(--interets); }

/* ── Suite ────────────────────────────────────────────────────── */
.outro { padding: 120px var(--gouttiere) 140px; background: var(--fond-2); }
.outro h2 { margin: 0 0 40px; font-size: clamp(44px, 8vw, 128px); line-height: .88; font-weight: 900; font-variation-settings: "wdth" var(--large); letter-spacing: -.045em; }
.cards { display: grid; grid-template-columns: 1fr; gap: 0 32px; }
.card { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; border-top: 1px solid var(--trame); color: var(--texte); text-decoration: none; }
.card span { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; font-weight: 800; font-variation-settings: "wdth" var(--etroit); }
.card small { font-size: 16px; color: var(--texte-2); }
.card:hover span { text-decoration: underline; text-underline-offset: .15em; }
.outro__updated { margin: 40px 0 0; font-size: 14px; font-variation-settings: "wdth" var(--etroit); color: var(--texte-3); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(4, 1fr); } }

@media (max-width: 767px) {
	.ppm { top: auto; bottom: calc(38vh + 96px); }
	.note--keeling { display: none; }
	.legend-rings { top: auto; bottom: 14px; left: var(--gouttiere); right: auto; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }

/* ── Éléments propres au récit finances ───────────────────────── */
.compteur { position: absolute; z-index: 3; right: var(--gouttiere); top: clamp(96px, 15vh, 150px); text-align: right; }
.compteur__n { display: block; font-size: clamp(72px, 12vw, 200px); line-height: .8; font-weight: 900; font-variation-settings: "wdth" var(--large); letter-spacing: -.05em; color: var(--deficit); font-variant-numeric: tabular-nums; }
.compteur__l { font-size: 17px; font-variation-settings: "wdth" var(--etroit); color: var(--texte-2); }

.graphe { display: block; width: 100%; overflow: visible; }
.graphe text { font: 400 13px var(--f); font-variation-settings: "wdth" var(--etroit); fill: var(--texte-3); }
.graphe .grille line { stroke: var(--trame); }
.graphe .note { font-weight: 600; font-size: 14px; fill: var(--texte); }
.graphe--deficit { position: absolute; z-index: 2; left: var(--gouttiere); right: var(--gouttiere); bottom: 64px; width: calc(100% - 2 * var(--gouttiere)); height: 46vh; }
.graphe--interets, .graphe--pouvoir, .graphe--parts { height: clamp(220px, 34vh, 340px); margin-top: 32px; }

.bloc { padding: clamp(110px, 16vh, 170px) var(--gouttiere) 80px; }
.bloc--budget { background: var(--fond-2); }
.source--statique { position: static; margin-top: 14px; }

.comparaison { display: grid; gap: 10px; margin-top: 36px; max-width: 60rem; }
.comparaison__ligne { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; align-items: center; gap: 16px; font-size: 16px; font-variation-settings: "wdth" var(--etroit); }
.comparaison__barre { position: relative; height: 26px; }
.comparaison__barre i { position: absolute; inset: 0 auto 0 0; width: var(--l); background: var(--fond-3); border-radius: 0 3px 3px 0; transform-origin: 0 50%; }
.comparaison__barre b { position: absolute; left: calc(var(--l) + 10px); top: 50%; transform: translateY(-50%); font-weight: 700; white-space: nowrap; }
.comparaison__ligne.is-dette { color: var(--texte); font-weight: 700; }
.comparaison__ligne.is-dette i { background: var(--interets); }

.pieces { position: relative; height: clamp(320px, 48vh, 500px); margin-top: 24px; }
.pieces canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.reglage { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 17px; font-variation-settings: "wdth" var(--etroit); }
.reglage input { flex: 1; max-width: 520px; accent-color: var(--excedent); }
.reglage output { min-width: 4ch; font-size: 26px; font-weight: 900; font-variation-settings: "wdth" var(--large); color: var(--excedent); }

.stage--retraites { display: grid; grid-template-columns: 1fr; }
.etapes { position: absolute; z-index: 3; left: var(--gouttiere); top: clamp(100px, 15vh, 150px); width: min(26rem, calc(100% - 2 * var(--gouttiere))); }
.etape { position: absolute; inset: 0 auto auto 0; opacity: 0; visibility: hidden; }
.etape h2 { margin: 0 0 14px; font-size: clamp(32px, 4.2vw, 62px); line-height: .95; font-weight: 900; font-variation-settings: "wdth" var(--large); letter-spacing: -.035em; }
.etape p { margin: 0 0 12px; color: var(--texte-2); }
.etape__nb { font-size: 14px; font-variation-settings: "wdth" var(--etroit); color: var(--texte-3) !important; }
.scenarios { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.scenarios button { padding: 8px 14px; border: 0; border-radius: 18px; background: var(--fond-3); color: var(--texte); font: 600 15px var(--f); font-variation-settings: "wdth" var(--etroit); cursor: pointer; }
.scenarios button:hover { background: var(--trame); }
.scenarios button[aria-pressed="true"] { background: var(--texte); color: var(--fond); }
.scenario__effet { color: var(--texte) !important; font-size: 18px; line-height: 1.4; }
.scenario__effet b { font-weight: 800; color: var(--interets); }
.visuel-retraites { position: absolute; z-index: 2; right: var(--gouttiere); bottom: 64px; width: calc(100% - 2 * var(--gouttiere)); height: 44vh; }
.visuel-retraites svg { width: 100%; height: 100%; overflow: visible; }
.visuel-retraites text { font: 400 13px var(--f); font-variation-settings: "wdth" var(--etroit); fill: var(--texte-3); }
.visuel-retraites .note { font-weight: 600; font-size: 15px; fill: var(--texte); }
@media (min-width: 1024px) {
	.visuel-retraites { top: 14vh; bottom: 70px; width: 58vw; height: auto; }
}
@media (max-width: 1023px) {
	.etapes { top: clamp(88px, 11vh, 120px); }
	.etape h2 { font-size: clamp(28px, 6vw, 44px); }
	.etape p { font-size: 15px; line-height: 1.45; }
	.etape p:not(.scenario__effet):not(:first-of-type) { display: none; }
	.scenarios button { padding: 6px 11px; font-size: 14px; }
	.visuel-retraites { height: 34vh; bottom: 48px; }
}

.sous-titre { margin: 64px 0 0; font-size: clamp(26px, 3vw, 42px); line-height: 1; font-weight: 800; font-variation-settings: "wdth" var(--etroit); }