/* Page Actus */

.lead-img { display: block; position: relative; background: var(--tile-2); aspect-ratio: 16 / 10; max-height: 620px; width: 100%; }
.lead-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.lead-img:hover img { transform: scale(1.02); }
.lead-text { display: flex; flex-direction: column; gap: 14px; }
.lead-text .head { font-size: clamp(1.75rem, 1.1rem + 1.7vw, 3rem); overflow-wrap: anywhere; }
.lead-text .head a { text-decoration: none; }
.lead-text .head a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.lead-text .button { align-self: flex-start; }
.also { margin-top: auto; display: grid; gap: 4px; padding-top: 12px; }
.also li { background: var(--tile); padding: 10px 14px; display: grid; gap: 2px; }
.also a { text-decoration: none; font-weight: 600; line-height: 1.3; }
.also a:hover { text-decoration: underline; }
.also span { font-size: var(--step-small); color: var(--muted); }
.meta { font-size: var(--step-small); color: var(--muted); }
.meta .num { color: var(--ink); }

.news { display: grid; gap: 18px; }
.news-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; }
.news-search { display: grid; grid-template-columns: minmax(0, 340px) auto; gap: 4px; }
.quick { display: flex; flex-wrap: wrap; gap: 4px; }
.quick button {
  border: 0;
  background: var(--tile-2);
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color var(--t-hover) ease;
}
.quick button:hover { background: var(--field); }
.quick button[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
[data-theme='night'] .quick button[aria-pressed='true'] { background: #260906; color: var(--accent); }

/* Une rangée par article : heure, titre et résumé, vignette. */
.news-list { display: grid; gap: 6px; }
.story {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 168px;
  gap: 20px;
  padding: 16px 18px;
  background: var(--tile-2);
  align-items: start;
  transition: background-color var(--t-hover) ease;
}
.story:hover { background: var(--field); }
.story time { white-space: nowrap; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--step-small); }
.story time strong { display: block; font-weight: 500; font-size: var(--step-body); }
.story .body { display: grid; gap: 6px; }
.story h3 { font-size: var(--step-lead); font-weight: 600; line-height: 1.22; }
.story h3 a { text-decoration: none; }
.story h3 a::after { content: ''; position: absolute; inset: 0; }
.story { position: relative; }
.story h3 a:focus-visible { outline: none; }
.story:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.story p { color: var(--ink); max-width: 72ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story .site { font-size: var(--step-small); color: var(--muted); }
.story img, .story .no-img { width: 168px; height: 112px; object-fit: cover; background: var(--tile); }
.news-more { justify-self: start; }

@media (max-width: 1080px) {
  .lead-img, .lead-text { grid-column: span 12; }
  .lead-img { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .story { grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; padding: 14px; }
  .story time { grid-column: 1 / -1; }
  .story img, .story .no-img { width: 96px; height: 72px; grid-row: 2; grid-column: 2; }
  .story .body { grid-row: 2; grid-column: 1; }
  .news-search { grid-template-columns: 1fr auto; width: 100%; }
}