/* Lecteur vidéo maison du site : le même que le film de /marketeur-full-stack/ (assets/css/marketeur-full-stack.css,
   classes mf-*), en composant réutilisable. Toute vidéo à regarder passe par lui ; les boucles muettes
   décoratives restent de simples <video muted loop>. Script : assets/js/lecteur-video.js. */
.lecteur-video { position: relative; overflow: hidden; background: #0A1622; }
.lecteur-video .lv-video { display: block; width: 100%; height: auto; object-fit: cover; background: #0A1622; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.lecteur-video:not(.lv-actif):hover .lv-video { transform: scale(1.02); }
.lecteur-video.lv-actif .lv-video { cursor: pointer; }
.lecteur-video.lv-actif.lv-repos { cursor: none; }

/* le bouton de lancement : le rond doré au centre */
.lv-lancer { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.lv-play { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--golden); background: rgba(13, 27, 42, 0.6); border: 1px solid rgba(249, 220, 92, 0.6); box-shadow: 0 0 40px rgba(249, 220, 92, 0.2); transition: transform 0.3s; }
.lv-play svg { width: 26px; height: 26px; margin-left: 4px; }
.lv-lancer:hover .lv-play { transform: scale(1.08); }
.lv-lancer:focus-visible { outline: 2px solid var(--golden); outline-offset: -4px; }

/* la barre de contrôle */
.lv-barre { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 0.6rem; padding: 2.4rem 0.8rem 0.7rem; background: linear-gradient(180deg, rgba(13, 27, 42, 0) 0%, rgba(13, 27, 42, 0.86) 72%); transition: opacity 0.35s ease, translate 0.35s ease; }
.lv-barre[hidden], .lv-fin[hidden], .lv-lancer[hidden] { display: none; }
.lecteur-video.lv-repos .lv-barre { opacity: 0; translate: 0 6px; pointer-events: none; }
.lv-b { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; background: transparent; color: var(--off-white); cursor: pointer; transition: color 0.2s; }
.lv-b svg { width: 20px; height: 20px; }
.lv-b:hover { color: var(--golden); }
.lv-b:focus-visible, .lv-progres:focus-visible { outline: 2px solid var(--golden); outline-offset: 2px; }
.lv-temps { flex: none; min-width: 6.6em; font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--light-blue); }
.lv-progres { position: relative; flex: 1; height: 4px; background: rgba(124, 152, 179, 0.3); cursor: pointer; touch-action: none; }
.lv-progres::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.lv-charge, .lv-joue { position: absolute; left: 0; top: 0; bottom: 0; width: 0; pointer-events: none; }
.lv-charge { background: rgba(172, 203, 225, 0.35); }
.lv-joue { background: var(--golden); box-shadow: 0 0 12px rgba(249, 220, 92, 0.45); }
.lv-joue::after { content: ''; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--golden); transform: scale(0); transition: transform 0.2s; }
.lv-progres:hover .lv-joue::after, .lv-progres:focus-visible .lv-joue::after { transform: scale(1); }

/* l'écran de fin (extrait : le bouton vers la vidéo complète ; sinon : revoir) */
.lv-fin { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; text-align: center; background: rgba(13, 27, 42, 0.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lv-fin .btn-primary { margin: 0; }
/* dans un article, `.article-body a` dore et souligne les liens : le bouton de fin garde son texte foncé */
.lecteur-video .lv-fin a.btn-primary { color: var(--midnight); text-decoration: none; }
.lv-revoir { padding: 0.3rem 0.6rem; border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--light-blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lv-revoir:hover { color: var(--golden); }

/* plein écran */
.lecteur-video:fullscreen { width: 100%; height: 100%; border: 0; background: #000; }
.lecteur-video:fullscreen .lv-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.lecteur-video:-webkit-full-screen { width: 100%; height: 100%; border: 0; background: #000; }
.lecteur-video:-webkit-full-screen .lv-video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* lecteur étroit (vidéo verticale, mobile) : barre plus serrée */
.lecteur-video.lv-etroit .lv-barre { gap: 0.3rem; padding: 2rem 0.4rem 0.5rem; }
.lecteur-video.lv-etroit .lv-temps { min-width: 0; font-size: 0.68rem; }
.lecteur-video.lv-etroit .lv-b { width: 32px; height: 32px; }
.lecteur-video.lv-etroit .lv-play { width: 60px; height: 60px; }

@media (prefers-reduced-motion: reduce) {
    .lecteur-video .lv-video, .lv-play, .lv-barre { transition: none; }
}