/* Cartes intégrables chiffrons.fr — feuille autonome, servie en cache long. */
:root {
  --bg: #ffffff; --fg: #0c0a09; --muted: #52525b; --border: #e4e4e7;
  --accent: #1e40af; --positif: #15803d; --negatif: #b91c1c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0a09; --fg: #fafaf9; --muted: #a1a1aa; --border: #292524;
    --accent: #93c5fd; --positif: #4ade80; --negatif: #fca5a5;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
.mono { font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.carte {
  border: 1px solid var(--border); border-radius: .75rem;
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem;
  min-height: calc(100vh - 2px);
}
.carte-theme {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.carte-titre { font-size: 1.02rem; font-weight: 600; margin: 0; line-height: 1.3; letter-spacing: -0.01em; }
.carte-titre a { color: inherit; text-decoration: none; }
.carte-titre a:hover { text-decoration: underline; }

.chiffre { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.chiffre-valeur { font-size: 1.9rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.chiffre-valeur[data-sens="economie"] { color: var(--positif); }
.chiffre-valeur[data-sens="depense"] { color: var(--negatif); }
.chiffre-valeur[data-sens="neutre"] { color: var(--muted); }
.chiffre-unite { font-size: .82rem; color: var(--muted); }
.chiffre-cumul { font-size: .78rem; color: var(--muted); margin: 0; }

.pied {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem; flex-wrap: wrap; border-top: 1px solid var(--border);
  padding-top: .6rem; font-size: .78rem;
}
.pied a { text-decoration: none; font-weight: 600; }
.pied a:hover { text-decoration: underline; }
.marque {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: .7rem;
  color: var(--muted); text-decoration: none; letter-spacing: .02em;
}
.marque:hover { color: var(--accent); }

/* Titre lu par les technologies d'assistance sans occuper de place : le
   simulateur compact tient dans un cadre de 560 px de haut où un titre
   visible mangerait une mesure et demie, mais un document sans <h1> ne
   s'annonce pas — et une iframe est un document à part entière. */
.titre-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- Simulateur compact ---- */
.sim { display: flex; flex-direction: column; height: 100vh; border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; }
.sim-tete { padding: .8rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg); }
.sim-solde { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.sim-valeur { font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.sim-valeur[data-signe="positif"] { color: var(--positif); }
.sim-valeur[data-signe="negatif"] { color: var(--negatif); }
.sim-valeur[data-signe="neutre"] { color: var(--muted); }
.sim-unite, .sim-detail { font-size: .78rem; color: var(--muted); }
.sim-detail { margin: .25rem 0 0; }
.sim-corps { overflow-y: auto; flex: 1; padding: .5rem 1rem 1rem; }
.sim-theme { border-bottom: 1px solid var(--border); }
.sim-theme > summary { cursor: pointer; padding: .55rem 0; font-weight: 600; font-size: .875rem; display: flex; gap: .5rem; align-items: baseline; list-style: none; }
.sim-theme > summary::-webkit-details-marker { display: none; }
.sim-theme > summary::before { content: '▸'; color: var(--muted); font-size: .75rem; transition: transform .15s; }
.sim-theme[open] > summary::before { transform: rotate(90deg); }
.sim-compte { margin-left: auto; font-size: .72rem; color: var(--muted); font-weight: 400; }
.sim-liste { list-style: none; margin: 0; padding: 0 0 .5rem; }
.sim-mesure { display: flex; gap: .5rem; align-items: flex-start; padding: .3rem 0; }
.sim-mesure input { margin-top: .2rem; width: .95rem; height: .95rem; accent-color: var(--accent); flex: none; }
.sim-mesure label { font-size: .84rem; cursor: pointer; }
.sim-montant { font-size: .75rem; }
.sim-montant[data-sens="economie"] { color: var(--positif); }
.sim-montant[data-sens="depense"] { color: var(--negatif); }
.sim-montant[data-sens="neutre"] { color: var(--muted); }
.sim-pied { border-top: 1px solid var(--border); padding: .6rem 1rem; display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; flex-wrap: wrap; font-size: .78rem; }
.sim-pied a { text-decoration: none; font-weight: 600; }
.sim-pied a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }