/* Navigation des galeries de projets : discrète, verte et révélée à l’interaction. */
.slider-arrow {
  width: 34px;
  height: 52px;
  padding: 0 0 3px;
  color: var(--accent-soft);
  background: rgb(15 15 15 / 42%);
  border: 1px solid rgb(123 168 163 / 48%);
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  font-size: 2.05rem;
  font-weight: 300;
  text-shadow: 0 1px 8px rgb(0 0 0 / 85%);
  transform: translateY(-50%) scale(.94);
  transition:
    opacity .2s ease,
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.slider:hover .slider-arrow:not([hidden]),
.slider:focus-within .slider-arrow:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.slider-arrow:hover,
.slider-arrow:focus-visible {
  color: var(--accent-soft);
  background: rgb(34 109 104 / 36%);
  border-color: var(--accent-soft);
  outline: none;
}

.slider-arrow:focus-visible {
  box-shadow: 0 0 0 2px rgb(123 168 163 / 28%);
}

.slider-arrow[hidden] {
  opacity: 0;
  pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
  .slider-arrow:not([hidden]) {
    opacity: .92;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }
}