/* ============================================================
   rs1/timeline — frise chronologique défilante
   Fond brume. Le défilement au clic des flèches est géré par le
   script du thème (voir index.twig) : ne pas renommer .snap-start
   ni les attributs data-interactive-snap-*.
   ============================================================ */

.mp-tl{
  --mp-tl-logo: 3.5rem;     /* hauteur de la zone logo       */
  --mp-tl-point: .875rem;   /* diamètre du point sur le trait */
  padding-block: var(--mp-section-sm);
  background: var(--mp-bleu-brume);
}

/* ── En-tête : titre + flèches ───────────────────────────── */
.mp-tl__entete{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.mp-tl__titre{
  margin: 0;
  font-size: var(--mp-t-h2);
  font-weight: 800;
  color: var(--mp-encre);
}

.mp-tl__nav{
  display: flex;
  flex: none;
  gap: .6rem;
  margin-left: auto;
}

.mp-tl__bouton{
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--mp-r-pill);
  background: var(--mp-bleu);
  color: var(--mp-blanc);
  box-shadow: var(--mp-sh-btn);
  cursor: pointer;
  transition: transform var(--mp-dur) var(--mp-ease-pop),
              background var(--mp-dur) ease,
              box-shadow var(--mp-dur) ease,
              opacity var(--mp-dur) ease;
}
.mp-tl__bouton:hover:not(:disabled){
  background: var(--mp-bleu-clair);
  box-shadow: var(--mp-sh-btn-hover);
  transform: translateY(-2px);
}
.mp-tl__bouton:disabled{
  opacity: .4;
  box-shadow: none;
  cursor: default;
}
/* Le :focus-visible global impose un rayon de 4px : on garde le rond */
.mp-tl__bouton:focus-visible{ border-radius: var(--mp-r-pill) }

/* ── Piste défilante ─────────────────────────────────────── */
.mp-tl__defile{
  /* Marge qui aligne le premier événement sur .mp-wrap */
  --mp-tl-marge: max(var(--mp-gouttiere), calc((100% - var(--mp-max)) / 2 + var(--mp-gouttiere)));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--mp-tl-marge);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--mp-encre) var(--mp-gouttiere), var(--mp-encre) calc(100% - var(--mp-gouttiere)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, var(--mp-encre) var(--mp-gouttiere), var(--mp-encre) calc(100% - var(--mp-gouttiere)), transparent 100%);
}
.mp-tl__defile::-webkit-scrollbar{ display: none }

.mp-tl__liste{
  display: flex;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: .5rem var(--mp-tl-marge) .25rem;
  list-style: none;
}

/* ── Événement ───────────────────────────────────────────── */
.mp-tl__evt{
  position: relative;
  flex: 0 0 auto;
  width: clamp(10.5rem, 42vw, 12.5rem);
  padding: 0 .75rem;
  text-align: center;
  scroll-snap-align: start;
}

/* Trait continu d'un événement à l'autre, à hauteur du point */
.mp-tl__evt::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--mp-tl-logo) + 1rem + var(--mp-tl-point) / 2 - 1px);
  height: 2px;
  background: var(--mp-trait);
}
.mp-tl__evt:first-child::before{ left: 50% }
.mp-tl__evt:last-child::before{ right: 50% }

.mp-tl__logo{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--mp-tl-logo);
}
.mp-tl__logo img{
  display: block;
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 100%;
  object-fit: contain;
}

.mp-tl__point{
  position: relative;
  display: block;
  width: var(--mp-tl-point);
  height: var(--mp-tl-point);
  margin: 1rem auto;
  border: 2px solid var(--mp-bleu);
  border-radius: var(--mp-r-pill);
  background: var(--mp-blanc);
  transition: background var(--mp-dur) ease, border-color var(--mp-dur) ease;
}
.mp-tl__evt:hover .mp-tl__point{
  background: var(--mp-turquoise);
  border-color: var(--mp-turquoise);
}

.mp-tl__annee{
  margin: 0;
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-h2-sm);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--mp-ls-titre);
  font-variant-numeric: tabular-nums;
  color: var(--mp-bleu);
}

.mp-tl__texte{
  margin: .55rem 0 0;
  font-size: var(--mp-t-sm);
  line-height: 1.5;
  color: var(--mp-texte);
}

@media (prefers-reduced-motion: reduce){
  .mp-tl__bouton,
  .mp-tl__point{ transition: none }
  .mp-tl__bouton:hover:not(:disabled){ transform: none }
}