/* Web4WPP Carousel Binder - frontend styles */
.web4-spines {
  --web4-spine-w: 48px;
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden; /* masque le rail qui se translate */
}
.web4-spines__rail {
  display: flex;
  gap: 10px;
  overflow: visible; /* le wrapper gère le masquage */
  transform: translateX(0); /* animé via JS */
  will-change: transform; /* performance */
  padding: 3px;
  align-items: stretch;
  width: 100%;
}
.web4-spines__rail.is-no-anim { transition: none; }
.web4-spine {
  flex: 0 0 var(--web4-spine-w);
  width: var(--web4-spine-w);
  height: 120px;
  border-radius: 10px;
  position: relative;
  display: block;
  overflow: hidden;
  background: #f5f5f5;
  scroll-snap-align: start;
  box-shadow: 2px 3px 6px rgb(0 0 0 / 90%);
}
/* Les clones servent au loop infini: ils doivent rester cliquables */
.web4-spine.is-clone { pointer-events: auto; }
.web4-spine__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.95) contrast(1.03);
}
.web4-spine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 100%);
  pointer-events: none;
}
.web4-spine__title {
  position: absolute;
  font-size: 0.8em !important;
  font-family: var(--web4-font-body);
  text-align: center;
margin: 0 auto;
  /*inset-block: 10px 10px;
  inset-inline: auto 6px;
  top: 30px;
  bottom: 5px !important;

    /* writing-mode: vertical-rl;*/
  text-orientation: mixed;

  /* TEXTE */
  color: #ffffff;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;

  /* BACKGROUND */
  background-color: rgba(120, 120, 120, 0.25); /* gris lisible */
  padding: 6px 4px;
  border-radius: 4px;

  /* OMBRE TEXTE (VISIBLE) */
  text-shadow:
  2px 0 0 rgb(7, 7, 7), /* droite */
  0 2px 0 rgb(51, 46, 46), /* bas */
  0 0 8px rgb(220, 13, 224);


  /* CLAMP */
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.web4-spine__badge {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  background: rgba(255,255,255,.85);
  color: #222;
  border: 1px solid rgba(0,0,0,.06);
}
.web4-spine__badge--new {
  right: 6px;
  left: auto;
  background: #e11d48;
  color: #fff;
  border-color: rgba(255,255,255,.15);
}
.web4-spine__badge--cat {
  background: rgba(255,255,255,.9);
}
.web4-spine__cat { font-weight: 700; }

/* Forcer un comportement cohérent du scroll (garde LTR pour la rail) */
html[dir="rtl"] .web4-spines__rail { direction: ltr; }

/* Desktop: plus haut et plus large */
@media (min-width: 992px) {
  .web4-spine { height: 120px; }
}
@media (max-width: 768px) {
    .web4-spine__title { font-size : 0.7em; }
} 

/* Avatar rond en haut du classeur (si présent) */
.web4-spine__avatar {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  z-index: 3;
}
.web4-spine.has-avatar .web4-spine__title {
  top: 56px;
  align-content:center;
}
@media (min-width: 992px) {
  .web4-spine__avatar { width: 56px; height: 56px; }
  .web4-spine.has-avatar .web4-spine__title { top: 72px; }
}