/* Page Image du jour */

.apod-media { margin: 0; background: #000; display: flex; }
.apod-frame {
  width: 100%;
  min-height: min(78vh, 860px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.apod-frame img, .apod-frame video, .apod-frame iframe {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 860px);
  width: auto;
  height: auto;
}
.apod-frame iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.apod-frame video { width: 100%; }
.apod-wait { color: #a9a59e; padding: var(--pad); }

.apod-text { display: flex; flex-direction: column; gap: 14px; }
.apod-date { font-size: var(--step-small); color: var(--muted); }
.apod-title { font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.75rem); overflow-wrap: anywhere; }
.apod-credit { color: var(--muted); }
.apod-expl { max-width: 62ch; }
.apod-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--step-small); }
.apod-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; padding-top: 12px; }
.apod-nav button[disabled] { opacity: 0.4; cursor: default; }
.apod-pick { grid-column: 1 / -1; display: grid; gap: 4px; }

/* Planche contact : rangées de vignettes à hauteur fixe, largeurs naturelles. */
.apod-sheet { display: grid; gap: 18px; }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; }
.sheet-head h2 { font-size: var(--step-lead); font-weight: 600; }
.sheet { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet li { flex: 1 1 auto; height: 150px; min-width: 90px; }
.sheet button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--tile-2);
  cursor: pointer;
  overflow: hidden;
}
.sheet img { height: 100%; width: 100%; object-fit: cover; transition: transform var(--t-ui) var(--ease-out); }
.sheet button:hover img { transform: scale(1.04); }
.sheet .no-thumb {
  display: grid;
  align-content: end;
  height: 100%;
  min-width: 150px;
  padding: 12px 12px 36px;
  text-align: left;
  font-size: var(--step-small);
  color: var(--ink);
}
.sheet .day {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 3px 8px;
  background: var(--tile);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
}
.sheet button[aria-current='true'] { outline: 3px solid var(--accent); outline-offset: -3px; }

@media (max-width: 1080px) {
  .apod-media, .apod-text { grid-column: span 12; }
  .apod-frame { min-height: 50vh; }
}
@media (max-width: 640px) {
  .sheet li { height: 110px; min-width: 70px; }
}