/* Mise en page du simulateur. Les contrôles et panneaux utilisent la charte
   commune : calc-hero, params-panel, field-input, seg, sim-param et monitor. */
.av-badge { color: var(--teal-text); }
.av-badge .icon-dot { background: var(--teal); }
.av-hero-help { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.7; }
.av-hero-link { margin-top: 1rem; font-size: 0.75rem; }
.av-workspace { scroll-margin-top: 8rem; }
.av-parameters { margin-bottom: 1.5rem; }
.av-scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.av-scenarios .seg { min-height: 44px; padding-inline: 0.5rem; font-size: 0.6875rem; line-height: 1.5; }
.av-scenarios .seg:first-child { grid-column: span 2; }
.av-sim button:focus-visible, .av-sim select:focus-visible, .av-sim summary:focus-visible, .av-sim input:focus-visible { outline: 2px solid var(--teal-text); outline-offset: 3px; }
.av-context h4 { margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: 600; }
.av-context p { max-width: 100ch; }
.av-controls { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.av-control { min-width: 0; margin-top: 0; }
.av-control > .smallcaps { display: block; margin-bottom: 0.5rem; }
.av-control .field-wrap { padding: 0.75rem; }
.av-control .field-input { font-size: 0.875rem; letter-spacing: 0; }
.av-control select:disabled { opacity: 0.65; }
.av-control .sim-param__value { flex-shrink: 0; }
.av-control .sim-range { min-height: 2.75rem; display: block; }
.av-speed { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.av-speed .seg { padding: 0.75rem 0.25rem; font-size: 0.75rem; }
.av-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.av-anatomy { margin: 0; overflow: hidden; display: flex; flex-direction: column; }
.av-anatomy .params-panel__header { gap: 0.75rem; padding-inline: 1.25rem; flex-wrap: wrap; }
.av-anatomy .params-panel__count { font-size: 0.625rem; }
.av-heart { display: block; width: 100%; height: 405px; margin: auto; }
.av-heart-outline { fill: var(--surface-alt); stroke: var(--rule); stroke-width: 2; }
.av-chamber { fill: var(--teal-bg); stroke: var(--rule); stroke-width: 1.25; }
.av-ring { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 5 5; }
.av-tract { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; }
.av-node { fill: var(--teal-text); stroke: var(--surface); stroke-width: 3; }
.av-node--sinus { fill: var(--warn-border); }
.av-node--his { fill: var(--teal); }
.av-svg-label { font: 500 11px 'IBM Plex Sans', sans-serif; fill: var(--ink-soft); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.av-svg-label--faint { font-size: 10px; fill: var(--ink-faint); }
.av-block-marker { fill: var(--warn-bg); stroke: var(--warn-text); stroke-width: 2; }
.av-block-marker--slow { stroke-dasharray: 3 2; }
.av-block-symbol { fill: var(--warn-text); font: 700 23px 'IBM Plex Mono', monospace; }
.av-impulse { fill: var(--warn-border); stroke: var(--warn-text); stroke-width: 1.5; }
.av-impulse--blocked { fill: var(--warn-bg); stroke: var(--warn-text); }
.av-impulse--escape { fill: #c4b5fd; stroke: #6d28d9; }
.av-anatomy figcaption { margin-top: auto; min-height: 3.1rem; font-size: 0.75rem; line-height: 1.5; color: var(--ink-soft); }
.av-anatomy-caption { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.av-anatomy-caption span + span { font-size: 0.6875rem; color: var(--ink-faint); }
[data-theme="dark"] .av-heart-illustration { opacity: 0.6; }
.av-traces { min-width: 0; }
.av-monitor { overflow: hidden; }
.av-clock { color: var(--monitor-text); font: 0.6875rem 'IBM Plex Mono', monospace; }
.av-ecg { display: block; width: 100%; height: 240px; }
.av-ladder { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.av-ladder__title { padding: 0.625rem 1.25rem; color: var(--monitor-text); font: 0.6875rem/1.5 'IBM Plex Mono', monospace; }
.av-ladder-canvas { display: block; width: 100%; height: 235px; }
.av-trace-legend { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.75rem 1.25rem; color: var(--monitor-text); font: 0.6875rem/1.5 'IBM Plex Mono', monospace; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.av-trace-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.av-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5eead4; }
.av-dot--blocked { background: #fbbf24; }
.av-dot--escape { background: #c4b5fd; }
.av-trace-note { color: var(--ink-faint); font-size: 0.75rem; line-height: 1.55; margin: 0.75rem 0 0; }
.av-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0; }
.av-playback, .av-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.av-playback .seg { min-height: 44px; padding-inline: 0.75rem; font-size: 0.6875rem; }
.av-toggles { gap: 1rem; font-size: 0.8125rem; color: var(--ink-soft); }
.av-toggles label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; cursor: pointer; }
.av-toggles input { accent-color: var(--teal); }
.av-share { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.av-readouts { margin: 1.5rem 0; }
.av-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.av-metrics > div { padding: 1.25rem; min-width: 0; }
.av-metrics > div:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.06); }
.av-metrics > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.av-metrics dt { font: 0.625rem/1.6 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; color: var(--monitor-text); margin-bottom: 0.5rem; }
.av-metrics dd { margin: 0; font: 500 2rem/1.2 'IBM Plex Mono', monospace; color: var(--mint); }
.av-metrics small { font-size: 0.6875rem; font-weight: 400; color: var(--monitor-text); margin-left: 0.35rem; }
.av-details { margin-top: 1.5rem; border: 1px solid var(--rule); background: var(--surface); }
.av-details summary { cursor: pointer; padding: 1rem 1.25rem; background: var(--surface-alt); font: 500 0.75rem/1.6 'IBM Plex Mono', monospace; }
.av-details p { margin: 1rem 1.25rem; font-size: 0.8125rem; line-height: 1.65; color: var(--ink-soft); }
.av-table-wrap { overflow-x: auto; margin: 0 1.25rem 1.25rem; }
.av-beats { width: 100%; border-collapse: collapse; font-size: 0.8125rem; text-align: left; }
.av-beats caption { text-align: left; padding: 0.5rem 0; color: var(--ink-faint); }
.av-beats th, .av-beats td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.av-beats thead { background: var(--surface-alt); }
.av-row-blocked { color: var(--warn-text); }
.av-disclaimer { font-size: 0.75rem; color: var(--ink-faint); line-height: 1.6; margin-top: 1.25rem; }
.av-explanations { display: grid; gap: 2rem; }
.av-explanations p, .av-explanations li, .av-sources p, .av-sources li { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.8; }
.av-explanations p + p { margin-top: 1rem; }
.av-explanations ol, .av-sources ul { padding-left: 1.25rem; }
.av-sources li { margin-top: 0.6rem; }
.av-sources > a { display: inline-block; margin-top: 1.25rem; }
@media (min-width: 768px) {
  .av-scenarios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .av-controls { grid-template-columns: 1.2fr 1fr 0.8fr; }
  .av-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .av-metrics > div + div { border-left: 1px solid rgba(255, 255, 255, 0.06); }
  .av-metrics > div:nth-child(n+3) { border-top: none; }
  .av-explanations { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .av-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); }
  .av-heart { height: 475px; }
}
@media (min-width: 1100px) {
  .av-scenarios { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .av-scenarios .seg:first-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .av-sim *, .av-sim *::before, .av-sim *::after { animation: none !important; transition: none !important; } }