/* Vista — charte Rotary Lab (docs/design/rotary-lab-design-system-v1.md §8), données en couleur
   (docs/design/vista-couleurs-donnees.md). Monochrome, filets fins, zéro arrondi, zéro ombre. */
:root {
  --rl-ink: #000000; --rl-paper: #ffffff; --rl-muted: #555555; --rl-muted-on-dark: #aaaaaa;
  --rl-line-subtle: #e5e5e5; --rl-surface: #f5f5f5; --rl-surface-dark: #1a1a1a; --rl-danger: #d92d20;
  --rl-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rl-text-display: clamp(40px, 5vw, 72px); --rl-text-kpi: 48px; --rl-text-heading: 16px;
  --rl-text-body: 15px; --rl-text-ui: 13px; --rl-text-caption: 12px; --rl-text-micro: 11px; /* [app] 10px dans la charte : relevé à 11px (lisibilité des liens et en-têtes) */
  --rl-hairline: 1px solid var(--rl-ink);
  --rl-space-1: 4px; --rl-space-2: 8px; --rl-space-3: 12px; --rl-space-4: 16px; --rl-space-6: 24px;
  --rl-space-8: 32px; --rl-space-12: 48px; --rl-page-gutter: clamp(16px, 5vw, 64px);
  /* Données [app] */
  --vista-calc: #000000; --vista-input: #1d4ed8; --vista-positive: #3a7a5a; --vista-negative: #a8473c; /* [app] adoucis (Nicolas 2026-11-14), AA ≥ 5:1 */
}
* { box-sizing: border-box; border-radius: 0; box-shadow: none; }
html, body { margin: 0; background: var(--rl-paper); color: var(--rl-ink); font-family: var(--rl-font); }
body { font-size: var(--rl-text-ui); line-height: 1.3; display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
body.nu { display: block; }
a { color: inherit; }
nav.lateral { background: var(--rl-ink); color: var(--rl-paper); padding: var(--rl-space-6) var(--rl-space-4); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
nav.lateral .logo { font-weight: 700; font-size: var(--rl-text-heading); letter-spacing: 0; margin-bottom: var(--rl-space-8); display: block; text-decoration: none; }
nav.lateral a.lien { display: block; padding: var(--rl-space-2) var(--rl-space-2); text-decoration: none; text-transform: uppercase; font-size: var(--rl-text-micro); letter-spacing: .04em; }
nav.lateral a.lien.actif, nav.lateral a.lien:hover { background: var(--rl-surface-dark); font-weight: 700; }
nav.lateral .groupe-nav { color: var(--rl-muted-on-dark); font-size: var(--rl-text-micro); text-transform: uppercase; margin: var(--rl-space-6) 0 var(--rl-space-1); }
nav.lateral .compte { margin-top: var(--rl-space-12); color: var(--rl-muted-on-dark); font-size: var(--rl-text-caption); }
nav.lateral .compte button { background: none; border: 1px solid var(--rl-paper); color: var(--rl-paper); }
main { padding: var(--rl-space-8) var(--rl-page-gutter) var(--rl-space-12); min-width: 0; }
h1 { font-size: var(--rl-text-display); line-height: .78; font-weight: 700; text-transform: uppercase; margin: var(--rl-space-6) 0 var(--rl-space-8); }
h2 { font-size: var(--rl-text-heading); font-weight: 700; text-transform: uppercase; margin: var(--rl-space-8) 0 var(--rl-space-3); }
p, .corps { font-size: var(--rl-text-body); font-weight: 300; line-height: 1.4; max-width: 70ch; }
.legende, .meta { font-size: var(--rl-text-caption); color: var(--rl-muted); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); margin: var(--rl-space-6) 0; }
.kpi { padding: 0 var(--rl-space-6); border-left: var(--rl-hairline); }
.kpi:first-child { border-left: none; padding-left: 0; }
.kpi .valeur { font-size: var(--rl-text-kpi); font-weight: 700; line-height: .9; font-variant-numeric: tabular-nums; }
.kpi .legende { margin-top: var(--rl-space-2); }
.defile { overflow-x: auto; border-top: var(--rl-hairline); }
table { border-collapse: collapse; width: 100%; font-size: var(--rl-text-ui); }
th { font-size: var(--rl-text-micro); font-weight: 700; text-transform: uppercase; text-align: right; padding: var(--rl-space-2); border-bottom: var(--rl-hairline); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: var(--rl-paper); }
td { padding: var(--rl-space-1) var(--rl-space-2); border-bottom: 1px solid var(--rl-line-subtle); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--vista-calc); }
tr:hover td { background: var(--rl-surface); }
td:first-child { white-space: normal; min-width: 260px; }
tr.total td { font-weight: 700; }
tr.section td { font-weight: 700; border-top: var(--rl-hairline); border-bottom: var(--rl-hairline); }
tr.taux td { color: var(--vista-calc); font-size: var(--rl-text-caption); }
td.annee, th.annee { border-left: var(--rl-hairline); }
.saisi td.v, .saisi { color: var(--vista-input); }
.positif { color: var(--vista-positive); }
.negatif { color: var(--vista-negative); }
/* Graphique de trésorerie (SVG serveur) : couleurs et police portées par le SVG lui-même */
.figure { margin: var(--rl-space-4) 0 var(--rl-space-8); }
.figure figcaption { font-size: var(--rl-text-caption); font-weight: 400; color: var(--rl-muted); margin: var(--rl-space-6) 0 var(--rl-space-2); }
.figure figcaption b { color: var(--rl-ink); font-weight: 700; text-transform: uppercase; font-size: var(--rl-text-micro); margin-right: var(--rl-space-2); }
svg.graphique { display: block; width: 100%; height: auto; }
svg.graphique .survol:hover { fill-opacity: .04; }
.cle { color: var(--rl-muted); }
.cle .pastille { display: inline-block; width: 6px; height: 12px; vertical-align: -2px; margin: 0 var(--rl-space-1) 0 var(--rl-space-3); }
.cle .pastille:first-child { margin-left: 0; }
.cle .pastille.positif { background: #5f9478; }
.cle .pastille.negatif { background: #c27166; }
.cle .trait { display: inline-block; width: 16px; height: 0; border-top: 1.5px solid #1a1a1a; vertical-align: 3px; margin: 0 var(--rl-space-1) 0 var(--rl-space-3); }
table.suivi td.recu { font-weight: 700; }
table.suivi td.manque { background: var(--rl-surface); }
tr.info td { color: var(--rl-muted); font-style: italic; }
tr.titre-ligne td { font-weight: 700; padding-top: var(--rl-space-3); border-bottom: none; }
tr.sous td:first-child, tr.reel td:first-child { padding-left: var(--rl-space-6); color: var(--rl-muted); }
tr.sous td { color: var(--rl-muted); border-bottom: none; }
tr.sous td.positif { color: var(--vista-positive); } tr.sous td.negatif { color: var(--vista-negative); }
tr.reel td { border-bottom: none; }
.actualiser { float: right; margin: 0; }
.actualiser .bouton { font-size: var(--rl-text-micro); padding: var(--rl-space-1) var(--rl-space-3); }
.periode { font-size: var(--rl-text-ui); margin: var(--rl-space-4) 0; }
.periode a { margin-left: var(--rl-space-3); }
.base { font-size: var(--rl-text-micro); font-weight: 700; border: var(--rl-hairline); padding: 1px var(--rl-space-1); margin-left: var(--rl-space-2); vertical-align: middle; }
[title] { cursor: help; text-decoration: underline dotted var(--rl-line-subtle); text-underline-offset: 3px; }
.badge { font-size: var(--rl-text-micro); font-weight: 700; text-transform: uppercase; padding: 2px var(--rl-space-2); border: var(--rl-hairline); white-space: nowrap; }
.badge.plein { background: var(--rl-ink); color: var(--rl-paper); }
.badge.gris { border-color: var(--rl-muted); color: var(--rl-muted); }
button, .bouton { font: inherit; font-size: var(--rl-text-ui); font-weight: 700; text-transform: uppercase; padding: var(--rl-space-2) var(--rl-space-4); background: var(--rl-ink); color: var(--rl-paper); border: var(--rl-hairline); cursor: pointer; text-decoration: none; display: inline-block; }
button.secondaire, .bouton.secondaire { background: var(--rl-paper); color: var(--rl-ink); }
button.tertiaire { background: none; border: none; padding: 0; text-transform: none; font-weight: 400; text-decoration: underline; color: var(--rl-ink); }
input, select, textarea { font: inherit; font-size: var(--rl-text-ui); padding: var(--rl-space-2); border: var(--rl-hairline); background: var(--rl-paper); color: var(--rl-ink); }
input:focus, select:focus, textarea:focus { outline: none; border-width: 2px; padding: calc(var(--rl-space-2) - 1px); }
label { display: block; font-size: var(--rl-text-micro); font-weight: 700; text-transform: uppercase; margin: var(--rl-space-3) 0 var(--rl-space-1); }
.formulaire { border: var(--rl-hairline); padding: var(--rl-space-4); margin: var(--rl-space-4) 0; max-width: 760px; }
.formulaire .champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 var(--rl-space-3); }
.decision-regle { display: flex; flex-wrap: wrap; gap: var(--rl-space-1); align-items: center; min-width: 260px; }
.decision-regle input { flex: 1 1 120px; min-width: 0; }
.alerte { border: 2px solid var(--rl-danger); padding: var(--rl-space-3); margin: var(--rl-space-4) 0; }
.info { border: var(--rl-hairline); padding: var(--rl-space-3); margin: var(--rl-space-4) 0; }
.connexion { max-width: 420px; margin: 12vh auto; padding: 0 var(--rl-space-4); }
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary { cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: var(--rl-text-micro); margin: var(--rl-space-4) 0; }
@media (max-width: 860px) {
  body { grid-template-columns: 1fr; }
  nav.lateral { position: static; height: auto; }
  .kpis { grid-template-columns: repeat(2, 1fr); row-gap: var(--rl-space-6); }
  .kpi:nth-child(3) { border-left: none; padding-left: 0; }
  .kpi .valeur { font-size: 32px; }
}