.chrono-actus { --gap: 16px; --ring: #de141c; --muted: #6b7280; }
.chrono-actus__date-sep{
  margin:24px 0 12px; font-weight:700; font-size:14px; text-transform:uppercase; color:#111;
  position:relative; padding-left:12px;
}
.chrono-actus__date-sep:before{
  content:""; position:absolute; left:0; top:50%; width:6px; height:6px; border-radius:50%;
  background:var(--ring); transform:translateY(-50%);
}

.chrono-actus__list { display:flex; flex-direction:column; gap:var(--gap); }
.chrono-actus__item{
  display:grid; grid-template-columns:56px 80px 1fr; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid #eee;
}
@media (max-width:640px){
  .chrono-actus__item{ grid-template-columns:56px 64px 1fr; }
}

.chrono-actus__time{
  font-variant-numeric:tabular-nums; font-weight:700; color:#111; font-size:18px;
}

.chrono-actus__thumb{
  width:80px; height:60px; display:block; border-radius:8px; overflow:hidden; background:#f2f2f2;
}
.chrono-actus__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.chrono-actus__thumb--ph{ position:relative; }
.chrono-actus__thumb--ph:after{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg,#f2f2f2, #eaeaea, #f2f2f2);
  animation:shimmer 1.2s infinite; background-size:200% 100%;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.chrono-actus__content{ min-width:0; }
.chrono-actus__title{ margin:0 0 4px; font-size:16px; line-height:1.3; }
.chrono-actus__title a{ color:#111; text-decoration:none; }
.chrono-actus__title a:hover{ text-decoration:underline; }

.chrono-actus__cats{ display:flex; flex-wrap:wrap; gap:6px; }
.chrono-actus__cat{
  display:inline-block; font-size:12px; padding:3px 8px; border-radius:999px;
  background:#fee; color:#7a0d12; border:1px solid var(--ring); text-decoration:none;
}

.chrono-actus__excerpt{ margin:6px 0 0; color:var(--muted); font-size:14px; }

.chrono-actus__loadmore{
  margin:18px auto 0; display:block; padding:10px 16px; border-radius:999px; border:1px solid #ddd;
  background:#fff; cursor:pointer; font-weight:600;
}
.chrono-actus__loadmore:hover{ border-color:#bbb; }
.chrono-actus__empty{ color:var(--muted); }