/* Page Système solaire */

.orrery-tile { display: grid; gap: 14px; align-content: start; }
.orr-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.orr-head h1 { font-weight: 600; }
.orrery { width: 100%; max-width: 640px; justify-self: center; }
.orrery .orbit { fill: none; stroke: var(--rule); stroke-width: 1; }
.orrery .sun { fill: var(--ink); }
.orrery .planet { fill: var(--ink); }
.orrery .earth { fill: var(--accent); }
.orrery .link { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.orrery .name { font-family: var(--font); font-size: 11px; fill: var(--ink); }
.orrery .equinox { font-family: var(--mono); font-size: 9px; fill: var(--muted); }
.orr-slider { display: grid; gap: 6px; }
.orr-slider input { width: 100%; accent-color: var(--accent); min-height: 44px; }

.near { display: grid; gap: 14px; align-content: start; }
.near h2, .neo-head h2:not(.head) { font-size: var(--step-lead); font-weight: 600; }
.near-big { font-size: clamp(2.25rem, 1.2rem + 3vw, 3.75rem); line-height: 1; letter-spacing: -0.04em; }
.planet-rows { display: grid; gap: 4px; }
.planet-rows li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: 2px 14px;
  align-items: baseline;
  padding: 10px 14px;
  background: var(--tile-2);
  cursor: pointer;
  transition: background-color var(--t-hover) ease;
}
.planet-rows li:hover, .planet-rows li[aria-selected='true'] { background: var(--field); }
.planet-rows strong { font-weight: 600; }
.planet-rows .d { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.planet-rows .sub { grid-column: 2 / -1; font-size: var(--step-small); color: var(--muted); }

.neo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.neo-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.neo-table tbody tr { cursor: default; }
.neo-table .close { color: var(--accent); font-weight: 500; }

@media (max-width: 1080px) {
  .orrery-tile, .near { grid-column: span 12; }
}
@media (max-width: 640px) {
  .col-km { display: none; }
  .planet-rows li { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .planet-rows .d { grid-column: 2; }
}