:root{
  --wave:#d64420;
  --text:#000000;
  --muted:#000000;
  --bg:#fff;
  --dot-size:26px;
  --stroke:6;
}

*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;margin:0;color:var(--text);background:var(--bg)}

.wrap{max-width:1100px;margin:40px auto;padding:24px}
p.lead{margin:6px 0 24px 0;color:var(--muted)}

.timeline{position:relative;width:100%;height:260px}
.timeline svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

#wavePath{fill:none;stroke:var(--wave);stroke-linecap:round;stroke-width:var(--stroke);
  stroke-dasharray:2500; stroke-dashoffset:2500;
}

@keyframes draw{to{stroke-dashoffset:0}}

.milestones{list-style:none;margin:0;padding:0}
.milestones li{position:absolute;top:0;left:0;transform:translate(-50%,-50%);text-align:center;}

.dot {
  width:var(--dot-size);
  height:var(--dot-size);
  background:var(--wave);
  border-radius:50%;
  /* border:4px solid #fff; */
  position:relative;
  z-index:2;
}

.label{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;opacity:0;}
.year{font-size:clamp(18px,3vw,38px);font-weight:800;letter-spacing:.5px;margin-bottom:4px}
.subtitle{font-size:clamp(12px,1.7vw,15px);color:var(--muted)}

/* Animation labels activée via JS */
.fade-up{animation:fadeUp 1.6s ease forwards;}
@keyframes fadeUp{to{opacity:1;translate:0 0}}

@media (prefers-reduced-motion: reduce){
  #wavePath{animation:none;stroke-dasharray:unset;stroke-dashoffset:unset}
  .label{animation:none}
}

@media (max-width:520px){
  .timeline{height:220px}
  :root{--stroke:5;--dot-size:20px}
}