/* ---------------------------------------------------------------------------
   Page VOD (/vod) : toutes les vidéos disponibles à l'achat à l'unité.

   Grille de cartes dédiée plutôt que réutiliser .achat-carte (page-accueil.css) :
   cette dernière est pensée pour une carte unique, centrée, en pleine largeur —
   pas pour tenir en tuile dans une grille de plusieurs dizaines de vidéos.
   --------------------------------------------------------------------------- */

.page-vod { max-width: var(--largeur-max, 1680px); margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px) var(--e-12, 64px); }

.vod-entete { text-align: center; max-width: 640px; margin: var(--e-8, 40px) auto var(--e-10, 48px); }

.vod-sous-titre { margin: var(--e-3, 12px) 0 0; color: var(--texte-doux, #b8afb5); font-size: var(--t-md, 1rem); }

.vod-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}

.vod-carte {
  display: flex;
  flex-direction: column;
  background: var(--fond-1, #17141a);
  border: 1px solid var(--bord, rgba(255, 255, 255, 0.09));
  border-radius: var(--r-lg, 16px);
  overflow: hidden;
}

.vod-carte-image { position: relative; display: block; }
.vod-carte-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }

.vod-carte-corps { display: flex; flex-direction: column; flex: 1; padding: var(--e-5, 20px); }

.vod-carte-titre { margin: 0 0 var(--e-2, 8px); font-size: var(--t-md, 1rem); font-weight: 600; }
.vod-carte-titre a { color: var(--texte, #f6f0f5); text-decoration: none; }
.vod-carte-titre a:hover { color: var(--rose-clair, #ff5bab); }

.vod-carte-desc {
  margin: 0 0 var(--e-4, 16px);
  color: var(--texte-faible, #8b8288);
  font-size: var(--t-sm, 0.9rem);
  /* Deux lignes au plus : au-delà, des descriptions inégales font des cartes
     de hauteurs différentes sur une même rangée. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vod-carte-pied {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3, 12px);
}

.vod-prix { font-size: var(--t-lg, 1.15rem); font-weight: 700; color: var(--texte, #f6f0f5); }

.vod-bouton {
  padding: 10px 20px;
  border-radius: var(--r-plein, 999px);
  background: var(--rose, #ff3399);
  color: #fff;
  font-weight: 700;
  font-size: var(--t-sm, 0.9rem);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.vod-bouton:hover { background: var(--rose-clair, #ff5bab); }

.vod-bouton--voir {
  background: transparent;
  border: 1px solid var(--bord-fort, rgba(255, 255, 255, 0.18));
  color: var(--texte, #f6f0f5);
  width: 100%;
  text-align: center;
}
.vod-bouton--voir:hover { border-color: var(--rose-clair, #ff5bab); color: var(--rose-clair, #ff5bab); background: transparent; }

.vod-pied { margin: var(--e-10, 48px) 0 0; text-align: center; color: var(--texte-faible, #8b8288); font-size: var(--t-sm, 0.9rem); }
.vod-pied a { color: var(--rose, #ff3399); }