/* Le bilan: une feuille de résultats lisible à l'écran et imprimable en A4. */

.report, .report-empty {
  max-width: 860px; padding: 40px 48px 48px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px;
  font-size: 15px; line-height: 1.5;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.report-empty p { margin: 0; color: var(--ink-2); font-size: 16px; }

.report p { margin: 0; }
.report h2 {
  margin: 0 0 14px; font-size: 23px; line-height: 1.15; font-weight: 760; font-stretch: 82%;
}
.sec { margin-top: 48px; }
.lede { max-width: 68ch; margin: -6px 0 18px !important; color: var(--ink-2); }

/* En-tête */

.ramp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-bottom: 22px; }
.ramp span { height: 8px; }
.ramp span:nth-child(1) { background: var(--z1); border-radius: 2px 0 0 2px; }
.ramp span:nth-child(2) { background: var(--z2); }
.ramp span:nth-child(3) { background: var(--z3); }
.ramp span:nth-child(4) { background: var(--z4); }
.ramp span:nth-child(5) { background: var(--z5); border-radius: 0 2px 2px 0; }

.masthead .center { font-size: 13px; color: var(--ink-2); }
.masthead .doc { font-size: 13px; font-weight: 650; }
.athlete {
  margin: 18px 0 12px; font-size: 76px; line-height: 0.9; font-weight: 820; font-stretch: 66%;
  letter-spacing: -0.005em; overflow-wrap: anywhere;
}
.facts { font-size: 18px; max-width: 60ch; }
.meta { margin-top: 4px !important; color: var(--ink-2); }

/* Synthèse */

.summary { max-width: 68ch; font-size: 16.5px; line-height: 1.55; }
.summary p + p { margin-top: 10px; }
.limiter { max-width: 68ch; margin-top: 14px !important; }
.tally { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; }
.tally li { display: flex; align-items: center; gap: 7px; }
.tally strong { font-size: 18px; font-weight: 760; }

/* Évolution depuis le bilan précédent: le mot dit le sens, la couleur reste aux feux */

.moves { margin: 18px 0 0; padding: 0; list-style: none; max-width: 70ch; border-top: 1px solid var(--rule); }
.moves li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.move-name { font-weight: 620; }
.move { display: inline-flex; align-items: center; gap: 8px; }
.move-arrow { color: var(--ink-2); }
.shift, .prev-prio { max-width: 68ch; margin-top: 16px !important; }
.prev-prio ol { margin: 4px 0 0; padding-left: 22px; }
.delta { display: block; margin-top: 2px; font-size: 12.5px; white-space: normal; color: var(--ink-2); }
.delta.t-better, .delta.t-worse { color: var(--ink); font-weight: 650; }
.marker-before { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }

/* Pictogrammes de statut: forme et libellé, jamais la couleur seule */

.glyph { width: 16px; height: 16px; flex: none; }
.f-good { fill: var(--good); }
.f-watch { fill: var(--watch); }
.f-limit { fill: var(--limit); }
.f-ink { fill: var(--ink); }
.f-muted { fill: var(--ink-2); }
.glyph .tick { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.glyph .bang { fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; }
.glyph .ring { fill: none; stroke: var(--ink-2); stroke-width: 1.6; }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 620; white-space: nowrap; }
.chip.s-pending, .chip.s-info { color: var(--ink-2); font-weight: 500; }

/* Tableau de résultats */

.results { width: 100%; border-collapse: collapse; font-size: 14px; }
.results thead th {
  padding: 0 10px 8px 0; font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: left;
  border-bottom: 1px solid var(--ink);
}
.results tr.pillar th {
  padding: 22px 0 8px; text-align: left; font-size: 15px; font-weight: 740; font-stretch: 85%;
  border-bottom: 1px solid var(--rule);
}
.results tbody:first-of-type tr.pillar th { padding-top: 14px; }
.results tr.ind > * { padding: 10px 12px 10px 0; vertical-align: top; border-bottom: 1px solid var(--rule); text-align: left; }
.ind-status { width: 148px; padding-top: 12px !important; }
.ind-label { font-weight: 400; }
.ind-name { display: block; font-weight: 650; }
.ind-note { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); max-width: 46ch; }
.ind-value { width: 150px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ind-value .num { font-size: 20px; font-weight: 700; line-height: 1.2; }
.ind-value .unit { font-size: 12px; color: var(--ink-2); }
.ind-gauge { width: 184px; padding-right: 0 !important; padding-top: 12px !important; }
.gauge { display: block; width: 172px; height: 26px; }
.band { opacity: 0.32; }
.b-good { fill: var(--good); }
.b-watch { fill: var(--watch); }
.b-limit { fill: var(--limit); }
.marker { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }

/* Zones */

.zones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.zone { padding: 14px 12px 16px; min-width: 0; }
.zone.z1 { background: var(--z1); color: var(--ink); border-radius: 6px 0 0 6px; }
.zone.z2 { background: var(--z2); color: var(--ink); }
.zone.z3 { background: var(--z3); color: #fff; }
.zone.z4 { background: var(--z4); color: #fff; }
.zone.z5 { background: var(--z5); color: #fff; border-radius: 0 6px 6px 0; }
.zone-id { font-size: 34px; line-height: 1; font-weight: 820; font-stretch: 66%; }
.zone-name { margin-top: 4px !important; min-height: 2.6em; font-size: 14px; line-height: 1.25; font-weight: 680; }
.zone dl { margin: 10px 0 0; }
.zone dl div + div { margin-top: 7px; }
.zone dt { font-size: 11.5px; opacity: 0.85; }
.zone dd { margin: 0; font-size: 13.5px; font-weight: 640; font-variant-numeric: tabular-nums; }
.zone-feel { margin-top: 12px !important; padding-top: 9px; border-top: 1px solid currentColor; font-size: 12.5px; line-height: 1.35; }
.zone.z1 .zone-feel, .zone.z2 .zone-feel { border-top-color: rgba(20, 35, 58, 0.35); }
.zone.z3 .zone-feel, .zone.z4 .zone-feel, .zone.z5 .zone-feel { border-top-color: rgba(255, 255, 255, 0.45); }

/* Graphiques */

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.chart { margin: 0; min-width: 0; }
.chart figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.chart-title { font-size: 15px; font-weight: 700; }
.chart-desc { font-size: 13px; color: var(--ink-2); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font); }
.chart .tick, .chart .axis-title, .chart .band-label { font-size: 11px; fill: var(--ink-2); }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--z4); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .pt { fill: var(--z4); stroke: var(--paper); stroke-width: 2; }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:hover { fill: rgba(58, 89, 162, 0.12); }
.chart .vline { stroke: var(--ink-2); stroke-width: 1; }
.chart .vlabel { font-size: 11px; font-weight: 700; fill: var(--ink); }
.chart .zt { opacity: 0.16; }
.chart .zt.z1 { fill: var(--z1); }
.chart .zt.z2 { fill: var(--z2); }
.chart .zt.z3 { fill: var(--z3); }
.chart .zt.z4 { fill: var(--z4); }
.chart .zt.z5 { fill: var(--z5); }
.chart .fz { fill: var(--z2); opacity: 0.2; }
.chart .peak { fill: none; stroke: var(--z4); stroke-width: 2; }
.chart .peak-label { font-size: 12px; font-weight: 700; fill: var(--ink); }

/* Gauche droite */

.lr { max-width: 720px; }
.lr-head { display: grid; grid-template-columns: 1fr 1fr; font-size: 12px; font-weight: 650; color: var(--ink-2); }
.lr-head span:first-child { text-align: right; padding-right: 10px; }
.lr-head span:last-child { padding-left: 10px; }
.lr-row { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.lr-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-bottom: 8px; }
.lr-name { font-weight: 650; }
.lr-pct { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lr-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.lr-side { display: flex; align-items: center; gap: 10px; }
.lr-track { flex: 1; display: flex; }
.lr-side.l .lr-track { justify-content: flex-end; }
.lr-bar { display: block; height: 14px; background: var(--z4); }
.lr-side.l .lr-bar { border-radius: 4px 0 0 4px; }
.lr-side.r .lr-bar { border-radius: 0 4px 4px 0; }
.lr-val { flex: none; width: 92px; font-size: 13px; font-weight: 620; font-variant-numeric: tabular-nums; }
.lr-side.l .lr-val { text-align: right; }

/* Silhouette */

.body-map { display: block; width: 100%; max-width: 420px; height: auto; }
.body-map text { font-family: var(--font); }
.body-map .seg { fill: var(--wash); stroke: var(--line); stroke-width: 1.5; }
.body-map .seg.w-watch { fill: #f2dfb8; stroke: var(--watch); }
.body-map .seg.w-limit { fill: #f0cbc4; stroke: var(--limit); }
.body-map .seg-name { font-size: 12px; fill: var(--ink-2); }
.body-map .seg-val { font-size: 15px; font-weight: 700; fill: var(--ink); }
.body-map .seg-val.in { font-size: 13px; }
.caption { margin-top: 6px !important; font-size: 13px; color: var(--ink-2); }

/* Priorités */

.priorities { margin: 0; padding: 0; list-style: none; counter-reset: prio; max-width: 70ch; }
.priorities li {
  counter-increment: prio; display: grid; grid-template-columns: 52px 1fr; column-gap: 8px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.priorities li::before {
  content: counter(prio); grid-row: span 2;
  font-size: 44px; line-height: 0.9; font-weight: 820; font-stretch: 66%; color: var(--z4);
}
.prio-title { font-size: 17.5px; font-weight: 700; line-height: 1.3; }
.prio-detail { margin-top: 4px !important; }
.retest { margin-top: 18px !important; font-size: 16px; }
.draft-note {
  max-width: 70ch; margin-bottom: 10px !important; padding: 10px 12px;
  background: #fbf3e2; border-left: 3px solid var(--watch); font-size: 13.5px;
}

/* Données par palier */

.table-wrap { overflow-x: auto; }
.stages { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.stages th, .stages td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.stages thead th { font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.25; vertical-align: bottom; border-bottom-color: var(--ink); }
.stages tbody th { font-weight: 700; }

/* Méthode */

.method ul { margin: 0; padding-left: 18px; max-width: 72ch; font-size: 13px; color: var(--ink-2); }
.method li + li { margin-top: 5px; }
.disclaimer {
  max-width: 72ch; margin-top: 18px !important; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 6px; font-size: 13px;
}

/* Écrans étroits */

@media screen and (max-width: 760px) {
  .report, .report-empty { padding: 24px 18px 32px; }
  .athlete { font-size: 52px; }
  .zones { grid-template-columns: 1fr; }
  .zone, .zone.z1, .zone.z5 { border-radius: 0; display: grid; grid-template-columns: 56px 1fr; column-gap: 10px; }
  .zone.z1 { border-radius: 6px 6px 0 0; }
  .zone.z5 { border-radius: 0 0 6px 6px; }
  .zone-id { grid-row: span 4; }
  .zone-name { min-height: 0; }
  .charts { grid-template-columns: 1fr; }
  .results thead { display: none; }
  .results tr.ind { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .results tr.ind > * { padding: 0 !important; border: 0; width: auto; }
  .ind-label { grid-column: 1 / -1; grid-row: 1; }
  .ind-gauge { grid-column: 1 / -1; }
  .lr-val { width: 72px; }
}

/* Impression A4 */

@page { size: A4; margin: 14mm 13mm 16mm; }

@media print {
  html, body { height: auto; display: block; background: #fff; }
  .topbar, .tabs, .entry-pane, .draft-note, #error-banner { display: none !important; }
  .split { display: block; }
  .report-pane { display: block !important; overflow: visible; padding: 0; }
  .report { max-width: none; padding: 0; border: 0; border-radius: 0; font-size: 12.5px; }
  .athlete { font-size: 60px; }
  .sec { margin-top: 26px; }
  .report h2 { font-size: 20px; break-after: avoid; }
  .summary { font-size: 14px; }
  .report h2, .lede, .results tr.pillar { break-after: avoid; }
  .sec:not(:has(table)):not(.prio), .masthead, .results tr, .stages tr, .priorities li { break-inside: avoid; }
  .body-map { max-width: 330px; }
  .results tr.ind > * { padding-top: 7px; padding-bottom: 7px; }
  .ind-status { width: 118px; }
  .ind-value { width: 118px; }
  .ind-value .num { font-size: 17px; }
  .ind-gauge { width: 150px; }
  .gauge { width: 140px; height: 22px; }
  .charts { gap: 20px; }
  .chart .hit { display: none; }
}