/* ============================================================
   video.css — complément de blog.css pour les pages vidéo.

   Principe : ne rien redéfinir de ce qui existe déjà. Le hub réutilise
   .cards-grid et .article-card ; la page vidéo réutilise .article-page,
   .article-single, .article-header, .article-title, .article-footer-nav.
   Ce fichier n'ajoute que ce qui n'a pas d'équivalent : la ligne de
   métadonnées, les chapitres, la transcription, et deux surcouches sur
   la vignette des cartes.
   ============================================================ */

/* ============================================================
   HUB — surcouches sur la vignette
   ============================================================ */

.card-img-link { position: relative}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(16, 24, 40, .68);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  transition: background .25s ease, transform .25s ease}

.article-card:hover .video-play {
  background: var(--cat-color, var(--accent));
  transform: translate(-50%, -50%) scale(1.1)}

.video-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  background: rgba(16, 24, 40, .82);
  color: #fff;
  font-size: .74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: var(--img-radius-sm);
  pointer-events: none}

/* Espacement sous le hero.
   .article-breadcrumb est dessine pour une page d'article, ou il precede un
   grand bloc blanc : ses 2.5rem de marge basse s'ajoutaient aux 40px de
   padding haut de .blog-wrapper, soit 80px de vide entre le hero et les
   filtres. On resserre, et on aligne le fil d'Ariane sur le retrait des
   vignettes plutot que sur le bord de la fenetre. */
.videos-hub .article-breadcrumb {
  margin: .9rem 0 1rem;
  padding: 0 20px}

.videos-hub .blog-wrapper { padding-top: 8px}

@media (max-width: 860px) {
  .videos-hub .article-breadcrumb { padding: 0 16px}
}

@media (max-width: 520px) {
  .videos-hub .article-breadcrumb { margin: .7rem 0 .8rem; padding: 0 12px}
}

/* ============================================================
   PAGE VIDÉO — mêmes largeurs, rayons et ombres que la page article
   ============================================================ */

.video-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem}

.video-single {
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 4px 32px rgba(10, 20, 50, .08);
  overflow: hidden}

/* Ligne de métadonnées sous le titre — registre de .article-date */
.video-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .7rem;
  margin: 0;
  color: #b0b8c8;
  font-size: .82rem;
  letter-spacing: .02em}

.video-meta-item + .video-meta-item::before {
  content: "·";
  margin-right: .7rem;
  color: #d5dae3}

.video-body { padding: 2rem 2.5rem 1rem}

.video-lede {
  font-size: 1rem;
  line-height: 1.85;
  color: #374151;
  margin: 0}

/* ── Chapitres ─────────────────────────────────────────────── */

.video-chapters { margin: 2.5rem 0 0}

/* Titres de section. Le trait de 2px sous le titre a été retiré : il datait
   d'avant et reproduisait la couleur de rubrique en gros, ce qui alourdissait
   la page sans rien apporter. La hiérarchie tient à la taille et à la graisse. */
.video-chapters h2,
.video-transcript h2,
.video-related h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #111827;
  margin: 0 0 1rem;
  letter-spacing: -.01em}

.video-chapter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px}

.video-chapter-list li { margin: 0}

.video-chapter {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .5rem .65rem;
  border-radius: var(--img-radius);
  text-decoration: none;
  color: #374151;
  transition: background var(--trans-speed) ease}

.video-chapter:hover,
.video-chapter:focus-visible {
  background: color-mix(in srgb, var(--article-color, #1f7cff) 7%, #fff)}

.video-timecode {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  font-weight: 600;
  color: var(--article-color, var(--accent));
  background: color-mix(in srgb, var(--article-color, #1f7cff) 10%, #fff);
  border-radius: var(--img-radius-sm);
  padding: .1rem .45rem;
  text-decoration: none}

.video-chapter-name { line-height: 1.6}

/* ── Transcription ─────────────────────────────────────────── */

.video-transcript { margin: 2.5rem 0 0}

/* Interligne identique à .article-content p */
/* Justifie : la transcription est un bloc de lecture continu, sans
   images ni listes pour rompre la colonne. Cesure activee pour eviter
   les blancs inter-mots que produit un texte justifie non coupe. */
.video-cue {
  margin: 0 0 1.15rem;
  line-height: 1.85;
  color: #374151;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto}

.video-cue .video-timecode { margin-right: .55rem}
.video-cue .video-timecode:hover { text-decoration: underline}

/* ── Renvoi vers l'article ─────────────────────────────────── */

.video-article-link {
  margin: 2.5rem 0 .5rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--img-radius);
  background: color-mix(in srgb, var(--article-color, #1f7cff) 6%, #fff)}

.video-article-link p {
  margin: 0 0 .85rem;
  color: #5a6777;
  line-height: 1.7;
  font-size: .95rem}

/* ── Autres vidéos ─────────────────────────────────────────── */

.video-related { margin: 2.5rem 0 0}

.video-related-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none}

.video-related-item { margin: 0}

.video-related-link {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .5rem;
  border-radius: var(--img-radius);
  text-decoration: none;
  color: inherit;
  transition: background var(--trans-speed) ease}

.video-related-link:hover,
.video-related-link:focus-visible {
  background: color-mix(in srgb, var(--article-color, #1f7cff) 7%, #fff)}

.video-related-thumb {
  position: relative;
  flex: 0 0 112px;
  line-height: 0}

.video-related-thumb img {
  width: 112px;
  height: 63px;
  object-fit: cover;
  border-radius: var(--img-radius-sm)}

.video-related-duration {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .78);
  color: #fff;
  font-size: .68rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums}

.video-related-text {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0}

.video-related-title {
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.4;
  /* Trois lignes au plus : les titres vont de 30 à 110 caractères et sans
     cette borne les cartes de la grille cessent d'être alignées. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden}

.video-related-cat {
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: var(--img-radius-sm);
  background: color-mix(in srgb, var(--cat-color, #1f7cff) 12%, #fff);
  color: var(--cat-color, #1f7cff);
  font-size: .7rem;
  font-weight: 600}

/* ── Encart dans les pages d'articles ──────────────────────── */

.article-video-note {
  margin: 0 2.5rem 1.5rem;
  font-size: .9rem}

.article-video-note a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--article-color, var(--accent));
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: border-style .2s}

.article-video-note a:hover { border-bottom-style: solid}

/* ── Mobile, sur les seuils déjà utilisés par blog.css ─────── */

@media (max-width: 640px) {
  .video-page { padding: 1.5rem 1rem 3rem}
  .video-body { padding: 1.25rem 1.15rem .5rem}
  .article-video-note { margin: 0 1.15rem 1.25rem}
  .video-chapters h2,
  .video-transcript h2 { font-size: 1.15rem}
  .video-chapter { padding: .5rem .4rem; gap: .6rem}
}

@media (max-width: 520px) {
  .video-play { width: 40px; height: 40px}
  .video-duration { font-size: .7rem}
  /* Une seule colonne : à 230px minimum la grille en tenait déjà une seule,
     mais la vignette de 112px laissait un titre sur une colonne trop étroite. */
  .video-related-list { grid-template-columns: 1fr}
}