/* ===== Base RAIL DE VIGNETTES CLIQUABLES ===== */

#thumbrail, #thumbrail * { box-sizing: border-box; }
#thumbrail { user-select: none; }                 /* évite sélection pendant drag */
#thumbrail .viewport {
  height: 202px;                                  /* hauteur demandée */
  overflow: hidden;
  position: relative;
  cursor: grab;                                   /* feedback drag */
  touch-action: none;                             /* fiabilise drag */
}
#thumbrail.dragging .viewport { cursor: grabbing; }

#thumbrail .track {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 3px;                                         /* vignettes separation */
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* ===== Vignettes : largeur variable, ratio conservé ===== */
#thumbrail .item {
  position: relative;
  flex: 0 0 auto;
  height: 202px;
  width: auto;
  overflow: hidden;
  background: #000;
}
#thumbrail .item img {
  display: block;
  height: 100%;
  width: auto;                                     /* conserve le ratio */
  -webkit-user-drag: none; user-drag: none;
  user-select: none; pointer-events: none;         /* évite drag natif d'image */
}

/* ===== Bande texte cliquable (optionnelle) ===== */
#thumbrail .label {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: block;
  padding: 6px 10px;
  color: #fff; text-decoration: none; font-weight: 600;
  font-size: clamp(12px, 2.1vw, 15px);
  line-height: 1.2;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  pointer-events: auto;                             /* clic actif ici */
}
#thumbrail .label:hover { text-decoration: underline; }