/* Pages questions chiffrons.fr — mêmes jetons que le blog et le
   simulateur : fond clair, accent bleu, Geist / Geist Mono. */

:root {
  --bg: #fafaf9; --surface: #fff; --fg: #0c0a09; --muted: #52525b;
  --border: #e4e4e7; --accent: #1e40af; --positif: #15803d; --negatif: #b91c1c;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font-family:'Geist',system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family:'Geist Mono',ui-monospace,monospace; font-variant-numeric: tabular-nums; }

.site-header { border-bottom:1px solid var(--border); padding:1rem 1.5rem; background:var(--surface); }
.site-header nav { max-width:900px; margin:0 auto; display:flex; gap:1.25rem; align-items:center;
  font-family:'Geist Mono',monospace; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.03em; flex-wrap:wrap; }
.site-header nav a { color: var(--muted); }
.site-header nav a.brand { color: var(--fg); font-weight:600; margin-right:auto; }

main { max-width:900px; margin:0 auto; padding:2rem 1.5rem 4rem; }
.fil { font-size:.8rem; color:var(--muted); margin:0 0 1rem; }
.fil a { color: var(--muted); }
h1 { font-size:clamp(1.6rem,3.6vw,2.25rem); line-height:1.2; margin:0 0 1rem; letter-spacing:-.02em; }
h2 { font-size:1.25rem; margin:2.5rem 0 .75rem; }
h3 { font-size:1rem; margin:1.5rem 0 .5rem; }

/* Le bloc réponse : ce que les moteurs extraient. */
.reponse { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:.5rem; padding:1.1rem 1.25rem; margin:0 0 1.5rem; }
.reponse .chiffre { font-family:'Geist Mono',monospace; font-size:clamp(1.6rem,4vw,2.1rem);
  font-weight:700; line-height:1.1; display:block; margin-bottom:.35rem; }
.reponse .chiffre[data-sens="positif"] { color: var(--positif); }
.reponse .chiffre[data-sens="negatif"] { color: var(--negatif); }
.reponse p { margin:0; }

table { width:100%; border-collapse:collapse; font-size:.9rem; margin:1rem 0; }
.tableau { overflow-x:auto; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--border); }
th { font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; }
td.num, th.num { text-align:right; font-family:'Geist Mono',monospace; font-variant-numeric:tabular-nums; white-space:nowrap; }
td.num[data-sens="positif"] { color: var(--positif); }
td.num[data-sens="negatif"] { color: var(--negatif); }
tbody tr:hover { background: #f4f4f5; }

.liste-questions { list-style:none; padding:0; margin:0; }
.liste-questions li { border-bottom:1px solid var(--border); padding:.55rem 0;
  display:flex; gap:1rem; align-items:baseline; }
.liste-questions a { flex:1; }
.liste-questions .num { font-family:'Geist Mono',monospace; font-size:.82rem; white-space:nowrap; }
.liste-questions .num[data-sens="positif"] { color: var(--positif); }
.liste-questions .num[data-sens="negatif"] { color: var(--negatif); }

.cartes { display:grid; gap:.75rem; margin:1rem 0; }
@media (min-width:40rem){ .cartes { grid-template-columns:1fr 1fr; } }
.carte { border:1px solid var(--border); background:var(--surface); border-radius:.5rem; padding:.9rem 1rem; }
.carte a { font-weight:600; }
.carte p { margin:.25rem 0 0; font-size:.85rem; color:var(--muted); }

.note { font-size:.87rem; color:var(--muted); border-top:1px solid var(--border);
  margin-top:2.5rem; padding-top:1.25rem; }
.note ul { padding-left:1.1rem; }
.cta { background:var(--surface); border:1px solid var(--border); border-radius:.5rem;
  padding:1.1rem 1.25rem; margin:2rem 0 0; }
.cta p { margin:.25rem 0 0; font-size:.9rem; color:var(--muted); }