/*
 * Le lecteur du film — repris de la v2, qui l'a vérifié sur bureau et téléphone.
 * Le film lui-même est une fonction du temps dessinée sur un canvas (film-*.js).
 */

.film { margin: clamp(56px, 8vw, 96px) 0 0; outline: none; }
.film__status { color: var(--ivory); font-size: 0.875rem; text-align: center; }
.film__status:empty { display: none; }
.presentation { padding: 0; border: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: #121211; color: #F1EDE3; }
.presentation::backdrop { background: #121211; }
.presentation__screen { position: relative; width: 100%; height: 100%; background: #121211; }
.presentation__video { display: block; width: 100%; height: 100%; object-fit: contain; }
.presentation__close { position: absolute; z-index: 2; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); padding: 12px 18px; border: 1px solid #6A665C; border-radius: 24px; background: #201F1C; color: #F1EDE3; font: inherit; cursor: pointer; }
.presentation__status { position: absolute; left: 16px; right: 16px; top: 64px; text-align: center; background: #121211; }
.presentation__status:empty { display: none; }
.film[aria-busy="true"] .film__start { cursor: progress; }
/*
 * L'affiche (l'image du film à 4,9 s) est le fond de la scène : sans script, ou
 * le temps que le lecteur se charge, le cadre montre le salon au lieu d'un noir.
 * Le canevas la recouvre dès sa première image.
 */
.film__stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rail);
  background: var(--deep) url("/assets/img/film-affiche.webp") center / cover no-repeat;
  box-shadow: 0 40px 120px -40px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(180 154 98 / 0.05), 0 0 160px -60px rgb(180 154 98 / 0.35);
}
.film__canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; cursor: pointer; }
/* Tant que le lecteur n'est pas monté (ou sans script), pas de commande qui ne ferait rien. */
.film:not([data-state]) .film__start:not(.film__start--video),
.film:not([data-state]) .film__bar,
.film:not([data-state]) .film__chapter-now { visibility: hidden; }

.film__start {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 0;
  cursor: pointer;
  color: var(--ivory);
  font: inherit;
  transition: opacity var(--dur-normal) var(--ease), visibility var(--dur-normal), background-color var(--dur-fast);
}
.film__start-icon {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 10px rgb(180 154 98 / 0.18);
  transition: transform var(--dur-fast) var(--ease-sharp), background-color var(--dur-fast);
}
.film__start-icon::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 21px;
  border-left: 18px solid var(--bg);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.film__start-label { display: grid; text-align: left; white-space: nowrap; }
.film__start-title { font: 600 1.125rem/1.2 var(--font-display); }
.film__start-meta { color: var(--muted); font-size: 0.875rem; }
.film__start:hover .film__start-icon { background: var(--gold-hi); }

/* Affiche : le bouton occupe le centre (pas à la fin : un film muet lancé depuis la barre finit en mode idle). */
.film[data-mode="idle"]:not([data-state="ended"]) .film__start {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 18px 28px 18px 18px;
  border-radius: 999px;
  background: rgb(18 18 17 / 0.78);
  backdrop-filter: blur(8px);
}
/* Aperçu muet, ou fin : une invitation discrète, en bas à gauche. À la fin, au
   centre, le bouton se posait sur le sceau et le mot VESTARKA. */
.film[data-mode="preview"] .film__start,
.film[data-state="ended"] .film__start {
  left: 16px;
  bottom: 16px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: rgb(18 18 17 / 0.72);
  backdrop-filter: blur(8px);
}
.film[data-mode="preview"] .film__start-icon, .film[data-state="ended"] .film__start-icon { width: 40px; height: 40px; box-shadow: 0 0 0 6px rgb(180 154 98 / 0.16); }
.film[data-mode="preview"] .film__start-icon::after, .film[data-state="ended"] .film__start-icon::after { left: 16px; top: 13px; border-left-width: 12px; border-top-width: 7px; border-bottom-width: 7px; }
.film[data-mode="preview"] .film__start-title, .film[data-state="ended"] .film__start-title { font-size: 0.9375rem; }
/* Sur téléphone, le lien vers la vidéo verticale remplace le bouton du canevas :
   à 390 px, les textes du film tombaient à 13 px, ceux de la vidéo restent lisibles. */
.film__start--video { display: none; text-decoration: none; }
.film[data-mode="film"]:not([data-state="ended"]) .film__start { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.96); }

.film__chapter-now {
  display: none;
  position: absolute;
  top: 10px;
  left: 12px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(18 18 17 / 0.7);
  color: var(--gold-hi);
  font: 500 0.6875rem/1.4 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .film__chapter-now { display: block; }
  .film__chapters { display: none; }
  .film[data-mode="preview"] .film__start, .film[data-state="ended"] .film__start { left: 8px; bottom: 8px; padding: 6px 12px 6px 6px; }
  .film[data-mode="preview"] .film__start-meta, .film[data-state="ended"] .film__start-meta { display: none; }
  .film[data-mode="idle"]:not([data-state="ended"]) .film__start { padding: 10px 18px 10px 10px; }
  .film[data-mode="idle"]:not([data-state="ended"]) .film__start-icon { width: 44px; height: 44px; }
  .film[data-mode="idle"]:not([data-state="ended"]) .film__start-icon::after { left: 17px; top: 14px; border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; }
  .film__start[data-film="start"] { display: none; }
  .film__start--video { display: flex; }
}

.film__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 4px 0;
}
.film__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-sharp);
}
.film__btn svg { width: 22px; height: 22px; }
.film__btn[hidden] { display: none; }
@media (hover: hover) { .film__btn:hover { color: var(--ivory); background: var(--card); } }
.film__btn:active { transform: scale(0.94); }
.film__start:active .film__start-icon { transform: scale(0.94); }
.film__btn--toggle { color: var(--gold-hi); border-color: var(--rail); }
.film__btn--toggle .icon-pause, .film__btn--toggle[data-playing="true"] .icon-play { display: none; }
.film__btn--toggle[data-playing="true"] .icon-pause { display: block; }
.film__btn--sound .icon-sound, .film__btn--sound[aria-pressed="true"] .icon-muted { display: none; }
.film__btn--sound[aria-pressed="true"] .icon-sound { display: block; }
.film__btn--sound[aria-pressed="true"] { color: var(--gold-hi); }

.film__timeline {
  position: relative;
  flex: 1;
  height: 44px;
  margin: 0 8px;
  cursor: pointer;
  touch-action: none;
  border-radius: 6px;
}
.film__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--outline);
  overflow: hidden;
}
.film__progress {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform: scaleX(0);
  transform-origin: left center;
}
.film__chapters { position: absolute; inset: 0; }
.film__chapter {
  position: absolute;
  top: 50%;
  left: calc(var(--at) * 100%);
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}
.film__chapter::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--outline);
  transition: background-color var(--dur-fast), transform var(--dur-fast);
}
.film__chapter:first-child::before { opacity: 0; }
.film__chapter::after {
  content: attr(data-label);
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--rail);
  color: var(--ivory);
  font: 500 0.75rem/1.2 var(--font-body);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.film__chapter:focus-visible::before { background: var(--gold-hi); transform: scaleY(1.3); }
.film__chapter:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) {
  .film__chapter:hover::before { background: var(--gold-hi); transform: scaleY(1.3); }
  .film__chapter:hover::after { opacity: 1; transform: translate(-50%, 0); }
}
.film__time {
  flex: none;
  min-width: 84px;
  color: var(--muted);
  font: 500 0.8125rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
@media (max-width: 560px) {
  .film__time { display: none; }
  .film__bar { gap: 2px; }
}

/* :fullscreen — le film seul, centré, sur charbon. */
.film:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 24px; background: var(--deep); }
.film:fullscreen .film__stage { width: min(100%, calc((100vh - 120px) * 16 / 9)); margin-inline: auto; }
.film:fullscreen .film__bar { width: min(100%, calc((100vh - 120px) * 16 / 9)); margin-inline: auto; }
.film:fullscreen .film__caption { display: none; }