/* =========================================================
   bootstrap_barrio_giguellerie — 46-ligne-du-temps.css
   Composant « ligne du temps », réutilisable sur toute page.
   Chargé via la bibliothèque ligne-du-temps, attachée au bloc.
   ========================================================= */

.tl {
  list-style: none;
  margin: 2.5rem 0;
  padding: 0;
}

.tl-item {
  display: grid;
  grid-template-columns: 8rem 1px 5rem 1fr;
  gap: 0 1.25rem;
  align-items: start;
}

/* Colonne du repère temporel */

.tl-day {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--bootstrap_barrio_giguellerie-gris-moyen);
  text-align: right;
  padding-top: .2rem;
}

/* Filet vertical et pastilles */

.tl-rail {
  position: relative;
  justify-self: center;
  width: 1px;
  height: 100%;
  background: color-mix(in srgb, var(--bootstrap_barrio_giguellerie-gris-clair) 65%, transparent);
}

.tl-item:first-child .tl-rail {
  top: .55rem;
  height: calc(100% - .55rem);
}

.tl-item:last-child .tl-rail {
  height: .6rem;
}

.tl-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: .4rem;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--bootstrap_barrio_giguellerie-gris-clair);
}

/* La dernière étape est une arrivée */

.tl-item:last-child .tl-rail::before {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Vignette. Largeur accordée au style d'image vignette_160. */

.tl-thumb {
  width: 5rem;
}

.tl-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .25rem;
}

/* Corps de l'étape */

.tl-body {
  padding-bottom: 2.4rem;
  min-width: 0;
}

.tl-body .tl-titre {
  margin: 0 0 .3rem;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
}

.tl-body p {
  margin: 0;
  color: var(--bootstrap_barrio_giguellerie-gris-fonce);
  line-height: 1.6;
}

/* L'étape qui porte la vidéo */

.tl-video .tl-thumb {
  position: relative;
}

.tl-video .tl-thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 14px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .55));
  pointer-events: none;
}

@media (max-width: 767.98px) {
  .tl-item {
    grid-template-columns: 5.5rem 1px 3.25rem 1fr;
    gap: 0 .85rem;
  }

  .tl-thumb {
    width: 3.25rem;
  }

  .tl-day {
    font-size: .74rem;
  }

  .tl-body {
    padding-bottom: 2rem;
  }
}