:root{
    --max-width:1100px;
    --accent:#2563eb;
    --muted:#6b7280;
    --card-bg:#fff;
    --radius:12px;
  }
  .container{max-width:var(--max-width);margin:1.75rem auto;padding:0 1rem}
  .updates-hero{display:flex;gap:2rem;align-items:center;background:linear-gradient(180deg,#fff,#fbfdff);padding:1.25rem;border-radius:12px;box-shadow:0 10px 30px rgba(15,23,36,0.05)}
  .hero-left{flex:1}
  .hero-right img{width:340px;max-width:40%;height:auto;display:block}
  h1{margin:0 0 .5rem;font-size:1.6rem;color:var(--accent)}
  .hero-lead{color:var(--muted);margin:0 0 .75rem}
  .hero-ctas{display:flex;gap:.6rem}
  .btn-primary{background:var(--accent);color:#fff;padding:.6rem .9rem;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 8px 22px rgba(37,99,235,0.12)}
  .btn-ghost{background:transparent;border:1px solid rgba(37,99,235,0.08);padding:.55rem .85rem;border-radius:10px;color:var(--accent);text-decoration:none;font-weight:700}

  .layout{display:flex;gap:1rem;margin-top:1rem}
  .toc{flex:0 0 220px}
  .toc h3{margin:0 0 .5rem;color:var(--muted)}
  .toc ul{list-style:none;padding:0;margin:0}
  .toc a{display:block;padding:.35rem 0;color:var(--muted);text-decoration:none}
  .content{flex:1;display:flex;flex-direction:column;gap:1rem}

  .block{background:var(--card-bg);padding:1rem;border-radius:10px;box-shadow:0 6px 20px rgba(15,23,36,0.04)}
  .media-left, .media-right { display:flex; gap:1rem; align-items:center; }
  .media-left .media, .media-right .media{flex:0 0 320px}
  .media-left .text, .media-right .text{flex:1}
  .media-left img, .media-right img{width:100%;height:auto;border-radius:8px;display:block}

  .media-right{flex-direction:row-reverse}
  .changelog .entry{border-left:3px solid rgba(37,99,235,0.08);padding:.6rem 0 .6rem .8rem;margin-bottom:.6rem}
  .changelog .meta{color:var(--accent);font-weight:700;margin-bottom:.3rem}
  .muted{color:var(--muted);font-size:0.95rem}
  .actions{display:flex;gap:.6rem;margin-top:.5rem}

  @media (max-width:900px){
    .updates-hero{flex-direction:column;align-items:flex-start}
    .hero-right img{max-width:100%}
    .layout{flex-direction:column}
    .toc{order:2}
  }

  .empty-state{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px 14px;
    background-color:gray; /* bleu Ngenoh */
    color:#ffffff;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(37,99,235,0.12);
    text-align:center;
    width: 60%;
    margin: 90px 250px;
  }

  .empty-state p{
    margin:0;
    font-weight:700;
    font-size:1.25rem; /* ~20px */
    line-height:1.2;
  }

  @media (min-width:900px){
    .empty-state p{ font-size:1.5rem; } /* ~24px on large screens */
  }