:root {
  --orange: #d64420;
  --text: #000000;
  --draw-duration: 2.75s; /* durée du tracé (réduite de moitié) */
  --pop-duration: .45s;    /* apparition des points/labelmobiles */
  --container-w: 372px;
  --container-h: 543px;
}

.timelinemobile {
  position: relative;
  margin: 0 auto;
  padding-left: 50px;
  left: 10px;
  max-width: 500px;
  aspect-ratio: calc(var(--container-w) / var(--container-h));
  min-height: 543px;
  isolation: isolate;
}

.timelinemobile svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* labelmobiles (dates + sous-titres) */
.labelmobile {
  position: absolute;
  width: 180px;
  line-height: 1.2;
  --labelmobile-shift: 8px; /* démarre un peu plus bas */
  transform: translateY(calc(-50% + var(--labelmobile-shift)));
  user-select: none;

  /* invisible tant que la frise n'a pas démarré */
  opacity: 0;
  transition:
    opacity var(--pop-duration) ease-out,
    --labelmobile-shift var(--pop-duration) ease-out;
  will-change: opacity, transform;
}

.labelmobile.right { text-align: right; }

.labelmobile.left  { text-align: left; }

.labelmobile .year {
  font-weight: 800;
  font-size: clamp(24px, 8.2cqi, 36px);
  letter-spacing: .5px;
}

.labelmobile .sub {
  margin-top: 6px;
  font-size: 16px;
  color: #111;
}

.labelmobile.visible {
  opacity: 1;
  --labelmobile-shift: 0px;
}

/* Tracé orange */
#orangePath {
  stroke: var(--orange);
  stroke-width: 3; /* trait plus fin */
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* désactivé par défaut : */
  animation: none;
  stroke-dashoffset: var(--path-len);
}

/* Quand la frise démarre */
.is-animating #orangePath {
  animation: draw var(--draw-duration) linear forwards;
}

/* Points */
.dotmobile {
  fill: var(--orange);
  r: 10;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
}

.dotmobile.visible {
  animation: pop var(--pop-duration) ease-out forwards;
}

@keyframes pop {
  0%   { transform: scale(.25); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}