/* Réglages partagés du ruban. Les positions sont relatives au bord supérieur. */
button.favourite-bookmark[data-favourite] {
  --bookmark-width: 25.33px;
  --bookmark-height: 72px;
  --bookmark-top: -10px;
  --bookmark-opacity: 1;
  --bookmark-v: 86%;
  --bookmark-inactive: -41px;
  --bookmark-active: -30px;
  --bookmark-bounce: 5px;
  --bookmark-hover: 4px;
  position: absolute;
  top: 0;
  right: calc(24px + (58px - var(--bookmark-width)) / 2);
  z-index: 2;
  width: var(--bookmark-width);
  height: max(0px, calc(var(--bookmark-height) + var(--bookmark-top) + max(var(--bookmark-inactive), var(--bookmark-active) + var(--bookmark-bounce)) + var(--bookmark-hover)));
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  touch-action: manipulation;
}
.tg-grid .tg-card > button.favourite-bookmark[data-favourite] {
  top: 2px;
  right: 20px;
}
[data-bookmark-style="gallery"] button.favourite-bookmark[data-favourite],
[data-bookmark-style="directory"] button.favourite-bookmark[data-favourite],
[data-bookmark-style="studio"] button.favourite-bookmark[data-favourite] {
  --bookmark-opacity: .8;
}
[data-bookmark-style="studio"] { position: relative; }
.favourite-row > button.favourite-bookmark[data-favourite] { right: 20px; }
[data-bookmark-style="directory"] > button.favourite-bookmark[data-favourite] {
  top: 0;
  right: 20px;
}
.favourite-bookmark__ribbon {
  position: absolute;
  top: var(--bookmark-top);
  left: calc(50% - var(--bookmark-width) / 2);
  width: var(--bookmark-width);
  height: var(--bookmark-height);
  background: #999894;
  opacity: var(--bookmark-opacity);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% var(--bookmark-v), 0 100%);
  transform: translateY(var(--bookmark-inactive));
  translate: 0 0;
  transition: background-color .3s ease, translate .2s ease;
  pointer-events: none;
}
.favourite-bookmark[aria-pressed="true"] .favourite-bookmark__ribbon { background: var(--st-accent, #d84040); transform: translateY(var(--bookmark-active)); }
@media (hover: hover) { .favourite-bookmark:hover .favourite-bookmark__ribbon { translate: 0 var(--bookmark-hover); } }
.favourite-bookmark.bookmark-adding .favourite-bookmark__ribbon { animation: bookmark-add .4s ease-out; }
.favourite-bookmark.bookmark-removing .favourite-bookmark__ribbon { animation: bookmark-remove .4s ease-in-out; }
@keyframes bookmark-add {
  0% { transform: translateY(var(--bookmark-inactive)); }
  70% { transform: translateY(calc(var(--bookmark-active) + var(--bookmark-bounce))); }
  100% { transform: translateY(var(--bookmark-active)); }
}
@keyframes bookmark-remove {
  0% { transform: translateY(var(--bookmark-active)); }
  30% { transform: translateY(calc(var(--bookmark-active) + var(--bookmark-bounce))); }
  100% { transform: translateY(var(--bookmark-inactive)); }
}
.favourite-bookmark:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.favourite-bookmark:disabled { cursor: default; }
@media (prefers-reduced-motion: reduce) { .favourite-bookmark__ribbon { animation: none !important; transition: none; } }