/* video.css (29/10/2026) : pages vidéo (video.php) et bande « 🎬 Voir les vidéos » des cours (coursmk.php).
   Seulement ce que global.css n'a pas : la BD de la série, la boîte de transcription (karaoké), l'écran de fin de vidéo.
   Le reste vient de global.css (video, qn-btn, fdpaille, flexlgw, perle, gros…). Changer $MAJ_js si on le modifie. */
.vd-ecran{position:relative;max-width:854px;margin-left:auto;margin-right:auto;}
.vd-ecran video{display:block;margin:0 auto;}
.vd-titre{font-size:2rem;text-align:left;margin:12px 0 4px;}
/* fin de vidéo : épisode suivant dans 5 s, ou fin de série (posé sur la vidéo) */
.vd-fin{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px;border-radius:4px;background:rgba(0,17,51,0.88);color:#fff;text-align:center;}
.vd-fin[hidden]{display:none;}
.vd-fin p{margin:4px 0;}
a.vd-go:link, a.vd-go:visited{display:inline-block;padding:6px 18px;border-radius:20px;background:#08d;color:#fff;font-weight:var(--gras);text-decoration:none;}
a.vd-go:hover, a.vd-go:focus{background:#29c;color:#fff;text-decoration:none;}
.vd-reste{padding:6px 10px;background:transparent;color:#fff;text-decoration:underline;}
/* transcription : une phrase = un bouton (qn-btn) ; la phrase dite s'allume ; on défile dans la boîte, pas dans la page */
.vd-texte{max-width:854px;margin-left:auto;margin-right:auto;text-align:left;}
.vd-lignes{position:relative;max-height:45vh;overflow-y:auto;margin-top:6px;padding:4px;border:1px solid #cde;border-radius:8px;background:#fff;}
.vd-l{display:flex;gap:10px;width:100%;margin:0;padding:4px 8px;border-radius:6px;background:transparent;text-align:left;line-height:1.35;cursor:pointer;}
.vd-l:hover{background:#f0f8ff;}
.vd-t{flex:0 0 3.2em;color:#89a;font-variant-numeric:tabular-nums;}
.vd-l.vd-on{background:#d8f0fd;box-shadow:inset 3px 0 0 #08d;}
/* la BD de la série : une case par épisode (vignette, numéro, durée, bulle = titre de l'écran du cours).
   29/10/2026 : un seul paragraphe de liens (<p class="vd-bd"><a class="vd-case">…) : AdSense ne glisse plus ses annonces
   automatiques entre les cases (il ne coupe pas un paragraphe) ; chaque case est le lien lui-même. */
.vd-bd{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 12px;max-width:1000px;margin:10px auto;padding:0 4px;text-align:left;}
a.vd-case:link, a.vd-case:visited{position:relative;display:flex;flex-direction:column;padding:6px;border-radius:8px;background:#fff;box-shadow:2px 2px 4px 1px #c8c4c0;color:#013;text-decoration:none;}
a.vd-case:hover, a.vd-case:focus{box-shadow:0 0 0 3px #29c;color:#013;text-decoration:none;}
.vd-vign{position:relative;display:block;}
.vd-vign img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:4px;}
.vd-num{position:absolute;top:4px;left:4px;min-width:1.6em;padding:0 6px;border-radius:12px;background:#013;color:#fff;font-size:0.75em;font-weight:var(--gras);text-align:center;}
.vd-duree{position:absolute;right:4px;bottom:4px;padding:0 5px;border-radius:4px;background:rgba(0,17,51,0.8);color:#fff;font-size:0.7em;}
.vd-bulle{position:relative;display:block;margin-top:10px;padding:6px 8px;border:1px solid #cde;border-radius:10px;background:#f0f8ff;font-size:0.8em;line-height:1.25;}
.vd-bulle::before{content:"";position:absolute;top:-8px;left:16px;border-width:0 8px 8px;border-style:solid;border-color:transparent transparent #cde;}
.vd-bulle::after{content:"";position:absolute;top:-6px;left:17px;border-width:0 7px 7px;border-style:solid;border-color:transparent transparent #f0f8ff;}
a.vd-case.vd-cur{box-shadow:0 0 0 3px #08d;}/* l'épisode de la page (après a.vd-case:link, même poids) */
.vd-cur .vd-num{background:#08d;}
.vd-vu .vd-num::after{content:" \2713";}/* déjà vu dans ce navigateur (video.js) */
a.vd-case.vd-ici{outline:2px dashed #08d;outline-offset:2px;}/* sur un cours : les épisodes du chapitre affiché */
/* fin des cours : un ruban d'une seule rangée qu'on fait glisser (video.js l'amène sur les épisodes du chapitre) */
.vd-bd.vd-ruban{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:12px;padding:6px 4px 12px;}
.vd-ruban .vd-case{flex:0 0 160px;scroll-snap-align:start;}
/* 29/10/2026 : filet de sécurité si une annonce automatique entrait quand même dans la BD : toute une rangée, une bande
   à part, jamais cachée (règle AdSense). */
.vd-bd > :not(.vd-case){grid-column:1 / -1;}
.vd-bd.vd-ruban > :not(.vd-case){flex:0 0 100%;}
@media all and (max-width:960px)
{
.vd-titre{font-size:1.4rem;}
}
@media all and (max-width:640px)
{
.vd-titre{font-size:1.2rem;}
.vd-bd{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px;}
}