/* ====================================================
   Arms — Page Vidéos
   ==================================================== */

/* Remplace .container (max-width: 1240px, centré) : la bibliothèque de
   vidéos utilise toute la largeur de l'écran plutôt qu'une colonne
   centrale, plus adapté à une grille de cartes qu'à du texte de lecture. */
.videos-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 40px;
}
@media (max-width: 640px) {
  .videos-wrap { padding: 0 20px; }
}

/* Marge en bas de la grille pour que la dernière rangée de vidéos (et le
   bouton "Voir plus") ne se retrouve pas cachée sous le dock de filtres
   flottant, fixe en bas de l'écran. */
.videos-wrap {
  padding-bottom: 96px;
}

/* Filtre par catégorie : dock flottant fixe en bas de l'écran, centré
   horizontalement — pas une barre sticky pleine largeur comme avant. Le
   fond n'habille que les boutons eux-mêmes (padding du dock autour de
   .filter-row), pas toute la largeur de la page, puisque cet élément est
   sorti du flux normal (position: fixed) et se dimensionne à son contenu. */
.video-filter-dock {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  padding: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: calc(100vw - 32px);
}
.video-filter-dock .filter-row {
  margin-bottom: 0;
  flex-wrap: nowrap;
}
@media (max-width: 640px) {
  .video-filter-dock .filter-row {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.video-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.video-card { padding: 0; overflow: hidden; }
.video-thumb-link { display: block; text-decoration: none; }
.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--c-surface-2);
  overflow: hidden;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.video-card:hover .video-thumb img { transform: scale(1.05); }

.video-duration {
  position: absolute;
  bottom: 8px; right: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 3px 7px;
  border-radius: 5px;
}
.video-platform-tag {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: rgba(10,10,13,0.85);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
}
.video-platform-tag.tag-twitch { color: #b9a6ff; border-color: rgba(185,166,255,0.3); }
.video-platform-tag.tag-youtube { color: #ff6b6b; border-color: rgba(255,107,107,0.3); }

.video-body { padding: 18px 20px 20px; }
.video-body h3 { font-size: 15.5px; line-height: 1.4; margin-bottom: 10px; }
.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-text-dim);
  margin-bottom: 16px;
}
.video-card .btn { width: 100%; }