/* Outil de pilotage financier (#/pilotage) — charte JB4WOOD, tokens clair/sombre.
   Réutilise .fin-chart / .fin-table / .btn (finance.css + app.css). */

.pil-wrap { display: flex; flex-direction: column; gap: 18px; }

/* Navigation par sections (chips ancrées) */
.pil-nav { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20;
  background: var(--bg); padding: 10px 0 12px; margin-bottom: 4px; }
.pil-nav-chip { background: var(--bg-elevated); border: 1px solid var(--bord); border-radius: 999px;
  padding: 7px 14px; font-size: .85rem; cursor: pointer; color: var(--texte); font-family: var(--corps);
  transition: border-color .15s, background .15s; white-space: nowrap; }
.pil-nav-chip:hover { border-color: var(--or); background: var(--bg-inset); }

/* Section */
.pil-section { background: var(--bg-elevated); border-radius: var(--radius); box-shadow: var(--ombre-sm);
  padding: 22px 24px; scroll-margin-top: 64px; }
.pil-h2 { color: var(--vert); font-size: 1.35rem; margin: 0 0 6px; }
[data-theme="dark"] .pil-h2 { color: var(--or-clair); }
.pil-intro { color: var(--texte-soft); line-height: 1.55; margin: 0 0 14px; font-size: .95rem; }
.pil-intro strong { color: var(--vert); }
[data-theme="dark"] .pil-intro strong { color: var(--or-clair); }

/* KPIs */
.pil-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.pil-kpi { background: var(--bg-inset); border: 1px solid var(--bord); border-radius: var(--radius-sm);
  padding: 16px 18px; border-left: 4px solid var(--vert); }
.pil-kpi-label { font-size: .82rem; color: var(--texte-soft); margin-bottom: 6px; }
.pil-kpi-val { font-size: 1.7rem; font-weight: 800; color: var(--vert); font-variant-numeric: tabular-nums; line-height: 1.1; }
[data-theme="dark"] .pil-kpi-val { color: var(--or-clair); }
.pil-kpi-delta { font-size: .82rem; margin-top: 6px; font-weight: 600; }
.pil-kpi-delta.up { color: var(--ok); }
.pil-kpi-delta.down { color: var(--erreur); }
.pil-kpi-delta.muted { color: var(--texte-soft); font-weight: 400; }

/* Cartes de ratios */
.pil-ratio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; }
.pil-ratio-card { background: var(--bg-inset); border: 1px solid var(--bord); border-radius: var(--radius-sm); padding: 14px 16px; position: relative; }
.pil-ratio-dot { width: 10px; height: 10px; border-radius: 3px; position: absolute; top: 16px; right: 16px; }
.pil-ratio-name { font-size: .85rem; color: var(--texte-soft); margin-bottom: 6px; padding-right: 16px; }
.pil-ratio-now { font-size: 1.5rem; font-weight: 800; color: var(--vert); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .pil-ratio-now { color: var(--or-clair); }
.pil-ratio-now.neg { color: var(--erreur); }
.pil-ratio-now.pos { color: var(--ok); }

/* Détail du calcul (transparence) */
.pil-calc { margin-top: 10px; font-size: .85rem; }
.pil-calc > summary { cursor: pointer; color: var(--or); font-weight: 600; list-style: none; user-select: none; }
.pil-calc > summary::-webkit-details-marker { display: none; }
.pil-calc > summary:hover { text-decoration: underline; }
.pil-calc[open] > summary { margin-bottom: 8px; }
.pil-calc-body { background: var(--bg-elevated); border: 1px solid var(--bord); border-radius: 6px; padding: 10px 12px; line-height: 1.55; color: var(--texte); }
.pil-formula { font-weight: 600; color: var(--vert); margin-bottom: 4px; }
[data-theme="dark"] .pil-formula { color: var(--or-clair); }
.pil-calc-line { font-variant-numeric: tabular-nums; color: var(--texte); }
.pil-calc-line b { color: var(--vert); }
[data-theme="dark"] .pil-calc-line b { color: var(--or-clair); }
.pil-calc-note { color: var(--texte-soft); font-size: .82rem; margin-top: 6px; font-style: italic; }

/* Valeurs colorées dans les tableaux/écarts */
.num.pos, td.num.pos { color: var(--ok); }
.num.neg, td.num.neg { color: var(--erreur); }

/* Budget vs réalisé */
.pil-budget-bar { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.pil-budget-yearlbl { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--texte-soft); }
.pil-year-sel { padding: 8px 12px; border: 1.5px solid var(--bord); border-radius: var(--radius-sm); background: var(--bg-inset); color: var(--texte); font-family: var(--corps); }
.pil-budget-table .pil-budget-input { width: 110px; text-align: right; padding: 6px 8px; border: 1.5px solid var(--bord);
  border-radius: 6px; background: var(--bg-elevated); color: var(--texte); font-family: var(--corps); font-variant-numeric: tabular-nums; }
.pil-budget-input:focus { outline: none; border-color: var(--or); }
.pil-budget-chart { margin-top: 8px; }

/* Simulateur point mort */
.pil-sim { background: var(--bg-inset); border: 1px solid var(--bord); border-radius: var(--radius-sm); padding: 16px 18px; }
.pil-sim-row { display: grid; grid-template-columns: 1fr 180px 80px; align-items: center; gap: 10px; margin: 8px 0; }
.pil-sim-row > span:first-child { color: var(--texte); font-size: .92rem; }
.pil-sim-row input[type=range] { width: 100%; accent-color: var(--vert); }
.pil-sim-lab { font-weight: 700; color: var(--vert); text-align: right; }
[data-theme="dark"] .pil-sim-lab { color: var(--or-clair); }
.pil-sim-out { margin-top: 14px; border-top: 1px dashed var(--bord); padding-top: 12px; }
.pil-sim-kpi { display: flex; justify-content: space-between; padding: 5px 0; color: var(--texte); }
.pil-sim-kpi.big { font-size: 1.15rem; border-top: 1px solid var(--bord); margin-top: 6px; padding-top: 10px; }
.pil-sim-kpi b.pos { color: var(--ok); }
.pil-sim-kpi b.neg { color: var(--erreur); }

/* Simulation d'embauche */
.pil-hire { margin-top: 16px; }
.pil-hire-title { margin: 0 0 12px; color: var(--vert); }
[data-theme="dark"] .pil-hire-title { color: var(--or-clair); }
.pil-hire-inputs { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.pil-hire-inputs label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--texte-soft); }
.pil-hire-out .pil-calc-line { padding: 7px 0; border-bottom: 1px dashed var(--bord); }
.pil-hire-out .pil-calc-line:last-of-type { border-bottom: none; }
.pil-hire-out .pil-formula { font-size: .82rem; }

/* Responsive */
@media (max-width: 720px) {
  .pil-section { padding: 16px 14px; }
  .pil-kpi-val { font-size: 1.45rem; }
  .pil-sim-row { grid-template-columns: 1fr; gap: 4px; }
  .pil-sim-lab { text-align: left; }
  .pil-nav { overflow-x: auto; flex-wrap: nowrap; }
}