/* Vidéo (01/11/2026) : lecteur 16:9 de la page /en/video/..., et vignette cliquable de l'accueil et des guides
   anglais, qui ne charge le lecteur YouTube qu'au clic (rien de YouTube avant : page légère, pas de cookies). */
.video-embed { position: relative; width: 100%; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--border); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video-facade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(108, 92, 231, .94); box-shadow: 0 6px 24px rgba(0, 0, 0, .5); transition: transform .15s ease; }
.video-play::after { content: ""; position: absolute; left: 33px; top: 26px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #fff; }
.video-facade:hover .video-play, .video-facade:focus-visible .video-play { transform: scale(1.08); }
.video-facade:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.video-time { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .78); color: #fff; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.video-noscript { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; }

/* encadré vidéo dans un guide */
.video-box { margin: 0 0 30px; }
.video-box figcaption { margin-top: 10px; color: var(--text-muted); font-size: .92rem; line-height: 1.5; text-align: center; }

/* page vidéo */
.video-page .video-main { margin: 6px 0 16px; }
.video-chapters ol { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
.video-chapters a { display: flex; gap: 12px; align-items: baseline; padding: 6px 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.video-chapters a:hover, .video-chapters a:focus-visible { background: var(--bg-card); }
.video-ts { min-width: 3.2em; color: var(--accent-hover); font-weight: 700; font-variant-numeric: tabular-nums; }
.video-transcript h3 { margin: 26px 0 8px; font-size: 1.05rem; }
.video-transcript h3 a { text-decoration: none; }
.video-transcript p { line-height: 1.7; }

/* accueil anglais */
.home-video .video-embed { max-width: 860px; }
.home-video .video-links { margin: 16px 0 0; text-align: center; color: var(--text-muted); }

@media (max-width: 600px) {
  .video-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .video-play::after { left: 25px; top: 20px; border-width: 12px 0 12px 20px; }
}
@media (prefers-reduced-motion: reduce) { .video-play { transition: none; } }