/* Page Lancement en direct */

.dv-hero { display: grid; gap: 12px; align-content: start; }
.dv-hero .head { max-width: 22ch; }
.dv-clock {
  /* Assez petit pour « T− 12 j 23:59:59 » sur un écran de 360 px. */
  font-size: clamp(2rem, 0.25rem + 8.5vw, 8.5rem);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 500;
  white-space: nowrap;
  margin: 12px 0 4px;
}
.dv-nowatch { display: grid; gap: 10px; align-content: start; }
.dv-nowatch h2 { font-size: var(--step-lead); font-weight: 600; }

.dv-step { display: grid; gap: 8px; align-content: start; }
.dv-step-name { font-size: var(--step-head); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.dv-next-count { font-size: var(--step-lead); }

.dv-timeline { display: grid; gap: 18px; }
.dv-tl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.dv-list { display: grid; gap: 4px; }
.dv-list li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: 4px 20px;
  align-items: baseline;
  padding: 12px 16px;
  background: var(--tile-2);
}
.dv-list .t { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.dv-list .ev strong { display: block; font-weight: 600; }
.dv-list .ev span { font-size: var(--step-small); color: var(--muted); }
.dv-list .clock { font-family: var(--mono); font-size: var(--step-small); color: var(--muted); }
.dv-list li.past { opacity: 0.55; }
.dv-list li.now { background: var(--field); box-shadow: inset 4px 0 0 var(--accent); }
.dv-list li.zero .t { color: var(--accent); }

@media (max-width: 1080px) {
  .dv-hero { grid-column: span 12; }
  #dv-watch, .dv-nowatch { grid-column: span 12; }
}
@media (max-width: 640px) {
  .dv-step { grid-column: span 12; }
  .dv-list li { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .dv-list .clock { grid-column: 2; }
}