/* ---------------------------------------------------------------------------
   Carte vidéo — apparence commune à toutes les grilles et rangées du site :
   accueil, catalogue, catégories, teasers, « à voir aussi ».

   Cette feuille est chargée APRÈS components.css et reprend la main sur les
   règles historiques de .video-card. Elles n'ont pas été supprimées de
   components.css : cette feuille sert encore aux pages non refondues, et la
   retoucher aurait demandé de tout revérifier d'un coup.

   Aucune superposition de la carte n'utilise `backdrop-filter` : chaque badge,
   pastille de durée ou cadenas crée sinon sa propre couche de composition, soit
   plusieurs dizaines par écran dans une grille qui défile. Les fonds sont
   franchement opaques, ce qui les rend de toute façon lisibles sans flou — y
   compris sur une miniature claire.
   --------------------------------------------------------------------------- */

.video-card {
  display: flex;
  flex-direction: column;

  /* Un liseré de 4 px seulement : la vignette affleure les bords de la carte,
     dont on ne voit que le contour arrondi. Un cadre plus large ferait lire
     deux objets — une image posée dans une boîte — au lieu d'un seul. */
  padding: 4px;

  border: 1px solid var(--bord, rgba(246, 240, 245, 0.1));
  border-radius: 18px;
  background: var(--fond-1, #18131a);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.25s;
}

/* --- Visuel ---------------------------------------------------------------- */

.video-card .video-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 15px;
  background: var(--fond-2, #241c27);
  overflow: hidden;

  /* `flex: none` est indispensable dans une rangée : les cartes y sont étirées
     à la hauteur de la plus haute, et sans cela le visuel se comprimait pour
     rentrer, poussant le texte hors de la carte. */
  flex: none;
}

.video-card .video-wrapper video,
.video-card .poster-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* L'aperçu au survol est SOUS la miniature, et sans fond.

   Une règle héritée le plaçait en z-index 4 avec `background: #000` : la balise
   <video>, vide tant qu'on n'a pas survolé la carte, peignait donc un
   rectangle noir opaque par-dessus chaque vignette du site. Toutes les
   miniatures étaient masquées, et l'on croyait à des fichiers manquants. */
.video-card .video-wrapper video {
  z-index: 0;
  background: transparent;
}

/* L'aperçu au survol est sous la miniature : c'est le retrait de celle-ci qui
   le révèle, sans changement de dimension ni saut de mise en page.

   Le sélecteur reprend la forme exacte de celui de style-videos.css
   (`.video-wrapper img.poster-overlay`), qui place la miniature en z-index 5 :
   avec un sélecteur moins spécifique, elle recouvrait badges, durée et cadenas,
   tous invisibles à l'écran alors que présents dans le HTML. */
.video-card .video-wrapper img.poster-overlay {
  z-index: 2;
  transition: opacity 0.25s;
}

.video-card .poster-overlay.hidden { opacity: 0; }

/* --- Badges ---------------------------------------------------------------- */

.carte-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;

  /* Translucide, mais SANS `backdrop-filter`.

     Le flou d'arrière-plan donnait un joli rendu sur maquette, mais il fait
     passer chaque badge dans sa propre couche de composition : le texte
     disparaissait purement et simplement à l'écran, ne laissant qu'un
     rectangle coloré. Sur une grille qui défile, c'est aussi plusieurs dizaines
     de couches à recomposer à chaque image.

     Le fond est donc assez franc pour rester lisible sur une vignette claire,
     tout en laissant deviner l'image dessous. */
}

.carte-badge svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

.carte-badge--exclusive,
.carte-badge--semaine {
  border: 1px solid rgba(255, 92, 141, 0.75);
  background: rgba(200, 24, 92, 0.72);
  color: #fff;
}

/* Doré et non rose : « premium » désigne le mode d'accès, pas une mise en avant
   éditoriale. Les distinguer d'un coup d'œil évite de croire que toute vidéo
   payante est exclusive. */
.carte-badge--premium {
  border: 1px solid rgba(224, 163, 60, 0.75);
  background: rgba(96, 64, 12, 0.78);
  color: #ffe6b0;
}

.carte-duree {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 7px 13px;
  border-radius: 9px;
  background: rgba(8, 6, 8, 0.86);
  color: #fff;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.carte-verrou {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(8, 6, 8, 0.86);
}

.carte-verrou svg { width: 16px; height: 16px; fill: rgba(255, 255, 255, 0.92); }

/* --- Texte ------------------------------------------------------------------ */

/* Neutralisation des règles héritées.

   style-videos.css pose un `background: #111` sur .video-title — d'où le
   rectangle noir qui se dessinait derrière chaque titre, visible dès que le
   fond de carte a changé de teinte. components.css ajoute par ailleurs ses
   propres marges intérieures à .video-meta, .video-title et .description, qui
   s'ajoutaient à celles du bloc de texte : le titre était décalé par rapport à
   la ligne de méta juste au-dessus.

   Les deux feuilles servent encore aux pages non refondues : on ne les touche
   pas, on reprend la main ici. */
.video-card .video-meta,
.video-card .video-title,
.video-card .description {
  background: none;
  padding-left: 0;
  padding-right: 0;
}

.video-card .video-corps {
  /* Le texte occupe la hauteur restante et n'est jamais comprimé : c'est lui
     qui donne sa hauteur à la carte, pas l'inverse. */
  flex: 1 0 auto;
  padding: 22px 26px 28px;
}

.video-card .video-meta {
  display: flex;
  gap: 14px;
  margin: 0;

  /* Le filet sépare la fiche technique du titre. Sans lui, durée et ancienneté
     se lisaient comme une première ligne du titre. */
  padding-bottom: 20px;
  border-bottom: 1px solid var(--bord, rgba(246, 240, 245, 0.1));

  color: var(--texte-faible, #83757f);
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.video-card .video-title {
  margin: 24px 0 16px;
  padding-top: 0;
  font-family: var(--police-titre, Fraunces, Georgia, serif);
  font-size: clamp(1.4rem, 1.9vw, 2rem);
  font-weight: 600;
  line-height: 1.22;
  text-align: left;
  margin-left: 0;

  /* Deux lignes au plus. Un titre long poussait la description hors de la
     carte, et les cartes d'une même rangée n'avaient plus la même hauteur. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-card .video-title a { color: var(--texte, #f6f0f5); text-decoration: none; }

.video-card .description {
  margin: 0;
  color: var(--texte-doux, #b8aab6);
  font-size: 0.95rem;
  line-height: 1.6;

  /* Deux lignes au plus : au-delà, les cartes d'une même rangée cessent d'avoir
     la même hauteur et la grille se désaligne.

     `max-height` double la coupe : les marges intérieures héritées agrandissaient
     la boîte, si bien qu'une troisième ligne restait visible sous les points de
     suspension. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(2 * 1.6em);
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Mobile : deux colonnes plutôt qu'une, cartes compactes.

   components.css force `.videos-grid` à une seule colonne sous 640px : sur un
   catalogue de plusieurs dizaines de vidéos, chaque carte gardait pourtant son
   habillage pensé pour une rangée large — titre en 2rem, 24px de marge
   au-dessus, description sur deux lignes, 20px sous la fiche technique — et
   occupait presque un écran entier à elle seule. Deux colonnes plus denses
   montrent deux fois plus de vidéos par défilement, comme n'importe quelle
   grille vidéo mobile (YouTube, Netflix…) ; la description disparaît, faute
   de place pour deux lignes de texte dans une colonne de moins de 180px.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .videos-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    /* Marges latérales réduites à 10px : à 16-20px de chaque côté, les deux
       colonnes ne dépassaient pas 160px de large, ce qui les faisait paraître
       petites. */
    padding-inline: 10px !important;
  }

  /* Sur l'accueil, la grille est déjà dans un bloc .catalogue avec sa propre
     marge de 20px : on la rogne pour que les cartes retrouvent la place. */
  .catalogue .videos-grid { margin-inline: -10px; }

  .video-card { padding: 3px; border-radius: 14px; }
  .video-card .video-wrapper { border-radius: 11px; }

  .video-card .carte-badge {
    top: 8px; right: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.68rem;
    gap: 5px;
  }
  .video-card .carte-badge svg { width: 12px; height: 12px; }

  .video-card .carte-duree {
    right: 8px; bottom: 8px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 0.76rem;
  }

  .video-card .carte-verrou { left: 8px; bottom: 8px; width: 30px; height: 30px; }
  .video-card .carte-verrou svg { width: 15px; height: 15px; }

  .video-card .video-corps { padding: 14px 12px 16px; }

  .video-card .video-meta {
    gap: 8px;
    padding-bottom: 10px;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
  }

  /* La durée figure déjà dans la pastille sur la vignette : la répéter dans la
     ligne de méta la forçait à passer sur deux lignes dans une colonne étroite. */
  .video-card .video-meta span:first-child:not(:last-child) { display: none; }

  .video-card .video-title {
    margin: 10px 0 0;
    font-size: 1.02rem;
    line-height: 1.28;
    -webkit-line-clamp: 2;
  }

  /* Pas de place pour deux lignes de description dans une colonne de moins
     de 180px sans que la carte double de hauteur — mieux vaut la retirer
     que la tronquer à un seul mot. */
  .video-card .description { display: none; }
}