/* 🧭 Boussole : accent ocre, tableau de bord des objectifs. */
:root { --acc: var(--boussole); --acc-soft: var(--boussole-soft); --acc-deep: var(--boussole-deep); }

.bs-sub { margin: -6px 0 16px; }
.bs .sec { margin-top: 22px; }
.bs-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bs-kpi { padding: 14px 16px; display: grid; gap: 2px; }
.bs-kpi b { font-family: var(--font-display); font-size: 30px; line-height: 1.1; }
.bs-kpi.ok b { color: var(--ok); } .bs-kpi.late b { color: var(--late); } .bs-kpi.acc b { color: var(--acc); }
@media (max-width: 720px) { .bs-kpis { grid-template-columns: 1fr 1fr; } }

.bs-objs { display: grid; gap: 14px; }
.bs-obj { padding: 18px; display: grid; gap: 14px; }
.bs-obj-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bs-obj-h h2 { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--text); margin: 2px 0 0; }
.bs-obj-body { display: grid; gap: 12px; }
.bs-figures { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.bs-fig { display: grid; }
.bs-fig b { font-family: var(--font-display); font-size: 22px; }
.bs-fig small { font-size: 13px; font-weight: 500; color: var(--muted); }
.bs-ring { position: relative; width: 76px; height: 76px; }
.bs-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.bs-ring-w { display: grid; justify-items: center; gap: 2px; }
.ring .track { stroke: var(--panel-2); } .ring .value { stroke: var(--acc); }

.bs-chart { width: 100%; height: auto; display: block; }
.bs-chart .grid { stroke: var(--line); stroke-width: 1; }
.bs-chart .tick { fill: var(--muted); font-size: 11px; }
.bs-chart .lbl { fill: var(--muted); font-size: 11.5px; font-weight: 600; }
.bs-chart .target { stroke: var(--ok); stroke-width: 1.5; stroke-dasharray: 5 5; }
.bs-chart .today { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.bs-chart .serie { fill: none; stroke: var(--acc); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.bs-chart .dot { fill: var(--acc); } .bs-chart .dot.last { stroke: var(--panel); stroke-width: 2; }
.bs-chart .proj { fill: none; stroke: var(--acc); stroke-width: 1.75; stroke-dasharray: 6 5; opacity: .7; }
.bs-chart .projdot { fill: var(--panel); stroke: var(--acc); stroke-width: 2; }
.bs-nochart { padding: 18px; border-radius: 10px; background: var(--panel-2); text-align: center; }
.bs-warn { color: var(--warn); display: flex; gap: 6px; align-items: baseline; }
.bs-eng { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.bs-eng li { padding-left: 12px; border-left: 2px solid var(--acc); }

.bs-props { display: grid; gap: 10px; }
.bs-prop { border-left: 3px solid var(--acc); }
.bs-doms { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.bs-dom { padding: 12px 14px; display: grid; gap: 2px; }
.bs-dom.deg { border-color: var(--warn); }
.bs-cycles { display: grid; gap: 10px; }
.bs-cycle .consigne { white-space: pre-wrap; }
.bs-revue { padding: 20px; display: grid; gap: 12px; }
.bs-revue .md h3 { font-family: var(--font-display); font-size: 17px; text-transform: none; letter-spacing: normal; color: var(--text); margin: 14px 0 4px; }
.bs-revue-old { padding: 14px 18px; }
.bs-revue-old summary { cursor: pointer; }