/* Le lecteur de relecture : la vidéo, la barre de lecture et ses repères, les outils de dessin, la comparaison (08/11/2026).
   Plusieurs écrans montent le même lecteur (public/poste-lecteur.js). Les valeurs de repli des variables (--pill, --r, --mono, --blue) servent quand la page ne les définit pas. */

/* Le lecteur reste sombre dans les deux thèmes : c'est l'image qu'on juge. */
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #0b1020; border-radius: var(--r, 14px); overflow: hidden; }
.stage-file { background: none; padding: 0; }
.screen { flex: 1; min-height: 0; display: grid; place-items: center; background: #000; overflow: hidden; }
.frame { position: relative; }
.frame video { display: block; width: 100%; height: 100%; cursor: pointer; }
.frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; touch-action: none; }
.is-drawing .frame canvas { pointer-events: auto; cursor: crosshair; }
.is-drawing .frame { box-shadow: 0 0 0 2px #ff3b30; }
.stage:fullscreen { border-radius: 0; }

.transport { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #e5e7eb; }
.tbtn { background: none; border: 0; padding: 6px 10px; border-radius: var(--pill, 999px); cursor: pointer; font-size: 13px; font-weight: 550; color: #c9d1e0; white-space: nowrap; }
.tbtn:hover { color: #fff; background: rgba(255, 255, 255, .12); }
[data-speed] { min-width: 44px; }
.play, .play:hover { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #0b1020; padding: 0; flex: none; }
.play:hover { background: var(--blue, #0a84ff); color: #fff; }
.play .i-pause, .is-playing .play .i-play { display: none; }
.is-playing .play .i-pause, .play .i-play { display: inline-flex; }
.tc { display: inline-block; min-width: 2.8em; font: 600 13px var(--mono, ui-monospace, "SF Mono", Menlo, monospace); color: #fff; }
.tc-dim { color: #8a93a8; font-weight: 450; }
.track { flex: 1; height: 32px; position: relative; cursor: pointer; touch-action: none; }
.rail { position: absolute; left: 0; right: 0; top: 14px; height: 4px; background: rgba(255, 255, 255, .22); border-radius: 2px; overflow: hidden; }
.rail i { display: block; height: 100%; width: 0; background: var(--blue, #0a84ff); }
.marks { position: absolute; left: 0; right: 0; top: 0; height: 0; }
.mark { position: absolute; top: 9px; width: 14px; height: 14px; margin-left: -7px; padding: 0; cursor: pointer; background: #fff; border: 2px solid #0b1020; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--blue, #0a84ff); }
.mark.by-eleve { background: #6f97ff; box-shadow: none; }
.mark:hover { transform: scale(1.3); }
.mark.is-done { background: #5f6980; box-shadow: none; }
.mark.is-hugo { background: rgba(10, 132, 255, .45); border: 2px dashed #fff; box-shadow: none; }   /* une proposition : pas encore un retour */

@media (max-width: 1199px) {
  /* Le cadre a la forme de la vidéo (--ar, posée par fit() de app.js), 62 % de l'écran au plus pour une vidéo verticale. Avant le 27/10/2026, il faisait toujours 62 % :
     une vidéo horizontale y laissait 300 px de noir, et quand les boutons étaient visibles, l'image était hors de l'écran (« le bouton play ne marche pas »). */
  .screen { height: auto; aspect-ratio: var(--ar, 16 / 9); max-height: 62vh; flex: none; }
}

/* Lecteur sur téléphone : la barre de progression prend toute la largeur au-dessus des commandes
   (elle tombait à zéro), et les commandes tiennent sur une ligne. */
@media (max-width: 767px) {
  .transport { flex-wrap: wrap; gap: 4px; padding: 6px 10px 10px; }
  .transport .track { order: -1; flex: 1 1 100%; }
  .transport .tbtn:not(.play) { padding: 6px 7px; }
  .transport .tc { min-width: 0; font-size: 12px; }
  .transport [data-speed] { margin-left: auto; min-width: 0; }
}

@media (min-width: 700px) {
  .tc { min-width: 0; font-family: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tbtn { flex: none; }
  .track { margin-inline: 8px; min-width: 60px; }   /* les repères de retours dépassent de 7 px de chaque côté : ils ne passent plus sur le temps */
  .transport { flex-wrap: nowrap; }
}

@media (min-width: 1200px) {
  .stage { align-self: start; }
  .screen { flex: none; }
}

.screen { position: relative; }

.rv-state { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 9px 16px; border-radius: 22px; background: rgba(20, 22, 30, .82); color: #fff; font-size: 14px; font-weight: 550; text-align: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rv-state[hidden] { display: none; }
.rv-state.is-wait { pointer-events: none; }
.rv-state.is-error { flex-wrap: wrap; justify-content: center; background: rgba(60, 18, 18, .9); }
.rv-state .link { color: #fff; text-decoration: underline; }
.rv-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: rv-tourne .8s linear infinite; flex: none; }
@keyframes rv-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rv-spin { animation: none; border-top-color: rgba(255, 255, 255, .3); } }

/* --- Outils de dessin posés sur l'image (Trait, Flèche, Cadre, Cercle, couleur, Annuler) */
.draw-tools { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4; display: none; align-items: center; gap: 4px; padding: 5px; border-radius: 22px; background: rgba(20, 22, 30, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.is-drawing .draw-tools { display: flex; }
.draw-tools .dt { border: 0; background: none; color: #d6dbe8; font: 600 13px var(--font, inherit); padding: 6px 11px; border-radius: 16px; cursor: pointer; }
.draw-tools .dt:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.draw-tools .dt.on { background: #fff; color: #0b1020; }
.draw-tools .dc { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.draw-tools .dc.on { border-color: #0b1020; box-shadow: 0 0 0 2px #fff; }
.draw-tools .sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .22); margin: 0 4px; }
@media (max-width: 700px) { .draw-tools { top: 6px; gap: 1px; padding: 3px; max-width: calc(100% - 12px); overflow-x: auto; scrollbar-width: none; } .draw-tools .dt { padding: 6px 6px; font-size: 12px; min-height: 36px; flex: none; } .draw-tools .dc { flex: none; width: 20px; height: 20px; } .draw-tools .sep { margin: 0 2px; flex: none; } }

/* --- Retours sur une plage (de 00:12 à 00:18) : une bande sur la barre de lecture */
.mark-range { position: absolute; top: 12px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .55); pointer-events: none; }
.mark-range.by-eleve { background: rgba(111, 151, 255, .6); }
.mark-range.is-done { background: rgba(95, 105, 128, .6); }
.mark-range.is-new { background: rgba(10, 132, 255, .8); box-shadow: 0 0 0 1px #fff; }

.track-tip { position: absolute; bottom: 100%; transform: translateX(-50%); margin-bottom: 2px; padding: 2px 7px; border-radius: 10px; background: #fff; color: #0b1020; font: 600 12px var(--font, inherit); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; z-index: 5; }
.track-tip[hidden] { display: none; }

/* --- Comparer deux versions côte à côte */
.screen.is-compare { grid-auto-flow: column; grid-auto-columns: max-content; justify-content: center; column-gap: 8px; }
.cmp-tag { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 2px 9px; border-radius: 10px; background: rgba(20, 22, 30, .8); color: #fff; font: 700 12px var(--font, inherit); pointer-events: none; }
.tbtn.on { color: #fff; background: rgba(255, 255, 255, .16); }
.is-compare [data-draw] { opacity: .4; pointer-events: none; }
@media (max-width: 700px) { [data-compare] { display: none; } }