.defileur {
  container: defileur / inline-size;
}

.defileur__fleches {
  display: flex;
  flex: none;
  gap: 8px;
}

.defileur__fleches[hidden] {
  display: none;
}

.defileur__fleche {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #174195;
  border-radius: 50%;
  background-color: #ffffff;
  color: #174195;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.defileur__fleche svg {
  width: 22px;
  height: 22px;
}

.defileur__fleche:hover:not(:disabled) {
  background-color: #174195;
  color: #ffffff;
}

.defileur__fleche:focus-visible {
  outline: 3px solid #174195;
  outline-offset: 2px;
}

.defileur__fleche:disabled {
  border-color: #b9c6d8;
  color: #8a9bb3;
  cursor: default;
}

.defileur__liste {
  --ecart: 16px;
  display: grid;
  grid-auto-flow: column;
  gap: var(--ecart);
  margin: -6px;
  padding: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6px;
  scrollbar-width: thin;
  scrollbar-color: #174195 #e3ebf4;
}

.defileur__liste--fleches {
  scrollbar-width: none;
}

.defileur__liste--fleches::-webkit-scrollbar {
  display: none;
}

.defileur__liste > li {
  min-width: 0;
  scroll-snap-align: start;
}

@supports (animation-timeline: view()) {
  .defileur__liste > li {
    animation: defileur-estompe linear both;
    animation-timeline: view(inline);
  }
}

@keyframes defileur-estompe {
  entry 0% { opacity: 0.45; }
  entry 85% { opacity: 0.45; }
  entry 95% { opacity: 1; }
  exit 5% { opacity: 1; }
  exit 15% { opacity: 0.45; }
  exit 100% { opacity: 0.45; }
}

@media (max-width: 1150px) {
  .defileur__liste {
    margin-inline: calc(-1 * var(--gouttiere, 6px));
    padding-inline: var(--gouttiere, 6px);
    scroll-padding-inline: var(--gouttiere, 6px);
  }
}

@media (max-width: 480px) {
  .defileur__fleche {
    width: 36px;
    height: 36px;
  }

  .defileur__fleche svg {
    width: 18px;
    height: 18px;
  }
}