/* Le dialogue vidéo : une image entière, des commandes sous elle, rien qui rogne.
 *
 * Toutes les couleurs et tous les espacements viennent des jetons de `coque.css` (§2.3).
 * La taille de la boîte de l'image, elle, est posée par `video.js` en pixels : c'est le
 * seul moyen d'obtenir le ratio réel du fichier sans jamais laisser un `overflow` couper
 * un 9:16 sur un téléphone. Aucune règle d'ici ne met `overflow: hidden` sur le chemin
 * qui mène au `<video>`.
 */

/* ---- La fenêtre ------------------------------------------------------------------- */

/* Téléphone : plein écran. `100dvh` suit la barre d'adresse qui se replie. */
dialog.video {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--fond);
  color: var(--encre);
  font-size: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Surtout pas `hidden` : ce serait un ancêtre qui rogne l'image. Rien ne déborde d'ici,
   * `.video-bas` se chargeant lui-même de plafonner sa hauteur. */
  overflow: visible;
}
dialog.video::backdrop { background: rgb(23 33 43 / 62%); }

/* Ce fichier pose beaucoup de `display: flex` : sans cela ils battraient le `display: none`
 * de la feuille du navigateur, et `el.hidden = true` ne cacherait plus rien. */
.video [hidden] { display: none !important; }

.video-cadre {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  /* Les encoches et la barre gestuelle : les mesurer ici, c'est les retirer de la hauteur
   * disponible pour l'image — `video.js` lit ce padding. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---- L'en-tête -------------------------------------------------------------------- */

.video-tete {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--e1);
  min-height: var(--tete);
  padding: 0 var(--e1);
  background: var(--fond-2);
  box-shadow: 0 1px 2px rgba(23, 33, 43, .06);
  box-sizing: border-box;
}
.video-titre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--texte);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-telecharger {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  padding: 0 var(--e1);
  color: var(--encre-2);
  font-size: 15px;
  text-decoration: underline;
}

/* ---- L'image ---------------------------------------------------------------------- */

/* `flex: 1 1 0` + `min-height: 0` : la scène prend ce qui reste, jamais plus. Son contenu
 * ne la fait pas grandir, donc le calcul de `video.js` ne peut pas boucler. */
.video-scene {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* La taille vient de `video.js` : elle est déjà au ratio du fichier. */
.video-viewer { position: relative; max-width: 100%; }
.video-lecteur {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Le calque de `dessin.js`, posé sur le rectangle réel de l'image. Hors mode annotation
 * il n'intercepte rien : le doigt continue de faire défiler la page. */
.dessin-calque {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  stroke: #ffcf6b;
  fill: none;
}
.dessin-calque[data-mode="actif"] {
  pointer-events: auto;
  touch-action: none;
  cursor: crosshair;
}
/* Le calque est étiré (`preserveAspectRatio: none`) : sans cela un trait serait plus épais
 * dans un sens que dans l'autre. */
.dessin-trace {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ---- Les commandes, sous l'image --------------------------------------------------- */

/* Les commandes ne prennent jamais plus de 45 % de la fenêtre : au pire elles défilent
 * entre elles, et l'image garde toujours la moitié de l'écran. À 62 %, un téléphone
 * montrait une vignette de brouillon et une vidéo grande comme un timbre. */
.video-bas {
  flex: 0 0 auto;
  max-height: 45%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--e1);
  padding: var(--e1);
  background: var(--fond-2);
  box-shadow: 0 -1px 2px rgba(23, 33, 43, .06);
  box-sizing: border-box;
}

.video-bouton {
  min-height: var(--cible);
  min-width: var(--cible);
  padding: 0 var(--e2);
  border: 0;
  border-radius: var(--rayon);
  background: var(--doux);
  color: var(--encre);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.video-bouton:hover:not(:disabled) { background: var(--doux-2); }
.video-bouton:disabled { opacity: .45; cursor: default; }
.video-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.video-transport { display: flex; align-items: center; gap: var(--e1); }
.video-lecture { flex: 0 0 auto; min-width: 88px; }
.video-temps { flex: 0 0 auto; color: var(--encre-2); font-variant-numeric: tabular-nums; font-size: 15px; }

/* La zone tactile du curseur fait 44 px de haut par son padding ; le rail n'en fait que 6. */
.video-curseur {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: content-box;
  height: 14px;
  padding: 15px 0;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.video-curseur::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--trait); }
.video-curseur::-moz-range-track { height: 6px; border-radius: 3px; background: var(--trait); }
.video-curseur::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: -6px;
  border: 0; border-radius: 50%; background: var(--accent);
}
.video-curseur::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--accent); }
.video-curseur:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.video-plans { display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; }
.video-plan { flex: 1 1 120px; min-width: 0; color: var(--encre-2); font-size: 15px; }

/* Les plans, proportionnels à leur durée — mais jamais sous la taille d'un doigt : au-delà
 * d'une poignée de plans, la piste défile plutôt que de rétrécir ses blocs. */
.video-piste {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.video-bloc {
  min-width: var(--cible);
  height: var(--cible);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--doux);
  color: var(--encre-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
/* Le plan sous le curseur, l'outil choisi, « Annoter » ouvert : la même forme d'interrupteur
 * que partout ailleurs — fond accent-2, texte accent, gras. */
.video-bloc[data-courant="oui"] { background: var(--accent-2); color: var(--accent); font-weight: 600; }
.video-bloc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.video-bloc-numero { pointer-events: none; }

/* ---- Annoter ----------------------------------------------------------------------- */

.video-annoter { display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; }
/* Pourquoi « Annoter » est grisé : la phrase tient à côté du bouton, jamais à sa place. */
.video-annoter-mot { flex: 1 1 160px; min-width: 0; margin: 0; color: var(--encre-2); font-size: 14px; }
.video-outils { display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; }
.video-outil[aria-pressed="true"] { background: var(--accent-2); color: var(--accent); font-weight: 600; }
.video-annoter-ouvrir { background: var(--accent-2); color: var(--accent); font-weight: 600; }

/* ---- Les retours en brouillon ------------------------------------------------------ */

.video-brouillons { display: flex; flex-direction: column; gap: var(--e1); }
.video-brouillons-titre { margin: 0; font-size: 14px; font-weight: 600; color: var(--encre-2); }
.video-brouillons-liste { display: flex; flex-direction: column; gap: var(--e1); }
.video-brouillon {
  display: flex;
  align-items: center;
  gap: var(--e1);
  padding: var(--e1);
  border: 0;
  border-radius: var(--rayon);
  background: var(--bulle-moi);
}
.video-brouillon-image { flex: 0 0 auto; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--trait); }
.video-brouillon-mots { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e1); font-size: 14px; }
.video-brouillon-heure { font-variant-numeric: tabular-nums; font-weight: 600; }
.video-brouillon-plan, .video-brouillon-etat { color: var(--encre-2); }
.video-brouillon-echec { box-shadow: inset 3px 0 0 var(--alerte); }
.video-brouillon-echec .video-brouillon-etat { color: var(--alerte); }
.video-brouillon-retirer, .video-brouillon-reessayer { flex: 0 0 auto; padding: 0 var(--e1); font-size: 14px; }

/* ---- Le mot et l'envoi -------------------------------------------------------------- */

.video-retour-zone { display: flex; flex-direction: column; gap: var(--e1); }
.video-commentaire { display: flex; flex-direction: column; gap: 4px; }
.video-commentaire-mot { font-size: 14px; color: var(--encre-2); }
.video-commentaire-champ {
  width: 100%;
  min-height: var(--cible);
  box-sizing: border-box;
  padding: var(--e1);
  border: 0;
  border-radius: var(--rayon);
  background: var(--doux);
  color: var(--encre);
  font: inherit;
  font-size: var(--texte);
  resize: vertical;
}
.video-commentaire-champ:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--fond-2); }
.video-envoyer { background: var(--accent); color: #fff; font-weight: 600; }
.video-envoyer:disabled { background: var(--doux); color: var(--encre-2); }
.video-sans-repere { margin: 0; color: var(--encre-2); font-size: 14px; }

.video-etat { margin: 0; color: var(--encre-2); font-size: 14px; }
.video-etat:empty { display: none; }

/* ---- Grand écran : une fenêtre, pas un écran ---------------------------------------- */

@media (min-width: 900px) {
  dialog.video {
    inset: 0;
    width: min(960px, calc(100vw - 2 * var(--e3)));
    max-width: 960px;
    height: min(88dvh, 940px);
    margin: auto;               /* un dialogue modal se centre par ses marges auto */
    border-radius: var(--rayon);
  }
  /* Deux colonnes : l'image à gauche, pleine hauteur, les commandes à droite. Empilées, la
   * verticale n'occupait que 7 % du dialogue à 1280×800 (§6, constat 19). La grille garde
   * `minmax(0, …)` partout : sans cela une piste de plans large pousserait la colonne. */
  .video-cadre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .video-tete { grid-column: 1 / -1; border-radius: var(--rayon) var(--rayon) 0 0; }
  .video-scene { min-width: 0; min-height: 0; }
  .video-bas {
    grid-column: 2;
    min-height: 0;
    max-height: none;
    height: 100%;
    box-shadow: -1px 0 2px rgba(23, 33, 43, .06);
    border-radius: 0 0 var(--rayon) 0;
    padding: var(--e2);
    gap: var(--e2);
  }
  .video-brouillons-liste { flex-direction: column; }
  .video-brouillon { flex: 0 0 auto; }
}

/* Rien ne bouge ici de soi-même ; seul le survol d'un bouton se fond. Pour qui a demandé
 * moins de mouvement, même ce fondu s'arrête. */
@media (prefers-reduced-motion: reduce) {
  dialog.video, .video-bouton, .video-bloc { transition: none !important; animation: none !important; }
}