.fil {
  container-type: inline-size;
  --u: min(1px, calc(100cqw / 360));
  --scene: 440; 
}

@media (min-width: 900px) {
  .fil { --scene: 392; --u: min(1px, calc(100cqw / 360), calc(100svh / 900)); }
}
@media (min-width: 900px) and (max-height: 820px) {
  .fil { gap: 8px; }
  .fil .fil__aide { display: none; }
}

.fil__post { transition: grid-template-rows .9s cubic-bezier(.2, .8, .2, 1), opacity .7s ease; }
@keyframes fil-arrive-a { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fil-arrive-b { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.fil__pied { display: none; }
.fil--vivant .fil__pied { display: flex; align-items: center; gap: 10px; }
.fil__points { display: flex; align-items: center; flex-shrink: 0; }
.fil__point {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
}
.fil__point:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }
.fil__piste {
  position: relative;
  overflow: hidden;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(29, 24, 16, .25);
  transition: width .3s;
}
.fil__point[aria-current="true"] .fil__piste { width: 26px; background: rgba(29, 24, 16, .14); }
.fil__barre {
  position: absolute;
  inset: 0;
  background: var(--vert);
  transform-origin: left center;
  transform: scaleX(0);
}
.fil--vivant .fil__point[aria-current="true"] .fil__barre { animation: fil-avancer 6.5s linear both; }

.fil--pause .fil__barre,
.fil--clavier .fil__barre,
.fil--hors-champ .fil__barre { animation-play-state: paused !important; }
@keyframes fil-avancer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fil__aide { font-size: 13px; line-height: 1.4; color: var(--attenue); }

.chaine__suivre { display: flex; align-items: center; gap: 16px; }
.chaine__suivre .chaine__bouton { margin: 0; flex-shrink: 0; }
.chaine__suivre .chaine__note { margin: 0; }
@media (max-width: 899px) {
  .fil--vivant .fil__pied { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fil__aide { font-size: 12.5px; }
  .chaine__suivre { flex-direction: column; align-items: stretch; gap: 8px; }
  .chaine__suivre .chaine__bouton { justify-content: center; }
  .chaine__suivre .chaine__note { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fil__post { transition: none; }
  .fil__barre { display: none; }
  .fil__bulle { animation: none !important; }
}